U.S. Department of Interior | Website Redesign | Case Study
Project Overview
Problem
The DOI website presents far too much information and clutter making it very difficult to navigate. The UI is poorly designed and it’s difficult to initially understand the purpose of the website.
Solution
Rethink the information architecture and redesign the UI to a simpler layout. Making the information on the site more aesthetically pleasing, more accessible and easy to understand.
My Role
Information Architect, UX Researcher, UI Designer
Tools
Figma, Miro, Adobe Photoshop, Affinity Designer
Research
Goal: To understand the primary issues with the Department of the Interior’s website to focus redesign effort.
Process: Proto-Persona|User Testing|Prioritization|Heuristic Evaluation
Proto-Persona
The research process started by creating a Proto-Persona that gave a better understanding of the needs of the user as well as the type of information that would be important to highlight for the website.
Margaret Harris is graduating from college with an interest in a career working with public lands. She wants to learn how to become involved so she visits the Department of Interiors website to look for potential internships. She takes some time to learn more about the DOI Secretary and about the history of the department. However, she struggles with trying to search for jobs on the website.
User Flow
The workflow was determined for the desired outcome of finding a job based on the proto-persona created for the research process. This provided insight into the confusing and information heavy path the user would need to take in order to find the websites job board. It showed the large amount of steps a user would need to go through on this particular path.
User Testing
After establishing a Proto-Persona, multiple user interviews were conducted to a establish key empathy points for the users of the DOI websites: gauging if the navigations was clear to the user, whether the user could figure out how to apply for a job, and whether the purpose of the website was clear.
Focused testing was also done for the navigation menu to determine if users were able to intuitively find desired information. This gave even more valuable insight into the aspects of the DOI’s current website that would help with making necessary changes to the overall UI.
Insight Prioritization
After gathering data from the user tests insights were produced and then prioritized to address the primary concerns and important questions the test users encountered while performing the tasks that were presented for testing.
Annotations and Heuristic Evaluations
As part of the research process, annotations were made and a heuristic evaluation of the current DOI website was performed. These help to further pinpoint specific issues present on the website as well as pain points that would be present for users. Again, providing additional insight into what changes were necessary for the redesign of the sites UI.
The footer of the website is taking up too much space and some of the elements of the page are confusing. There is no clear indication of the purpose of some of the elements and there is confusion regarding to what some of the cards link.
Restructuring
Goal: To redesign the Information Architecture of the site based on research findings
Process: Card Sorting|Site Mapping
Card Sorting
This was a very defining part of the redesign process. This part was instrumental in creating a more intuitive Information Architecture for the site. As well as consolidating the overwhelming amount of information present in the primary, secondary and footer navigations.
Site Map
Once a more defined and intuitive IA was established through card sorting, a site map was made to layout the flow for the primary, secondary and footer navigations for the DOI website.
Redesign
Logo Redesign
The original logo was very cluttered and hard to interpret when small. To match with theme of simplifying the redesign of the DOI website, the logo was also redesigned to a more simplistic style. It was drawn using a fish with mountains for the dorsal fin as well as a tree and a river that ran through the center of the fish. It represents the purpose and responsibility of the DOI well while staying in-line with the simplification of the overall DOI redesign.
There were multiple iterations of the logo redesign, each one keeping to the redesign concept as well as the established style guide (shown later in the case study).
Wireframes
Wire-framing was done for both mobile and desktop versions of the DOI website. The design was made to simplify the navigation menu for both versions as well as simplify the UI of the body contents and footer. The wireframes laid the foundation for the later iterations of the mobile and desktop versions of the website. It also provided help with visualizing how the website information would be presented in the redesign.
Style Tile
A style tile was developed based on the existing Department of the Interior website. This was created to establish a consistent UI, branding and style to be used throughout the process of iterating on the website redesign. The visual design elements included imagery that capture the purpose of the DOI, a color palette, typography, iconography and graphic elements.
5-second A/B Testing
A/B testing was conducted to gather feedback on the new navigation menu and footer elements for the redesign. Test users preferred the slightly less cluttered footer, with the social media icons centered in the footer. And the feedback for the main nav menu was positive feedback without providing and suggestions on changes that needed to be made.
Iterations
With the feedback from the A/B testing and the visual design elements established on the style tile, it was time to move towards creating Hi-Fidelity Prototypes. The first iteration of the Hi-Fidelity prototypes implemented the feedback gained from A/B along with the visual design direction laid out by the style tile.
Additional user testing was then conducted on the first iteration of prototypes for both desktop and mobile. User testing provided feedback regarding the interaction with the cards present in the body of the homepage as well as interaction with the social media icons in the footers of both the desktop and mobile versions. Additional interactions were added to be inline with the information gained from user testing.
UI Kit
Once the Hi-Fidelity prototypes were complete, the next step was to create a UI Kit to serve as a style guide for the visual design elements of the redesign. This is a living document that can be updated going forward to help further develop the website. It also acts to ensure the style and branding continue to be consistent for further development across the entire DOI website.
Conclusions
Challenges Faced
- The initial and primary challenge faced was the lack of IA present on the current DOI website as well as the overwhelming amount of information present that a user needs to trudge through to find anything really purposeful the user.
- Figuring out how to consolidate the information present on the site and present it in an intuitive way that would add meaningful interaction to the user. Part of this was redesigning the IA and representing this effectively in the prototyping phase of the project.
Final Thoughts
- Having a well defined style and IA based on extensive research provides an outstanding basis to then effectively develop compelling ideas for a redesign such as this.
- Providing card options for users to interact with helped provide a more direct path from the landing page to the information the user visited the site to find. It also helped with creating a more streamlined process of converting the desktop layout to a mobile layout.
- Keeping the design consistent throughout out the process was a challenge but an important principal to keep in mind. Keeping the design consistent avoided causing additional confusion and provides a much more satisfying and rewarding experience for the user.
- The Department of Interior’s website is a gross oversight in terms of proper design and accessibility for users. There is a big opportunity to redesign the website to bring in more users and connect them with an important part of the U.S. government.
