Scenario: Recently I was hired by the Department of the Interior as a UI Designer and tasked with the redesign and update of their website. In this case study I am executing 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 beacuse during my website audit this path was very difficults to logically follow and manage to land on the employee login portal.
I put my initial assumptions about the dificulty of this user path to the test by asking users to navigate to the employee login page portal which provided me with the above insights.
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.
A part of my researcher was to look into 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 exersise.
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:
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.
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 chages folowing all the feedback and data that I got on the way.
