Team
This was a solo side project
Contributions
I focused on the experience and interface design of the overall app.
Timeline
July 2019 (4 weeks)
Tools
Figma, Photoshop, Illustrator
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
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
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
There were 3 main concerns identified in these interviews. Firstly, it takes too long to find new snacks to try in stores or online since they are in this constant loop of reading the ingredients on items and then if it does not meet their needs, they repeat
with another item. Secondly, they are afraid Feelings of causing trouble when given snacks by friends and usually decline them. Lastly, they get frustrated when they visit restaurants, only to find out that they cannot eat there due to the use of multiple
allergens.
😪
It takes too long to find new snacks to try and read their ingredients both in stores and online.
😱
The fear of causing trouble makes it hard for them to ask about the ingredients in food given by friends.
😡
It's frustrating to visit restaurants and find out that they cannot eat their due to their allergies.
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?
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.
To ensure the visual design is consistent, I have established a basis for the app's visual langauge.
Here were the main features of the final design of the app!
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.
Aside from the screen themselves, major components required multiple iterations. Here are a couple.
Find allergen information for snacks (old + new)
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.
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.
