OptiMenu
CONCEPT PROJECT - PRODUCT DESIGN - iOS
‘OptiMenu’ is an augmented reality restaurant menu that features real-scale food models, searchable content, and addresses the issue of physical menus.
Team
Me (Solo Project)
Roles
-
Research
-
UX/UI Design Lead
-
Wireframing
-
Prototyping
-
Project Management
Tools
-
Figma
-
FigJam
-
Google Surveys
-
Jira
Duration
2 months
Discover
Field Study
As a resident of DC, I observed my friends going to restaurants for outdoor dine-in in mid-May 2020. Restaurants still kept the use of QR codes for menus to keep their patrons safe as COVID-19 cases were steady. However, not all places observed the same protocols and still used physical menus.
My painpoints with Physical Menus
-
Hard to guarantee if they’ve been properly sanitized
-
Some places have multiple menus and they clutter the table
-
Sometimes menus are not updated
Another thing I’ve noticed with restaurants in general is that you never know exactly how big the portions are for the food you’re ordering.
Not all menus include pictures of their selections and you might have to rely on the waitstaff to tell you. I’m usually either underwhelmed or overwhelmed by food portions.
My disappointing $12 spicy tuna roll from Tokyo Pearl :(
My HUGE $18 Filipino Spicy Chicken Sandwich from Bad Saint :)
Summary of Insights
-
Unknown food portions
-
Unsanitary physical menus
-
Menus weren’t updated
-
Menus clutter the table
Sample Questions
-
Do you use the restaurant's dedicated QR code to use the menu?
-
What are key issues you have about electronic menus? About physical menus?
-
Do you use the restaurant’s modern POS system (ToastTab, Square, Ritual, UberEATS, etc) to pay for your orders?
-
How do you think using an Augmented Reality (AR) menu will help you with or enhance your restaurant experience? Think: Do you have trouble visualizing your food? Do the food descriptions not help? Do you want to know how big the portions are?
Key Insights from the 12 people that participated:
Shared Assumptions
-
Physical menus can clutter up space
-
Physical menus are not guaranteed to be thoroughly sterilized
-
Physical menus may not be readable or overwhelming
-
It would be extremely useful to actually see the portion sizes and what the dish looks like
Pain Points
-
Make mobile menus more readable
-
Allergens/Nutrition facts need to be more prominently displayed
-
Menus weren't updated
-
Better food descriptions
-
Make menus searchable
-
Physical menus can unsanitary, faded, or unreadable
Qualitative Survey
To test my assumptions from my field study, I sent out a Google Forms survey to the following:
Target Group
-
People who sit down at restaurants at least once a week
-
Ages 18-75
-
Have used an AR app before
Notable Insights
-
3% of participants use the QR code to access the restaurant's menu
-
64% of participants DO NOT use the restaurant's modern POS system to order or pay for their meals
-
Need better food descriptions and indications for allergens
Competitive Analysis
I needed to do a competitive analysis with existing AR menus and other AR technology to see what's unique about them and see what I could incorporate in this first iteration.
JARIT
Unique Features
-
Marker for the food to appear on the table
-
High-quality food models
Things that could be improved
-
Don't limit location with marker
-
More information on the dish (ingredients, allergens, etc.)
Amazon AR
Unique Features
-
Scan table to view model
-
Can view model anywhere
Things that could be improved
-
Ensuring real scalability
Key Things to Consider
I want this product to be an enjoyable and unique experience for the customer, so ideally we want a product that:
-
Ensures food portions are accurate and to scale
-
You can view your meal anywhere
-
The menus should be searchable and filters should be applicable
-
Allergens, ingredients, and nutrient facts are displayed
Jump to a section
Define
Persona
With the data gathered from the surveys, we will create the persona, Marcie, to represent the target user.
Empathy Map
We summarized participants’ responses and came up with what Marcie could Say, Think, Do, and Feel. (Pinch to zoom on mobile)
Customer Journey Map
Here is the initial user’s journey across all touchpoints and how we anticipate the user to feel at each point. Taking the insights from the qualitative surveys, we will not incorporate ordering/paying through the app. (Pinch to zoom on mobile)
Product Roadmap
I wanted to show the product roadmap to show how OptiMenu would evolve over time. For this project, we are doing a sample of Phase 1, with a few edits along the way. (Pinch to zoom on mobile)
Ideate
Task Flows
I created a few lo-fi wireframe screens and rough task flows that addressed initially discovered pain points. This version included an ordering flow (which will not be included in this iteration due to survey results). (Pinch to zoom on mobile)
How Might We:
Enhance the dine-in experience?
-
QR Scanning
How Might We:
Enhance the dine-in experience?
-
Clickable & Searchable Menus
-
AR Visuals
How Might We:
Enhance the dine-in experience?
-
Order and pay (nixed due to survey response)
Visual Design
Since we are merging technology and visuals with food, I wanted a logo that showed an eye or lens of sorts. I experimented with shapes and color and eventually went with version 2. It is a phone camera lens blended in with the shape of an eye with a fork and knife contained in a house that represents restaurants.
Typeface used: Sen Regular
Why: Readable, unique, menu friendly
BRANDING
LOGO & COLORS
Prototype
Wireframing
I did the wireframes in color to check if the branding colors worked throughout the app as well as finding areas of the design that needed more work. Only showing a few screens to demonstrate the most important changes to improve usability. (Pinch to zoom on mobile)
Test
Usability Testing
I conducted usability testing with 5 target users having them use Google Forms to record their results. I had them do the following tasks as themselves AND as a user in the following scenario:
You've been wanting to try an upscale restaurant without spending a fortune. Luckily, it is Restaurant Week and restaurants in your city have a set course menu for that week only. You want to try something new. You have an allergy to nuts and are doing Keto.
All participants were able to navigate through the app easily. Some participants wanted me to take this further and incorporate real AR and QR scanning flow mock-ups.
Measuring User Experience Success
User Flow & Information Architecture
I laid out the IA to make sure we account for each solution. [Things in brackets will change depending on restaurant] Skipped showing Log-in/Sign-up as that was the easiest task to get through. (Pinch to zoom on mobile)
Feedback
After final prototype test - Users wrote out suggestions to make the experience better:
Final Prototype!
Take Aways
Metrics
Measured User Experience Success and the result was overall positive.
Challenges
Personal Reflection
This project has ignited my passion for the restaurant/food/service industry. I've been obsessed with shows like Kitchen Nightmares, Chopped, Parts Unknown, and YouTubers such as Binging With Babbish, the Bon Apetit team, First We Feast, Panlasang Pinoy, and Joshua Weissman. I'd like to contribute my design skills to help this industry and be surrounded by my one true love: FOOD!
Lessons Learned
-
There is so much that goes into creating a satisfying experience for a restaurant-goer.
-
Immersing yourself in the industry is key to a successful product in the industry you're working in.
-
Keep telling people about this project! The people I've talked to about this project thought this was a wonderful idea and that it should be taken to the next level.
Overview
Problem Statement
With COVID-19 changing the restaurant industry, people are more wary about using physical menus. Physical menus can be: Unsanitary, hard to read, and take up space on the table. Additionally, most menus don’t tell you the whole picture. People want to know how big their meal is going to be as well as what's in their meal, in case they have dietary restrictions.
Solution
A digital menu that uses augmented reality to show exactly what the customer is getting. A menu app that shows the food to scale on your table and the ability to search and filter for certain ingredients and dietary restrictions.
Timeline
Design Process
