Department of Labor

What?

Redesigned the DOL homepage and navigation based on users’ pain points and feedback.

How?

Miro
Adobe XD
Adobe Photoshop
Google Drive

Who?

UX Designer
UI Designer

Web Prototype

Mobile Prototype

Problem:

Users have difficulty navigating through the Department of Labor web and mobile sites in order to find relevant and necessary information.

Solution:

Redesign the Department of Labor’s web and mobile sites with most used links in full visibility for users to quickly navigate and manage the content-heavy site.

Site Analysis

After a series of user tests on the Department of Labor’s web and mobile sites, users had clear pain points. Users found that the site’s inconsistency and navigation were the most frustrating and confusing. There were inconsistencies within the various layouts and heading styles, as well as the differentiated placements of breadcrumb navigation. In terms of navigation, some users did not know how to return home by clicking on the logo, and the quick links section was hard to find below the fold of the homepage.

“The search bar always takes me to weird links.”

“I didn’t know where to look, so I clicked on ‘Forms’ in the navigation.”

“I felt confused why there was more COVID-19 info than unemployment.”

In addition to the user tests, I conducted a heuristic evaluation of the homepage, navigation bar and footer. Overall, the homepage wasn’t terrible. The main issue was that the quick links weren’t ‘quick’ because they were located below the fold, neglecting usability heuristic #7: flexibility and efficiency of use.

The navigation bar layout was overall okay. The main issue was no ‘Home’ button for users to easily navigate, violating usability heuristic #3: user control and freedom. Additionally, the dropdown menus included an overwhelming amount of information. Further, the tab ‘Forms’ was the only button on the navigation bar without a dropdown option, which appeared inconsistent. These two issues violated usability heuristic #4: consistency and standards.

The footer was redundant of the navigation bar and ultimately overcrowded with too much information.

Redesign

The redesigned layout was intentional to follow a “Z” pattern and place the most important components in areas to catch the users’ eyes. By following the “Z”, the first think the user sees is the home button. A major pain point of user testing was not knowing how to return home. The next point is the search bar, so if users know what they are looking for, they can quickly search. The third point is “Forms” because it was removed from the navigation bar and is frequently-visited page on the website. The final viewpoint is “Guidance Search” because it was removed from the footer navigation, and is linked no other place on the website.

I reorganized the dropdown menus categorically and hierarchically, where necessary. Clickable links in dropdown menus are organized alphabetically, unless there is indication of what is most to least relevant. Forms was removed from the navigation menu because there was no dropdown component and placed as a quick link banner on the homepage.

I retained the reorganized navigation components in the mobile navigation menu. I replaced the large “Menu” and “Close” buttons in the corner of the screen for a sleek and obvious hamburger menu that transitions into an “X” to close out. The menu includes all of navigation options, but flows into multiple screens for maximum organization. In deeper screens, there is an icon menu at the bottom left for easy transition between different subjects.

I consolidated the “Featured Stories” into a hero carousel, in order to save space and make room for more important components.

I redesigned the quick links, so there isn’t a block of text. Instead, I picked four important links to replace the quick link section: Forms, Coronavirus Resources, FAQ and Guidance Search. All except COVID-19 resources were taken out of the navigation bar, so I made a point to give them more visibility as large banners above the fold. I put ‘Forms’ on the left and ‘Guidance Search’ on the right to be the most visible in the ‘Z’ formation. I added a ‘Contact’ quick link in mobile because one user found it frustrating when contact wasn’t visible from the main screen without scrolling.

Feedback & Iterations

The Department of Labor redesign prototype went through three rounds of iterations from its beginning to its ending stages. Examples of the final prototype can be seen in the ‘Redesign’ section above, or by viewing the final web and mobile prototypes.

“As someone who works for the Ministry of Labor in British Columbia, in Canada, I think that this website’s design is a lot sleeker than ours.”
User feedback

Design

The primary colors, Oxford Blue and Tangerine, come directly from the Department of Labor’s logo. Brandy was chosen to link the other two. The secondary colors are lighter versions of the primary colors to use in button presses and other indicators. Each of the colors in their uses are AA compliant based on the WCAG 2.0 guidelines.

The header text is Arial because of its known accessibility. Arial has been used by dyslexic and non-dyslexic readers for a long time. The sans-serif has soft curves and open counters, making it easier to read, along with its even spacing.

The body copy is Public Sans because it is one of the font choices by U.S. government websites. It includes wide proportions compared to other sans-serif fonts and loose tracking, which helps dyslexic reader to identify separate letters.

Final Prototype