Foodie Mobile App
Case Study
01
Project Overview
The Foodie app is designed for restaurant goers who enjoy a good meal, have dietary concerns, are looking for new experiences, and are tired of horrible menu photos uploaded to Facebook.
This project came about as part of my Google UX certificate with a prompt selected from random generated ideas. However, I’m a total foodie myself and I loved the idea of building out an app that helped people find restaurants in new ways, such as based on meals or searching by dietary restrictions.
Problem Statement
Online photos of menus are often hard to read and cannot be translated into other languages, making it difficult for non-English speakers to determine what is at a restaurant. Not being able to search through menus can make it difficult for those with dietary restrictions or allergies find restaurants with meals they can eat.
The Goal
To design a menu app for food lovers that allows translation and sorting for dietary considerations.
The Team
Since the project was a part of the Google UX course, I had access to group chat of other UX designers, tutorials, and Coursera staff.
My Role
I was the Solo UX and graphic designer for the Foodie app, responsible for conducting user interviews, paper and digital wireframing, creating low and high fidelity mockups and prototypes, accounting for accessibility, and ideating on designs.
02
Understanding the User
To begin understanding who might use the app and how to meet their needs, I undertook user interviews. From these, I created an affinity map and distilled insights and themes. These results helped me create user personas with problem statements to solve. Finally, I created user journey maps to find additional pain points that could be solved for users.
User Interviews
I interviewed five individuals from different backgrounds and sexes who used the web or apps to find restaurants to visit, and especially looked at menus online. Several described themselves as big foodies.
I expected most users to have a problem with online menus, especially photos of menus, and some restaurant pages that were generic. This ended up being true, but I was really surprised by the number that mentioned links from website to Facebook pages where there would be a really poor quality photo menu. Plus, some suggestions on how important it was to organize a menu or offer more information such as ingredients or calories really impressed me.
Pain Points
Photo Menus
These are often blurry and cannot be translated or read by text-to-speech apps, making them inaccessible to some people.
Lack of Organization
Some apps have menus but don’t separate entrees from appetizers, making them difficult to navigate quickly. Other sites might not have information such as ingredients or calories, which help those with allergies or dieting.
Menus Don't Change
Many restaurants have standard fare, which can be great and a favorite. But if things don’t change and there aren’t many restaurant choices in town, patrons can get bored, especially foodies.
Unhelpful Reviews
When reviews aren’t organized, are generic, or are for a chain restaurant and might not be for the local store, they aren’t very helpful and difficult to trust.
Personas
Based on user interviews and pain points, I created two personas to guide the app development.
User Journey Map
I created user journey maps to look for additional improvement opportunities for my two personas that the user interviews had not revealed.
Competitor Audit
As part of the research phase, I completed a competitor audit to see what was available currently and where I could create something better for users.
03
Low Fidelity Wireframes
With the user research completed, I began ideating with several brain storming exercises, developed paper wireframes before moving to wireframes in Figma, and then running a Usability Study on the low-fidelity prototype.
Storyboards
To help understand how the app might function and why users would use it over other apps, I created two storyboards on paper.
Paper Wireframes
Creating the paper wireframes helped bring out ideas that wouldn’t have emerged otherwise. Using Crazy8s, I made five quick draft ideas. Taking the best of the five drafts, I focused on quick access to the features a foodie would favor, while keeping the accessibility options & allergy information a touch away on a bottom bar.
Figma Lo-Fidelity Wireframes
With the brainstorming on layout complete, I kept the user personas and their needs in mind as I created the digital wireframes for initial testing.
Functionality that made it easy for a user to navigate options that wouldn’t work for their health while still displaying all options for friends and family was key to making this a useful tool.
Lo-Fidelity Prototype
The main purpose of the app is to show well categorized restaurant menus with the ability to make reservations and write reviews. However, the flow includes the ability to sort for allergies, translate, or have the app speak.
Try out the Low Fidelity Prototype (tip: click on the prototype and click F to go to fullscreen mode)
04
User Testing
With a low fidelity prototype ready to go, I undertook usability testing, starting with creating a test plan and questions, running the usability test, creating an affinity map, and ranking improvements before beginning iteration development.
Usability Study Details
Research Questions
- How long does it take a user to add in allergy information and use it to sort menus?
- Are users able to choose a restaurant and make a reservation?
- What can we learn about how users navigate the app?
- Are there any parts of the process where users are getting stuck?
Participants
5 participants
3 men and 2 women aged between 20 and 70, 1 vegan, 1 with a food allergy, 1 with a low carb/low calorie diet
Methodology
60 minutes
USA, remote
Unmoderated usability study
Users were asked to perform tasks in a low-fidelity prototype
Usability Study Themes
Theme 1
Most participants wanted different options under allergy types.
- 1 user wanted dietary choices like vegan or vegetarian as options.
- 1 user had a rare allergen and was concerned it would be an option
- 1 user was on a low carb/low calorie diet
“I wanted to add the fact that I’m vegan. That isn’t an allergy, though. Would I still find it here and will the app still work for me, because that would be great if it did!”
Before
After
Theme 2
A majority of participants wanted confirmation from the restaurant that a reservation was made.
- 3 of the 5 participants wanted some notification that the restaurant had received the booking request.
- 1 wanted a notification if a restaurant was closed
- 1 wanted to know if there was a minimum time limit before a reservation was made.
“What happens if there are no tables available? Will I get an email from the restaurant or a call?”
Before
After
Theme 3
Some participants requested to be able to search by restaurant from the menu item screen.
- 2 out of 5 participants wanted to be able to select a menu item they liked and then filter by that restaurant.
- 1 participant worried that family members would find dishes at different restaurants
“Can you sort by restaurant? What if my wife and I inadvertently choose dishes from different restaurants? The individual food listings under categories might need to say which restaurant it is from and you should be able to sort the app by restaurant, especially right from a menu item screen so you can see what else that restaurant offers.”
Before
After
Theme 4
Some participants requested access to reservation information after booking.
- 1 out of 5 participants wanted to be able to check directions after adding the reservation to the calendar.
- 1 participant wondered about reminders of upcoming reservations.
“If I click on ‘add to calendar,’ can I then back up to get directions? I mean, I supposed I could Google how to get there, but it would be nice to be able to see where I’m going in the app too.”
Before
After
Themes Needing Further Research
An option to follow reviewers
How should food be broken down into searchable categories?
Additional information in menu item screen
Option to use a calendar to schedule a reservation
One participant had the request to be able to follow favorite reviewers with the hope of that leading to discovery of new places and meals.
One participant asked if “children’s meals” would be one of the food categories listed.
One participant asked for calorie and carb count be included in the menu screen. While a second felt that meals that were vegetarian or vegan have an icon or wording.
One participant suggested that a calendar option be used for scheduling reservations rather than a text box.
05
High Fidelity Design
With the usability testing complete on the low fideling prototype, I went to work updating the wireframes to high fidelity, making changes recommended by users as I went. Though, to start, a brand guide including colors, fonts, and a logo needed to be created.
Brand Guide
I wanted the app to have a fun, modern feel. After trying several color variations, I went with a dark and light green color base that was contrasted with a vibrant orange for high attention items. These colors were set against a neutral cream background.
Colors
Logo Variations
Sticker Sheet
High Fidelity Wireframes
High Fidelity Prototype
Animation of the Foodie prototype
Clickable Figma prototype
(tip: click prototype and press F for fullscreen mode)
06
High Fidelity User Testing
I undertook a second round of user testing now that the high fidelity prototype was ready. Following the same tests as under the first user testing round, I updated my user testing plan, scheduled meetings with my volunteers, organized the feedback and reactions from the test into an affinity map, themes, and insights, ranked them, and finally updated the wireframes to answer some of their key points.
Usability Study Details
Research Prompts
- Prompt 1: Enter your dietary/allergy information
- Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the process of finding or entering your dietary needs?
- Prompt 2: Sort the food selection category
- Prompt 3: Pick a menu item
- Prompt 3 follow-up: How easy or difficult was this task to complete? Is there anything you would change?
- Prompt 4: Review the menu item’s information screen?
- Prompt 4 follow-up: Is there anything on the screen you would change? Do you find the information listed useful?
- Prompt 5: Make a reservation and confirm
- Prompt 5 follow-up: How easy was it to complete this task? Is there anything you would change?
Participants
5 participants
3 men and 2 women aged between 20 and 70, 1 vegan, 1 with a food allergy, 1 with a low carb/low calorie diet
Methodology
60 minutes
USA, remote
Unmoderated usability study
Users were asked to perform tasks in a high-fidelity prototype
Changes Made From Usability Study
Findings
The second usability study revealed that users felt a little lost in the number of menus and choices. They wanted to be able to see if they were scrolling across all menus or were under a restaurant.
To help accommodate this, I “froze” the restaurant header during scroll.
“I’m afraid I’m picking menu items from several restaurants and I’ll be disappointed when I show up for a night out.”
Before
After
07
Lessons Learned
This app was undertaken as part of the Google UX certificate, but it quickly became a passion project since I am a foodie myself. But I’m not the user. The users I interviewed had great ideas and took the app in directions I never would have considered. This is the power of UX design.
The impact of an app like this in the real world would help many users who find photos of menus difficult to read and impossible to translate or who have dietary needs that limit their food choice. As one user said, “I wouldn’t have to drive all the way to the restaurant for a fun night out and discover I had one menu choice!”
The biggest problem I see is that currently the app has no way to monetize it. Therefore, in a business sense, I don’t see how it would work unless it was built out as one user suggested and made it into an online ordering app as well. Besides that, screens on how restaurants would input menus… and talking to restaurants to see if they would be willing to input the details needed for the app to work such as ingredients. Plus, I’d love to also add a few screens to be able to follow favorite reviewers to see where they’ve been and enjoyed could make it more of a community and not just rely on existing social media platforms.