Equal Employment Opportunity Commission (EEOC.gov)
Redesign for the Modern Era
A complete usability overhaul for one of the most diverse user bases in America.
A complete usability overhaul for one of the most diverse user bases in America.
Adobe XD, Webflow, Adobe Illustrator, Github, Google Suite
Unsolicited UX and UI redesign of EEOC.gov, personal project.
Bulk of work was completed working part time over 4 months.
Lara Garrison
UX Research, UX Design, Information Architecture, Prototyping, UI Design
(Note: EEOC.gov went through an independent official redesign after the initiation of this project)
The Equal Employment Opportunity Commission (EEOC) is the US agency responsible for enforcing the civil rights legislation which protects American workers from discrimination in their working lives. It covers protection for such significant issues as sex, race, national origin, and disability status.
They are the primary bastion in enforcing our civil rights legislation as it relates to one's ability to earn a living, and therefore play a critical role in American society.
There are three major categories of users, each with different reasons for visiting the site:
I brainstormed some simple personas to see what an Employee and Employer's needs might look like in real life:
The nature of their mission gives EEOC.gov an especially diverse user base, and as the official access point for information and action regarding U.S. law, EEOC.gov has a moral obligation to be clear, accurate, comprehensive, and accessible, in order to facilitate fair resolution of disputes for every American.
How well is their current site living up to their mission? I would say, not well:
Majority of the home page is dedicated to information which is irrelevant to most users, and lacks clear CTAs for common issues:
Information architecture is unclear and seemingly redundant:
Content pages are difficult to skim, and lack effective accommodation of user goals:
A quick overview of the original site generated plenty of ideas for improvement, but before starting I wanted to know how actual users interacted with the site, and whether they had the same experience I did.
I recruited 5 individuals for qualitative in-person testing who met the following criteria:
Each was recorded performing 3 tasks:
I then set out to redesign what a positive EEOC.gov experience might look like, focusing on the following factors:
Information Architecture: Simplify content structure, navigation, and make pages skimmable.
From initial analysis and user testing it was clear that the organization of the site's pages, and the organization of the content on those pages were the most significant roadblocks.
To rectify this I utilized an expedited card sorting and tree testing process to bring the navigation structure more in line with our user's expectations, and ensured that clear paths were visible for each user type's main tasks.
I also applied similar principles to sort and re-phrase the content on the pages, reducing much of the legal jargon and separating pages into clearer, more logically distinct sections to facilitate comprehension and skimming.
Due to the complex legal nature of the site, I was acutely aware that any modifications to the content must be done with care. However, without access to a subject matter expert I was left to use best judgement on maintaining legal accuracy, so prior to real-life release it would be necessary to consult with an EEOC process expert to ensure 100% accuracy.
Help Center: Create an intuitive, engaging tool for users to find relevant information.
In balancing the presentation of complex information with the need to not overwhelm the user, I took inspiration from another highly accessible government-simplifying service, TurboTax.
I designed and implemented a question-based logic tree which presents one question at a time and is designed to guide users to information specific to their situation, and ensured it was easily accessible from multiple areas on the site.
By breaking down complex logic chains into discrete steps and only presenting information relevant to the user, the new EEOC.gov can significantly reduce cognitive load, create a more pleasant experience, and minimize the risk of users wasting effort on content which is not relevant to their situation.
Tone & Feel: Inspire confidence and engagement while retaining legal professionalism.
I find it important to acknowledge that many users seek out EEOC.gov because they are embroiled in difficult and emotionally charged situations, which are in the front of their mind and impacting their perception as they navigate the site.
While the primary goal was to make information accessible and understandable, I also put effort into mitigating the impact of content as 'clinical' and instead aiming for helpful and compassionate, to encourage feelings of comfort, understanding, and control.
Lofi Web Task 1: Find advice for chargee.
LoFi Mobile Task 2: Find advice on breastfeeding rights.
Using the same selection criteria as before, I had 7 new people use the new prototype to complete the same 3 tasks.
Overall, they were able to find the information more quickly, took more of a direct path, and expressed less frustration than users of the original website.
They also gave very useful feedback on lingering pain points, which prompted changes and a second iteration of wireframes:
Using Adobe XD I created style sheet with a clear, classic design aesthetic, and a set of Hi-Fi user flows:
Task 1: Guidance for Chargee (Web) HiFi
Task 2: Breastfeeding Rights (Mobile) HiFi
Significant accessibility improvements were made in the following realms:
Visual: Increased use of white space and visual blocks, improved use of headings, increased text size, ensured all color contrast adheres to strictest "AA" standard.
Cognitive: Simplified navigation, simplified writing style, added "Help Center" functionality.
Language: Added visual language selection indicator (flag) and positioned it prominently in the header.
I could have saved time by being more intentional about keeping wireframes separate from content development and style development. I worked on multiple things at the same time as inspiration struck, and that lead to wasted effort as things were iterated upon. In the future I will implement clearer delineations between different design realms to avoid re-work.
Some of the colorful & complex visual backgrounds I used are more vibrant than I would now choose for a service like this, and I think would be more appropriate for a different brand. I would keep the overall UI palette but tone it down to be less playful and more professional.
After I recorded two prototype testers hovering over the sitemap link (but not clicking it), I added an expanded visual sitemap to the footer. At the time I felt unsure about that design choice but decided to prioritize (possibly redundant) functionality above slickness. If I were to spend more time on this project I would do more research to see if users actually find the footer-sitemap useful, and if so, explore ways to make primary navigation better.