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 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 are about in a way that won’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. My partner and I 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.
The scariest thing as a user is losing your 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 outlining it clearly through their site content.
Given the National Park Service falls under the DOI and it has multiple environmentally-focused initiatives, my partner and I developed a proto persona with the assumption that a user would come to the Department of Interior website to plan trips and learn about Department initiatives.
Our proto persona, Sustainable Steve, is an active, 32-year old parent with two adorable kids (one is camera shy). He lives in California, bikes to work, and prioritizes recycling.
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 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 my team 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.
Our users wanted to understand the DOI’s priorities, be able to easily find tip articles, and know when they were being redirected to another website. These priorities are also essential for the Department!
Given the monstrous size of the navigation, my partner and I agreed it would be helpful to run card sorting tests as about half of our users opted to use the navigation function. 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 than how it is currently set up.
Users
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, as well as photos of people experiencing 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.
The Department would showcase its content more clearly with captivating photos related to the copy, clear card layouts, and simpler navigation.
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.
1. Merged ‘About’ and ‘Priorities’ based on user expectations
2. Clearly labelled available job opportunity types
3. Renamed ‘Media’ for better user recognition
4. ‘Contact Us’ made easily discoverable in primary navigation
5. Footer reorganized for links most useful to users
1. Navigation reduced to search, accessibility, and hamburger menu.
2. Priorities addressed in one content card where user can select to learn more.
3. Added clearer labeling for what Webcams does
Footer also reduced to CTAs of subscribing to newsletter and following social media.
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: We needed to balance the digestibility 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.
The Style Guide created cohesion and implicit messaging of the Interior’s care for Earth, water, and Indians as well as it’s trustworthy, dependable nature.
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 outlining what mattered to the DOI as well as the simple hero carousel to find information quickly. Users found the simplified menus easier 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. I also learned 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 even more by 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.
