Let'sEat

A mobile app to help indecisive diners choose where to eat
Header image

Background

Los Angeles alone boasts over thirty thousand restaurants and with many people often dining out for their meals, it can be hard to choose where to eat or even what to eat especially with someone else or a group of friends. While platforms like Yelp and Eater provide restaurant suggestions, the sheer volume of information can be overwhelming. 

Personally, my sister and I love to dine out and try different restaurants but the hard part is deciding where. We went with the old school solution of writing down our favorite restaurants and picking one from a jar whenever we’re both undecided. However, this limits our choices to familiar restaurants and offers no easy way to filter out foods that we don’t feel like eating. So there has to be a better, or rather, a more technologically advanced solution. Motivated by our shared struggle, I conducted user research and designed Let’sEat.

How might we help diners, who often eat with others, streamline the decision making process of choosing a reputable restaurant with trusted reviews while taking into consideration each individual’s dining preferences?
Mockup screen of brunch recommendations page
Mockup screen of a restaurant's information page

With today’s technology and harvesting the use of algorithms, Let'sEat is an app inspired by Tinder's swipe feature that can offer an efficient solution. Users can personalize their preferences thereby eliminating the need to sift through an array of lists, articles, and reviews. This new fun way to choose where to dine will make the selection process easier and more enjoyable.

My role

UX/UI Designer

Tools used

  • Google suite
  • Figma & FigJam
  • Miro
  • Clip Studio Paint
  • Calendly
  • Zoom
  • Maze

Duration

5 weeks
July to August 2023

Research

Goals and objectives

I conducted research to pinpoint users’ specific habits and struggles when dining out. This helped me validate my preliminary ideas and discover other frustrations that users have.

  • Learn about people’s habits when picking out a place to eat either for themselves, with someone else, or in a group
  • Identify users’ thought process and feelings as they choose a place to eat
  • Discover any frustrations during the process of choosing where to dine

Competitive analysis

Key insights

  • Both yelp and OpenTable have good search and filtering systems with plenty of categories whereas Eater is lacking
  • All 3 competitors offer reviews and recommendations but there is an abundance of choices and information which is easily overwhelming
  • On both yelp and OpenTable, it can be hard for new or smaller restaurants to get noticed without having to pay

User survey

70% pie chart
60% pie chart
60% pie chart

70% of participants dine out or order takeout at least once a week.

60% of participants dine out with someone else or in a group.

60% of participants find themselves indecisive or don’t know where they want to go eat.

9 out of 10

participants always check reviews before deciding on a restaurant.

7 out of 10

participants always check the photos (interior, exterior, food, etc.)

Based on the survey data, an app that aids in the decision making process of choosing a restaurant can prove to be useful due to the high percentage of individuals who dine out and find themselves troubled by the task of choosing where to eat. It also highlights the importance of photos and reviews in their decision making process because a majority of participants check them prior to finalizing their choice.

User interviews and survey free response questions

Common frustrations

  • Across platforms such as Yelp and OpenTable, participants expressed concern regarding the overall credibility of reviews - that they’re not always accurate because people tend to voice negativity more often or certain restaurants might be promoted/sponsored to the top of the search results.
  • Platforms don't show all available restaurants and may have inaccurate information. For example, a search on Yelp and a search on Google can yield two different listings. Or for OpenTable and Resy, not all restaurants are on the platforms and reservation information can be inaccurate. The app might show a restaurant as fully booked but when calling the restaurant, there are actually open tables available.

Common behaviors

  • When dining with someone else or in a group, all participants are considerate of who they’re dining with and make their final choice based on what everyone agrees upon. Participants find it hard to satisfy everyone and that it could get frustrating when no one wants to make a final decision or it’s hard for everyone to agree.
  • Almost all participants know vaguely beforehand what they’re looking for in terms of cuisine, location, and budget so having filters that can narrow their search by specific criteria would be beneficial.

Define & Ideate

Revisiting the question:

How might we help diners, who often eat with others, streamline the decision making process of choosing a reputable restaurant with trusted reviews while taking into consideration each individual’s dining preferences?

Persona - Alex

Let’sEat addresses Alex’s needs and goals by:

  • Offering a fun and easy way to select a restaurant with friends based on their personal preferences
  • Verification of restaurant reviews that confirms the reviewer has dined at the restaurant
  • Restaurant recommendations (not sponsored!) based on each individuals dining preferences

Main User flow and task flow

Main user flow and task flow charts

Additional task flows essential to Let'sEat

Additional task flow charts

Feature roadmap

From the user persona, user flow, and task flows, essential features were prioritized based on what is needed to best represent the concept of Let’sEat. The ability to add friends and to tap/swipe left and right to flip through restaurant choices were necessary to showcase Let’sEat’s concept. Writing reviews and verifying diners were important based on user interviews because participants expressed the need for reputable reviews when choosing a restaurant. In addition, being able to change dining preferences is also vital because it helps provide adequate filters for the user to narrow down their search. 

For future considerations, an onboarding tutorial would be helpful in showing the user how to use Let’sEat’s key feature. Since this is a relatively new concept being applied, there might be a slight learning curve. This was observed in the usability test that will be discussed in the usability testing results section.

Design

Low and mid-fidelity wireframes

Branding

The logo of a plate, fork, and knife uses imagery that is synonymous with restaurant dining and the Let'sEat wordmark is partly in cursive to showcase a casual and friendly feel. Red is the main color choice because it's eye-catching and has been known to stimulate appetites according to psychological studies. It's also a common design choice amongst other food-related products such as Yelp and Eater so I wanted to stay with something users are already familiar with. Shades of teal is used as a contrast to the red.

Branding image showing logos, color palette, and typography

UI components

UI components image

High-fidelity wireframes

Usability test

Usability test research goals

  • Identify any usability issues in completing the task flows
  • Identify how users feel about Let’sEat’s key feature
  • Discover how users feel about the app overall

Quantitative findings

7 participants completed the unmoderated usability test on maze. The first task covered the main user flow and task flow of inviting a friend and choosing where to eat. It was broken up into three parts (1a, 1b, 1c) that guides the user to the final goal of confirming a restaurant choice.

Results breakdown

Instructions: You would like to grab brunch and invite your friend Kimberly to choose a restaurant. How would you go about doing that?

Results of task 1a for usability testing

Results were as expected for this task, all participants were able to successfully complete it.

Instructions: Tap through the restaurant cards until you see one that you like. In this case, please “like” Lazy Morning Cafe and view more information about the restaurant.

100% completion rate pie chart for task 1b

Some of the metrics (rate of direct success, misclicks, and average duration) are not applicable for this sub-task because the task was designed for exploration. Users were free to click through the restaurant cards therefore there is no direct path. The number of clicks and duration would also be negligible. The restaurant cards were essentially connected in a “loop” in the prototype and in order to complete the task, they will need to finish on the information page for Lazy Morning Café.

Instructions: How would you find out what you and Kimberly have mutually liked and make the final decision to dine at Lazy Morning Cafe?

results chart of task 1c from usability testing

The average duration of 50.9s for this task was longer than expected and there was one participant who did not finish the task. This means that it was not intuitive right away on how to get to the right page and thus participants had to click around. Participants who completed the task via indirect paths would have more misclicks recorded. Upon examining the detailed paths and heatmaps from those participants, they were all able to complete it once they landed on the correct page which was the "likes" page.

Instructions: You would like to write a review for Lazy Morning Cafe. How would you go about doing that?

results chart of task 2 from usability testing

Results for this task were as expected. There were no major road bumps along the way for participants and they were all able to complete the task via the direct path.

Instructions: How would you go about changing your dining preferences to include Chinese food and a restaurant that is pet friendly?

results chart of task 3 from usability testing

The misclicks for task 3 can be disregarded because it involved selecting different categories organized in pills and upon checking the heatmap and clicks data, it showed that participants tried to click on the various pill options a lot which would skew the data. Four participants completed the task via the direct path using the “More” menu option while three completed via an alternate path where they changed their preferences from the feed pages. Both methods are correct and lead to completion of the task so the “direct success” path measure was not applicable.

Tasks 1a to 1c overall

Usability test for task 1 opinion scale chart

Since Let’sEat is a new concept, there is a bit of a learning curve which was identified towards the latter part of task 1 based on the test results. Let’sEat would benefit from having an onboarding tutorial for first-time users. Despite this, the average rating of 4.1 is still pretty high and majority of participants found the task to be easy.

Tasks 2 to 3 overall

Usability test for tasks 3 and 4 opinion scale chart

The average rating of 3.9 was a bit lower than I had expected since I thought tasks 2 and 3 were shorter and more straightforward. One of the main issues identified from the participants' free responses was that the pill states between selected and unselected were hard to differentiate. Another was that the pills felt disorganized. Therefore, these components would benefit from a redesign to provide more visual clarity.

Qualitative findings

Almost all participants like the concept of Let’sEat and feel that it can help ease their struggle of finding a place to eat. However, there were a few issues that stood out. Notably, the filter options were unclear because there was not enough contrast or strong indication between selected and unselected pills. Other suggestions include clearer indication or labeling for inviting a friend and finding their mutual likes on the app. These screens will benefit from redesigns in further iterations.

Prioritization matrix - MoSCoW

Prioritization matrix of things to address from the usability test

The concerns identified during the usability test were organized into a prioritization matrix using the MoSCoW method. It helped focus on the high priority quick fixes that are feasible within the limited scope of the project.

  • Change the color and fill for the filter options (pills) - this is a major concern especially for accessibility since there was not enough visual difference between the selected and unselected states
  • Filter tags to be more organized - ordering them alphabetically can help users find certain categories easier versus listing them at random
  • Clearer indication of where to find mutual likes - it wasn’t intuitive for all participants to go to the Likes page to find this information. Changing the icon from a heart to something else may help
  • Change the selection box design when inviting a friend - the initial design is a small checkbox so it wasn’t very noticeable. Adding additional visual indication to the selection box will help make it stand out more

Iterations

Filter option pills redesign and reorganization

I added a color fill to the pills to better help distinguish between its selected and unselected states. I also reorganized the pills to be in alphabetical order to help find certain category items easier. In addition, I increased the vertical size of the pop-up so that the sizing is consistent with the other screen overlays.

Before and after images of the Preferences pop up overlay iteration

Icon change for "Likes"

The original icon was a heart and the new icon features a person and a heart. The new icon will help indicate that the page also lists likes by other people.

Before and after images of the icon change

Invite selection box

I added a rectangle background to the selected state so that it stands out more and this makes it clearer which option was selected at glance. Other minor changes include increased spacing between rows to account for the new rectangle, increased vertical sizing of the pop-up to be consistent with the other screen overlays, and a change to the search bar text for clarity.

Before and after images of the Invite friend pop up overlay

Final prototype

Inviting a friend and choosing a restaurant

GIF of inviting a friend
GIF of going through restaurant choices and liking one of them
GIF of choosing a restaurant you and a friend liked

Posting a restaurant review and changing dining preferences

GIF of posting a review
GIF of changing dining preferences

Project takeaways and future considerations

While working on designing Let’sEat, I gave a lot of thought into creating the task flows, screens, and prototype. My goal was to make it simple and short without having the user go through too many steps. In retrospect, one of my flows (change dining preferences) has a number of different entry points to complete the task. I had not taken that into consideration when creating the usability test on maze so I didn’t add any alternate paths in addition to the direct path. And so, it wasn’t until after I checked the in-depth results that I realized I should have added other paths. Had I did, I imagine that the results data would be slightly different. 

My approach for the usability test this time around was to word my tasks around a scenario rather than giving direct instructions like I did for my Tapas project. I think this definitely helped provide more insight on what paths users intuitively take. 

Overall, this project was very enjoyable and made me very hungry. If I had more time, I would like to explore expanding this concept to include movies, games, and other group activities. Furthermore, I would also like to experiment with smart animate interactions within the prototype to replicate swiping cards.

View my other projects

Mockup

Tapas

Adding a new "Monthly Binge" feature
Mockup

Omakase

Personalized mystery trips to Japan for spontaneous travelers
Mockup

CraftCircles

An online platform for craft entusiasts