Frame 52_2.png

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

EDD 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.

EDD Types of Users

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.

EDD Lo-Fi Wireframes Desktop Exhibits
EDD Lo-Fi Wiregrames Mobile Exhibits
HI-FI DEKSTOP PROTOTYP