California EDD Website Redesign
My new desktop and mobile website design guides users through the claim process with clarity and confidence.
PROJECT OVERVIEW
Filing claims with confidence
EDD.ca.gov is a frequently used government agency website. It's critical for people in need of financial aid from unemployment, but the current website is very outdated and confusing to use.
Over the course of 4 weeks, our team of 3 designers worked on redesigning EDD’s desktop and mobile websites, which included 6 rounds of testing with 27 users, and many iterations.
Click on the phone screen to see the interactive prototype. Click here to see the full view
“[EDD] needs to be upgraded. Frankly, it needs to be simply strewn to the waste bin of history… But nonetheless, we inherited that waste bin and as a consequence, we’ve been trying to patch it together.”
- Gavin Newsom, California State Governor
PROBLEMS AND SOLUTIONS
California EDD website before and after our redesign
EDD homepage before the redesign (January 2021)
The website has an overwhelming amount of information. Users feel like each click brings them to a page with more links.
Users aren't sure what the claims categories are.
The website navigation is barebone, menu categories unclear.
Certain visual elements, e.g., buttons, are inconsistent across the whole website.
EDD Homepage after my redesign
I re-structured the information architecture of the website and added more visuals. I also designed an interactive guide to only surface information a particular user cares about.
I re-defined claim categories based on user feedback.
I re-did navigation menus to provide the most relevant information at first glance.
I did a visual consistency pass to the website while still adopting the original color palette and logo.
"I don't need to be a rocket scientist to figure it out now."
EDD User
"It looks modern, won't frustrate me to use, not overwhelming with information."
EDD User
MY IMPACT
Doing my best to make impact
From user testing, the redesign reduces the time needed to find relevant information significantly and has received very positive feedback from test participants.
I've tried to contact EDD to present my solutions, however, I haven't received any response yet. I believe my redesign would benefit not only users but also the institution by reducing customer service inquiries.
My goal
My goal is to help the full range of EDD users feel confident to file a claim without feeling overwhelmed or afraid of making a mistake in the process.
EDD Homepage (January 2021). Click the image to enlarge
My role
I was responsible for the entire mobile prototype. On the desktop side, I designed the Benefit Programs Overview page, Eligibility page, and footer.
My responsibilities also included user and market research, wireframing, prototyping, and testing.
EDD Unemployment Overview (January 2021). Click the image to enlarge
My design process
Design process. Click the image to enlarge
WEBSITE STATISTICS
Deciding which pages to prioritize
I found that the top pages by Google search are Home, Claims, and Unemployment Overview, therefore I focused on those first to have the biggest impact.
EDD traffic data. Click the image to enlarge.
Source: Ubbersuggest.
Click the image to enlarge
DEFINING USERS
Who are the EDD users?
I was as confused as users when trying to navigate through the website. However, it was crucial to understand who is eligible and what types of claims are available.
Types of users and benefits on EDD website. Click the image to enlarge
USER TESTING ON CURRENT WEBSITE
Users don't know how to navigate the website
"I'm self-employed, so am I an employer or an employee?"
After defining the types of users, I conducted four user interviews, five user tests, and a heuristic evaluation of the current website.
"Oh my god, a city of links..."
With such an overwhelming amount of information on the website, users don't know how to navigate it, and what claim category is right for them.
LO-FI DESKTOP WIREFRAMES
Re-structure information and make visuals consistent
Once I uncovered the main issues with the current website, I sketched out ideas and created lo-fi wireframes that focused on better information architecture and consistent visualization.
More clear menu titles based on users feedback
Removed many confusing login buttons
Moved page translations and accessibility settings to the top
Most important information available above the fold
Added more information about each section
Organized the content and improved visual hierarchy
Redesigned the footer and organized information
Added accessibility and translation options at the bottom
LO-FI MOBILE WIREFRAMES
Mobile-friendly website
Homepage
Menu - expanded
Menu - benefit programs
Homepage below the fold
LO-FI PROTOTYPE TESTING
Users want all the information right away
I ran A/B tests with five users on desktop and six on mobile to decide which navigation works best for users.
For desktop, users preferred the dropdown menu. For mobile, cards on the screen. Users felt that these designs provide all the necessary information right away without many clicks.
HI-FI DEKSTOP PROTOTYPE
Bringing everything into hi-fi
We divided the pages among the team. Each designer was responsible for creating hi-fi wireframes of their specific pages. I was responsible for the entire mobile prototype, benefit programs overview, and eligibility page.
EDD hi-fi desktop demo. Click here to see the interactive prototype
HI-FI MOBILE PROTOTYPE
Why iPhone 8?
I deliberately chose a slightly outdated phone with a smaller screen as our design baseline as EDD users come from all walks of life.
Hi-fi mobile demo. Click here to see the interactive prototype
ACCESSIBILITY TESTING
The start of an accessibility dream
EDD claims to pass AA level standard criteria for accessibility, but what is done is very minimal, not to say that, from my own testing, not all elements pass the test for optimal color and font contrast ratios.
As my goal is to help the full range of EDD users, I designed two accessibility features: text size increase and high-contrast adjustment.
Standard Size
Text Size Enlargement
Contrast Change
Standard and accessible versions of the website. Click the image to enlarge
HI-FI DESKTOP USABILITY TEST RESULTS
Some usability issues discovered in hi-fi
I conducted five usability tests focusing on the "Applying for Benefits" flow. A few usability issues were discovered:
1
2
3
1
On some pages, the text is too small.
2
CTA isn't clear on the eligibility page.
3
Signup and login pages are too similar.
HI-FI MOBILE USABILITY TEST RESULTS
Text is too small on mobile
3
2
1
1
The text is too small on the menu.
2
Rearrange information hierarchy to stress "Select all that apply".
3
There are many apply buttons and they all lead to the same page.
FINAL THOUGHTS
A lot of testing and a lot of challenges
-
I received very positive feedback from participants regarding my EDD website redesign
-
It was challenging to work around the existing filing a claim system. The system isn't user-friendly, but I had to match it as it's unlikely that EDD would change it anytime soon
-
I had to work with the existing EDD logo and color palette as these represent the brand image and shouldn't undergo drastic changes at the same time as the website
FUTURE OPPORTUNITIES
Iterate, iterate, and iterate more!
There are still many things I would like to improve if I had more time. However, the new design has achieved its goal - users feel confident to file a claim without feeling overwhelmed or afraid of making a costly error in the process.
For future iterations, I would like to focus on:
-
More iterations of desktop and mobile websites
-
Redesign of more pages: benefit programs, employer portal, career services, and FAQ
-
Claim filing system redesign
View Other Projects
