The Proto-Persona gave our team a reference point for the users values, habits and pain-points to inform the navigation requirements
Department of the Interior Website
Responsive Web Navigation
The Department of Interior, also known as the "Department of Everything Else", has a broad scope over numerous departments and bureaus within the U.S. government.
Our design team was tasked with re-designing a responsive web site for both mobile and desktop applications that would increase user interaction and increase engagement with events and opportunities
Problem
The current Department of the Interior website attempts to provide a wealth of information and interaction with no obvious hierarchy or clear navigation and is therefore confusing to the user.
With so much to discover and many opportunities to engage with the site users are frustrated by the lack of direction and discoverability of direct task paths.
How might we design an interface that allows an enthusiastic and engaged user to efficiently discover multiple task paths to learn more about the opportunities within the department?
Solution
A new user interface was developed with a clear user path and an intuitive navigation with clear informational hierarchy through the use of content chunking, clearly defined actions and an open and inviting interface to engage and inform the user
Our goal was to redesign the navigation of the homepage to provide the user with a clear path for finding volunteer opportunities and design and interface for media offerings which provides the affordance for a truly interactive experience intuitive affordances clear informational hierarchy, typographic and interactive affordancedepartments' multi-media offerings and within the site to discoverable and interactive by creating a in a need to be more intuitive and interactive.
Tools
Figma
Miro
Team
Jeremiah Forster
Laine Stewart
My Role
UX designer
UX researcher
Interviewer
Interface Designer
Information Architect
Timeline
Overall: 4+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
Our Journey
Proto-Persona
Ally needs to have a clear user path to discovering more about the Interior Departments actions and news items.
She would also like to access resources to find volunteer opportunities in her community.
We reflected back on this persona throughout every step of the design process to validate design decisions.
The current site homepage does not provide a clear user path and information architecture to quickly access information
Analysis and Heuristics
During the ideation phase of the project, we conducted user interviews based on the current website to identify usability issues; focusing on our target audiences’ motivations and expectations from the site.
Over the course of three days we recruited and interviewed 5 users to gain insight into their interactions.
Key feedback from testers:
"Unclear process to find volunteer opportunities. Should be on homepage"
"Links to media and volunteering were in text fields and were hard to find
Typography and Usability issues
The lack of a clear typographic hierarchy also makes discovery difficult. Large text fields with links hidden in the paragraphs, inconsistent typography and lack of content grouping page after page is a deterrent for accessabilty.
Page layouts do not have a visual flow and lack a uniform style between the different content pages. Each action the user takes has a different path origin which are not intuitive and often take the user off the page or even the site without warning!
Getting involved with volunteer opportunities and learning more about the media offerings were the main concerns for our user persona
Card Sorting
While organizing the information on the existing site we found that clear navigation headers, concise drop-down menu content and card contents were not used. This created confusion for the users we tested the site with.
Aimless navigation led to users wondering where they should start and how they could find information effectively
Our takeaway was that clear labeling of content and intuitive task paths were necessary to allow discoverability
With the new interfacer the user knows where they are in the site and are presented with a clear path
Wireframes
Using Figma, we quickly sketched a navigation for mobile first, then our home page for desktop.
To obtain a clear hierarchy I organized content on the homepage into cards for users to scan quickly and choose confidently.
Clear actions are discoverable with menus labels, drop-downs and a z-pattern hierarchy.
Responsive Design
Before we refined the final user interface for the mobile app we also incorporated the layout to include the desktop version. This mobile first approach ensured that our product would translate into both mobile and desktop formats with a consistent navigation and flow for user testing
The transition from the one dimensional interface of mobile into the two dimensional parameters of the desktop allowed us to directly integrate multiple levels of a mobile interface into one to introduce new information without navigating to a different page within the site
Prototyping
Through prototyping we quickly developed the user flow using key interactions to use as our platform for testing. Due to the short timeline of the project it was necessary to develop a prototype which would closely resemble the final product for testing.
Mobile Usability Testing
As I iterated and included full descriptions, navigation and images I began to recruit and test these prototypes. I did five usability tests with clearly defined tasks.
Key insights from these tests related to issues with the placement of arrows and action buttons
issue 01: Some of the action buttons were ambiguous as to their function
Some of the drop-down menu indicators and forward action buttons still left users wondering what these actions represented
solution 01:
I analyzed the placement and direction of the visual navigation icons and changed orientation and placement to better reflect their intended actions. After the second iteration the users responded with more understanding and improved user flow
Desktop User Testing
The desktop version of the site was tested for usability by 5 participants over a two day period. We tested the usability of the modals, dropdowns and content cards which provide the user efficient navigation through multiple levels to integrate information on the page.
issue 02
Volunteer opportunities are still not quite as discoverable as the users would like.
Volunteer opportunities are in the dropdown menu called get involved but it could be a button
solution 02
Place a link on a static link on the home page which requires to further navigation to find
The solution was to place a clickable link on the homepage for efficient discovery. We found this would be the most intuitive and effective placement after A/B testing with two more users.
It was important for the user that their placement within the site was easily recognizable for efficient navigation and to instill confidence in the user interface
We referenced the user test findings throughout the navigation re-design process. There were two total iterations before we incorporated UI patterns developed for this design
Inspirations for imagery came from outdoor themes in conservation and type face gives sense of authority
UI Design
My goal was to create a visual identity that’s aligned with the Departments look and feel, which is official and outdoor oriented.
The site is designed with the persona of an outdoor enthusiast and one who is interested in community and volunteerism in mind with inviting yet rugged colors and imagery
High Fidelity Mobile Prototyping
The visual style for both platforms were developed using our mood board to represent the final product as it would be presented. At this stage our navigation and user flow has been validated by the users.
Without the use of breadcrumbs users are still confident exploring the site knowing where they are in the navigation flow as the action components remain part of the viewable interface at all times.
Each task is presented with clear dropdowns and overlays with clickable links on an open interface. Headings and subheadings keep the user oriented with a typographic hierarchy which makes content scanning more efficient.
Our goal was to incorporate a similar Z pattern hierarchy while utilizing the most usefull interaction components for the one and two dimensional interfaces to allow the user to build trust and recognition with the navigation across both platforms
Mobile High Fidelity Prototype
Desktop High Fidelity Prototype
Next steps
This was a real learning experience in how to make an overwhelming amount of information more accessible. To continue with this redesign my goal would be to have an interactive event calendar which highlights the volunteer opportunities available in different regions so that users could easily sign up on the app to save time by not having to research through the different bureaus within the department.
Learnings
Throughout this process I found it key to keep reflecting back to the user journey and persona to keep the human interaction with the interface at the forefront. It is a challenge to keep a consistent visual appeal while providing many types of interactions. The key takeaway was to stay true to the process and to break down the overwhelming task of organizing this information with bite sized chunks, which is what the final design provided to the user.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.