FreeFrom: allergy-safe dining
Duration
Feb—March 2022
July 2023
Role
Solo product designer
Tools
Figma
overview
intro
Imagine eagerly planning a night out with friends, only to be met with anxiety about which restaurant can safely accommodate your food allergies. For many Americans, this is a daily reality. Having a food allergy or intolerance can greatly impact one’s quality of life, ranging from minor inconveniences to potentially life-threatening situations.
Why is this important?
Food allergies affect approximately:
32 million Americans
1 in 10 adults
1 in 13 children
I ultimately designed a tool to support individuals with food allergies and intolerances by simplifying the process of finding safe dining options by streamlining the search for allergy-friendly restaurants
core experiences
Find safe and allergy-friendly restaurants tailored to your needs
Explore restaurants that specifically accommodate for dietary restrictions.
Filter and locate restaurants that cater to unique dietary restrictions
Find restaurants nearby that meet your needs with personalized suggestions.
Write reviews to help other users make safe dining choices.
Through community feedback, users can feel solidarity and reassurance .
Access allergen details and community ratings.
Users are empowered to make rapid, informed decisions through pertinent restaurant information featuring location, hours, and more.
Research
understanding user perspectives
Deepening empathy through immersion
Because of my unfamiliarity in this realm, I wanted to build empathy with those with allergies and food intolerances. I attempted to spend a week avoiding gluten, a major food allergen. For a week, I incorporated the allergy into my daily activities, including grocery shopping, dining out, and cooking/baking. During this time, I:
recorded how often gluten was encountered eating or grocery shopping.
journalled about the experiences, noting down their frustrations and insights.
listed food I encountered and ended up having to avoid day to day.
While the simulation provided valuable insights, it was important to note that my temporary experience can't replicate reality or capture the long-term impacts of living with an allergy. The goal of this was to increase empathy, and I did not use my experience to make any generalized conclusions.
Interviews
Understanding different perspectives to uncover needs and frustrations.
To validate and enrich the insights gained from the simulation, I also conducted in-depth interviews with three individuals age 15-22 who have food allergies/intolerances of ranging severities. Engaging in 30-minute conversations with each participant, I employed open-ended questions to facilitate candid discussions.
Gather experience and stories → Transcribe & code interviews to identify recurring themes → Affinity mapping
This process helped me to visually group similar insights, uncovering key relationships between the participants' experiences. I selected quotes to best illustrate the 4 identified themes:
This process helped me to visually group similar insights, uncovering key relationships between the participants' experiences. I selected quotes to best illustrate the 4 identified themes:
Daily life
"I stick with the foods I know"
"It's hard to eat out when I'm in new cities"
"I always try to check the menu beforehand"
"It's hard to eat out when I'm in new cities"
"I always try to check the menu beforehand"
Accomodations
"It's a hassle to ask about accommodations"
"I always ask about allergens when ordering"
"I always ask about allergens when ordering"
Social
"The hardest part is finding places to eat at when I'm going out with my friends"
"I tend to always order last because I have a lot of questions"
"I tend to always order last because I have a lot of questions"
Health & safety
"Even cross contamination and trace amounts can cause a severe reaction"
"I average 3 incidents a year"
"I average 3 incidents a year"
key takeaways
📋 Looking at the menu in advance reduces restaurant stress
💁🏻 People tend to stick with restaurants and food they are familiar with
🗺️ Not knowing nearby restaurants (especially in new locations) deters eating out
😰 Interviewees often struggle with feeling like they’re inconveniencing the people around them.
journey map
After learning about the interviewees and their experiences, I created a journey map to illustrate their current user journey and highlight key frustrations.
user Persona
To humanize the target users, I developed a brief user persona based on the interview insights. She is a university student navigating social life with a wheat allergy, highlighting key frustrations and needs in dining experiences.
Opportunities
From the research, I posed some questions in order to explore the problem space...
How might we lessen negative feelings and experiences attached to having a food allergy or intolerance?
How might we help reduce the effort of finding information about a restaurant for someone with a food allergy/intolerance?
ideation
concept brainstorm
Equipped with insights from my initial research, I began to consider possible solutions for the pain points that were expressed during the research and interview process. I aimed for quantity and diversity, generating 20 ideas spanning across digital interfaces, tangible mediums, and experiential realms. Not being limited to practical constraints, I was able to focus on core functionality and user needs.
Idea generating...
narrowing it down
Addressing the opportunities with an allergy-friendly restaurant discovery app.
A dedicated, review-based platform for discovering allergy-friendly dining options simplifies the discovery of allergy-friendly dining options and encourages community interaction. Users can explore a personalized list of restaurants tailored to their dietary needs.
1
How might we lessen negative feelings and experiences attached to having a food allergy or intolerance?
→
Encouraging users to leave reviews creates a supportive community ethos, offering people with food allergies a place where they can relate to and depend on each other.
2
How might we help reduce the effort of finding information about a restaurant for someone with a food allergy?
→
Enabling people with food allergies/intolerances to bypass generic review apps and directly access relevant allergen information and user reviews.
storyboard
After solidifying the idea, I created a visual narrative illustrating how a user would interact with the app.
initial design
initial meaning...
The project originated as a university assignment in the course "Designing Health and Wellbeing." However, certain aspects of the design process were beyond the scope of the course. Consequently, I revisited the project a few months later, driven by a desire for a more comprehensive approach. During this time, I expanded my knowledge of usability and design, leading to a shift in both the structure and design of the project.
site architecture
low fidelity wireframes
Wireframes of sign up screens and main feed.
Wireframes of Review and Profile
basic design guide
Overall, the responses from my primary research indicate that individuals with food allergies experience negative emotions such as guilt, frustration, and anxiety. The visual language developed should address these emotions by conveying warmth and reliability.
Yellow is associated with energy and cheerfulness, and the color psychology and its association with increased appetite is why yellow is often used in food marketing.
For typography, the primary font is Cabin , a humanist sans with a friendly, personable tone. Users are more likely to engage with an app that feels welcoming and personable.
Having a food allergy or intolerance can already be an inconvenience so designing an intuitive and inviting interface will be crucial.
mid fidelity wireframes
iterative testing
I conducted 3 usability tests to determine points of confusion and other elements that hindered good user experience. Thanks to the new insights, many improvements were made to the site structure, visuals, and other earlier established elements.
This section includes some key changes.
This section includes some key changes.
back to the drawing board...
Insights suggested a structural redesign
In user testing of my initial design, I identified a need to restructure the site and revise the app's navigation.
Ideally, restructuring the site would have been avoided through ongoing user testing throughout the design process; however, due to course limitations, I was unable to conduct extensive user testing during the initial phase. Consequently, I conducted user testing and reworked the site's architecture after the semester concluded to ensure a more effective design.
Ideally, restructuring the site would have been avoided through ongoing user testing throughout the design process; however, due to course limitations, I was unable to conduct extensive user testing during the initial phase. Consequently, I conducted user testing and reworked the site's architecture after the semester concluded to ensure a more effective design.
Before
After
In addition to explicit user comments highlighting structural confusion, I observed user behavior during navigation and noted hesitation when encountering certain screens.
"I feel like a lot of things I wanted to do were hard to find."
Before
The bottom navigation was limited to three icons to emphasize the main functions, with "Review" placed in the center to spur community interactions.
However, asking users to hunt for features forces the user to recall the location of functions instead of recognizing them quickly, disjointing the flow.
However, asking users to hunt for features forces the user to recall the location of functions instead of recognizing them quickly, disjointing the flow.
After
Pulling out "Search" and "List" functions enhances the user's ability to quickly find and save allergy-friendly restaurants.
Call-to-action is maintained by the yellow background emphasizing "Review," ensuring it remains prominent and easily accessible.
Call-to-action is maintained by the yellow background emphasizing "Review," ensuring it remains prominent and easily accessible.
redesigning screen and content
Optimizing the main feed
Before
After
problem
solution
"I'm confused about the sections and where to view more options."
There is a lack of hierarchy
There is a lack of hierarchy
Grouping the categories under the search bar allows users to quickly grasp how the different categories are interconnected.
Instead of grouping restaurants under each allergy category, tags are displayed under each card.
The top hero no longer competes with content while still adding value through information.
Instead of grouping restaurants under each allergy category, tags are displayed under each card.
The top hero no longer competes with content while still adding value through information.
User did not bother to scroll horizontally
Mixing different scrolling directions disrupt users' mental models and expectations
Mixing different scrolling directions disrupt users' mental models and expectations
Incorporating a familiar UI pattern featuring horizontal scroll categories and vertical scroll content minimizes user confusion.
Improving restaurant page information hierarchy
Before
After
redesigning screen and content
Revamping the filter & search
outcome
Final screens
reflections
The role of scope in defining success
This course project emphasized primary research and interviews. I found that the more information I learned, the more excited I got, leading to me generating numerous ideas. It was only until later on in the design process that I realized it was better to do a few things well instead of trying to do everything. In hindsight, I would have liked to concentrate deeply on a single critical feature of the app, such as the review system, or onboarding process, as they are very allergy-targeted, rather than spreading my efforts across multiple features.
This course project emphasized primary research and interviews. I found that the more information I learned, the more excited I got, leading to me generating numerous ideas. It was only until later on in the design process that I realized it was better to do a few things well instead of trying to do everything. In hindsight, I would have liked to concentrate deeply on a single critical feature of the app, such as the review system, or onboarding process, as they are very allergy-targeted, rather than spreading my efforts across multiple features.
The importance of a fresh perspective
Stepping away from the project for a while gave me the chance to revisit it with fresh eyes. This break allowed me to reflect on my initial design choices and approach the project with a more critical and informed mindset. During this time, I also became focused in UX research and enhancing my UI design skills. I was able to identify areas for improvement that I had previously overlooked and implement more user-centered design principles.
Stepping away from the project for a while gave me the chance to revisit it with fresh eyes. This break allowed me to reflect on my initial design choices and approach the project with a more critical and informed mindset. During this time, I also became focused in UX research and enhancing my UI design skills. I was able to identify areas for improvement that I had previously overlooked and implement more user-centered design principles.
With more time, I would…
Conduct more usability testing, especially with my target users. Target user insights are essential for validating and improving the design, ensuring it truly addresses their pain points.
Conduct more usability testing, especially with my target users. Target user insights are essential for validating and improving the design, ensuring it truly addresses their pain points.