Team: 3 UX / UI Designers
Role: PM, UX / UI Designer
Timeline: 3 weeks
The U.S. Department of the Interior protects and manages the Nation’s natural resources and cultural heritage; provides scientific and other information about those resources; and honors its trust responsibilities or special commitments to American Indians, Alaska Natives, and affiliated Island Communities. With a wide breadth of content to cover, the DOI needs to show off what they were about in a way that wouldn’t overwhelm the user.
Problem: The site is largely set up as a launchpad for redirection to bureau websites.
Solution: Restructure the site navigation and styling to create a more discoverable site where the user could -
I began reading about the Department of Interior and the bureaus / offices that sit under it. We then split up heuristic analysis of different pages of the site, each assessing its accessibility and usability and marking up points of improvement. The site had some great features such as consistent font use and a button in the global navigation to change accessibility settings on the site. But after digging around on the website and taking notes on the appearance, content, navigation, and functionality, we both found common problems. The navigation would change as we moved throughout the site, quickly disorienting us. In addition, with a large, sprawling primary navigation, it was difficult to plot out how our a user might find their way.
Key learning: Getting lost was easy.
In addition, we both evaluated the layout of the site as well as which LATCH principles were used to help a user find what they were looking for. I found it particularly fascinating that the Interior adopted a format similar to a news website. They used bright, colorful photos and multiple ways for the user to find news articles - through the carousel hero, sections of cards in the body, and a menu heading. It was easy to find recent articles (under ‘latest news’) but when I simply wanted to understand what the Interior does or look for news on a particular topic, the navigation was not as helpful as I’d hoped.
Key learning: The Interior relied on news articles to showcase who they were, rather than showcasing it clearly.
Given the National Park Service falls under the DOI and it has multiple environmentally-focused initiative, my partner and I developed a proto persona with on the assumption that a user would come to the Department of Interior website to plan trips and learn about Department initiatives.
We assumed Sustainable Steve would go to the DOI website to plan a camping trip at a National Park with his family.
To test out Steve’s goals, my partner and I plotted out his path through the website and together developed a testing plan to test out the site on both desktop and mobile. I completed guerilla tests on 3 tasks on both desktop and mobile. We tested a total of 5 people.
Key learning: It was difficult to find out what the Department of Interior does.
Key learning: Users were even more lost than we anticipated - they didn’t know when they were leaving the website.
User testing of the current site helped provide a clearer picture as we analyzed the results and found similarities in user frustrations - the site was confusing to navigate.
I facilitated a feature prioritization based on these issues and we decided to focus on advertising help / tip articles, warning the user when they left the DOI site, and building the department's priorities more clearly into the website. Given testing confirmed the webcam was already easy to find, these additional features could help Steve get some help preparing for his trip as well as learning what has been going on at the Department with greater ease.
Given the monstrous size of the navigation, my partner and I agreed it would be helpful to run card sorting tests as this is the preferred method of navigation for about half of our users. We each split up several remote card sorting tests of the site content. This turned out to be the most illuminating testing of all as our users felt the site should be organized differently.
Department of Interior
Key learning: The information architecture of the website did not match user expectations.
Key learning: The site content would not allow a user to fully plan a trip.
Now, with a wealth of data points, we knew we needed to improve the information architecture to allow users like Steve to find articles and updates on priorities and discover content with greater ease. While the site itself didn’t lend itself to trip-planning, the National Parks website did, so we realized we had to create clearer direction to this website link. For improving the website itself, we had to narrow our focus on helping Steve find news and tips. My partner and I iterated separately on new sitemap ideas based on card sorting feedback and combined our ideas into one.
I then worked with my partner on a mood board to get ideas for the site's feel and visual layout for the navigation and important information. We were inspired by beautiful photos of nature and people in nature. I was particularly inspired by photos of bison - the image of a bison on the plains is distinctly American and the DOI had even chosen them for their insignia. For laying out information, I felt it was particularly important to simplify the navigation and footer to let the page content shine and utilize multiple cards to lay out information.
We each prototyped on our own and came together to share our results. Our first focus was on ensuring the navigation was simplified, in both the primary navigation and the footer. I focused on certain sections of the primary nav and the footer and my partner took the rest of the primary navigation for desktop. I also worked on the mobile navigation.
Key learning: The mobile version of the site needed to have a simplified layout and navigation to not overwhelm the user with information.
We then added photos and content to provide a more realistic feel. We even added a link in the hero to the National Parks website so Steve could still plan his trip, even if it it couldn’t all be done on the Department of Interior website. To confirm if we were heading in the right direction, we each split up 5-second user tests on our mid-fidelity wireframes. The good news was users understood the site and liked the images. The bad news was users did not like all of the whitespace.
Key learning: Needed to balance thedigestibility of content with the amount of white space.
I researched fonts and found a more welcoming Serif font for the main headings in Lora that still communicated the Department’s dependable, enduring nature. For the body copy, I looked to Montserrat to complement Lora but communicate a more caring side that reflected the Department’s commitments. I was also inspired by how the Department spans priorities across earth and water and looked to incorporate these colors into the brand palette. My partner worked on creating modals, button states, and UI interactions and status measures such as progress bars and tooltips to give the user additional understanding of their movement throughout the site.
Using our original testing questions, we re-tested our mid-fidelity design among six new users. The results were overwhelmingly positive.
Key learning: Adding additional iconography, hierarchy, descriptive copy, and cards to break up content led to a better understanding of the website as well as achieving user goals.
We iterated 2 more times - I focused particularly on adding cards, iconography, and typography to further distinguish the content and improve skimmability. My partner also incorporated the feedback of informing visitors when they were leaving the DOI website through a pop-up to confirm if they’d like to move forward.
Key learning: Users enjoyed the cards to easily learn what mattered to the DOI as well as the simple hero carousel to find information quickly. Users found the menus easy to navigate as well.
This site was difficult to evaluate as the Department itself covers a vast number of topics. I learned it is better to do a deep dive of the content as early as possible and how lucky I was to have a great project partner to work with. Below were some of my big lessons from this project.
Key learning: Site content informs design choices.
Key learning: Start Style Guides early.
Key learning: Design isn’t just about visuals.
This experience taught me how complex but important information architecture is and I really valued the opportunity to delve into the Department’s massive site content. I was surprised by how jazzed I could get over designing a site map and what an impact it could make on a user’s joy in exploring a website.
If I had more time, I'd love to iterate further on the navigation and layout. I would also love to interview the Department to understand their struggles and who they hope to use the site.