Dept. of Labor

Case Study

Responsive Redesign

Team Members: Merrill FitzGerald, Sierra Swann

My Role: User researcher, designer

Tools Used: Adobe XD, Lightroom, Trello, Miro, InVision, Zoom, Google Slides

 
macbook-mockup-featuring-a-woman-using-her-iphone-11-pro-3824-el1.png

The Problem

Websites, just like everything in life, are not always perfect. Although perfection is practically unattainable, an improved version is always possible. The Department of Labor’s interface was cluttered with not only copious amounts of information, links, and news articles, but with too much white space and an array of hierarchical problems.

The Solution

For this project, I wanted to rearrange some of the pertinent information that made the website feel so overwhelming and impossible to navigate through. I was able to condense some of this information and highlight various topics that seemed, through research,  to be more important than others. 

Definition

User Persona

My partner and I developed a user persona in order to understand and determine what audience we were looking to target through this redesign. Initially, we came up with Gary Williams, a 58 year old welder who had been laid off due to an injury that left him unable to perform specific job duties. Gary wanted to find information regarding disability and or benefits on the DOL website, but as someone who was not particularly tech-savy, he was hoping the process wouldn’t be too difficult or time-consuming.

Screen Shot 2021-03-20 at 8.38.23 PM.png

Initial Usability Testing Results

We initially had 4 users test the original Department of Labor website. Through testing, we concluded that all four users had similar struggles while navigating the website, along with responses and general frustrations. We discovered that the navigation as a whole, was complicated and overwhelming, especially for people who are only searching for one specific topic, answer to a question, contact information, etcetera.

Information Architecture

Annotations

Screen Shot 2021-03-26 at 3.31.00 PM.png
Screen Shot 2021-03-26 at 3.31.16 PM.png
Screen Shot 2021-03-26 at 3.31.34 PM.png
Screen Shot 2021-03-26 at 3.31.47 PM.png

 Card Sorting

Artboard+%E2%80%93+5.jpg
Artboard+%E2%80%93+2.jpg
Artboard+%E2%80%93+3.jpg
Artboard+%E2%80%93+4.jpg
Artboard%2B%25E2%2580%2593%2B6.jpg

 

Artboard+%E2%80%93+7.jpg
Artboard+%E2%80%93+7.jpg

Site Map

Site Map.png

 

Homepage Navigation Wireframes

About Us.png
Topics-1.png
Agencies.png
FAQ.png

Additional Wireframes

Topics2.png
Disability2.png

Visual Design

Style Tile #1

Style Tile.png

Homepage

Style Tile Iteration

Style Tile Iteration

Artboard – 1.png

 Complete Redesign

Artboard – 22.png
Artboard – 28.png
Artboard – 31.png
Artboard – 27.png

Testing

Testing Notes -

  • Home button does not exist

  • Right corner maybe add indicator saying “back to home page”

  • Knows to click the logo but thinks other people might not always know to do this

  • Design seems consistent with other government websites

  • Overall, easy to navigate

DOL.png
Testing Template.png

 Key Takeaways

  • Government websites seem to be notorious for overwhelming users with grandiose amounts of information, making it difficult for users to not only navigate on their desktop, but nearly impossible while using a mobile device.

  • As a UX/UI designer, it’s important to understand how these particular government websites are organized, how they function, and how functional they truly are in order to increase user attendance. 

  • For this assignment, I focused on the key features the Department of Labor highlights and the way in which it was presented. I was able to reorganize the navigation and condense it into categories that, hopefully, would not make the user think. 

  • I used consistent imagery throughout to elude a more personal connection with user targets and to give a clear direction to users as to what they might be searching for. 

Previous
Previous

Releaf - Stress Relief App