Scenario: This exercise put me in the position of a designer hired by the Department of the Interior as a UI Designer, tasked with the redesign and update of their website. In this case study I execute the design process: research, ideation, prototyping, and testing a responsive website solution.
Individual Project: Pavlos Savva (UX/UI Designer)
Tools used: Figma, Miro, InVision, Photoshop, Illustrator, G-Suite, Zoom
As a UX researcher I need to understand the pain points of users navigating the Department of the Interior website and empathize with them. I created a proto persona that captures one of the users of the Department of the interior website.
Dave Paterson is a Park Ranger who works for the DOI. He is married and lives in Los Angeles. He has two kids and a dog, he cares about plants and animals, and the community. One of his needs is to access his employee profile, which comes with the pain point of finding it frustrating trying to login through his job portal.
Based on the Proto Persona, I chose a user path and performed usability testing with 5 users through Zoom call interviews. These interviews helped to validate the assumptions about the issues identified when navigating this specific user path. The testing provided me with insights into how real users navigate the DOI website and an understanding of their needs and pains.
I chose the path shown in the pictures above because during my website audit this path was very difficult to logically follow and manage to land on the employee login portal.
I put my initial assumptions about the difficulty of this user path to the test by asking 5 users, over Zoom, to find the employee login page. Most could not find it without several wrong guesses or help. Many ended up under Join and then guessed Jobs. One user described Join as an open-ended label, and another, already part of the organization, found it confusing for this task. Two users tried the search box and did not find it helpful. The Employee Portal page itself looked unlike the rest of the site, which made some users think they had reached an error.
I synthesized the notes into positives, navigation, visual and "consider" groups, then prioritized them on a 2x2 matrix (priority for users vs. priority for the app). The top-priority fixes were:
The heuristic evaluation also helped document issues that need to be addressed and areas where the website performs well. This process helped with planning for the website redesign.
Part of my research was to look for inspirational images, search for typography that fits stylistically and emotionally with the essence of the Department of the Interior, select a color palette that is fresh but also consistent with the existing brand, look for UI patterns and interesting UI samples, as well as infographics.
View the moodboard →
I started by examining all the items in the main menu. This helped me understand the scope of the Department of the Interior website. I continued to research the main menu navigation by performing Heuristic analysis on all menu items, thinking and analysing the existing user flows.
Following the Heuristic analysis I performed Usability Testing on the main menu navigation and the overall website. I used the insights from this Usability Test to reorganize the main menu through a card sorting exercise.
I performed usability testing with 8 users with target age between 20-65 that use the website to find specific information.
Task 1: Find the right menu item to click first in order to learn the purpose of the Department of the Interior and the contact information.
Task 2: Find information that will help them learn about Renewable energy.
Task 3: Go to a page where you can find information about the National Parks.
Task 4: Go to a page where you can find Latest News related to the Department of the Interior
With this testing I aim to learn:
Across 8 users, the menu problems were consistent:
The existing menu had five top-level items: About, Bureaus & Offices, Priorities, Join and Newsroom. After the card sort, the same content is organized into seven: Home, Bureaus & Offices, Our Priorities, Our News, Employment, About and Search.
The biggest change: Join (Jobs, Veterans Employment, Pathways, Volunteer) became Employment, and now also holds Login, which was the item users couldn't find.
I took the knowledge gained from all the user insights and the website analysis and used the new site map to create wireframes for the main Menu Navigation in Figma.
The next step in the redesign of the Department of The Interior Website was to design the User Interface for the main page. This design includes the header, hero image area, highlights area and footer. These sections need functional menus, components that fit into a design system, color, typography and a layout that follows a hierarchical flow.
To document all of the above I created a UI Style Tile followed by Desktop and Mobile components and wireframes design in Figma.
With all the data and information that I collected from the UX process so far I created a first lofi prototype for both mobile and desktop and tested them with 4 users.
The feedback that I got from all of them were that the design looks clean with clear hierarchy, nice dropdown menu and menu functionality and they really like the search bar.
I continued to create the style guide for the Department of the Interior website. Then I used this style guide to create High Fidelity prototypes of the Homepage for desktop and mobile using Figma.
The final desktop header adds a utility bar above the main menu with Login, a profile icon and an accessibility control, so the login is visible from every page.
I tested the final HiFi prototype with 3 users. The feedback that I got from all of them were that the home page and navigation on both desktop and mobile looks clean and consistent with clear hierarchy, nice dropdown menu and functionality. All agreed that the footer can be improved. Below you can see the final prototype with the final changes following all the feedback and data that I got on the way.
The research identified one main problem: users could not find the employee login. The final round of testing evaluated look, feel and consistency, but did not repeat the original login task, so I can't claim the problem is solved. The next step would be to run that same task on the final prototype and compare success rates with the original 5-user test.
