top of page
01_Free psd mockup.jpg

RestAllergy App

A 6 month long academic project, that involves user research, ideation, visual design, and usability testing. Purpose is to provide an mobile app that helps people with food allergies be able to eat comfortably when dining out.

My Role

Solo Project

Entire product design from research to ideation, to UI design to testing.

Project Duration

6 Months

Area of Focus

Restaurant / Food / Health / Location

Synopsis

This is a 6 month long academic project that I did while learning from Springboard UX Design online bootcamp. The main topic for this project is to see what are the issues that people with food allergies experienced and try to design a digital application from the research in order to improve said experiences.

If you want to jump ahead to view the ideations process or visual design you can click on their respective links below and it would take you straight to that process.

1. Research
2. Ideation
3. Visual Design
4. Usability Testing

Challenges and Restrictions

The restrictions and challenges that you see below impacted which methodologies is used for this project.

UpdatedCapstonProject.jpg
Research

Interviews and Surveys

Interviews and Surveys

Screen Shot 2021-01-04 at 9.04.39 PM.png

With the knowledge that there has been an increase amount people with food allergies, I decided to dig deeper behind their experiences. I focus mainly on the younger audience with food allergies between 19 to 30 years olds. After getting around 48 responses, 90% are from r/foodallergies, I decided to narrow down the one that I feel I can explore more with the interviews. 

Areas of Focus
  • Experience when eating out positive & negative.

  • Eating Behaviors & comfort levels.

  • Coping with allergic reactions.

  • The severity of allergic reaction.

  • Relationships and trust with food business / restaurant.

Example questions to ask during interviews
  • How comfortable are you when eating at a new restaurant compared to restaurants that you know?

  • What kind of methods do you use to prevent food allergies and why do you use it?

  • Tell me about a negative / positive experience that you have when eating out? and why? 

Analysis after interviews & surveys

After conducting the 5 zoom interviews, I have found three major problems that people with food allergies are experiencing.

UpdatedCapstonProject3.jpg

User Personas

How I ended up with Curtis as my main persona

According the what I have found, there has been a distinct separation between those that have severe allergies than those that have mild allergies; especially in regards to trust and concerns when dining out. 

Persona Long Sheet Version.jpg
User Personas_AllergyFood.jpg
Example Scenario

Here is an illustrated example as to what concerns & frustrations Curtis has to face when going out to eat.

Storyboard_Text.jpg
1654 (1).jpg

How might we provide people with food allergies the information and option to feel comfortable when eating out?

Brainstorming

Here is where I would show you the process that went through in order to figure out what kind of solution I would provide, and what key features that would serve as an MVP for my app before moving to wireframing. 

Sketch Dump

This is an example of the multiple sketches that I did for the sketch dump to see what kind of interesting ideas I can take my design. The amount of grounded to over-the-top ideas were inspired by Design Thinking Ideation process, where I would let loose my creativity. If I choose an exaggerated idea that I liked I can always bring it back to reality down the road.

UpdatedCapstonProject7.jpg
Exploring the user's journey

In addition to sketch dumping I've also created a few user scenarios that I believe users like Curtis would be in when they feel the need to go out and eat. Some of these scenarios were inspired by the answers that the interviews gave.

UpdatedCapstonProject8.jpg
The main features and their flows

By looking at both my brainstorming and which scenarios would my users mostly take I have decided on five main features for my design's MVP.

UpdatedCapstonProject9.jpg
UpdatedCapstonProject12.jpg
Illustration of how my product would help the user

This is one of the many scenarios that I storyboarded for my presentation in order to help the views understand how product would help the user; for this example is locating which restaurants is the safest to eat.

Storyboard_Text.jpg
Ideation
01_Free psd mockup.jpg
Feature.png
Wireframing

Wireframing

Digital "Paper Prototypes"

Initially I made quickly "paper prototypes" like wireframes in order to do a quick guerilla test on its usability. To see whether or not I need to make changes such as removing a page or swapping the sequence. Due to Covid 19 restrictions, I ended up using a prototyping website called Maze to do my guerilla testing.

Planed user flows

Heading into the low fidelity wireframes, I've created three separate user flows that encompasses my main features.

Low Fidelity Wireframes

The wireframes below are some of the main pages for each of the flows. The program that I used for both the user flow and wireframes is Sketch.

Visual Design

The Prototype for the Test

Choosing the visuals for the app
Moodboard_images.jpg

Primary Colors:

  • The main choice of color is yellow due to its association with a sense of happiness and optimism, feelings that I want my app to evoke.

Sunset Feel:

  • I was inspired by the sunset colors as it gives an additional relaxation in order to ease the users anxiety with using my app.

  • Additional colors such as using purple as a secondary color and orange as a tertiary color. 

Menu Structure:

  • Since my app would have a lot of information I decided to based the usage of color hierarchy off of a food menu. 

  • Condensing a lot of information but structuring them in a way that would not visually overwhelm the user.

Style guide

Most of the style guide itself, especially the icon & inputs are building from an Andriod UI kit for Sketch.

Colors.jpg
Typography.jpg
NewIcons.jpg
High Fidelity Prototype

Usability Testing

In order to know if my app is convenient and easy to use by my target users, I've conducted at least two usability testing, each around 5-6 testers. Most of the testers have food allergies and/or has had a history of food related allergic reactions. I've also tested a couple of people with dietary restrictions due to the lack testers that fit my testing criteria.

Conducting the Test
Photoshoped ZoomCall.jpeg

  • All the test was conducted through Zoom, and have them share their screen for me to see and record.

 

  • The prototyping tools used for the test is Invision.

  • There are 5 scenarios given to every tester to test our each of the 5 features that I have. 

Test Results
UpdatedCapstonProject20.jpg
In Summary

For the majority of the feedback that I got the testers didn't have a problem with the restaurant menu, review, and onboarding tasks. In fact, the love that the app would give them the the best options available based off of their allergy preferences. Since most of the testers would go straight to the menu when viewing the restaurant, they weren't disappointed when they say that the food was also labelled based off of their allergen preferences. 

However the features that they had the most problems with were the location features and landing page, since most of them said that it was difficult to navigate through them in order to achieve the task that was given. In addition, the testers also mentioned that since personalizing the app based off of preference is such as fey feature, why not include personalized filters for the search feature and menu feature as well.

Usability Testing
01_Free psd mockup.jpg

Conclusion

After completing the second usability, test I went backto make further adjustments suc has hidden typos and adding real comments to the restaurant review page. In I have also listed below what I'm thinking of doing for the project in the far future, if I were to continue to work on this project. 

What's next for the near and far future
Updated_NextSteps.jpg
What I learned

Using specific social media groups for surveys and interviews

  • Since this was during a time of Covid 19, going to social media groups like r/FoodAllergies has helped me a lot in getting more people to do my survey and interviews. Some of the characteristics of the persona that impacted my design were inspired by the redditers that I interviewed. ​

Using UI Design Kits for quick prototyping.

  • The UI design kits shaved off a lot of time when prototyping my wireframes since I designed most of the style guide and wireframes by myself.

Adapting to digital tools for user research and testing.

  • Due to the project being conducted during Covid 19, I learned, from the class I took, how to conduct user research and usability testing on the computer rather than the usual physical research/test.

What I can improve on

Learn to adapt to situations where the testers start randomly clicking on the prototype. 

 

  • I would need to adjust my usability testing transcripts so that I have to let the testers know that its a prototype, "jpeg to jpeg" as I would say, otherwise the testers can get frustrated if they click on buttons that isn't part of the test.​

I have to make the prototype as real as possible. 

  • The next time I conduct the test I have the remove all text template, as it did cost me valuable feedback on the restaurant reviews simply because I didn't feel the need to add real comments in the prototype. 

Conclusion

Check out Similar Projects

Bottom of Page
bottom of page