Bitecheck

A new way to secure allergy-safe snacks and restaurants



Overview
An iOS mobile application designed to assist individuals in finding allergy-safe snacks. Users are able to search snacks and see if they are allergy free, as well as create grocery lists.


Team + Role
This was a solo side project where I focused on the experience and interface design of the overall app.


Timeline
5 weeks


Tools
Figma, Photoshop, Illustrator


Project Background

Problem
Many people concerned about their dietary restrictions, including myself, spend long periods of time in front of grocery store shelves reading ingredient labels of different food items. As someone with allergies to peanuts and treenuts, I spend a long time in front of grocery store shelves reading ingredient labels of different food items. After surveying others with dietary restrictions, I found this to be a common problem.

Finding allergy-safe snacks is time consuming



Goal
To reduce the time and effort taken to find allergy safe snacks

Our users

Primary Users
According to Food Allergy Research and Education (FARE), severe/fatal reactions can happen at any age, but teenagers and young adults with food allergies are at the highest risk of fatal food-induced anaphylaxis. Additionally, parents are generally more cautious than their children in their teenage years, where they help their children check food items before consumption.

Students with dietary restrictions and their parents searching for food items that do not contain allergens

Research

I conducted interviews with youth who have allergies and parents with children with allergies to better understand their experiences in finding new food and snacks to eat, as well as any tools they might have used to help with their search.


Pain Points
1. Takes too long to find new snacks to try in stores or online since they are in the constant loop of reading the ingredients on items and then if it does not meet their needs, they repeat with another item.

2. Feelings of fear of ‘causing trouble’ make it difficult to ask others who share snacks about the ingredients and the default response to the offer is to decline it.

3. Frustrating to visit restaurants and find out that they cannot eat there due to the use of multiple allergens there.


Other Considerations
Many individuals with allergies, in particular youth, are not careful enough about their allergies. Whether it is their mindset or due to social pressure, the fact that they are not prioritizing their well-being and safety is a concern.

However, this big-picture problem has been long-standing and is not one that can be tackled by a single solution. My solution hopes to raise awareness for allergies in general, but is very unlikely to dissolve the above issue. Instead, I can see my solution helping those who are careful about their allergies and are adamant about their safety.


HMWs
1. How might we reduce the time and effort spent finding out which products/places use a users’ allergens?

2. How might we eliminate the discomfort our users may feel when finding out allergen information in situations where their normal means do not work?

Wireframes

I created various design options for various functions and tasks. Here are a few layout considerations I made for certain pages


Home / Design #1

Features
With searching for a snack or restaurant being the primary function of the page, the search bar is the only interactive component on the screen, aside from the nav bar. Clear instructions with a graphic to fill the negative space are found above the search bar. this makes it clear that searching for a snack is the primary function on this screen.

Limitations
Limited support for those who do not have snacks in mind or for those who are interested in trying new snacks. There is also no context or examples of what you can search for.




Home / Design #2

Features
A search bar is located at the very top of the screen while a horizontal scroll to show featured snacks sits directly below. Vertical cards are used for snacks as the text is shorter (brand, name + tag) while restaurants require more room for text (location, name, tag + tag caption) so a horizontal card spanning the width of the device screen would be more appropriate. Recommended restaurants were arranged in a list format as horizontal scrolls with larger cards would hide more information from the user. Recommendations offer users searching for new snacks, a starting point.

Limitations
Search does not appear to be the first action users think of taking on this screen as browsing the recommended items is more prominent and inviting.




Lists / Design #1

Features
3 Preset lists for the 3 tags where all saved snacks and restaurants are automatically saved to their respective tag lists. The layout of this screen is inspired by the playlists screen layout in the Samsung Music app.

Limitations
Unclear how these lists were created in the first place. Creating a new list is a primary action users are encouraged to take on this page but it is given the same amount of priority as editing lists. If a user saves numerous items, which are automatically added to tag lists, the user will not be inclined to read through these long lists.




Lists / Design #2

Features
No preset lists and an ‘add list’ primary CTA is located below existing lists.

Limitations
The CTA is not fixed to the bottom of the screen, making its placement unique in comparison to the other screens.


Style Guide

To ensure the visual design of my application is consistent, I have established fixed sets of type, spacing and colours.



Solutions

Here were the main features of our final product - an Android application and alternative to voice memos!


Find allergen information for snacks (old + new)


Instead of reading the ingredients of a product on the shelves, you can use the search bar on the home screen to find a snack and in the search results, can see whether the snack is safe, risky or dangerous. This also saves you the time it takes to search for a snack amongst the endless number found on shelves. If you want more details relating to its nutrition and what the tag means, you can click the item’s card in search results and read through the product page. If they are unsure of what snacks to search for, safe snack suggestions are made on the home page.



Find allergen-safe restaurants


With another pain point being finding allergen-safe restaurants, users can now search restaurants and find out which of their allergens are used there. Similar to the search flow for allergen information for snacks, restaurants are categorized as safe, risky or dangerous, using the menu ingredients. If you want to learn more about the restaurant’s location, open hours and menu, you can select the restaurant card in the search results and navigate to a page with that restaurant’s details.



Save your favourite restaurants/snacks in lists


Similar to how we can save our favourite songs to playlists, you can save and organize your favourite snacks/restaurants into lists. Users search and add their favourite snacks to the new list and before they proceed to the list naming screen, they have to option to keep or remove their selected items by selecting the check boxes, which were selected over a trash icon so that you do not have to repeat the process of searching for that same snack again if you mistakenly remove it. After, you can name your list and select an image to be used for the card to visually represent the list from a default set of graphics.



Other Features

Aside from the screen themselves, major components required multiple iterations. Here are a couple.


Tags


The original tags names were safe, risky and deadly. Now deadly seemed to be a bit of a strong word so I later decided to change it to dangerous, which is a longer word but is less aggressive sounding and a better fit for the suggesting tone this app uses to recommend snacks/restaurants.

Aside from the language, there was also the challenge of placement within cards. By placing the tag on top of the image, the two clashed and appeared to fight for prominence. Adding a colour overlay on the image defeats the purpose of using a visual to show the user what the product/restaurant looks like. If the tag is placed above the content, extra negative space is created and the tag appears as a separate element from the text, when tags are meant to support and categorize the content. Through 5-second tests, I also found that left aligning a tag matched the users’ reading pattern (F-pattern), and was not overlooked, in comparison to the right-aligned tags, where users found that they had to look out of their way to read it.



List Cards


There were 4 different card designs I iterated upon. The idea behind using photos of the snacks in the lists themselves was to show the users exactly what is in the list. #1 features images of 4 different snacks with list details as a text overlay.

However, this card style was distinct from other cards seen on the app so I removed the text overlay placing it under the images, as seen in #2. However, not all products can be nicely cropped into a square and so there were inconsistencies in the images, which were especially noticeable when images are placed side-by-side.

The use of illustrations was seen in the introductory chapters and so utilizing similar graphics would still maintain visual consistency across the app. I created a set of illustrations that depict various scenes that involve food. While these illustrations may not show what products are in the list, there was less clutter and imagery inconsistencies were eliminated.


Reflection

Learnings
This project has been a bit of an adventure since I started it back in March 2019 and it was only after I created the mockups when I realized that my solution did not necessarily hit the problem I had outlined. For example, I had a blog and had to really think about what the purpose of that was. Redoing the project and conducting additional research to ensure that my problem was a well-known issue was challenging as I had to eliminate as much bias and design decisions I made in the previous version.



Next Steps


This may be a second version of the app, but there are many more considerations that can be made to improve the design. For starters, users will know a restaurant utilizes nuts but they won’t know which ones are careful about their usage of nuts. A suggestion is to allow users to add a review or comments section on the product/restaurant pages. To identify other areas of improvements, user testing with the MVP could be conducted.

If this application were to be developed, further research into creating a database for the back-end would need to be done. For one, we would need to store snack and menu item ingredients and using the allergens the user inputs into the app and then try to find matches between the sets of data. If there is a match, risky or dangerous tags would be assigned. Otherwise, a safe tag can be assigned.


Portfolio Shortcuts

Project Voice

uwmidsun.com

Chromaz