top of page
UX|UI Redesign

During the Panamic time, many people have questions for the DOL standard, benifit and needed to look for resources. But instead experiencing challenges to find the information on DOL the webpage. The goal is to redesign the infrastructure of a government official website and create a user friendly experience to the public. Reverse  the frustration, and accelerate the design function. Recreating a human-centered government agency website with fresh look.

U.S Department of Labor ( DOL )

Screen Shot 2021-03-27 at 9.07_edited.pn

Case Study of

Screen Shot 2021-03-16 at 7.58.25 PM.png
Screen Shot 2021-03-16 at 9.15.03 PM.png

Accessibility & Authenticity

The original website of the Department of Labor (DOL) The process of revising and testing the site was significant to enhance the user experience. Conducted independent research and competitive analysis on multiple aspects of products and experiences from a UI, UX, and product perspective. As a team of 3, we conduct user research and usability testing with patients, physicians, and care team members on a weekly basis to inform design decisions and iterate on product designs. Conduct qualitative research and distills insights, problems, and opportunities.

DOL_project overview.png
Architects at Work

Problem statement

The Department of Labor’s website was very confusing and cluttered with the wall of text. while the overall experience was frustration and hardship to navigate through overloaded information. To solve this, I plan to reorganize the site map and also develop a new brand voice with the goal of making the visual design more friendly, understandable, and visually stimulating.

crane.gif

User Persona

“ Women are more patient than men, but both only last an average two-and-a-half minutes “                                       

                       -responsesource.com

Value Proposition

With user-friendly and more human-centered UI element and organization structure, the overall experience to the government website can be lifted to it’s organiz purpose and optimize the mission of helping the public with work-related benefits and rights. 

hello-i-m-nik-umFPf301OjQ-unsplash.jpg

Affinity Diagram

User research and data were collected as a team of 3, We gathered our interview data from our stakeholder and users and after arranging it into an affinity diagram we saw that the main pain points for our users was that the site was difficult to navigate, out of date, and that it was almost impossible to find information users find relevant.

Department of Labor - User INSIGHT.jpg
Competitor analysis

DOL Priority
Matrix

Using priority matrix to Identify critical tasks of the projects, compare the urgency and importance base on the complex that analyzes of the criteria. 

Department of Labor - prioritization matrix.jpg
red dot anotation2

Redline Annotations 

Traditional navigation can confused users who enter the website via a micro-site subsection. Micro-site can break larger sites down into manageable content areas for user to digest. I did the redline and annotated the usability heuristics issues and design structure base of the usability test and feedback from the group research Listed out the pain points from our user interviews and point out potentially improvement from the current site. To help brainstorming and better understanding the information architect construction we are aiming.

Analyze UI solutions base of the existing website’s Information structure, meaning, relationships, overall visual and user comprehension.

Frame 4.png

Redesign the information architect structure.

The flow needs to make sense without any dead end, we did realized that are couple dead ends and disconnected between the topics. 

Reconstructed Sitemap 

Good web design is about creating an experience for site visitors that is easy to use, navigate, and, most importantly, accessible to everyone. As website accessibility becomes more common and mainstream, web designers will continue pushing the envelope of what’s possible while maintaining attractive design.” To reorganize the content and develop a structure that would make it easiest for users to find what they need without having to dig for it.

Department of Labor Sitemap (1).png

Color Theme
Redesign

Clean, clear icons were designed and used throughout the site to maintain a modern visual in keeping with 
DOL's revolutionary innovation. User interface design was solely design that's taking the current color theme that Department of Labor had and recreate a UI visual deliverables to fit the specific design challenge.  Tested and recreated a few designs variation to keep the iconic look  but with a modern and clean twist in Adobe Illustrator. 

DoL-01.jpg
Screen Shot 2023-03-15 at 3.19.45 PM.png
DOL logo
Dol_logo redesign

User Interface Redesign

Research, Analysis, and Rebuild

With user-friendly and more human-centered UI element and organization structure, the overall experience to the government website can be lifted to it’s organiz purpose and optimize the mission of helping the public with work-related benefits and rights.

UI-Style-Tile_iteration (1).png
DoL_navigation organization1.png

Create a visual presentation of a physical / three-dimensional object. Using simple lines and curves, the wireframe model is used as a skeleton for building the 3D object, to help built the fundamental structure of the whole map.

Wireframe 
Development

Mid-fidelity Prototype
 

Using Figma implementing responsive designs that improve the user's experience on desktop and mobile devices

Screen Shot 2023-03-09 at 9.20.23 PM.png
bram-naus-oqnVnI5ixHg-unsplash.jpg
FOL button

UI Design Guide 

The new UI design implements the brand identity through the color theme,  typeface and icons, elevate the site to more professional, settle, modern and color-coordinated categories . UI assets across the web content; this includes navigation menus, front end, and in-experience interaction interface.

DOL userbility test2

Userbility tests

Numerous user AB testing were executed to make sure we have a solid test result and clear improvement ahead.

Homepage (2).jpg

High-fidelity
Prototype 

Using the new color theme, the site is now having complete different vibe, more modern, clean, professional, less wall-of-text and color-organized- content that is easier for the user's eye to visually flow through the site and analyze where to find the answer that they are looking for. 

Screen Shot 2023-03-09 at 9.01.27 PM.png
Screen Shot 2023-03-09 at 8.56.34 PM.png

Final Design

  • Creates high fidelity design assets for acceptance, development, and delivery to market in partnership with technology colleagues

  • Masters planning, conducting, and synthesizing ethnographic studies and primary interviews with user/customers and major stakeholders

Labtop monitor

Key takeaway

When the site is content-heavy, it takes a lot of effort to sort out what's optimal solution for users navigate without negative feelings. It takes a lot more than just updating the interface and design. You really need to dig deep into the fundamental construction and rebuild from ground zero to make sure the whole information structure is steady.  This would be one of the best challenges I've encountered. 

DOL graphic.png
bottom of page