End to End · Food · Tourism · Translation
With its menu translation, visual aids and dietary guidance, Menumate offers a comprehensive solution to bridge the language barrier and make dining experiences abroad more accessible and enjoyable.
This product is a must-have for adventurous food enthusiasts looking to savor new flavors while ensuring their dietary preferences are met.
Sign up and onboarding process
THE CHALLENGE
My goal for the project was to ease the foreign dining experience. The original premise is simple- help diners order foreign menu items with greater ease and confidence.
My high level goals were to:
1. Differentiate from translation products that use optical character recognition
2. Give users greater confidence in trying new types of food
3. Create a personalized user flow for deeper engagement
I led the design of MenuMate between July and August 2023 and collaborated with Praveen Naga and seven participants who enjoy trying different foods when traveling abroad. Amongst the participants were product managers, a recruiter, customer education manager, waiter and chef.
KICKOFF
At the outset of the project, it was crucial to identify user pain points when dining in foreign settings. Without pre-existing insights, I created a questionnaire to explore how people navigate the foreign restaurant experience.
I interviewed five participants to understand the challenges diners face at foreign restaurants and the workarounds they employed. After which, I created an affinity map to visually map out patterns and developed a user persona to encapsulate the individuals from the studies.
What are any challenges you face when browsing through menus and making decisions?
When choosing a restaurant, how important is it for you to have access to detailed information about the menu items, such as ingredients, nutritional facts, or allergen information?
Have you ever used a mobile app or service for menu recognition or analysis? If yes, what was your experience like? If no, would you consider using such an app in the future?
What features or functionalities would you find most valuable in a menu recognition app?
How comfortable are you with sharing your location or dietary preferences with a menu recognition app to receive personalized recommendations?
What are some additional features or functionalities you would like to see in a menu recognition app that would enhance your dining experience?
Are there any concerns or reservations you have about using a menu recognition app? If yes, what are they?
What factors would influence your decision to use a menu recognition app over traditional menu browsing methods or other competing apps in the market?
KEY TAKEAWAYS
The common pain point for every interviewee was the decision making fatigue experienced when presented with a plethora of choices in a foreign setting. Diners often feel overwhelmed when presented with an array of unfamiliar dish options.
If diners often feel overwhelmed, how can we design a translation product that goes above and beyond typical Optical Character Recognition (OCR) technology? Research revealed opportunities to relieve cognitive overload for travelers.
Approximately 30% of restaurant-goers self-report having a food allergy or sensitivity (1). Dining at foreign restaurants increases the likelihood of allergic reactions for individuals with food allergies, mainly because of insufficient and inconsistent allergen labeling in food items. A significant proportion of anaphylactic reactions takes place outside the home, with a quarter occurring during restaurant meals (2).
For those with dietary restrictions, the process was just as much about determining what they cannot eat as it was about what they want to eat. This insight marked the inception of a guiding north star.
Bryan Endres A, Endres R, and Nižić MK. Restaurant disclosure of food allergens: analysis and economic implications. Tourism and Hospitality Research. (2021) 21(2):202–15. 10.1177/1467358420977576 [CrossRef] [Google Scholar] [Ref list]
Boyd M. Serving up allergy labeling: mitigating food allergen risks in restaurants. Oregon Law Rev. (2018) 97:109–82. [Google Scholar] [Ref list]
USERS AT THE FOREFRONT
Throughout the interview process, I discerned two distinct categories of food enthusiasts: those adhering to strict dietary standards and others who, while not well-versed in foreign cuisines, display enthusiasm and open-mindedness towards trying new flavors.
Robert is an adventurer who explores the world, immerses himself in diverse cuisines, all while navigating the challenges of being a pescatarian with a peanut allergy.
Melissa eagerly embraces diverse tastes and textures as she explores New York's rich culinary landscape, open-mindedly stepping outside her comfort zone to discover and appreciate new dishes and culinary traditions.
DEEPER INSIGHTS
Before jumping into design, it was important to compare existing menu translation products to help identify features that could set my product apart from the competition.
Evaluating competition against user interviews revealed big insights into how I could improve the foreign dining experience.
Not only should the product offer visual, text and auditory guidance; it should feature a profile builder that emphasizes and plays off the uniqueness of each user. By consolidating and streamlining features, the product can increase order confidence by featuring pronunciation assistance, visual aids, general dish descriptions and personalized dietary call outs.
REFRAMING THE PROBLEM
Ordering food is as much a process of elimination as it is a process of selection. This begged the question, how might we help diners quickly and efficiently rule out dishes they don't want? By providing pictures and incorporating a personalized dietary profile builder, we can help diners quickly and conveniently rule out menu items.
For example if they are allergic to shrimp but otherwise pescatarian, they should be able to record that in their profile and upon scanning menus be automatically prompted which items are pescatarian friendly and which items contain specific allergens.
The next step was to map out the main user and task flows for the product:
HOW WE GOT THERE
Three questions informed my design strategy:
How do you design for a variety of diners?
How to design intuitive, streamlined flows?
What other features would diners like besides the primary scan to translation feature?
Keep it simple. One primary feature. Ancillary product features should support the primary feature, not detract from it.
Primary feature: menu scan
Ancillary feature: profile page
Ancillary feature: history and favorites
Sign up process
I brainstormed 30 potential product names. Out of which, I quickly halved the list to 15. From there, I focused on selecting product names that were not only captivating but descriptive and self-explanatory which narrowed down a shortlist of four names. MenuMate was finally selected based on ease of saying and how it sounds both friendly and approachable.
The logo of MenuMate was influenced by the visual signal of a fork and spoon pair, suggesting a dining context. Upon reflection, I opted to make it more visually appealing by incorporating the circular form of a dinner plate by curving the fork and spoon accordingly. This resulted in a prominent empty space at the center. At first, a globe was added to represent an internationally focused product. However, after a few attempts, it became clear that this appeared overly cluttered and could be confused with a basketball. I tested how an icon symbolizing the translation process would look. Following some refinement, the final logo emerged.
MID-FIDELITY PROGRESSION
Considering this is a food-focused app, I utilized one of the most renowned color theory methods in food advertising. Yellow is widely associated with joy, coziness, and warmth. Red signifies affection and strength. Marketing specialists harness these two hues to captivate consumer interest and stimulate appetite. However, instead of relying on primary colors prevalent in many fast food chains, I opted for gentler shades of red and yellow.
Once I settled on the color palette, I opted for Noto Sans as the typeface. Since this app revolves around languages, Noto Sans was selected due to its comprehensive language support encompassing numerous languages and scripts globally. It offers legibility and accessibility across a wide array of languages. The card design took inspiration from various food apps that incorporate pops of color and easy to read black text against neutral white backgrounds. Rounded corners on cards add a soft touch, making the overall appearance approachable.
Designing an intuitive footer was crucial. I drew inspiration from Venmo's footer, which prioritizes its main feature of accomplishing transactions. In my footer, the scanning feature takes the spotlight, with the homepage and profile buttons bordering it. Visually, I aimed for a friendly and inviting look. I discovered cartoon sets that embody the product's usage, and after adjusting the colors for the logo, buttons, and cartoon sets, I established a visual scheme that complements the product.
After crafting basic wireframes for mock-ups, I progressed to mid-fidelity mock-ups, incorporating the established color scheme, icons, and logo.
FROM PROTOTYPE TO FINAL PRODUCT
Once the prototype was complete, a moderated usability test took place with six participants. To observe user navigation, 4 tasks were assigned, and numerous observations were documented.
1. Sign up and onboard
2. Complete profile, including dietary information
3. Scan and translate a menu. Select a dish for further details
4. Save a dish from a prior scan
Nearly all users found the experience straightforward and user-friendly. Nevertheless, ambiguous positioning of back and exit icons superimposed on unrelated content was a frequent source of confusion. Refer to the following chart for additional pain points:
KEY IMPROVEMENTS
Before
After
PROFILE COMPLETION
An additional onboarding screen was added to prompt and direct users of how to complete their profile. An avatar with a camera button replaced the large plus icon which confused users. The percentage complete status bar was replaced with yellow to be less alarming.
Before
After
dietary details
Initially, the dietary preferences section combined both different diet categories and allergies. Usability showed that the allergy section got lost at the end of it. So two tabs were created. The allergy section was altered to visually match the icons of different diets. Testing indicated the original red buttons were too prominent.
Before
After
SCAN LEGIBILITY
The back and favorite icons were lost in a sea of scanned information. A black gradient was added to the top and the icons were placed above it for improved visibility. The favorite icon was replaced with a save icon. A saved icon next to previously saved dishes was added to cue users when a favorite is available.
Before
After
ICON PLACEMENT
Major edits to the food card include shifting the exit icon out of the image space and all the way to the top, as well as moving the like/ dislike/ save icons towards the middle. Users weren't sure the difference between favoriting and liking so a save icon was swapped to be more self-explanatory.
The design
During travel moments when everything is demanding your attention, MenuMate eases the eating out experience. MenuMate helps guide you based around your personal diets. With visual aids and pronunciation assistance, you can feel more confident exploring new dishes.
Recalling saved dishes and menus
Scanning and translating a menu, followed by selecting a specific dish
FINAL THOUGHTS
All observations on the frequency-severity diagram were considered. Due to time limitations and the project's scope, not every idea gathered from the usability tests made it into the final version. For instance, proposals like adding restaurant names to the food cards didn't appear crucial, given the product's purpose. If more time were available for development, I'd want to include a home prompt when users log back in, asking where they last dined and what they ordered. This would develop the product into a food chronicle, promoting further engagement and inputs into the system. Eventually, incorporating a map feature that records users' dining locations and dishes would be desirable.
