Allerg-ease: Reimagining Allergy Management

CSE 440 Staff
8 min readDec 17, 2021

Emily Chang, Kyrie Dowling, Simona Liao, Felicia Yan

Problem Overview

Imagine walking into the grocery store, and having to manually check through the ingredient labels of a product before determining whether or not it is safe for your child, who is allergic to nuts and eggs. Since this can be quite tedious, you often stick to buying the same two or three snack items for your kid, who is growing tired of the limited options.

According to the CDC, 10.8% of adults and 7.6% of children in the US have food allergies, making allergy management a common task, particularly for parents of children with food allergies. From our user research, we found that most parents found it overwhelming and laborious to navigate stores and restaurants. With there being no centralized resource for finding information and receiving recommendations, most tasks are performed manually, making essential day-to-day tasks incredibly time consuming and difficult.

Solution

Allerg-ease eases the process of finding safe food items and dishes at stores and restaurants with our advanced filtering system and community forum. It is a mobile application that provides centralized resources for shopping, dining, and communication, making daily essential tasks efficient, convenient, and stress-free. Users would be able to plan for their shopping trip ahead of time by creating shopping lists with safe, allergen-free food products, or browse the menu of a restaurant to ensure there are suitable dishes for all. The community forum also allows users to ask questions and receive advice from others that may have more experience managing allergies, and find support from others going through the same allergy-management process.

Paper Prototype, Testing Process, and Results

We started testing our idea by using a paper prototype of the application, which included our main shopping, dining, and forum screens, navigation bars, and home page (Fig 1). We designed some aspects of the paper prototype to be able to layer on top of each other, such as with sticky notes or smaller pieces of paper that mimicked dialogues or pop-ups on a mobile application. Our user testing involved someone layering and switching out the elements of the paper prototype as participants pressed buttons and completed tasks such as finding a grocery store item and viewing forum posts.

Fig 1. An overview picture with all paper prototype pages laid out, including filters and dialogues. Includes the paper prototype for the home pages, shopping pages, dining pages, and community forum pages.

Overall our results from usability testing showed that while there were some more intuitive aspects, such as the navigation tabs at the bottom of the screen, there was also a strong desire for a more thorough and consistent favoriting system. It was a feature we had not considered too deeply, since we thought parents would prefer to make separate shopping lists. Initially we also did not include a method of bookmarking a post in the forum, but added that feature as a result of user feedback. Something we also redesigned was the homepage to better convey how users could find their favorited items. The goal was to give users more avenues to save items that they found interesting or relevant for later reference, saving them time from having to search for specific items.

Digital Mockup

We used Figma to develop our digital interactive mockup and mainly focused on the shopping, dining, and community forum functionalities. Our advanced filtering system can assist users to find ideal food items in a store, or cuisines of local restaurants. Users can also filter based on profiles, which are set up by entering allergens into the account holder’s settings, or they can filter to exclude allergens directly.

These are some main changes we made from the preliminary mockup to the digital mockup, in order to accommodate the smaller screen size of an actual phone while preserving the functions and features that we wanted to include. We changed the format of the filter, navigation tabs, and home page to facilitate the accessibility and streamlined usage of Allerg-ease for the users.

  1. First, we changed the format of the filters to take up more space on the phone screen and made the buttons more visible. This is to aid with easier selection and viewing, since a phone screen is much smaller than our paper prototype. We drew inspiration from online retailers that used similar designs for their filters.
  2. Another feature that was updated was the navigation tabs. On the paper prototype, the selected navigation tab would have a thick outline, but in our digital mockup we found that inverting the colors of the selected tab was more visible. This allows for more visibility of status–in previous user testing, there was some difficulty in seeing the navigation tabs.
  3. The last feature we changed from our paper prototype was the “What’s New” section on the Home page. In the paper prototype, there were 3 square icons, each with a label. We decided to change it to 2 longer buttons/items for easier readability and also easier navigation on a small screen.

Task 1: Grocery Shopping: Find egg and peanut free snacks from H-Mart

1. From the home page, user will click on the shopping button to navigate to the shopping page to find the store they are looking for.

On the shopping page, it shows the most recently visited stores and the stores near the user. User will tap on the logo of H-Mart to see more information about the products there.

3. In the page of H-Mart, user will initially see all food products available there. Every product has related allergens labels. (If the user does not set up a profile, the allergen labels will be the 8 common allergens. If they have a profile of allergens, the labels will be customized to show their allergens.)

4. To find egg and peanut-free snacks, user will click on the filter button. They will choose the snacks category and exclude eggs and peanuts allergens. After selecting the filter, user will click the apply button to see the filtered results.

5. User will see the filtered results, which are snacks that do not contain eggs or peanuts. User can scroll to see all safe options, and favorite the ones that they are interested in purchasing. They will be able to find the favorited list from the homepage later when they are at the store. They can then find those snacks according to the list.

Task 2: Dining: Find a restaurant with safe menu items

1. From the home page, the user can start finding restaurants by looking at their favorites, searching directly, or going to the dingin page. In this demonstration, the user goes to the dining page by tapping the dining tab at the bottom of the screen.

2. Once on the dining page, the layout of the screen allows the user to quickly find their most recently viewed restaurants, along with any nearby restaurants. There is also an option to filter the restaurants based on various criteria.

3. By using the filter, restaurants can be filtered by profile, allergens, and cuisine. Having a filter will make finding specific restaurants easier, saving time when searching for a place to eat.

4. When the user chooses to filter by certain criteria (in this case, Chinese cuisine), the restaurants are filtered. At this point, the user can select a restaurant to view its profile.

5. Having a restaurant profile page included in the application allows for the users to see important information about the restaurant, such as location and hours. There is also the menu, which means the users can know what to expect at the restaurant. There is also a filtering option for the menu, which is typically not available at restaurants.

6. Having a filtering option for the menu allows users to more quickly see what food items are safe to eat. From usability tests, we learned that typically customers have to ask about specific allergens, so having the menu filter will save time and be more convenient.

7. Once the filter is applied, the menu items are refreshed to show items remaining after applying the filter. This saves the user time since the items are presented immediately, rather than having to manually scan through all menu items or search for allergen tags.

Please click here to learn more about and navigate our final digital interactive mockup.

Summary

Whether it is managing one’s own allergies or the allergies of another person, finding safe food options can be time consuming and frustrating; however, having centralized shared resources can greatly reduce the strain, particularly for parents of children with food allergies. Through a detailed catalog of store products and restaurant items coupled with an advanced filtering system, people managing allergies can find safe food options more easily than ever before. Rather than wasting time scanning product labels, with the help of the Allerg-ease community, parents can instead put their energy toward what really matters: spending quality time with their children.

--

--

CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction