Desktop/Mobile Website Redesign
Case Study:
U.S. Department
of the Interior
My Role: UX/UI Designer, UX Writer
Timeline: 3 Weeks
Group Project
Tools: Figma, Miro, Google Suite
The U.S. Department of the Interior protects and manages the Nation’s natural resources and cultural heritage.
Problem: The site’s website navigation is poorly worded as well as having cumbersome horizontal dropdowns. There are also several links that direct users away from the site.
Goal: Redesign navigation and layout of homepage for improved functionality. Choose more relevant wording for the primary navigation along with having appropriate secondary navigation selections associated with it. Fix all external links that direct users away from site by having them open in a new tab.
USER RESEARCH
Heuristic Evaluation of Homepage
The homepage and secondary pages were analyzed to determine which areas prompted frustration for the user. I created an heuristic evaluation to pinpoint visually where those inefficiencies are located. Link to Figma file
Current Homepage
Heuristic Evaluation of header and footer navigation
Additional Heuristic Evaluations: Research on WebAim, Adobe Color and Canva revealed the site did not pass color accessibility and contrast checker in several areas. Link to Figma file
Usability Test
A usability test was conducted, having the participants complete 3 tasks to determine the effectiveness of the site’s navigation. The common theme was that the tasks took longer than necessary due to ambiguous wording, confusing arrangement of information and a large selection of choices to sort through. Usability Test Results
Interview Insights
“There are too many choices in the menu and I don’t know where to look.”
“I’m not sure what this government agency does.”
“The dropdown menu keeps closing when I’m hovering.”
“I keep scrolling up and down trying to find what I’m looking for.”
“The wording for the links don’t make sense so I just click on all the pages.”
“I can’t figure out how to get back to the main site.”
DEFINITION & IDEATION
User Persona
The User Persona is a retired woman in her mid sixties. She is searching for volunteer opportunities with one of our national parks near her home in Portland, Oregon.
Card Sorting
I conducted a card sorting exercise to identify better solutions for the navigation redesign. This test affirmed the need for a more condensed list and logical categorization of menu items. An example of one of these changes is moving the ‘Contact Us’ from inside the ‘About’ tab and placing it in the main navigation. I also felt that eliminating the ‘Priorities’ tab, which confused all of the testers, would help to streamline the search process. Expanded View
Card Sorting: Before
Card Sorting: After
Sitemap
A more thoughtful sitemap for the Department of the Interior was created without sacrificing any information or choices from the original design. Link to file
PROTOTYPING
Lo-Fidelity Wireframing
I was tasked to create the low-fidelity wireframe of the homepage. The results of the user testing and the card sorting exercise influenced my decisions for the updated design.
Mid-Fidelity Wireframing
The addition of color, a more detailed layout, and interactivity was incorporated in the mid-fidelity prototype using Figma.
USER TESTING
5 Second Usability Test
A 5 Second Usability Test was conducted on 4 participants. The quantitative and qualitative feedback received, such as how much they were able to notice in the amount of time given, and also what they were able to recall, guided me toward improving the design in the hi-fidelity prototype.
Tester 1:
White text on light green background is hard to read
Footer text looks too small
Overall clean and easy to understand navigation
Tester 2:
Would like social media at top of page somewhere instead of scrolling to bottom
Nav button descriptions and dropdowns make sense / easy to find & understand
Noticed the CTA Button and thought it had a good presence on page while matching design esthetic
Tester 3:
Didn’t think social media needed to be at the top & bottom
Layout looks nice and is easy to follow
Footer with email signup catches attention
Footer with email signup catches attention
Tester 4:
Primary & Secondary Buttons easy to read
Easy to navigate to other pages and back to Home page
Search bar is very visible
Style Tile
Before creating the high fidelity prototype, a Style Tile and Style Guide were made. Link to Style Tile / Link to Style Guide
User Testing for High Fidelity Mobile
Hi-fidelity prototypes for both desktop and mobile versions were created and tested. The feedback was used to make iterations to the final product.
Mobile recording test of hi-fidelity prototype Link to full recording
FINAL PROTOTYPING
Iterated High Fidelity Prototype of Desktop and Mobile
Making the entire button clickable, instead of just the arrows, for the main navigation as well as the footer were the changes made to the final prototype.
CONCLUSION AND FUTURE OPPORTUNITIES
Final Thoughts
The beginning of the project seemed to be fairly simple because the website looked well put together based on the initial appearance. However, upon further inspection, we realized that the functionality was not user friendly at all. Starting with an heuristic evaluation of the homepage revealed quite a few issues. Conducting several rounds of user testing and brainstorming design options we felt that the final result is much easier to understand and looks more dynamic than the original. While we are happy with improvements, we feel that the website could be even better with another round of testing and iterations.
Future Goals
There are still many more pages on the website that need redesigning. Investing effort into this will further improve functionality and help it have a more cohesive branded appearance. Near the beginning of the process, we tasked our Proto Persona to find volunteer opportunities with the U.S. Department of the Interior. While there is a ‘Volunteer’ button, it takes the user on a seemingly never ending series of clicks that would frustrate any potential volunteer to the point of abandonment. Redesigning this task flow would be a valuable addition into helping this government organization connect with more people.
