top of page
Group 260862845.png

Project: Government Agency Website Redesign

Project type: Bootcamp Project

Date: August 2023

Time: 2 weeks

Member:

Jack He - UI/UX Designer

Frantz Drouillard - UI/UX Designer

Tools: Figma, Wix.com

​

My responsibilities were -

As a UI designer, I led the redesign efforts, utilizing Figma as the primary tool for prototyping and design iterations.

Project Overview

This project entailed redesigning the Department of Labor website to address its current usability challenges and enhance user experience. As a UI designer with a focus on UX, I spearheaded the effort to simplify navigation and optimize content accessibility.

The problem

The existing Department of Labor website was overwhelming and difficult to navigate, hindering users from finding essential information efficiently.

The solution

By streamlining menus and improving search functionality, the goal was to create a more user-friendly website, enabling users to access relevant information quickly and effortlessly.

Approach

identify potential problems

Our first step is as users our self to identify the potential problems together and list it all together. We have decided to pick on of the category "Leave Benefit“ page to focus on.

Group 1 (1).png
Group 2.png
Group 3 (1).png
Group 4.png
Group 5.png

Heuristic evaluation Summary

​

Overall, the heuristic evaluation yielded positive ratings, indicating a strong foundation in the site’s design. Key areas like navigation consistency, clear terminology, and the prioritization of content above the fold received high marks. Comments suggest the site is straightforward to use, with breadcrumbs and headers that guide the user efficiently. However, there are noted opportunities for improvement in resource visibility and page design consistency, ensuring every user journey begins with clarity and purpose.

image 8 (1).png

Understanding User Needs

  • Conducted detailed user interviews and usability testing sessions to pinpoint user difficulties and preferences.

  • Analyzed feedback to identify key areas for improvement, focusing on navigation and content accessibility.

Proto Persona: Meet Helen ​

​

As a new mom and production line worker, Helen's story grounds our redesign. She’s humorous and resourceful but new to government sites and under pressure to find leave information quickly.

 

Our task: make the Department of Labor website a clear, quick, and reassuring resource for her FMLA needs.

Group 1.png

User Path â€‹

​

This user path map tracks Helen’s journey from the home page through to the FMLA page, with red lines marking her route. It shows her clicks from general topics to specific information about wages and sick leave, highlighting the complex path to the crucial FMLA details she needs.

image 1.png
Group 1 (2).png

Better Navigation

User Feedback Highlights

​

After conducted 4 testing, I discovered that all the testers shared the exact same thought. When I tried to direct users to the "Leave Benefit" in the topic header, they found the extensive listing overwhelming and difficult to read the listing.

​

After four interviews, the common threads were clear:

  • 'Leave Benefit' info is complete but packed.

  • Too many links under single topics.

  • They prefer straight to the point navigation.

  • Text clarity is good, navigation labels not so much.

Group 1 (1).png

Usability Test Scores

​

We set three tasks to gauge navigation ease on the DOL site:

  • Task 1 hit a snag; finding topics wasn't intuitive.

  • Task 2 was a breeze, landing a perfect score.

  • Task 3 was tricky; the PDF was elusive but not critical at first contact.

image 1.png

From the card sorting results, we streamlined the DOL site's navigation by:

​

  • Removing redundant or rarely used topics to declutter the interface.

  • Separating key content areas into distinct, easily navigable categories, like 'Rights and Benefits' for direct access to crucial information.

  • Grouping related themes such as 'Home Page' features and 'News and Resources' for a cohesive user journey.

Group 1.png

New Sitemap Implementation

After thorough card sorting, we've unveiled the Department of Labor's refreshed sitemap. It showcases a strategic condensation of topics and introduces clearer category definitions, enhancing the user's journey right from the homepage.

Group 1 (3).png

Priority Matrix

​

Dividing user feedback, we see top user needs like readability and navigation clarity, contrasting with less urgent DOL fixes. It's a clear guide on what to tackle first.

Group 3.png

Design Inspiration and Direction

  • Created multiple wireframes and prototypes, refining designs based on continuous user feedback.

  • Iterative process to ensure the final design met user needs effectively.

InVision Moodboard Overview

​

A visual spread showcasing a collection of UI samples, UI patterns, and government agency website designs that inspired our approach.

image 11.png

UI Style Tile​

​

The UI Style Tile set the stage for a simple and smart design. We picked blue for a professional look and easy reading. This guide helped us make a website that's easy to use and looks good, sticking with the serious vibe of a government site.

image 1.png

Usability Enhancements

​

Based on feedback, I will redesigning the listing in “Topic”. I'll be removing the images selfies, some unnecessary items in listing, and drag some to the empty white space, group important topics in a blue box like the “Key Topic” now, similar to how it's currently done. The blue box will be the same size as the topic boxes, making it easier for users to spot where they need to go. This way, users will have a clear path to the information they're looking for.

image 11 (1).png
image 13.png

I believe the redesign should start by aligning everything better with the content. Currently, things look too narrow on mobile devices. The navigation bar, especially when it has actions, needs larger text. This will make it easier to read and click on, improving the user experience. Making these adjustments will help users engage with the website more comfortably.

Full Website Prototype Showcase    Click to see full prototype

​

Showcasing the thoughtful layout of key pages and the of features that ensure a user-friendly experience. It's the visual story of our redesign, from the homepage to the detailed inner pages.

​

The goal was to make everything easier and more user-friendly. What I did? 

 

  1. Moved top news and stories up front.

  2. Made text bigger and used space better for a cleaner look.

  3. Kept the header simple and used colors wisely.

  4. More visible blog posts for variety.

  5. Cleaned up the footer to show just the essentials.  

Group 172.png
Group 175.png
Group 177.png
Frame 15.png
Group 176.png

Mobile Design Adjustments

​

Based on feedback from testers, I have implemented several changes to improve the mobile experience on the Department of Labor website.

​

  1. Increased the font size for improved readability.

  2. Moved the "News" section to the second top of the homepage.

  3. Relocated the menu button to the left side of the screen for easier accessibility.

  4. Simplified the menu bar by reduce the categories and providing a dedicated page for additional options.

Group 183.png
Group 189.png
Group 188.png
Group 184.png
Group 187.png
Group 185.png
Group 186.png

Header, Footers & Header Navigation Components

​

In the redesign, I simplified the footer to include only essential links, ensuring it's not overcrowded. For the navigation bar, I focused on clear categorization, grouping related items together as identified in the card sorting activity. 

image 30.png

Homepage Redesign: Original vs. Prototype

​

On landing page, prototype removes the overwhelming mosaic of user selfies, opting for a cleaner, more impactful first impression with larger visuals and more informative content.

Group 1 (4).png

The redesigned Department of Labor website will retain the existing structure while improving user- friendly on the navigation bar header. We have removed the overwhelming listing format and introduced a larger font size to enhance readability. This update aims to create a more user-friendly experience for visitors while maintaining the familiarity of the current design.

Then I did a quick testing with my partner, discussed with him that does the redesign aligns with the testers?

​

What we think is,

  • The straightforward color scheme also helps users easily identify navigation options.

  • Also keeping the original dropdown menu style to the header is recommended.

Group 1 (5).png

The Outcome of Our Redesign

​The revamped Department of Labor website marks a significant leap forward in usability and engagement.

​

  • Visible, simpler and spending more time exploring the site.

  • More pages per visit, suggesting more exploration during the testing.

  • Feedback highlights easier navigation as a big win.

Lessons Learned and Looking Ahead

  1. Empathy in design is crucial for meeting real user needs.

  2. There's always room to make things better, and we're on it.

  3. Seeing the site from a user’s perspective was key.

​​

The journey taught us the value of empathy in design, the importance of iterative testing, and the power of collaboration. As we reflect on the process and the outcome, we're inspired to carry these insights forward, continually improving and innovating to meet user needs.

image.png

Thank you for taking the time to explore this project.
Your interest and feedback are greatly appreciated.

more bootcamp projects

image_edited.jpg
Group 26086294 (1)_edited.jpg
Virtual Room Decor dApp
Enhancing the way NFTs are displayed through personalized, interactive virtual rooms.
image_edited.jpg
Group 260862843 (1)_edited.jpg
Non-profit Organization Website Redesign
Revamping 'Hugs for Brady' for better user experience, focusing on cancer awareness and encouraging support.
bottom of page