U.S Department of Labor Case Study

Overview

The United States Department of Labor is a cabinet-level department of the U.S. federal government, responsible for occupational safety and health, wage and hour standards, unemployment benefits, reemployment services, and occasionally, economic statistics.
‍
Our team was challenged to redesign the existing website into a user friendly design that will meet user's needs for finding out how to file for unemployment benefits.

‍
MY ROLE
‍
UX/UI Designer
UX Researcher
DURATION

3 weeks
TEAM
‍
3 UX/UI Designers
TOOLS
‍
Figma, Miro

Problem

Due to the COVID-19 pandemic, there has been an rise in the number of U.S. employees losing their jobs. As a result, this has led people to inquire on how to file for unemployment insurance benefits on the U.S Department of Labor website. However the current website’s layout is not the easiest to navigate and ingest, which leads to users not being able to efficiently find the information they are seeking.

Solution

In order to solve this problem, our team aimed to redesign the user interface for the Department of Labor’s homepage to be more intuitive and provide UI elements that are easy to access and understand.
Fixing the Navigation Bar to allow users to easily ingest.
Redesign the Homepage to be more relevant for users who are visiting the website.

Impact

We were able to decrease the amount of time users spent trying to find the Unemployment Benefit page by improving the Navigation bar and Homepage.

Usability Testing

In order to find out what is not user friendly, we established a usability testing plan to test users on the current homepage, and how they find their way to the Unemployment Benefit page.

Usability Testing Notes and Metrics

After we performed 6 usability tests, our team gathered our notes and noted down the time it took for each user to complete each task during the test.

Usability Testing Analysis

After gathering our notes and metrics, we worked together on a UI Feature Prioritization Matrix based on all the user feedback.

Usability Testing on Navigation Bar

We performed usability testing on the live website navigation on both desktop and mobile devices to get feedback on efficiency, functionality, and overall user experience.

Information Architecture

Based on our usability testing feedback, we had to improve the information architecture for the navigation bar.

Card Sorting

To improve information architecture, we card sorted all the primary & secondary pages to better define, group, and structure the items on both the main navigation drop down menu & the footer navigation. 

Site Map

Based on our card sorting, we redesigned the site map for the main drop down navigation bar.

Designing the experience

Wireframing - Main Navigation Drop Down

We used our new site map structure to start the lo-fi wireframing process, focusing on the placement of UI elements and visual hierarchy.

Mid-Fidelity - Main Navigation Drop Down

Wireframing - Homepage

After reviewing the feedback users provided on the live home page, we designed individual lo-fi wireframes and voted on the design we wanted to start with.

Mid-Fidelity Wireframing - Homepage

Next, we created mid-fidelity wireframes and prototyped the wireframes for both desktop and mobile homepages.

5 Second Usability Testing

We performed 5 second usability testing on our mid-fi design prototype for desktop and mobile. Then, we gathered the important feedback from the 5 second usability testing and prioritized them on a 2:2 matrix.

Mid-Fidelity - Homepage Iteration

100% of our users confirmed that our navigation layout was easier to consume. We delivered on their need for a “cleaner” and “more organized” navigation. We also found that our mid-fi homepage layout wasn’t very inviting. As a result, we made two iterations of our homepage.

Style Guide

We created a style guide to ensure consistency and standardize elements across the website, including color palette, typography styles, UI elements, etc.

When choosing our colors we tested our font colors and size for accessibility to ensure our design met ADA requirements.

High-Fidelity Wireframes

Next, we applied our style guide to create high-fidelity wireframes for both new iterations of our homepages.
Version A
Version B

A/B Testing on Homepage

To finalize on a homepage layout design, we conducted A/B Testing to find out which versions our users prefer.

As a team we were really hoping design A would be preferred. However, our A/B testing surprised us because 80% of our users preferred Design B over Design A.

High-Fidelity User Interviews Insights

After conducting a total of 8 user interviews for our Hi-Fi Desktop and Mobile Prototype, we gathered insights which helped our team add more improvements on our user's experience.

Desktop Feedback

User 1
"It was hard to notice FAQ at the top of the page. It feels like the FAQ should be on the left side of the search bar"
User 2
"The drop down bar was too hard to click on due to only the area around the arrow was clickable"
User 3
‍"The U.S map on Unemployment page should be clickable."
User 4
"The auto-populated State's Unemployment Office information was not noticeable due to the information populating underneath the U.S map."

Mobile Feedback

User 1
"Not all logos including on the navigation takes you back to the home page."
User 2
"The drop down bar was too hard to click on due to only the area around the arrow was clickable"
User 3
‍"Some of the body copy doesn't match what's on the desktop which made it confusing."
User 4
"Navigation needs more spacing to make it look less cluttered."

Final Website Iteration

From our user insights, we iterated on our high-fidelity prototype to finalize our design for both Desktop and Mobile designs.

Conclusion

Through a lot of research and multiple testing, we were able to integrate a user friendly design where users were no longer reading through paragraphs of text to find what they were looking for. Three main things we incorporated that users wanted:

1. Redesigning the Home page to have important topics at the top pf the fold rather than having to scroll down for important topics.
‍
2. Redesigning the information architecture for the navigation bar so that it is easier to ingest.

Lessons Learned

Pretty designs does not necessarily mean that it is user friendly. Although, I preferred the layout for Version A over Version B. Our research resulted in users preference was Version B. Users found Version B to be easier to read due to the contrast and bigger icons than Version A.