CASE STUDY: GOVERNMENT WEBSITE RE-DESIGN
OVERVIEW
What's the Problem?
The Department of Labor’s Website and mobile application is outdated, cluttered and not user friendly. There were many issues with locating specific resources within the website.
Redline Annotations & Usability
MY TEAM
My Role
Team Members: Ashley, James, Samantha, & Amie
​
Background: Our UX/UI Design Bootcamp was tasked with re-designing a government website. Having chosen the Department of Labor, we conducted multiple interviews and gathered data from surveys regarding user experience with government related resources online.
So what's the solution?
We have redesigned both the desktop and mobile versions to accommodate every type of user. We added a new navigation with less clutter and a more cohesive experience overall.
USER RESEARCH
User Research Testing
We conducted usability tests for the desktop and the mobile application to find the pain points and accessibility of the current website.
USABILITY GUERILLA TEST RESULTS
AFFINITY DIAGRAM
HEURISTIC EVALUATION
We discovered that the website mission statement was not clear right away, it took searching through the website to find it. Many areas of the website did not use negative space appropriately, there is an abundance of dead space. The website sections are hard to follow and the hierarchy is not very clear.
​
We found that there was consistent use of color, text, and images throughout the website. We also found that the website has a consistent way to get back to the home page.
COLOR ACCESSIBILITY TEST
The current color palette for the Department of Labor passed the accessibility test.
USER PERSONA
Users visit the Department of Labor website in order to gain a further understanding of their rights as wage earners, job seekers, and retirees of the US. Employers also visit the website in order to find information on the requirements they should be providing their employees.
NAVIGATION PAINT POINTS
1. The user struggled to find the mission statement for the DOL.
​
2. The drop down headers weren’t immediately recognized as clickable to the user.
​
3. The user did not find the wage map on the mobile version of
the website.
IDEATION AND BRAINSTORMING
NAVIGATION CARD SORTING
NEW NAVIGATION SITE MAP
PROTOTYPING (LOW-FI)
WIREFRAME PROTOTYPES - DESKTOP
UI INSPIRATION MOODBOARD
UI STYLE TILE
TESTING AND ITERATIONS
MOBILE NAV - A/B USER TESTS
I conducted 3 user tests on the mobile navigation. In A prototype, I had a fixed footer nav with the hamburger menu as a pop out orange button to draw the user’s eye. B prototype has the hamburger menu and search bar in the top right corner, which created a cleaner look.
MOBILE NAV - A/B USER TEST RESULTS
Unanimously, everyone chose prototype A because they liked the look and feel of the footer nav. However, they said that they wished the search bar was still on the top right corner. I iterated the design to include the search icon on top, and updated the menu bar.
ITERATED HIGH-FI PROTOTYPE (DESKTOP)
ITERATED HIGH-FI PROTOTYPE (MOBILE)
FUTURE OPPORTUNITIES
In our second phase of development we’d like to:
​
1. Build a tablet version of the Department of Labor Website.
​
2. Have a more interactive user experience. Possibly a quiz or questionnaire on the homepage with incentives.
​
3. Add more micro interactions on the mobile application.