Allygen: An Ally to you, An Enemy to Allergens

CSE 440 Staff
7 min readDec 17, 2021

--

Ethan Chen, Loni Tra, Merhawi Abraha

Allygen: An Ally To You, An Enemy To Allergens

Problem Overview

For many people, eating out at restaurants is the most common setting where people catch up and socialize. Whether this be with friends, family, business partners, or even by yourself, the expectation is a great dining experience, which is made up of good company (yes, even the company of yourself is good company) and good food. For people with food allergies, this is not always the case. When dining with friends and family, people with food allergies often do not do research on if a restaurant the group chooses is accommodating beforehand, and instead consider their allergies when already present at the restaurant. This sets them up for a subpar dining experience. In the past, many people with food allergies have had to sacrifice the enjoyment of their meal when eating out due to restaurants having limited dishes. They have had to settle for ordering overpriced alternatives that weren’t appealing in the first place, or ordering a dish containing their allergen and suffering the consequences later, or even not eating at all. With so many people omitting doing any research, this indicates that there is not an easy and convenient way for those with food allergies to gather this kind of information.

Solution

Allygen™is a one-stop shop to ensure an enjoyable dining experience for those with food allergies. Through a mobile app, users can receive recommendations for restaurants that are tailored to their food-allergy restrictions and preferences. Users can also view restaurant menus and check whether the restaurant can substitute certain ingredients in dishes that they’re interested in ordering before actually committing to going to a restaurant and placing an order. Lastly, Allygen™ streamlines the restaurant-choosing process for users and their dining party by allowing group creation within the app and giving tailored recommendations based on the group’s needs and preferences. All of this in an easy and convenient way, bringing our users one step closer to the perfect dining experience.

Paper Prototype, Testing Process, and Results

We translated our ideas into a physical paper prototype that we then had potential users test, and we were able to gather some valuable insights that greatly affected our final prototypes. Some common feedback that we received from our usability test participants was on the list format that we used on pages; specifically, how we used dashes, bullet points, and buttons to distinguish differences between clickable and non-clickable components. People that tested our initial paper prototype had a difficult time understanding when they were allowed to click on a list item, when it was purely for viewing (and therefore unclickable), and when items were in a ranked order. Working off of this feedback, we improved our list components to be consistent in both appearance and function — bullet points would be used when list items were for viewing only, a dashed list would be used for elements that were list items that were intended to be clicked on, and a numbered list would be used for items that are ranked and thus in a specific / important order. These changes were implemented and can be seen below in both our paper prototype and our digital mockup.

Figure 1. Paper prototype of Allygen used in usability testing

Digital Mockup

Two critical aspects of our design are the ability to create groups and view available substitutions users can make for certain dishes.

Figure 2. The flow for creating a group

While doing our research, we found out that people with food allergies often struggle finding a restaurant that has food which aligns with their diet restriction. The issue gets worse when they have to dine with friends or family, since they have to coordinate with them about their preferences and hope that there is overlap in where everyone would like to go. This app bridges that gap by allowing users to input their food preferences and allergies in order to curate a list of restaurants that best matches the whole group’s preferences.

Our app accomplishes this in a simple and straightforward manner — we only require a user to enter a name for the group, the group’s location, what date the group will dine on, and what time the group will meet. After entering these pieces of information, we can create a group with a unique add code that other users can use to join the group. Additionally, it is easy for the group creator to remove members that are not supposed to be in the group via a click on the ‘X’ button next to the member’s name. The group feature within our app makes group creation easy and group coordination effective to leave users with a well-coordinated experience.

Figure 3. The flow for viewing available substitutions

This task involves allowing customers to easily see options that can be used as a substitute ingredient for certain dishes. Sometimes restaurants are flexible and will allow customers with a food allergy to order a dish and substitute ingredients that they’re allergic to. For example, instead of peanut oil for someone that is allergic to peanuts, avocado oil can be used for the dish instead. It is not always obvious to the customers whether this option is available at the restaurants and if they do allow substitutes, customers are usually not sure of all the options available as a substitute or may be annoyed or too shy always having to ask about these options. In the above design, users are able to see the menu of the restaurant. By clicking on the substitute button, users are navigated to a page where they can see the ingredients of the dish. By tapping on any of the substitutable ingredients, users can see what substitutes are available for that ingredient. This gives our users access to all of their options so they can enter the restaurant confident that there is something delicious for them.

Figure 4. Overview of the digital mockup of Allygen. An interactive mockup that depicts the flow of the app can be viewed at the following url: https://www.figma.com/proto/9KUqdJhAZPfrYoYL56CAse/Allygen?node-id=5%3A7&scaling=scale-down&page-id=0%3A1&starting-point-node-id=5%3A7&show-proto-sidebar=1

Summary

After conducting our user research, the main pain point we identified was that users were not able to get adequate information about menu items ingredients from the restaurant’s menu. Our participants stated that the only way they were able to get informed if the menu item contains their food allergen is by communicating with the restaurant servers. This issue gets exasperated if users go as a group and some of those users have food allergies. This is due to the fact that it takes them longer to discuss each menu item and finding safe ingredient replacement. In fact, some users do not end up eating at all or did not end up enjoying their meal as much as they could have due to feeling rushed to order whatever without exploring all the restaurant’s menu items. For this reason, we mainly focused on solving two tasks with our app which were allowing users to explore restaurants near them that can accommodate their food allergy and indicating users that a restaurant offers an ingredient replacement for their food allergen. Users want to make sure that they are not consuming their food allergen and they also don’t want to be rushed when choosing their food. Therefore, our app solves this issue by giving users the power to explore all the variety that restaurants offer and making it easier for users to identify which menu item has their food allergen.

--

--

CSE 440 Staff
CSE 440 Staff

Written by CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction