Allergy-Filter App

Many people live with food allergies and intolerances that impact their daily lives. For some, these are life-threatening conditions that must be very carefully managed. For others, their reactions are less severe but still impact their overall health and wellbeing. Many people change their diets, medications, and routines to avoid or respond to their allergy or intolerance. Because this management is often daily and ongoing, it’s a great context for considering interaction design based supports.

Role

UX Researcher
UI Designer

team

Me (Solo Project)

time

1 Month

tools

Figma

Problem

People with allergies often find themselves shying away from opportunities to participate in social events due to fear of having an allergic reaction. Even if their allergies are mild, it has become an unconscious practice to avoid products that contain their allergens.

HOW MIGHT WE

increase allergy awareness so that society can be more accommodating to those with allergies?

INSIGHT 1

Will avoid eating at restaurants out of fear of getting an allergic reaction or not have any food to order off the menu.

“I always have to ask people what they put in the food whenever visiting or eating out, but luckily allergies are easy to see in the food” 

–Interviewee A

“Even though my allergies aren’t severe, I have this subconscious precaution to avoid or shift away from products with fruits.” 

‍–Interviewee C

INSIGHT 2

Wishes people could be more knowledgable of allergies- not specific of allergies but be more aware that people have allergies

“It would be nice to have more support for those who have allergies. Just more information would be good.”

‍–Interviewee C

“I not born with allergy,  but I developed it later. It took some time to get use to it since allergies since I wasn’t very knowledgable of allergies, initially.”

‍– Interviewee B

INSIGHT 1

Will avoid eating at restaurants out of fear of getting an allergic reaction or not have any food to order off the menu.

“I always have to ask people what they put in the food whenever visiting or eating out, but luckily allergies are easy to see in the food” 

–Interviewee A

“Even though my allergies aren’t severe, I have this subconscious precaution to avoid or shift away from products with fruits.” 

‍–Interviewee C

INSIGHT 2

Wishes people could be more knowledgable of allergies- not specific of allergies but be more aware that people have allergies

“It would be nice to have more support for those who have allergies. Just more information would be good.”

‍–Interviewee C

“I not born with allergy,  but I developed it later. It took some time to get use to it since allergies since I wasn’t very knowledgable of allergies, initially.”

‍– Interviewee B

Solution

This is an app that will filter restaurants by food intolerances. People with friends who have food allergies and intolerances or people with food allergies and intolerances can use this app to find restaurants that will cater to their selected needs. People can also make reservations and order takeout through this app making this app a hub spot for people with food allergies and intolerances.

Secondary Research

I stared by learning about a common allergen: peanuts. As someone who is fortunate enough not to have any allergies, there was many surprising findings.

CAUSES

The immune system mistakenly identifies peanut proteins as something harmful. Direct or indirect contact with peanuts causes the immune system to release symptom-causing chemicals into the bloodstream.

TREATMENTS

Palforzia to mitigate allergic reactions, including anaphylaxis, that may occur with accidental exposure to peanuts. Peanut allergy immunotherapy is a treatment that is designed to reduce the frequency and severity of allergic reactions.

SYMPTOMS

Skin reactions, such as hives, redness or swelling. Itching or tingling in or around the mouth and throat. Digestive problems, such as diarrhea, stomach cramps, nausea or vomiting

POPULAR PRODUCTS

Sunscreen, facial cream, chili sauce, sichuan sauce, macaroon, hazelnut spread, cosmetic

Immersion

I pretended as though I was living with a peanut allergy for one week. Throughout this experience, I considered AEIOU as well as my thoughts, feelings, beliefs, and motivations. These were the questions that I had that guided me through the experience:

  1. How much peanut do I consume daily?
  2. What changes would I have with my diet?
  3. How will my daily life be affected?
  4. How often is peanut used as an ingredient in food?
  5. How conscious is society in labeling food with common food allergies?

From this experience, I realized I don’t tend to eat food with peanuts in it. Most of food I consume contain milk, egg, soy, and wheat. But through my research, it was shocking to realize how many products could possibly contain peanuts. This caused me to be more conscious of the products that I was consuming by checking the ingredients list every time I was about to use it.

User Interview

While going through the immersion experience, I sought to hear from people with allergies of various degrees to have a better understanding on how they go about their days. I interviewed 1 person who was born with allergies and gain more as they continued to get older, 1 person who’s allergies continue to worsen as they’ve gotten older, and 1 person who developed their allergies later on. I used the following questions to guide the interviews:

  1. How did you find out about your allergy/food intolerance?
  2. What are your symptoms? and the severity?
  3. What precautions do you take on a day to day basis?
  4. Are there any tools that you use to help with managing your allergies?
  5. Are there any tools you wish existed to help aid you?

Synthesis

Based on my “How might we” statement, I brainstorm 20 ideas that could be a plausible solution. I aimed to have to a well balanced of ideas across categories of interaction:

  • screen-based (e.g. app, website, kiosk)
  • non-screen-digital tech (e.g. voice assistant, smart appliance)
  • analog (e.g. object, role/conversation, service, space)

Prototyping

Since this app is a hub spot for people with food allergies and intolerances wanting to eat/order out, I wanted the app design to feel fun with lots of bright energy, and the tone of the app needed to feel like an inviting and exciting app. I want to emulate that fun and excitement when hanging out with friends, family, or a significant other.

I used this initial moodboard and concept sketch as my design direction to create 3 higher fidelity digital mock ups of the restaurant detail screen.

moodboard

concept sketch

screen variations

Synthesis of Testing Feedbacks

Key Patterns/Trends

  • Simple, clean design
  • Organized
  • Navigation bar is intuitive
  • First two screen’s title text are hard to read

Areas of Improvement for Iteration

  • Overlay over image doesn’t give a sense of true-to-self of the restaurant
    > not a very good representation
  • Wants to see reviews of only people with their allergies first but can filter to see all reviews
  • add text under icons because it could be a little hard to guess what they represent

Surprising Insights

  • Very feminine color palette
  • The middle screen might be hard to navigate because navigates tab-like

Final Product

moodboard

concept sketch

final screens

  1. Home Screen: The landing page will give restaurant suggestions based off the user location which can help people discover new restaurants. It is also the page where the user decides whether they want to make a reservation, order takeout, or explore restaurants.

  2. Search Screen (list view): The search screen allows user to scroll through restaurants based off their filtration. It will show the restaurant name, hours, rating, how far it is, cuisine, and what they offer (delivery, pickup, etc).

  3. Search Screen (map view): The map view allow people to have a better view of how far restaurants are from them.

  4. Restaurant Description: This screen gives a more in-depth detail of a selected restaurant. User can save, share, or write a review for the restaurant.

  5. Reminder Screen: The reminder screen will send notification to the user regarding their takeout or reservation.

  6. Collection Screen: This is where all the user restaurants are located at. Users can group them in collections.

  7. Profile Screen: User can change their preferences here. They can also share profile or update their allergy setting.

Style Guide

Color Palette

Typography

Iconography

Design Decisions

Review Section

During certain times of the year, the sleeves will have patterns and volunteer programs that work more closely related to the festivity of that time. For example, during Thanksgiving, there will be turkey patterns with volunteer programs that do something special on Thanksgiving. This is to make the coffee sleeve more engaging for our audience.

FiltratioN

The review stars will display the rating based off people with the same allergy as what was set in the profile page. This way it people can quickly glance through lists of restaurants and see which restaurants that people with the same allergies as them felt safe or well-serviced. In the settings, users can change their preference so that they can see anyone’s review of the restaurant whether they share the same allergies or not. Otherwise, the default setting is only seeing ratings from people with same allergies.

Profile Section-QR Code

I wanted to implement a feature where people can filter restaurants based on their own allergies and their friend’s as well. This way it would be a quicker process to find a restaurant that will cater to both of their dietary needs. This is why I decided to have a QR code section that will allow people to share their profile with other people.

Next Steps

If I were to continue working on this project, I would consider the following steps:

  1. Usability Testing

    Since I spent most of the time in research and immersion stage, I did not have the opportunity to create a prototype. Therefore, I would like conduct usability tests to see if I have successfully targeted all of their needs when searching for a allergy-friendly restaurant.

  2. Create more mockups

    Since this was a research heavy project, I would like to receive more user feedback on the design.  There are some section of the design that I am unsure if it translated well to my user. It would be valuable to validate my design decisions

Takeaways & Afterthoughts

  1. bridging the steps of design process

    It is very hard to bridge all the steps (EX: storyboard and moodboard). When building my solution, I struggled to keep everything cohesive across my stuff. I find it hard to translate one abstract idea from a piece to another. The systematicness of the visual language and tone is very important for people to understand my idea/solution.

  2. importance of user immersion

    The immersive experience of being the targeted audience is very important. There was many experiences that I didn’t realize that people with allergies have to go through. I was extremely surprised by how many products don’t have ingredient lists and have major allergen ingredients. This can be a very big issue with people with severe allergies. Thus, these inconveniences can build up and cause major stress.

Mockups from Mockupworld

© HELEN JIANG 2023. ALL RIGHTS RESERVED.