OVERVIEW
The U.S. Department of Labor website lacks clear design standards.
- The interface is cumbersome, making it difficult to navigate the site.
- There are problems with the site's accessibility.
I set out to improve navigation and accessibility.
My goals:
- I wanted to reorganize the navigation so that more important topics were easier to find.
- The content needed restructuring to make it more accessible.
RESEARCH
Why do people visit dol.gov?
- A user would visit the U.S. Department of Labor's website to find information about workplace opportunities, job-related benefits and workers' rights issues.
Who would be the most likely visitor?
Kelsey Palmer
- Age 25.
- Lives in Salt Lake City, Utah.
- Graphic designer who was recently laid off from her job.
- Looking for programs that can help find new opportunities within the design field.
USER INTERFACE ANALYSIS
A deeper look into the website’s layout.
I studied the website's structure to identify its main sections.
1
Logo
5
Content grouping
2
Search bar
6
Internal links
3
Navigation menu
7
Social feed
4
Header image
Evaluation, rating, and comparison of heuristic examples.
- I uncovered some insights that will help me focus on specific areas while I'm developing my redesign.
TESTING
Testing the website against real users.
I conducted two in-person interviews to discover:
- How do users respond to the current navigation system?
- What weaknesses does the existing design have?
“The rest of the page could be more useful. There is too much stuff within these menus.”
—Chris
User tests key takeaways.
- The navigation bar was so full of links that users felt overwhelmed.
- Users had trouble knowing where they were on the site and which pages to visit next.
Visualizing feedback by impact and effort.
After conducting user tests, I assessed the impact and effort of each issue. Based on my analysis—I chose to focus on the following points:
- Navigation.
- Accessibility.
- Consistency.
Evaluation of navigation.
Looking at navigation menus more closely revealed:
- Reading all the topics in the drop-down menu takes a long time.
- It is easy to lose your place within the links.
- Some important topics are not accessible from the drop-down menu.
Card sorting navigation links.
After applying the card sorting method to group all of the navigation links into topics, I noticed that new data patterns had emerged.
New navigation system.
I made a couple of changes to the way navigation links should be ordered:
- New sorting gives the user a more intuitive choice of categories, eliminates duplicate listings, and combines existing topics.
- New sub-category topics are sorted in alphabetical order by default.
PROTOTYPING
New site map.
- I built a visual representation of the website by utilizing a site map.
- It helped me envision the structure and placement of content before I began my design process.
Low-fidelity prototype.
- In my first iteration of the design utilizing new informational architecture, I focused on creating navigation menus.
TESTING
I wanted to see how users would respond to my new design.
- I interviewed two people to test my initial redesign.
“The information was difficult to find. I had no sense where I was.”
—Troy
User feedback key takeaways.
I didn't quite hit the mark with improving the navigation. A number of issues still persisted:
- The navigation needed to be more prominent.
- Improvements were needed to make the website more accessible.
- There were too many links on the page. They needed to be reduced and simplified.
How I implemented feedback into my design.
- The navigation became the central feature of the landing page.
- I stripped away anything that might inhibit a user's search for information.
A&B testing.
I conducted several A/B tests with my friends and family to determine ways of addressing some problems:
- The background is plain and empty. Would it benefit from having some color?
- The intro paragraph of the page is often harder to distinguish from the rest of the copy. Could the size be improved?
FINAL DESIGN
New brand style guide.
- The UI style for dol.gov is minimalist, deliberate, and easy to follow. Prioritizing big font sizes and high contrast for easy readability and high accesibility.
High-fidelity design.
Here is the first glimpse of the high-fidelity prototype of the updated of dol.gov website.
- The Unemployment Insurance and Termination pages have been redesigned.
- The text has been enlarged, making it easier to read.
- The interface is simple and intuitive.
