Information Architecture Redesign -
US Department of Interior


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 -

arrow icon
learn about the department
arrow icon
discover how it was achieving its missions.


open book icon
Persona Creation
open book icon
Heuristic Evaluation
open book icon
Mood Boarding
open book icon
Journey Mapping
open book icon
Card Sorting
open book icon
Site Map Recreation
open book icon
Style Guide Creation
open book icon
Multi-Fidelity Wireframing
open book icon
User Testing
open book icon
Accessibility Compliance
open book icon
Iterative Design
open book icon
Goal Setting & Management

1. Research

Digging into the information architecture.

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.

picture of man holding his little girl, smiling. they are standing in front of mountains and a lake.

The scariest thing as a user is losing your way!

lightning bolt icon

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.

lightning bolt icon

Key learning: The Interior relied on news articles to showcase who they were, rather than outlining it clearly through their site content.

2. Definition & Preliminary Testing

Who is visiting the Department of Interior website and how do they move through it?

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.

picture of man holding his little girl, smiling. they are standing in front of mountains and a lake.

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.

arrow icon
He wants to look at the DOI Blog to see if they have any suggestions to avoid wildfires while camping.
arrow icon
He wants to learn what the DOI has recently done to prevent wildfires on a national level.
arrow icon
He wants to get his kids excited for their upcoming trip by showing them a livestream of the geysers in Yellowstone.

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.

Testing Results

first round of user testing. How easy is it for the user to utilize the navigation menu to find historical information on past secretaries? 30%.  How easy is it for the user to understand what the Department of Interior priorities are via the navigation? 30%.  Can the user recognize the functionality of the 'webcams' section of the website and how would they use it? 100%
lightning bolt icon

Key learning: It was difficult to find out what the Department of Interior does.

lightning bolt icon

Key learning: Users were even more lost than we anticipated - they didn’t know when they were leaving the website.

3. Ideation (& Some More Research)

How might we help a user find what they’re looking for and discover new content of interest?

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.

prioritization matrix shows highest priorities for users and DOI are 'building priorities more into distinguished area of the site', show when user is leaving the site, and advertising help or tip articles. this came up 3 or more times in testing.

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.

Card Sorting Results


arrow icon
Group news and blogs together but think of them as ‘Media’
arrow icon
Expect to find social media links at the footer
arrow icon
Assume ‘Resources A-Z’ are resources for them

Department of Interior

arrow icon
Groups news and blogs under the label ‘Newsroom’
arrow icon
Clutters the global navigation and footer with links to social media
arrow icon
Uses ‘Resources A-Z’ for current employees with no indicative labeling
lightning bolt icon

Key learning: The information architecture of the website did not match user expectations.

lightning bolt icon

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.

Mood Board

moodboard - showing bison, american indians, hiking, and navigation bars and card styling.

The Department would showcase its content more clearly with captivating photos related to the copy, clear card layouts, and simpler navigation.

4. Prototyping & Testing

Improving the site’s architecture (iteratively).

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.

Desktop Lowfi

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

Mobile Lowfi

lightning bolt icon

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.

Desktop MidFi

“It could use a little more jazz.” - User

lightning bolt icon

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.

DOI style guide - depicting shades of dark and right blue, earthy red and sans seif body text.  Menus are a deep blue  with light blue to highlight where you are. Buttons are earthy red and slightly rounded. Typography uses serif fonts to communicate department's long history and experience in preservation. The Sans Seif fonts illustrate the connection it builds with citizens and relationship-building with American Indians.

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.

Testing Results

second round of test results. How easy is it for the user to utilize the navigation menu to find historical information on past secretaries? 91.7%.  How easy is it for the user to understand what the Department of Interior priorities are via the navigation? 91.7%.  Can the user recognize the functionality of the 'webcams' section of the website and how would they use it? 100%
lightning bolt icon

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.

Mobile Hifi - Video Tour

Desktop HiFi

lightning bolt icon

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.

5. Conclusion & Opportunities

Looking back and forward.

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.

lightning bolt icon

Key learning: Site content informs design choices.

american bison sanding in a golden field under a blue sky
arrow icon
We created our proto persona on the assumption that a user would come to the Department of Interior website to plan trips and learn about Department initiatives. While the site had a lot of content to achieve these goals, it was not laid out in a manner where the user could easily discover how to achieve them.
arrow icon
We narrowed our focus to creating a more functional site that made the content more discoverable and was laid out more intuitively.
arrow icon
To still acknowledge your user goals that the site can’t address, it’s ok to redirect them so long as it is done clearly!
lightning bolt icon

Key learning: Start Style Guides early.

photo of a firefighter investigating his equipment
arrow icon
The Style Guide was important to creating consistency and my partner and I both wish we started it earlier!
arrow icon
I learned design debt can be a time suck and the earlier you organize your design plan the better.
lightning bolt icon

Key learning: Design isn’t just about visuals.

a field or orange flowers under a bright blue sky
arrow icon
I spent most of my time, as did my partner, on rebuilding the site navigation and reorganizing content to create a more usable site.
arrow icon
Though the visual changes are not as drastic, users significantly preferred the redesigned version of the site - a true honor!

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.

laptop and mobile icon with yellow fill

More Projects

images of felines and canines mockups, featuring the adoption and donation process
lightning bolt icon
Animal Shelter Donation / Adoption Flow Refresh
Giving a local Chicago animal shelter an intuitive, warmer feel that encourages user trust and follow-through.
Mobile and desktop mockups
lightning bolt icon
Coffee Shop Responsive Site Redesign
Communicating Slow Down Coffee Co's welcoming service and great coffee through their site to boost virtual and in-person visits.
1. Research
2. Definition
3. Ideation
4. Prototyping
5. Conclusion