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 )
Case Study of
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Userbility tests
Numerous user AB testing were executed to make sure we have a solid test result and clear improvement ahead.
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.
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
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.