top of page
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.


Filing claims with confidence 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

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


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


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

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


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

Mobile-friendly website


Menu - expanded

Menu - benefit programs

Homepage below the fold

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

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

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

EDD Accessible Pages

Standard and accessible versions of the website. Click the image to enlarge

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:





On some pages, the text is too small.


CTA isn't clear on the eligibility page.


Signup and login pages are too similar.

Text is too small on mobile





The text is too small on the menu.


Rearrange information hierarchy to stress "Select all that apply".


There are many apply buttons and they all lead to the same page.

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

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

EDD Summary
View Other Projects
bottom of page