Case Study: Responsive Web Design-EDD (Employment Development Department)
CASE STUDY: REDESIGNING A GOVERNMENT WEBSITE
Srujana Munamala
UC Berkeley Extension
UX/UI Bootcamp 2019
Role: UI Designer
Tools used: Adobe XD, Invision, Icons8
PROJECT OVERVIEW
The goal of this challenge was to redesign a government website so that it is easier for users to accomplish their tasks. Our team decided to redesign the EDD (Employment Development Department) website.
Our team conducted the research together, but everyone created their individual prototype.
2
ABOUT EMPLOYMENT DEVELOPMENT DEPARTMENT
“For over 70 years, the Employment Development Department (EDD) has connected millions of job seekers and employers in an effort to build the economy of the Golden State.”
Their website allows users to file multiple claims, search for jobs and other necessary forms.
3
BEFORE
4
AFTER
5
6
USER INTERFACE ANALYSIS
USER TESTING
7
We asked users to complete the following tasks:
File a claim
Find a job
Translate the page from English to German and back to English
Locate offices
Accessibility
Users had no issue with finding the “File a Claim button”. However, some of the users got stuck in a loop while filing a claim.
File a claim
One user complained that there were too many links in this section and wished that there was a way to optimize it.
Find a Job
RESULTS-USER TESTING
The list on the right showcases the tasks that users had challenges.
8
USER PERSONA
9
Meet Joe James. He is a 27 year old that graduated with a double major in business and public administration. He grew up with a younger sister and a single mother. He was recently laid off from his HR job,and plans to go back to school for a master’s degree in social work.
His goals are to:
Courtesy of Janet Calderaro and Jenny Huang
USER FLOW-SEARCHING FOR A NEW JOB
10
Joe enters his location and the kind of jobs he is looking for.
Step 2
Joe sees the position(s) that he is interested in applying for.
Step 3
Joe applies for the job, passes the interview, and receives an offer!
Step 4
Start
Success
Joe must go to Cal Jobs Portal.
Step 1
This is how Joe would search for his new part-time job.
INFORMATION ARCHITECTURE
11
RED-LINE ANNOTATIONS
12
A red-line annotation allows UI Designers to understand what areas of the website are good and bad. It was clear that when I design the new website, I need to focus on condensing the information.
CARD SORTING
13
Group Activity. Credits: Jenny Huang, Janet Calderaro
SITE MAP
14
EDD’s website had a lot of documents regarding insurance claims, jobs, additional resources, and more. This site map shown to the left allowed me to organize the information so that the website will be much more easy for users to complete their intended tasks.
MOODBOARD
15
Courtesy of: Jenny Huang
A moodboard allows a UI Designer to determine how certain aspects of the website should be designed.
STYLE GUIDE
16
Our team created the following style guide. This allowed us to have continuity when we are designing the screens for the website.
Courtesy of Jenny Huang
17
PROTOTYPING
WIREFRAME-DESKTOP
18
Joe is currently on the homepage of the EDD website.
Joe goes to the “Find Jobs” tab and clicks on CalJobs Portal.
Joe goes to the CalJobs Portal.
Joe searches for a job (i.e. Account Clerk) and sees the results of available positions.
WIREFRAME-MOBILE
19
Home Page
CalJobs-Home Screen
Pop-up Menu
Joe was curious to see if he could perform the same steps on his iPhone as well.
WIREFRAME-MOBILE (Cont.)
20
Results Page
Details of the position
WIREFRAME-APPLE WATCH
21
Launch Screen
Main Menu
Claims
Jobs
Joe has filed his claim, and applied for a couple of positions as well. He wants to be able to manage all of his forms without using his iPhone nor Desktop.
HIGH FIDELITY DESIGN
22