2020 could be described in so many words. On the top of my list would be uncertain. I was bartending full time at the start of the year and 3 months in I was unemployed. Similar to the other 3 million people in California I was dealing with a radical change.
Every 2 weeks like clockwork, I logged into my unemployment account checked some boxes, put in some dates, and sent that off for approval. Something changed during the middle of my design course, I noticed a shift in my thinking.
I was finally able to see how bothersome the UI on the EDD portal was. I’ve brushed it off for months as just a necessary evil. Till one day I was given a 2 question survey and this question stood out.
The livelihood for myself and many other Americans rely on completing this form quickly and correctly. Any discrepancy of information would end with people facing fines or the loss of their unemployment benefits. My personal goal as a designer is to build things that enhance someone's way of life. This project hits that mark. Also, I wanted to flex my UI design muscles a bit.
Before starting this project I was able to chat with one user about their experience with the EDD portal. I was told they deal with a more tiresome process than myself. They also mention that their partner only has three pages to complete, which is shorter than my typical experience. So for this redesign, I’m only dealing with my personal user flow. I made this decision because asking other users for screenshots of their pages would impede on their personal information.
My first step was to break down key UI issues that brought me to start this project. I could say the UI is inferior, but I needed to know what parts were faulty.
I started with a plug-in called WhatFont. It lets you select any text on a webpage and shows you the font family, weight, size, line height, and color.
To my surprise, I found that the variation was not that wide, only five different sizes. The main problem was the site's most used font size.
• 12 pixels is the font size used for the bulk of the text on the web portal.
• 16-18 pixels should be the new standard for all the updated body text.
All UI/UX designers would agree that 16 pixels is the go-to for any non-mobile font and 14 pixels could even be pushed. Using something as small as 12 pixels is said to cause eye strain and make reading much harder for users.
Just like a standard web form, everything is number with a radio button option. This works great for yes/no questions.
The next key problem is that every question and its corresponding button is stacked very close to each other, as well as the button being placed on the opposite end of each question. Having each question in such close proximity and with some questions being on the shorter side user have to read and reread each question to ensure they select the correct options.
Z-pattern eye scan from original design. My goal is to lessen the amount of eye scanning users have to deal with when completing the form.
Keeping in line with my goals I still wanted users to easily flow through the site while noticing the changes but not being shocked by the redesign.
My first step was breaking down the old design to its base atoms, looking at colors and other visual elements. This helped me create a small design system that can be used as the backbone for the redesign
After reviewing different design patterns I decided on separating each question by color. Similar to how spreadsheets are divided into sections. Along with them being numbered, this will further distinguish each question from the last.
My next step was reducing the amount of z-pattern eye scanning users deal with. The best option for this was to move the radio button to under the questions.
Once all the elements were united the overall portal looks updated while not overwhelming users with a major refresh. It also accomplishes the goals I had for this project. Attempt to preserve the old design and help enhance users ability to read and scan the information.
My design career has just started and this redesign has me inspired for a real-world project. It has also put into perspective how project goals don’t have to be overly complex. I live in my head a lot with design and these goals helped calm that voice that says.
So what's next? There are a few things I have in mind. The first being another slight redesign. During my research, I found that the main EDD website uses a different font family than their web portal section. This time around it will be more focused on matching the web portal with the main site.
The second would be producing a more comprehensive design system catalog. Something that covers element sizing practices, text placement, and how to use color. Last would be obtaining a way to contact the designers in charge of the EDD website. My hope remains that what I started can aid them with any adjustments they make in the future.
