Project Overview

THE PROBLEM:

Improve the usability of the California EDD website

THE SOLUTION:

Redesign the website by integrating new UI components

OUR ROLE:

UI designer

TOOLS:

Invision, Figma & Miro

Proto Persona

link Available Here

Statement

The Employment Development Department (EDD) offers a wide variety of services such as Unemployment Insurance, jobs, and training, etc. Our user utilizes the EDD website because she lost her job due to COVID-19. She uses this government agency to access her unemployment insurance benefit every other week.

Wireflow

link Available Here
On this flow you can see the steps that users should take to login to Benefit Program Online. While we understand this is for security reasons, it takes the user a long time to login.

Wireflow

link Available Here

User Research Plan

link Available Here
We want to understand how users have been utilizing the EDD website. Today with began by conducting 2 user interview in order to discover users’ concerns and find out essential factors that will help users to use the EDD website easier.

Research Question?

As a user researcher, I want to understand what prevents users from using the EDD website more often

Objective 1:

What is our user expectation from EDD website?

Objective 2:

What are your main concerns using EDD?

Objective 3:

What are the example of bad user experience in EDD website?

Moodboard

link Available Here

Unit 9 | IA and UI Navigation Prototype

Analyze government agency navigation

link Available Here

Usability tests

on the navigation of a website Link Available Here

Notes From Interview 1

What do you think about login process?

I prefer that both Benefits and Employer login have username and password in the same location, it will be more convenient.

What do you think about the Navigation bar?

The Main Navigation bar is fine, but the Login was hard to find at first. Also, I don’t like the color of the Navigation bar when my mouse goes on it.

Why don't you like it? Is it hard to read or it’s readable?

Yes, it is readable just don’t like the color.

Notes From Interview 2

What do you think about Login process?

I’ve used EDD website before. But at first login and claim was confusing but after almost 20 minutes of searching, reading and learning about the process I know where I should go or what account I should create.

What do you think about the Navigation bar?

After knowing how it works it is easy and straightforward but at the beginning was definitely confusing. I wish Benefit and employee login was in the middle or somewhere more clear area. At first I wasn't sure that, should I go to Claim or should I go to Benefits Login?

Card sorting

Link Available Here , Link for Videos are Available Here

Sitemap for navigation

link Available Here

Lofi Prototype

Link Available Here , Clickable Prototype link Available Here

Lofi Prototype

link Available Here

Unit 10 | Homepage UI Design and Testing

User Persona

link Available Here

First Iteration on header and footer navigation

link Available Here

Second Iteration on header and footer navigation

link Available Here

Clickable prototype for a Desktop

First Iteration Link Available Here
Second Iteration Link Available Here

Five-second usability test of clickable prototype

link Available Here

First Iteration note:

Search is big!
Too much information on the first page
EDD response is good and bold enough to find
Titles on the bottom is confusing

Second Iteration note:

You can tell what is the purpose of the website.
“UI online” for someone who don’t know what UI is as abbreviation is confusing.
Having description for login is good
A phone or email on the footer for immediate contact is nice.

UI Style Guide

link Available Here

Adjustments

We made some changes to our slides best of the feedback that we received from TA.

Units 11 and 12 | Government Agency Redesign and UI Redesign Case Study

UI Style Guide 2

link Available Here

User Testing

link Available Here
Finding the login and navigating the website were the biggest issues our users had.
All of our users were able to do the tasks successfully.
One of our users is dyslexic and had no negative feedback about the accessibility about our website.

Screen Iterations

Lo-Fi Wireframes , Hi-Fi Wireframes

We increased the opacity on the pictures and added a gradient over it for text. We added icons next to our global navigation buttons for clarity and added a home button.

Final Desktop Prototype

link Available Here

Hi-Fi Mobile Version

link Available Here

Next Steps for this Project

Finish creating the rest of the pages for desktop.
Ability for user to see previous and current submissions.
Do more iterations on mobile and tablet.
Recent News section.
More accessibility testing.

View Next Project