U.S. Department of the Interior
A website navigation system redesign for a government agency website informing users what steps being taken to protect the nation’s environment, wildlife, and cultural resources.
Team
Elizabeth Lee(solo)
Role
UX/UI Designer
Project Lead
Duration
5 weeks
Problem
During my research and analysis of the user pain points experienced on this website, I observed that users encounter difficulties in navigating the site efficiently to access information on their specific topics of interest.
Solution
From the user tests and interviews, I found that the challenging navigation was due to the cluttered content and navigation bar. During this project, I redesigned the navigation system and incorporated elements like tooltips, images, and filters to reduce the cognitive load on users.
Overview
The U.S. Department of Interior(DOI) is a government agency dedicated to safeguarding the nation’s environment, wildlife, and cultural resources. The DOI website serves as an informational resource, enabling users to comprehend the prevailing environmental status and the government’s efforts to address the critical conditions.
Our Target User
After researching and analyzing the website, I created a proto-persona. I asked myself these questions:
What kinds of users would come to this website?
What is the reason a user would come to this website?
By asking myself these questions, I progressed to developing main tasks for users to test.
Research
Meet Jackie Arrow!
Environmental Specialist + Hawaii-based/31 years old
Behaviorial Demographic
Loves nature
Has a keen interest in animals and their wellbeing
Needs/Goals
She wants to be aware of the state of the environment as well as the wellbeing of wildlife
She wants to learn more about what the government does to help the environment, wildlife, and indigenous communities
She wants to be aware of the news in order to find ways she can provide support too
User Flow
I created a user flow centered on the main tasks and areas I aim to emphasize.
Interviews
To identify the pain points in the website, I developed a user research plan and executed a user test. I allocated 5 participants with four tasks to evaluate the navigation system.
From this test, I found multiple user pain points:
Confusing and disordered navigation bar and pages
Certain important pages were hard to find
Cluttered content on pages
User Test Notes on Google Docs
Pros & Cons
To identify specific website issues, I performed heuristic evaluation and annotated five key pages. The analysis revealed both advantages and drawbacks.
Pros: The color scheme and hierarchy is consistent across most pages.
Cons: The navigation bar contains confusing jargon. Furthermore, there were no filters or ways to categorize the articles or blog sections, making it difficult to read on specific subjects.
Heuristic Evaluation on Google Sheets
Improving Navigation
Sitemap
Navigation Bar Change #1
With users having issues with the navigation, a recategorization was deemed necessary.
Through analysis, I found that the articles under the“Priorities” tab belonged more appropriately under the “Media” tab.
Using card sorting, all article types were reorganized to align under the “Media” category.
Navigation Bar Change #2
Based on user feedback indicating difficulty locating the volunteer page, I introduced a new primary navigation option called "Opportunities" following the card sorting exercises.
Desktop Low Fidelity Wireframes
In the early stages of wireframing and iterations, my primary goal was to enhance user engagement with the content.
The first step I took was establishing a filter system to categorize content on the Blogs or News page. This way, users would be able to freely browse through media articles of their choice.
Mobile Low Fidelity Wireframes
In the desktop version, these tabs were originally accordions. For the mobile version, I created a tab bar in the secondary page. Why? To reduce the amount of content in the side menu bar.
Design
UI Style Guide
I developed my UI Style Guide with a dependable and informative tone, which suited my website. to achieve this, I kept the colors dark blue and yellow and incorporated Roboto Serif for the typeface.
Desktop Iterations: Homepage
After conducting a usability test, some users wished there were more straightforward navigation options in the homepage:
I implemented a sliding card hero image featuring a mission and a volunteer slide
I designed an icon bar to offer users a shortcut to access specific sections of the Blogs or News page.
Before
After
Created a slider hero image
Created an icon bar for more navigation
Slider Hero Images
Desktop Iterations: Bureaus
To address user discomfort with the heavy content and lack of visuals, I associated images with each topic paired with a tooltip.
Before
Original
After
Added Images
Created a tooltip for each bureau
Desktop & Mobile Iterations: Internal Search Bar
Some users expressed difficulty locating specific content within the secondary pages like Blogs or News pages. To address this issue, I implemented a search bar within these pages.
Before
After
Mobile Iterations: Homepage
Users expressed their dissatisfaction with the infinite vertical scroll on the mobile device. To solve this issue, I created a horizontal scroll feature for each section.
After
Before
Mobile Iterations: Filter
Previously, users did not notice that there was a filter located at the top.
To enhance the visibility of the filters, I:
Increased the padding
Added a corner radius
Positioned it directly below the search bar
By doing this, the filters would be more noticeable and less blended into the header.
Before
After
High Fidelity Desktop Mockup
High Fidelity Mobile Mockup
Interactive Prototype
FInal Thoughts/Next steps
While redesigning this government agency website redesign, I encountered issues trying to come up with new ways to change the design of the website because the UI was already satisfactory. While it took a while to find, I was able to pinpoint key areas for redesign and expand on new ideas, successfully revamping a Hi-Fi prototype.
In the future, I would love to make future iterations such as:
Reconstructing the design of webpages of the different bureaus
Redesigning the Volunteer sections
Improving the Results page after using the Search bar