1
DEPARTMENT OF LABOR
Mary Keith
Regina Sequeiros
Shannon Wong
User Interface Redesign
USER INTERFACE ANALYSIS
2
PROTO-PERSONA
3
USER PATH
4
Wireflow
5
HEURISTIC EVALUATION
6
HEURISTIC EVALUATION
7
USABILITY TESTING
Through a series of 5 user interviews with the goal for users navigate through the website to find where to file for unemployment…
Reference Appendix: Usability Testing Feedback
8
We found out that users had a hard time locating the link to find “how to file for unemployment” and the website is congested with forms and confusing information.
“I felt confused why there is more COVID-19 info than unemployment.”
“I didn’t know where to look, so I clicked on ‘Forms’ in nav.”
“I successfully clicked my state’s link and navigated to the NY DOL page.”
“The search bar always takes me to weird links.”
9
USER FEEDBACK MATRIX
ANNOTATED USABILITY AND HEURISTICS
10
Annotated Usability & Heuristic Issues
Contact Us
-Contact Us
11
Heuristic No.9 Recognize, diagnose and recover from errors: it doesn’t give notice on when you leave the page and why.
Heuristic no.7: Flexibility and efficiency of use, as the information is not clear on how to be used.
Heuristic No. 4: It divides families of information and keeps categories apart.
The content in the drop down menus is not clear on what agency should be contacted. Needs clearer information.
The drop down menu titles are organized hierarchically, this makes titles clear by agency name.
Links that take you to external sites are fill-out forms organized by time.
Annotated Usability & Heuristic Issues - About Us
12
LATCH COMMENTS
USABILITY HEURISTICS
Heuristic no. 10 Help and documentation. A bit more information would be helpful to guide the user on what to expect from each category
Heuristics no.4: the information is organized by families of years and related topics.
Organized by hierarchy although,
some are not related to the same category which seems to be a page dedicated to finances.
Time organization allows user to easily identify budgets and yearly performance.
Annotated Usability & Heuristic Issues - Homepage
13
LATCH COMMENTS
USABILITY HEURISTICS
No. 7: Flexibility and Efficiency of Use. Quick links are below fold, so not readily accessible.
No. 10: Help and Documentation. Twitter is constantly updated, but only shows one post.
No. 4: Consistency and Standards. Homepage sets tone for remaining consistent pages.
The navigation bar is organized by categories and hierarchy, but needs better system for user.
The news section is organized by time and placed above the fold for easy access by users.
The Quick Links would could benefit from being organized alphabetically.
Annotated Usability & Heuristic Issues - FAQ
14
LATCH COMMENTS
USABILITY HEURISTICS
No. 6: Recognition Rather Than Recall. A lot of information for user to recognize anything.
No. 7: Flexibility and Efficiency of Use. If user knows what to look for, the search bar helps sift.
No. 4: Consistency and Standards. Homepage sets tone for remaining consistent pages.
“Forms by Title” is organized alphabetically, but needs a less overwhelmed sight.
The dropdown menus give follow hierarchy and categories and close for less overwhelming views
“Forms by Title” should not automatically open on the “Forms” page and should be at the bottom.
Annotated Usability & Heuristic Issues - Forms
15
Annotated Usability & Heuristic Issues - Forms
16
LATCH COMMENTS
USABILITY HEURISTICS
No. 4: Consistency and Standards. There is no navigation bar, so users could be confused.
No. 8: Aesthetic and Minimalist Design. FAQ is content heavy, so needs to be streamlined.
No. 7: Flexibility and Efficiency of Use. Search gives users the freedom to search for q’s
There is hierarchy throughout the page, but eyes go straight for the blue links, nothing else.
The topics are organized alphabetically, which helps users if they know what to look for.
FAQ should categorize with dropdowns for questions, so on single page with no redirection.
Annotated Usability & Heuristic Issues - News
17
Annotated Usability & Heuristic Issues - News
18
LATCH COMMENTS
USABILITY HEURISTICS
No. 4: Consistency and Standards. Details not categorize which makes it hard to decipher.
No. 8: Aesthetic and Minimalist Design. Links are not placed effectively.
No. 2. Match between system and the real world. Icons are in locations you can find on other sites.
The location of the links may not be user friendly with those with a disability.
The hierarchy within the header & footer are clear for the user to navigate to other pages
The content should be organized alphabetically or category as there is no hierarchy
COLOR ACCESSIBILITY
19
Color Accessibility - Dark Color Scheme
20
21
22
Dark Color Scheme - AA Compliant
23
Dark Color Scheme - AAA Compliant
24
Color Accessibility - Light Color Scheme
25
Light Color Scheme - AA Compliant
26
Light Color Scheme - AAA Compliant
27
FONTS
Arial for Titles
28
Verdana for text
Navigation- Department of Labor
29
Navigation
30
Primary Navigation Bar:
1.Topics
2.Agencies
3.About Us
4. News
NAVIGATION - USABILITY TESTING
Through a series of 4 interviews we discovered few main common problems...
Reference Appendix: Usability Testing Feedback
31
Inconsistency between website page layouts
Duplicative Information on the website/mobile site
The user did not know to click on the logo to return home, so used back button repeatedly instead.
Organization of information was overwhelming - content-heavy site
Breadcrumb navigation not consistent
Card Sorting- Content
32
Reorganized- Card Sorting
33
Sitemap
https://writemaps.com/wmaps/shareMap/dvxpzyd0r8gdvst
https://www.awesomescreenshot.com/video/2827077?key=cd1d0411a448d859d6f7837db1051e57
34
Site Map
35
Prototype
36
NAVIGATION BAR
Secondary navigation bar
Navigation- Iteration- Design
37
38
Navigation- Iteration- Design
Logo and Navigation bar:
Considering the accessibility analysis, color and font implemented readability by keeping bar and logo name clean with black hovered titles taking advantage of the white color as the background.
Secondary Navigation bar:
During the Navigation test,people clicked on “topics” as their first reaction, finding the content confusing and overwhelming While card sorting, content organized by “popular links,information for the most common users “Employees” and “Employers”.
39
Home Page:
Organized by the “Z” formation highlighting to the users’ eye relevant information found during the Navigation Usability Testing. Common clicks were “Quick Links” and “Topics”.
To create more trust on user and purpose of the page and the Department of Labor, I added a section “About Us- Our Mission” . The color orange implemented on this section as part of the logo branding studied during the color accessibility test, this color grabs attention, it’s warmth and welcoming.
Original Page
VS
40
Footer:
Logo strategically relocated to reduce jamming of relevant information.
The links were sorted by DOL’s organizations leaving social media communication links on the right bottom. New arrow up helps users scroll up at pages with long content.
Original Page
DOL’s Team
Desktop vs Mobile
41
Desktop Navigation Elements
42
Goals:
Mobile
43
Goals:
Responsive Design
44
45
Prototype Test- Iteration
By testing the prototype from HW 9 the following sections needed iteration:
Interaction Design
46
Testing and Iteration
47
On week 11-12 I continued to iterate on major blockers for our testers. The second reason for iteration was to refine the UI aspects to make them more appealing and more accessible.
Testing consisted on:
Clicking states and analyzing information on Navigation bar, Footer and Home Page to find concise content and intend within the links.
Usability Testing Feedback
48
Navigation Bar:
Solution:
Made the hover state text darker.
menus or pop-up menus.
Solution:
Made the pop-up menus centered in the page. A close “x” is placed in the corner. The boxes surround the content without wasting white space.
Search Bar:
Solution:
Made a search bar that expands while clicking
Usability Testing Feedback
49
Home Page Body Content:
Solution:
Erased the bigger title and left only subtitle of
“Mission Statement”.
2. Quick links seems like a UX/UI fault and not best practices. This this is complicated aspect without knowing all the AI of the site and certain information the DOL possibly only has access to determine the most popular links.
Solution: After reading best practices in the Norman Group website, a quick solution is to change title to “popular links”, “most visited” “frequently clicked”. Based on this being a government site I chose “Frequently Accessed”
Usability Testing Feedback
50
Footer:
Solution:
Included logo into the footer and deleted the hover states repeated on the navigation bar.
Iterated Desktop Clickable Prototype
51
Iterated Mobile Clickable Prototype
52
Visual Design
53
54
55
Dark Mode Iterations
Logo Placement
Twitter Dark mode
Frequently used same size text
Mission Statement
Takeaways
56
Redesigning the Department of Labor was a true challenge. This page contains a vast amount of information. We based our design primarily on testing the original site and analyzing the tendencies all the interviewers had. It would be helpful if we had time to collaborate with the DOL team to understand the Information Architecture
These complex projects require more time to test more and iterate (logo, secondary pages, dark mode button, translate,voice). The purpose of the UX/UI designer in projects with large institutions is to facilitate access to valuable information to the user, making their lives easier, such as filing for unemployment that can benefit the user and their family.
Appendix HM 9
57
Navigation Usability Matrix
58
59
Appendix Homework 8
60
61
62