Jacqueline Yarbrough | Content Writer
Improving Unemployment
Redesigning processes through user research and clean design
The New Mexico state unemployment website is not the easiest to navigate.
PROJECT NAME
New Mexico state unemployment
website overhaul
WHAT MY TEAM DID
-
UX research
-
UX writing
-
Content style guide
-
Branding
-
Figma wireframing
-
UX design
-
Site architecture
DATE
September – November 2022
The New Mexico Department of Workforce Solutions (NMDW) is the state unemployment office, and they provide resources to the unemployed as a public service.
CHALLENGE: The NMDW offers a wealth of information and resources to the citizens of New Mexico – but they aren’t being used to their potential because citizens can’t find them. The site architecture is the most significant roadblock to efficiently and confidently applying for unemployment.
SOLUTION: Our aim is to reduce the time it takes to get to the application for unemployment, from several minutes down to a few seconds. An efficient unemployment website will reduce administrative redundancies, and it will provide necessary support to New Mexicans who are going through hard times. ​
Primary navigation bar on the NMDW home page
Footer for the NMDW website
Middle of the NMDW home page
Primary navigation bar on the NMDW home page
Check out this carousel of images of the NMDW main page; notice the dozens of links, all tiny and styled identically.
PAIN POINTS
The NMDW website’s architecture has no clear path for users. There are dozens of links on both the menu bar and the main page, and they are all styled and sized almost identically. Furthermore, most of the links only go to a handful of destinations, creating a needlessly confusing user flow.
Additionally, it seems that the NMDW revamped some of their website, but not all of it. The landing page for applying for unemployment looks completely different from the rest of the website. This almost certainly confuses users, and maybe even makes them think they’re in the wrong place.
Primary navigation bar on the NMDW home page
Footer for the NMDW website
Middle of the NMDW home page
Primary navigation bar on the NMDW home page
Above is the page where users can actually apply for unemployment. It’s in a different layout and style from the rest of the site, and information is still not easily found.
USER PROBLEM STATEMENT
I am a 27-year-old administrative assistant in New Mexico with no savings who has recently been laid off due to workforce reduction. I have never filed for unemployment, and the chaotic New Mexico Department of Workforce Solutions (NMDW) website is overwhelming and frustrating. I have no idea where to start.
Meet Shelby, our user persona.
Losing your job is a highly stressful life event, and those filing for unemployment have a singular goal: to survive until they are employed again. This made it easy to determine which of our ideas was best for this redesign. We focused on the user journey, honing in on how to make filing for unemployment a simple and efficient process.
BRAINSTORMING
On the current NMWD website, it takes users an average of more than 5 minutes, and dozens of clicks to navigate to the unemployment application. We wanted users to be able to apply within minutes, using only a few clicks. We started a brainstorming session with a mind map.
Brainstorming with a mind map
We figured that anyone filing for unemployment would need 1) an application for unemployment, 2) eligibility requirements, and 3) a general resources page.
We unanimously decided to put “Unemployment” in the navigation bar at the top of the browser. This way, users can get to the most critical part of the site no matter where they are in their process. “Resources” and “FAQ” were also included in the navigation bar so that the most important resources are the most visible. From there, decisions were made based on UX/UI heuristics and principles.
LOW- AND MID-FIDELITY WIREFRAMES
We drew some low-fidelity wireframes to get our main ideas from the brainstorming session recorded.
Low-fidelity desktop wireframes
Low-fidelity mobile wireframes
To continue the redesign, the site architecture needed to be streamlined and so a new site map was born. Unnecessary links were removed by grouping topics together more succinctly. For example, the link to the main Unemployment web page was in a dozen different places, but none of the links were easy to find or consistent in style. We solved this by putting "Unemployment" in the primary navigation bar, first in line. Take a look at the new and improved (albeit abbreviated) site map below.
The new and improved site map
From here, we needed to increase the fidelity of our wireframes. We knew we wanted to use cards so that it was easy for users to quickly see where they needed to go. We also wanted to use larger fonts than on the original site for readability and accessibility. Below are mid-fidelity wireframes of the redesign.
Mid-fidelity desktop wireframes
Mid-fidelity mobile wirefames
STYLE GUIDE AND BRAND IDENTITY
Before we could continue on to higher-fidelity wireframes, we needed to find the new brand identity for the New Mexico state unemployment site. They need to have an accessible, informative, and approachable website for New Mexican citizens – so the NMDW’s voice and tone is direct but approachable, and professional but conversational.
Style guide
I decided to use a similar color scheme that was already being used on NMDW’s webpage for two reasons. Turquoise is synonymous with New Mexico, plus it connotes trust, confidence, balance, and safety.
I chose the font Montserrat for the headings because of its contemporary and friendly vibe, but also because it's easy to read even from far away. For the body, I chose Noto Sans not only because it's a modern and attractive font, but because it offers more glyphs than most other fonts, which is ideal for multiple languages.
Lastly, I selected icons and graphics that are both simple and contemporary, and go visually with the branded typography. I chose images of a variety of people to reflect the diversity of New Mexico, as well as landscape shots of the beautiful New Mexican landscape.
HIGH-FIDELITY WIREFRAMES AND PROTOTYPE
Once I had the brand identity nailed down, I could finally create the high-fidelity wireframes for the unemployment website. Below are a few screenshots, and here is a link to the mobile prototype.
NEXT STEPS
For this project, I focused on the process of creating an account to apply for unemployment, so next I would create a log-in home page, as well as new pages for the other resources as well. One of the more confusing aspects of this website was all the repeated links (refer to the site map above!), so decluttering the number of links and streamlining the style and design of the remaining pages would also be in next steps.
Thank you for reading this case study.