Case Study: Website Redesign
My role: Project Manager, UX Designer
Tools Used: Figma, Miro, InVision, Photoshop, Trello
Problem:
Workers were unable to navigate the site to find the resources and information that they need from the Department of Labor. Information geared towards workers was disorganized and not scannable - the navigation was not learnable.
Solution:
We reorganized the information and provided clear paths for workers using the site. We provided a natural hierarchy and made content scannable to provide ease of use.
Impact:
U.S. workers can access the information and resources that they need.
Building Empathy - Developing a Persona
The mission of the US Department of Labor is to foster, promote, and develop the welfare of the wage earners, job seekers, and retirees of the United States; improve working conditions; advance opportunities for profitable employment; and assure work-related benefits and rights,
We developed a persona that is within the intended purpose of the DOL.
We referenced our persona's goals, needs and pain points to determine several paths that she would need to take to find what she needs on the US Department of Labor website.
Building Empathy - Usability Testing
As researchers we want to understand how workers utilize the current Department of Labor website to ensure their rights and benefits are protected and to prevent the loss of those rights and benefits.
We tested four paths and analyzed our results.
Path 1:
Path 2:
Determine how users find information regarding workers compensation and the steps they take to utilize this feature on the website.
Discover how workers locate and utilize workers health and safety protocols and rights on the current website.
Goal or Output:
Find information on how to file for workers compensation.
Goal or Output:
Find an OSHA poster to post in workplace.
Path 3:
Discover how the site is used to facilitate family and/or medical leave benefits.
Path 4:
Discover how people navigate the site to answer questions about holiday pay
Goal or Output:
Determine if they can file for family leave benefits.
Goal or Output:
User successfully finds their wage rights for the Christmas holiday season.
Only one in five people successfully found information about filing for workers' compensation. It took the successful person twenty-six clicks and five minutes to locate it.
With a sobering understanding of the volume of information and the tight three-week deadline of this project we determined that the best way to maximize our impact is to narrow our scope to address all site navigation and the redesign of select pages - only pages directly on our tested paths.
​
We proceeded with usability tests - specific to the navigation.
We are hoping to learn what people expect from the navigation and any insights that they may have.
Information Architecture
We evaluated the navigation on the homepage.
In our approach we relied on Jakob Nielsen's 10 general principals for interaction design.
The heuristic evaluation provides insights into why users are struggling with navigating the site to complete basic tasks​.
All of information for workers that our persona needs is all located in one drop down "topics" consisting of thirty five options - lacking hierarchy and organization. The information is not scannable.
Topics
Information Architecture - Navigation
Considering the sheer volume of information on the site and the scope of our project we determined to focus our redesign efforts on site navigation.
​
We conducted a massive card sort including primary & secondary navigation including the footer and utilities.
We put everything on the table for a card sort - 162 sticky notes for 162 options in the navigation and footer.
​
This card sort lasted over three hours and went through several iterations. ​
.png)
Topics
After the card sort we nested all items that were under the primary navigation topics in the site's original navigation into meaningful categories including: workplace rights, workplace safety and health, workplace benefits, information for employers and workers compensation.
​
This redesign means that people can scan and parse the sites content as a glance
Information Architecture - User Centered Navigation Design
A category that emerged in the card sort and became part of the main navigation is dropdown for people to locate information specific to their personas. The navigation leads with "I am a/an".
This navigation did well in testing and made it to the Hi Fi Prototype as "Resources For".
Items that were not organized back into the primary nav got moved to a new secondary navigation.
​
This secondary navigation - "agencies" "forms" "Policy" & "Programs" hold content for people familiar with the Department of Labor and government agencies - the intent is to keep primary navigation items from the original site navigation readily available for people unrelated to our persona - that work in government programs, policy or at the DOL.
Information Architecture - Low Fi Prototype Testing
Navigation for our low fi prototype did not do well in testing. The two navigations proved too confusing for users on both the desktop & mobile versions in low fi testing.
Determined to turn things around on deadline each designer re-designed a version of the site's navigation that solves the problem of a user centered design that also includes all navigation options.
Having four designs to work with - our efforts were successful! We worked through each option as a team and, we landed on a desktop and a mobile option that solved our problem of having two important categories of navigation.
"Secondary" Navigation - content people who know what they are looking for landed above the main navigation bar - near the utilities.
​
Timely resources for disaster recovery & Coronavirus are located on a red banner below the main navigation.
Our efforts were successful - both mobile and desktop iterations did well in mid fi testing!
Human Centered Design - Atomic Design & Style Tile
To address learnability issues throughout the site we created a style tile and a style guide.
We designed from an atomic level - consistently using the same icons and design elements throughout the site allows people the framework & opportunity to become familiar with the design patterns and to know what to expect and where to find information while navigating the site.
Information Architecture - Dee's Path to Workers Compensation
To address the biggest problem that we came across conducting usability tests at the beginning of the process - 4 of 5 people could not find information on workers' compensation - we redesigned page content and the navigation for information on workers compensation
Lessons Learned
I learned that taking risks is part of being a UX designer - identifying and solving problems in a relatively new field sometimes a completely new idea comes up in order to solve the problem.
​
I learned that risks are best taken as a team.
Making a category based on various user personas on a government agency website is risky. This was an idea that we came up with as a team and a risk that all four designers were 100% on board with taking and it was a success.
​
Having two navigation menus one for user centered topics and one for the agency insiders was also a risk that again all four designers were on board with. We ate pavement on that one and had to hustle to iterate in order to meet deadline.
​
Coming out of this fall out would have not been possible without a collective team effort to move forward.
​
As project manager for this giant project under a tight deadline I learned that staying organized is clutch.
Atomic design. We did not start designing at the smallest level possible, which led to additional work and re-work later.
Components. Being diligent about Figma components is critical; failing to do so meant a lot of manual replacements.
Division of labor. Keeping everyone informed of whose duties are whose is fundamental - as is defining how your team will collaborate for the project at the beginning of a project is crucial.
Esprit de corps. Working on the mood board and spending time bonding as a team was invaluable to our sanities, and to the project as a whole.
