Allergo: Be Free from Your Food Allergies

A tool to help people with food allergies find enjoyable restaurants

Nathan Chia, Victor Kuan, Leo Tsai, Sherry Yang

Problem Overview

We learned from our user research that people with food allergies deal with a lot of inconveniences on a daily basis, particularly when they are trying to find appropriate restaurants to eat at. According to our study, a lot of people who have food allergies feel that existing tools and technologies inadequately address their needs. Many feel that online menus don’t give enough information about ingredients and/or potential allergens. Others report that they have given up using certain food apps due to the abundance of inaccurate information and/or the abundance of difficulties with searching. We acknowledge these problems, and we are trying to develop a solution that can help marginalized people with food allergies have a more streamlined and helpful experience in finding appropriate and safe restaurants to eat at.

Solution

In order to address the issues described above, we have designed an idea called Allergo! Allergo is a mobile application which allows users to input their food allergies and find appropriate restaurants based on their inputted allergies. Users will be able to see restaurants that are safe to eat at thanks to Allergo’s algorithm, which automatically sorts restaurants based on allergy safety standards and based on the users’ inputted allergies. Furthermore, Allergo allows users to view comments and ratings related to specific restaurants and related to certain tagged allergies or dietary restrictions. With Allergo, we hope to improve the quality of life for those who have food allergies.

Paper Prototype, Testing Process, and Results

Since Allergo will be a mobile app, we created our paper prototype with a size proportional to a mobile layout. Our sketches aimed to allow users to complete 2 main tasks: 1. finding restaurants that are safe to eat at by filtering out allergens/dietary restrictions and comparing ingredients; 2. Engaging with a relevant community to exchange reviews and comments on restaurants that are potentially friendly to people with similar food allergies and dietary restrictions.

To test our prototype, we did a heuristic evaluation with peers from the class and conducted a usability test with 3 participants outside class. For both usability testing methods, we first provided a short description of our motivation and how the usability test works. We also asked the participants what food allergies they have (if they had none, we asked them to pretend so). During the heuristic evaluation, we used the Marvel App to create an interactable mockup with our sketches and followed Nielsons’ 10 heuristic evaluation concepts to discuss potential problems associated with each. As for the usability tests, since our prototype is digital drawings, we showed the pictures to our participants (screen sharing via Zoom or showing pictures on a device), and switched to different images based on the participants’ descriptions of what they would like to “click on” next. We attempted to answer their questions as broad as possible without giving any hints on how to use the interface in order to complete a task. Along the way, we took notes about incidents and rated the severity of each. The following is an overview of our prototype.

Our test results are quite different between the heuristic evaluation and the usability tests. The primary feedback from our heuristic evaluation was on flexibility and efficiency of use, such as confusing terminology on search results and where to access user settings. Another major suggestion was to make the 2 tabs corresponding to menu and reviews globally visible so it’s not a hidden feature (we originally had the tabs only available within a restaurant so the users can explore the reviews associated with a specific restaurant). We addressed these problems first before conducting the usability tests to avoid repetitive feedback and improved our UI.

From our usability tests, major problems surfaced in the visibility of the system. First of all, all 3 participants showed that they did not know they had to set up allergy filters at first sight and immediately attempted to search something. They also did not know how the search results are sorted. They suggested that not enough information is revealed from the reviews such as which user has what kind of allergies, and they would like to have been able to filter through comments. Interestingly, the modification of making the 2 tabs global (so the users can directly search for a review for a restaurant on the homepage) appeared confusing to all 3 participants as they felt unclear how to utilize this functionality from the homepage. Alternatively, they stated they would have preferred the tabs available within a specific restaurant. Regarding this feedback conflicting with our heuristic evaluation result, we decided to keep the tabs only available for each restaurant and added a tutorial for new users to point out where to set up filters and look for reviews. We also addressed other feedback for our final paper prototype as they exposed various problems related to the interface, logical workflow, and potential difficulties to complete the tasks. They also helped us to refine down to a more reasonable design that provides sufficient information about the system status and allows users to sort both search results and reviews with more flexible options.

Digital Mockup

Link to our digital mockup on Figma
https://www.figma.com/file/iOEvzEl6XTC8EAVTD3NeOm/Digital-Mockup?node-id=9%3A6

Key Functionalities & Features

Setup

One of the tasks that Allergo assists users with is finding restaurants that are safe to eat at by filtering out restaurants that pose a greater risk due to the allergies they may have. When the user opens the app for the first time, they set up their profile. The important part of this process is them entering their allergy and dietary restriction information. We have them do this right away so that they can begin searching for restaurants safely without having to worry about their allergies interfering. As part of the first time setup, we also provide a quick tutorial screen so that users know that they can both search for restaurants as well as read reviews about them.

Homepage and Settings

They are then directed to the homepage, where users can update their settings, quickly access restaurants, and search for restaurants, cuisines, and food.

Results, Menu, and Item Information

For the results screen, we decided to include basic information about restaurants and general ratings for them, which include an Allergy Friendly Rating. This allows users to quickly decide whether a restaurant is appropriate for them or not all the while taking their allergies into consideration. Users can sort these results based on things like price and distance. Tapping into a restaurant shows the menu. It is divided into two sections: the upper half contains foods that are completely safe for the user, while the lower half contains foods that contain allergens that are harmful for them. We also color-coded the two sections in green and red. By making these design choices, we are able to show users the food items that are relevant and safe at the top, while having the clearly dangerous items towards the bottom. This also reduces the scrolling they need to do. You can tap on the items for more information about them. We highlighted ingredients that contain allergens that the user is allergic to ensure that they are aware of it.

Comments

Our second task was to help users engage with a community of people with similar allergies and exchange comments and reviews about restaurants. This is made possible by switching to the community tab at the bottom of a restaurant’s page. We made it so users can leave tags alongside their reviews so that users can find reviews that matter to them more easily. We also show whether or not the reviewer thought the restaurant was allergy friendly or not, as well as the reviewer’s allergies. This is useful information to have in order to help users make informed decisions. Users can express whether they thought a review was helpful or not, which helps display more useful reviews.

We made some very minor visual changes to our digital mockup, but there were a couple that were important. One of them was separating restaurants in the results list from each other with different colored blocks and more space between them. The restaurants were kind of squished together at first so it looked a little messy, but this change made the restaurants and their information look more grouped together and isolated from other restaurants. It’s easier to visually identify separate restaurants now. We did the same thing with the reviews page as well. These changes are consistent with our homepage design, where we separated restaurant categories with colored blocks. Another change we made was replacing the hamburger button on the homepage with a gear icon to clearly indicate that it’s to adjust your settings. A hamburger button is usually for navigation bars and menus, so we changed it to avoid misleading users.

Summary

People with food allergies need to pay extra attention when ordering food at restaurants. One wrong order could result in dire health consequences. Yet, ordering from restaurants continues to be a difficult and inconvenient task due to the lack of information. Our users have indicated a frustration with many restaurant menus as they provide no list of ingredients nor any warnings for food allergens. To make matters worse, people with food allergies have a hard time reaching out to people with similar conditions to get advice or help. Our users have thus listed getting recommendations for safe and quality restaurants to be one of the most helpful features we can provide. Based on these research, we decided a mobile app is the best solution to address these issues due to its ease of accessibility. Our app will allow users to customize a detailed profile containing all their allergies, and help recommend, filter, sort, and bookmark restaurants based on it. In addition, the menus of these restaurants will be color coded to differentiate dishes that are safe to eat at an easy glance. As for building a community, our app features a forum for each restaurant. Users can leave comments, rate the restaurant based on its safety, and search for relevant information using hashtags. Ultimately, we envision this app to ease the burden of people with food allergies. We understand that they only have a limited selection of restaurants they feel assured enough to order at, and hope that with this technology, eating out will be much more enjoyable and varied. Furthermore, we wish that people with food allergies feel less outcast, and will be more open and willing to share their troubles or help others in need.