Healthy Food Access Portal: Making it Easier to Fight Food Insecurity One State at a Time
Overview: The Healthy Food Access Portal brings together research, best practices, resources, and state policies for community members, practitioners, advocates, entrepreneurs, and more to provide access to affordable and healthy food.
Problem: The website doesn’t showcase their 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 Healthy Food Access Portal with the main problem being the State Policies page which helps people know more about the food-related policy changes in their area and/or state.
Timeline
2024
Programs
Figma
Skills
Design Systems Layout Design Prototyping Research UI/UX Design Visual Design
Role
UI/UX Designer (Collaborators: Designers, Project Managers, Developers)
Industry
Healthcare, Nutrition
Website
Process
Understand
Define
Design
Validate
Understand
50 Buttons too Many, Let’s Work on That
For context, the previous design had over 50 buttons with state shapes and names on each button. These buttons were all in a specific style, and they'd need a designer to create a new button to add to it. These states in total house over hundred policy progrmas that people need to for their business, programs, etc. So they needed a way to make it:
-
Easy to Update for the Client
-
Engage with their target demographics
-
Easier to navigate for the user to find what they’re looking for
-
Reduced the need to go back and forth to choose new states
Personas
Introducing Marcy to User Process
The decisions that were made were with someone like Marcy and other demographics 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.
Marcy
Age: 45
Relationship Status: Married with
Occupation: Business Owner (Food Industry)
Kids: 2 kids (1 teenager and one college student)
Digital Literacy: Average (Social media, Computer usage: Moderate)
User Story: As a business owner based in northern California who likes to give back, I want a resource that I can use that will give me accurate information on food programs and that's efficient and quick since I don't have much free time and getting the wrong information could cost money and time that shhould be going to the underserved communities.
Goal
A business owner in the food service industry who is looking to expand their philanthropy efforts to other states in the western United States.
Define
Collaboration is Key to Usability and Workflow
I collaborated with an engineer and product manager on the team to create a better flow and interaction that would be easier to update and move through without needing to repeatedly go back to the main policies page to change states. 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 that I had previously created, with some inspiration from this design, I was able to brainstorm some 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 on 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 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 give you assurance 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 this could become better, and he 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.
Validate
Finding Confidence in New Solution
The outcome was a regional map where visitors of the site could click on their region, select their state, and automatically move to the state they needed, but the states in that region stayed visible as smaller 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.
Interact with State Policy Solution
Metrics
Less Steps, Save Time
Reduced Navigation Time for Users by 25%
Changing state buttons to regional buttons removed the back and forth of going back to find new state or territory information. Reducing initial button interaction from 50 to 4 introduction buttons made it easier for users to find what they're looking for quicker.
Reduce Time and Cost By 70%
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.