A UX/UI project aiming to revamp the U.S. Department of Interior's website, elevating its user experience by implementing coordinated design principles and enhancing its visual and functional aspects. The project seeks to create an intuitive and visually appealing digital platform that effectively communicates the Department's mission while prioritizing the needs of a broad user base.
UX/UI Designer
December 2023- February 2024
Figma
FigJam
Adobe Illustrator
Leighton Heegaard
Rubia Hermans
The current U.S. Department of Interior's website lacks an optimal user experience, as evidenced by its outdated design and limited functionality. Users encounter difficulties navigating the site and understanding the Department's mission due to inconsistent design principles and a lack of visual appeal.
Prior to extensive research, we sent out a survey to gather insight on users' previous experiences regarding informative websites. We gathered a total of 18 results, which gave a further understanding of what the redesign process needed to focus on.
.png)
Considering the survey results, we narrowed down the crucial features for a government website should be:
1. Consistent Visual Design System
2. Clear Navigation
3. Clear Purpose
4. Easy to Read
The U.S. Department of the Interior will satisfy all four categories. There will be clear design systems and navigations, the purpose of the department will be explicitly stated, and the features will all be legible.
The primary and secondary navigation bars are unclear. It is confusing how the primary navigation bar containing the website content is placed below the secondary navigation bar.
Blogs and news articles equally important, but the blogs are designed in a way where they have relatively less significance. Images are not clear, and it lacks the ability to attract the users to click on them.
This section, represented by number 3, does not make it clear what categories they are a part of. 'This Week at Interior' and 'Webcams' seem like titles of certain articles, rather than being the name of a category. Also the image sizes are different, which makes the overall layout very unbalanced.
Although the overall layout of the footer is simple, there are too many options of categories crammed to the right side. Narrowing the number down to around 5-6 would make it much more clear and easy to navigate.
Card sorting is a UX/UI design method where designers organise content into categories, providing valuable insights to creating an intuitive information architecture that aligns with how users naturally expect to find and interact with information.
Here is how we performed card sorting for the original U.S. Department of the Interior website:
.png)
Through the card sorting process we were able to see which categories were over-populated. For instance, the Programs and Resources and Our Current Priorities categories had many branches, and it was our responsibility to create a layout including all these branches yet having a simple appearance for efficient navigation.
.png)
Consistent Visual Design System, Clear Navigation, Clear Purpose, Easy to Read.
The four key takeaways from the research phase. From these findings, my teammates and I constructed a simplified site map (information architecture) that satisfies all four categories. We narrowed down the primary navigation to News and Updates, Programs and Resources, Policy and Compliance, and Our Current Priorities. The secondary navigation, including About, Community and Outreach, and Media Center, will be included in the homepage. The footer will contain links to all seven categories for easy access.
Quality over quantity. Simplifying the website for easier access and interpretation is much more important than bombarding the screen with too much information. There cannot be an equal amount of importance for every single detail.
Therefore, we tried our best to narrow down the content from order of importance to differentiate between the primary and secondary navigation bars. Another critical change we made is that the homepage includes a description of what the 'U.S. Department of the Interior' does. Explaining the purpose of the organisation before letting the users continue would provide them a better insight prior to further browsing.
During the creation of low-fi wireframes, we focused on the organisation of the content, considering the placement of primary and secondary navigation bars. We also wanted to take a sneak peek of ways we could imagine the use of buttons, open and close elements, hover effects, and more.
Before moving onto mid-fi wireframes, we conducted usability tests with 4 users. We wanted to see if the low-fi wireframes satisfied the 4 criteria:
1. Consistent Visual Design System, 2. Clear Navigation, 3. Clear Purpose, 4. Easy to Read.
The usability tests gave us critical insight that the low-fi wireframes failed to deliver the U.S. Department of the Interior's purpose. The homepage did not have any sort of information explaining the organisation's mission. We also received feedback that the open and close was inefficient, and that they would prefer a layout that required less clicking.
.png)
.png)
Using the feedback received from the usability tests, we created the mid-fi wireframes with extensive improvement.
Some big improvements we made included:
1. Including a description of U.S. DOI's mission at the very beginning of the homepage
2. Enlarging texts, icons, etc. for easier readability and accessibility
3. Having constant font sizes, button sizes, icon sizes, etc. for visual coherence
After all, the U.S. Department of the Interior is a formal website that provides information regarding a branch of the government.
Typography
We distinguished the fonts between headings/titles and body texts for a clearer visual hierarchy. The headings, subheadings, logo treatment, and text elements of the navigation bars were all replaced using the 'Montserrat' font. We reckoned that it was a sans serif font that made the overall tone less intimidating, yet still carried a sense of formality. For the rest of the text that either served as the menu, body text, and some titles that weren't significant enough to be headings, we used 'Inter', a font that is easy to read and has a clean visual.
Colour
While creating an atmosphere that is welcoming and clear to attract the users, we focused on choosing colours that served a sense of calm yet serious tone. We wanted a simple, sophisticated look, and so we narrowed the colour palette down to four colours: navy, beige, white, and black.
Using the specific design system catered to the redesign of the U.S. DOI website, we were able to successfully create a prototype that allows the users to go through each section in a more efficient manner compared to the original website. It also provides a lot more visual consistency and easier navigation.
Throughout the process of finalising the prototype, we realised how important it is to receive feedback from the users in between the steps. Through the usability tests, we were able to make crucial changes to the features such as eliminating open and close elements or adding a description of the organisation's mission to the very beginning.
We conducted a total of 6 user tests, each user completing the three assigned tasks. Overall, the test results were successful, but the feedback we received from the users indicated many areas to be kept, and areas needed of improvement.
Some positive feedback included:
1. The tasks were straightforward and easy to complete. I think the simplicity and clarity of the design system helped me get through them efficiently.
2. I think it's really effective how the website shows a description of each page and its purpose for each page, such as program and resources, priorities, and more.
3. I like the use of dark blue and dark beige. They go really well together, and the website seems very serious and sophisticated. The use of fonts balance out the serious tone however, so that it is more engaging for the users.
Some feedback for improvement included:
1. I think you could have added a bit more diversity into the tasks. They were very straightforward, but I feel like making the tasks more detailed could have helped you identify more flaws.