Department of the Interior UI ReDesign
1 Research
Research Plan
The journey I was going to take with this project would start with an understanding of my user’s pain points and frustrations but would ultimately dive much further into intent, reasoning, goals, and reactions.
Embarking on a UI redesign required me to carefully map out my intentions and great a research plan that would keep me on task and moving forward.
Research Goals
Gain an understanding of how information is presented on the current DOI website.
Learn how users utilize the DOI website.
Observe users navigate through the DOI website to achieve a specific goal.
Collect impressions on the current UI design of the website.
Uncover user’s experiences on the current version of the DOI pages.
Assumptions
Users come to the DOI website with a specific goal or intention.
Imagery plays an important role in the layout of the DOI page.
There is a significant amount of content the DOI is responsible for presenting and managing.
Information architecture plays a critical role in how users navigate the current version of the site.
Methodologies
Secondary Research
Current Usage Insights: Gaining a basic understanding of who is using the DOI site.
Primary Research
User Testing: 5 User tests of the current version of the DOI website with 2 designed tasks.
Navigate through the DOI Website and provide feedback on both navigation and visual content.
Navigate through the DOI website with a specific, targeted task.
Secondary Research
Department of Interior Insights
Based on statics gathered from analytics.us.gov, I was able to extract some of the following insights about who is currently using the Department of the Interior website, how they are accessing it, and what they are accessing.
There were approximately 81.9 million visitors to doi.gov in the past 90 days.
Desktop and mobile usage was about equal with desktop taking 49.1% and mobile coming in at 48%.
iOS was the leading operating system with 32.4% followed by Windows at 29.8%. Android came in at 18.4%.
The National Park Service (NPS.org) was the most accessed page from the DOI website.
The top downloads also came through the National Park Services pages, specifically Air Quality Reports and National Park & Federal Recreational Lands.
Primary Research
The purpose of my primary research was to put the current version of the Department of the Interior website under the microscope. I wanted to gather some basic user feedback on the current imagery, layout, and navigation followed by how well users could execute a specific task within the DOI website.
Research Questions to drive User Testing
What kind of users come to the DOI website?
How can I improve the site navigation and appeal of the current DOI website?
What works, what fails, what is confusing on the current DOI website?
In what ways can the current DOI website be streamlined?
Is there a way to make the DOI website more user friendly?
I constructed a testing template consisting of 2 tasks. Each task had a defined scenario and success criteria that would signal that my user testing achieved the intended goal. The data was then put into a chart and later synthesized in my Affinity Diagram.
Affinity Diagram
Using the data collected from my initial user testing, I synthesized the data into specific user insights and constructed my Affinity Diagram. This allowed me to identify not only the needs and frustrations but also closely observe user behavior and pick out potential area of opportunities.
User Persona
My research and user insights allowed me to construct my user persona. This persona would define my target audience and influence the decisions I would make about the design moving forward. The persona is based in both reality and fiction. My user might be fictional but her needs, frustrations, motivations, and journey are all very real. Every decision moving forward would be guided by my persona with the intent of satisfying their needs.
2 Strategy
How Might We…
I took the data from the research and created my How Might We statements. These statements would supply the foundation for brainstorming creative solutions to the most pressing user pain points and user frustrations.
3 Design
Card Sort
The card sort was a critical component in implementing a new navigation for the DOI website. The main goal was to eliminate as much redundancy as possible while streamlining the main header and footer navigation. To execute the card sort, a google spread sheet with both current and proposed structure was created and used to help re-organize and re-structure the content.
Information Architecture
Having completed the card sort, I took the proposed information architecture and compared it to the current layout. While the streamlined version looks simpler, it did leave out some necessary information. A second card sort was performed and the result was a newly structured Information Architecture which would be implemented on the navigation menus.
Style Tile
At this point in the design process I put together the style tile to define the brand representation while serving as a synthesizing document of the logos, color palette, typography, and imagery. It was important for me to define the stylistic direction at this point so I knew where the design was going to take me.
Wireframes
Having outlined and brainstormed the solutions I wanted to address in my design, I created my wireframes and a low fidelity prototype of the pages I wanted to design. Knowing my target audience was users aiming to find volunteer opportunities, these were the pages I laid out and digitized. I would use this prototype for some initial user testing before implementing any of the UI design elements.
4 Prototype & Test
Finally it was time to put together all of my research and initial design work to create the final high fidelity prototype. The first step was to tackle the navigation. I wanted to focus on the relationship between content and hierarchy in both the desktop and mobile versions as well as applying UI elements from my style tile.
Hi-Fi Prototype
It was time to assemble the final product. Combining the early wireframes, the new navigation, and the style guide I created the desktop version of the re-design. I was also able to translate the final version of the desktop prototype and create the mobile version complete with both light and dark modes.
Mobile Hi-Fi Prototype
Having completed the Desktop version, I put together the mobile version complete with dark mode option.
Usability Testing
Finally it was time to put my designs in the hands of the users. I created a testing plan for both the desktop and mobile version with specific tasks associated with a defined pathway through the prototype. The data collected from this round of testing would allow me to identify problem areas in the design, find out what is working well and what is not, as well as feedback to contribute to future opportunities.
Conclusion
Learning, Listening, Applying
In order to execute a successful re-design, you have to consider the following
Who are my users and what are their needs?
Where does the current version fail and how do we improve it?
With great vision comes great responsibility.
In a very short period of time I was able to research, define, iterate, and design a new interpretation of an existing government agency website. Through application of all of these processes I was able to present a final product that, I believe, improves upon the existing version while incorporating my personal aesthetic. Ultimately the biggest takeaway from this work is that no good design can be brought to life unless you take the journey in your user’s shoes.