To address these issues, a comprehensive user-centered approach was employed, encompassing:
Initial website review: A thorough examination of the existing website to identify pain points and areas for improvement.
Research: Analysis of DOL forums, social media, and current website usability tests using Useberry to gain insights into user needs and expectations.
Useberry results
Heuristic evaluation: A systematic assessment of the website's adherence to recognized usability principles on the most used functionalities.
Heuristic evaluation home page
Heuristic evaluation menu
User persona development: Creation of a representative user persona to empathize with the target audience and guide design decisions.
User persona
Most searched DOL pages:
- Contact DOL page.
- Unemployment Insurance.
- Continuation of Health coverage.
- Frequent ask questions.
Pain Points:
- The website information is hard to recognize and understand for first-time users.
- The navigation menu and labels are not descriptive enough to quickly find what users are searching for.
- Too many links listed make it overwhelming to use the website.
- Users don't feel comfortable using the website due to the technical language.
The research findings revealed the need for a significant overhaul of the website's information architecture, navigation, and language. Key improvements included:
Simplified language: Replacement of complex jargon with plain language to improve comprehension and accessibility for all users.
Streamlined information architecture: Reorganization of website content into a clear and intuitive hierarchy, making it easier for users to locate the information they need.
Enhanced navigation: Redesign of the navigation menu with descriptive labels and drop-down menus to facilitate quick and efficient access to specific sections.
To achieve this improvements, I facilitated a virtual card sorting with possible DOL's user.
Cardsorting image
Mid-fidelity wireframes were created for both desktop and mobile versions of the website, incorporating the design improvements. Some of the decisions were:
Hero space to display important news with a brief description so that users can get the most current information.
New main categories were placed in the header with labels that allow the information to be identified internally.
Drop-downs to show the options inside to facilitate navigation and search.
Breadcrumbs to facilitate user navigation on the internal pages.
Desktop mid-fidelity prototype
5-second test: These wireframes were subjected to a 5-second test to evaluate user comprehension and identify any lingering issues. The order in which the wireframes were displayed was interleaved to reduce the learning effect between desktop and mobile.
5 second test
Hero image with 3 sections to give the possibility of showing more news at the same time; by hovering over the image, you can see more information.
Language assistance within the header to facilitate access for people looking for the Spanish version.
Blog section, Twitter, contact us, and federal government websites on the home page.
Based on the feedback from the 5-second test, hi-fidelity wireframes were developed, refining the visual design and ensuring consistency across desktop and mobile platforms.
