Department of the Interior

UX Research | UI Design | Responsive Website Redesign | Information Architecture
The Problem
As with many government websites, the Department of Interior (DoI) website provides a lot of information coming from many different channels. Users found it overwhelming to navigate the interior pages of the website as well as the external pages linked in drop-downs and throughout the DoI website. Often, even from the homepage, users found it difficult to know where to start, and couldn't find the answers they were looking for quickly, or at all. That, combined with the confusion of the site’s function, left users perplexed and often frustrated.
The Solution
After conducting an audit of the information architecture and a UI analysis of the current website, it was clear a hefty re-design was in order. First, a complete remodel of the primary and secondary navigation, footer navigation, and reordering the utility navigation. Some items didn’t point anywhere that were simply removed or repurposed. I set out to help users gain a more straightforward experience while navigating the site. Additionally, users were unsure what DoI was for, so the purpose of the site became front and center.
Desktop Mockup

Process

"The Department of the Interior plays a central role in how the United States stewards its public lands, increases environmental protections, pursues environmental justice, and honors our nation-to-nation relationship with Tribes."

Conducted five user interviews with users who enjoy United States public lands and often research ahead of visiting. Surveyed eleven additional people via online survey. Synthesized insights through affinity mapping, journey mapping, defining user types and personas, defining user flows, creating wireframes, and prototyping.




This project consisted of the following phases:
User Research Icon - by Rachel Eisner
User
Research
Definition and Ideation Icon - by Rachel Eisner
Definition & 
Ideation
Information Architecture
Information
Architecture
Prototype Icon - by Rachel Eisner
Prototyping
Testing Icon - by Rachel Eisner
Testing &
Iterating

User Research

I started my process by reviewing and testing the usability of the current website, then brainstorming and discussed with peers who my users may be. Based on an assumption, I designed a Proto-Persona. Next, I moved to the interview plan and surveys outlines and sought out interviewees who fit my assumed Proto-Persona. As a result, I interviewed five users with questions structured around their experience planning trips to national parks and research processes. Finally, I conducted a usability test with them for the current DoI website. These interviews facilitated the development of the User Persona.

Proto Persona

Definition and Ideation

I synthesized the data I collected from the user interviews and usability testing into an affinity diagram. The process pointed out a trend of similarities between my interviewees and assessments. For example, the interviews I conducted showed that most users struggled to find adequate resources from official websites and tended to rely on third parties and quick Google searches. Yet, my analysis of the existing website showed that users did not understand how to navigate the DoI website. Some of them were even confused about what the website did. Therefore, I thought it necessary to address those specific challenges. Next, I expanded my findings, completing a Storyboard, Empathy Map, User Journey Map, User Scenario, Heuristic Evaluation, Color Assessment, Mood Board, and User Flow.

Heuristic Evaluation

Information Architecture

Expanding on the Heuristic Evaluation, the new website needed to reflect my findings regarding difficult navigation and confusion with the website. I decided to do some card sorting to make sure the site layout was optimal. Once I finished card sorting, I moved confidently forward with the site layout and testing outcome. Finally, I decided to put these findings into a Site Map to help navigate the page designs effortlessly.

Card SortingInformation Architecture: Site Map

Prototyping

When I was comfortable with my user flows, I started prototyping. I started by hand sketching wireframes, and then I made the wireframe sketches clickable and tested them. The testing helped me make essential iterations, expand on strengths, and revise some of my strategy. Once I was satisfied with my direction, I began digitizing the desktop wireframes. I made sure to start creating a Style Guide as I went to prevent extra work and streamline the process. Next, I followed the desktop wireframes with responsive app wireframes. Finally, I tested each of the sketch wireframes, low fidelity wireframes, and high fidelity wireframes with test users.

Desktop Low-Fi MockupDesktop High-Fi MockupMobile Low-Fi MockupDesktop High-Fi Mockup

Testing and Iterating

I recruited five test users to help with each testing session. I received some helpful user feedback from our test groups, and they pointed out places where the logic jumps and process needed iterating. 

User Testing
Mobile Mockup