Massachusetts Dept. Of Unemployment Assistance Redesign
I completed this redesign of the Mass. DUA portal after receiving several complaints about the site’s usability from friends, family members, and having used the portal myself. I am in no way affiliated with the Mass. DUA. I just saw room to improve the current site and used my design skills to do so.
Role
UI Designer
UX Designer
Tools
Figma
Room for Improvement
What users are saying
“I would get hung up on every time I called the office.“
-Lizzy
“Why do they make it so hard for people to claim benefits?”
-Gabriel
“The website gives me a headache.”
-Fernando
Why?
With so many people having to claim unemployment benefits as a result of the COVID-19 pandemic, I wanted to make sure that I made an already stressful process as simple and accessible as possible. I wanted to create a better experience for the people using the site because they already have a lot on their plates, and figuring out bad design shouldn’t be something that adds to their stress.
Who’s affected?
Individuals of varying ages who have lost their jobs or have had their hours reduced are going to be the ones using the site. Claimants vary in age and technical skills. They also vary in access to wifi and computers, especially now due to the COVID-19 pandemic.
What can be Improved?
Organize important information so it’s front and center. Anticipate why a user is logging on and make sure their needs are met early on. Redesign the site’s UI so that important information is more easily found, so that users are able to efficiently file for benefits on a weekly basis.
Original Site
Information Overload
As a user you don’t want to navigate excessive text just to find the log in field. How can I make important information accessible, but still simplify screens in order to not overwhelm users?
Drab and Univiting
This site’s visual design reminds of spending countless hours in a DMV waiting room. So how can I stay true to the site’s original tone, but provide a more inviting environment? Can I redefine what a government site is supposed to look like?
Confusing Jargon
Deciphering what these documents mean shouldn’t be something that deters people from filing for unemployment insurance, yet it is. How can I make the site easier to understand for everyone while still providing the necessary information to claimants?
Improved User Flow
A major obstacle that stands in the way of people applying for unemployment benefits is that they don’t even know where to start. This feeling of overwhelm becomes so large that it can deter people from even beginning the process. The user flow below breaks down the series of actions a user will take when they first file for benefits into three main sections. I used this simplified version of the process to base much of my UX on while designing. I always aimed to keep users in the loop. Whether it was giving users a heads up on the status of their claim or simply telling them how many steps are left when filling out a form, I wanted to prioritize this type of insight. By being upfront with users about the process and breaking it down into simple steps, it opens the door for more people to file for benefits.
As simple as 1,2,3
This illustration of the 3 main steps in the filing process were eventually incorporated into the final designs. In an effort to guide users and make a complicated process simple, I thought that a graphic like this one would help disarm users who are starting to feel overwhelmed and give them the confidence to fill out the required forms and be on their way to getting the benefits they need.
Mood and Visual Design
I wanted to create a government website that didn’t feel like a government website. I wanted to demonstrate that you can provide visually inviting designs, and still be considered dependable and trustworthy. Government websites often hold extremely important and private information for their users, like their social security numbers or financial information. So this idea of trustworthiness when designing was always top of mind. I wanted to stay true to the site’s original and serious tone, but show that there’s a nuanced way of achieving the same result through updated and modernized designs.
I chose calming and neutral shades of blue while using yellow as a highlight to add a feeling of optimism. I also chose fonts that were unique, but still simple and readable to anyone. Neutrality was a central value I kept in mind while designing. Losing one’s job is one of life’s most stressful events. So I wanted my designs to be a helpful hand in the process, but never too lighthearted or too optimistic either. I wanted to be sensitive to what users were going through and give them a space to navigate all the complicated feelings associated with this time.
Check out the full style guide here!
Responsive Design & wireframes
Not made for mobile
When it came to starting the redesign process, I focused on beginning with a “mobile first” approach for two reasons. First being that I could ensure all the important information and features would be accounted for when working with a smaller screen size. Second being that many users who once had access to a desktop and wifi at work now no longer have that after becoming unemployed. So making sure that the site is just as easy to navigate on a mobile device as it would be on a desktop is very important for my users.
These mockups show actual screens from the original site on a mobile device. Each screen is either difficult to read or could use the limited screen space more efficiently. The original site does not work well on mobile devices and fails to take into consideration that many of its users can only access the site on their phones after losing access to a desktop at work.
Referring to each screen from left to right
Font is way too small to be read without having to zoom in.
Content is poorly placed, and therefore cut out.
Information placed “above the fold” is not central to the important tasks users need easy access to.
The hamburger menu is easily missed and important pages are difficult to find.
Paper Wireframes
This stage of wireframing focused on creating a simplistic and minimal design while still ensuring that all important and necessary information was visible or easily accessible.
Low fidelity
In the low fidelity stage I used real questions asked on the current unemployment site to get a feel for how they looked in my designs This way I could start accounting for how I could best organize them in order to not overwhelm users or cause stress.
Mid fidelity
While creating mid fidelity wireframes I focused on using spacing effectively to organize large amounts of text in a way that’s easily digestible and not difficult to read. I made sure to include enough space between each question in the forms and grouped related information together. I also experimented with different fonts and decided on these. They allowed for large amounts of text to be read easily, while still bringing a new and refreshing feel to the site.
High fidelity
The high fidelity stage was about experimenting with color and how I could use it to create a visual hierarchy in my designs so that the dense amounts of information in the site could be easily understood. The original site relied on blues and grey so I didn’t want to steer too far away from that. Blue has an ability to put people at ease and create a sense of calm, while still projecting a feeling of stability and trust. Being stable and worthy of trust are key qualities one hopes to see when doing anything related to the government. So while I stayed true to the original site’s neutral feel by sticking with shades of blue, I wanted my designs to breathe a sense of relief and optimism that was lacking from the original version.
Mockups
Prototype
Try out mass. DUA
File a new claim, claim weekly benefits, and dispute issues.
Please note that this prototype only represents the core features of the new Mass DUA site and is not a fully developed product. So when filling out certain fields, predetermined entries will be displayed. If for any reason you get stuck, click anywhere on the prototype and where you’re supposed to click will be highlighted in blue.
