50 State Buttons and Random Twitter/X Links Lead to User Falloff
Overview: The Healthy Food Access Portal consolidates research, best practices, resources, and state policies into a single platform, providing community members, practitioners, advocates, entrepreneurs, and others with access to affordable and healthy food options. For this case study, I’m focusing only on one of the priorities for the website we designed.
Problem: The previous website launch doesn’t showcase its main focal point, the State Policies page, well, making it hard for users to find out new or existing information about their state.
Solution: We redesigned a website for the Healthy Food Access Portal. The main problem that we wanted to solve was the State Policies page, which helps people know more about the food-related policy changes in their area and/or state.
Client
Healthy Food Access Portal
Timeline
2024
Programs
Figma, FigJam
Skills
Design Systems, Prototyping, Research, UX Design, User Journey, Personas, User Flow, Accessibility, QA, Testing, Communication/Interpersonal Relationships
Role
UI/UX Designer @ Studio Mosaic (Collaborators: Designers, Project Managers, Developers)
Industry
Healthcare, Nutrition, Food, Public Health, Nonprofit
Website
Metrics
Less Steps, Save Time
Reduced Navigation Time for Users by 25%
Changing state buttons to regional buttons removed the tedious back and forth to find new state or territory information. Reducing initial button interaction from 50 state buttons to 5 regional buttons made it easier for visitors to find what they're looking for.
Reduce Time and Cost for Client
The client doesn't need a designer to create a new state button for the states and US territories represented. They would be able to update internally. Reduce time and cost.
Reduce Scroll Time for Users.
Adding anchor links, or in-page links, to the regional state design reduced potential scroll time by 50-70%, making it easier for visitors to the site.
Process
Research
Ideate
Design
Test
Validate
Research
50 Buttons Too Many Adds to Client Costs, Let’s Work on That
For context, the previous design had over 50 buttons with state shapes and names on each. These buttons were all in a specific style, and they'd need a designer to create a new button to add to them. These states in total house over 100+ policy programs that people need for their business, programs, etc. So the client and users needed a way to make it:
Following Your Parents: Healthy Food Access Portal Adopts Some of The Food Trust UI to Show Product Consistency
One of the constraints we needed to follow was ensuring that all products under The Food Trust umbrella adhered to most of The Health Food Access Portal’s design system and their designated brand color association, which in this case was the greens and blues associated with The Food Trust brand.
Ideate
Introducing Marcy, a User Persona, to the User Process to Validate Future Decisions
Based on research, UX audit, existing The Food Trust branding, the new Healthy Food Access Portal branding, and additional project manager information, I created Marcy as my user persona.
The future decisions made were with someone like Marcy and other target audiences in mind. Someone who needs information quickly and doesn't have all day to look for it. They need it to be easy to understand and follow.
Collaboration is Key to Usability and Workflow
I collaborated with an engineer and product manager on the team to create a more intuitive user flow and interaction that would be easier to update and navigate without repeatedly going back to the main policies page to change states. I created this user journey map to identify the pain points and opportunities for improvement in the design. This detailed breakdown was not originally a part of the original project brief. As a result of these meetings, everyone was on the same page and could understand and be excited about the new interaction we created. This collaboration taught me the benefits of early communication with engineers on what’s possible for development and easier to maintain for stakeholders.
Design
Reducing the Back & Forth
For the main policies page, we proposed a regional map design. This solution creates an immediate solution to the repetitive and somewhat annoying need to go back and forth. From there, the next problem was how to how do you display all of this content. Putting everything on one page would make it too long and boring, and would ultimately reduce the number of people staying on the page and increase people hitting the exit/close tab button. Using the design systems I had previously created (some of the patterns below), along with inspiration from this design, I was able to brainstorm concepts that focused on how users would interact with the design. The website design as a whole didn't have the scope for wireframes, but they did have a library, or a design system created on the development side, that allowed the client to maintain the website on their own.
I created 2-3 options about how the user flow could work that I would present at each meeting and would then get development feedback on. One of such solutions is the one below. It started with designing these markers that would draw people's eyes to know exactly what state’s information they were looking at. Along with this, I designed simple text buttons with state names on them for the top section of the page. If one of these buttons is clicked, you’d automatically be moved to that state’s information, and the bar would assure you that you’re in the right place.
Working out one of the new problems to give more screen space to users
During this process, I also made it a point to reach out to another senior designer to see where the design could improve, and they suggested having the states become initials instead of full state names and stay at the top of the design. This removed the need to scroll back up to the top of the page to select another state.
Test
Lacking in Usability Testing but Making Up for it Through Multiple Design Checks
Throughout the design process, I checked for mobile and desktop layouts for scale and accessibility issues. Once the developer/engineer had a coded prototype ready, I tested out the interaction to make sure the transitions worked appropriately, but I didn’t have access to users to conduct additional user testing. Any other additional testing was conducted by the product’s developer. Through the testing I was able to do, I wanted to see how easy it was to navigate, aka find your region, state button, state information, and look at additional states.
Validate
Finding Confidence in a New Solution
The outcome was a regional map where visitors could click on their region, select their state, and automatically move/pivot to the state they needed. The states in that region would stay visible as smaller circular buttons at the top of the page. If they wanted to switch to a new state in the same region, they'd only need to click on the state button to move to the next state. They would only need to navigate to the full map if they were changing regions.
