UI/UX & Product Designer
signin.png

Eat (UI/UX)

Eat

UI/UX Class Project

 
Mockup-biteme.png

Overview

Eat is a mobile App that generates restaurants based on individual preferences.

  • What I did: Market/User research; Storytelling; Part of App UI/UX using Sketch and InVision

  • Team members: Catherine Mai, Isabelle Nguyen, Ziru Ling, Yining Xu, Sandria Tran

 

Elevator Pitch

There are a lot of individuals, groups of friends or couples who don’t know where to eat because they have time/money/location constraints, individual preferences that need to be satisfied, or just cannot find a way to get out of their boring daily routine regarding restaurant choices.

Therefore, Eat is a mobile App that automatically generates restaurants based on users’ own preferences. This way, it creates a more content space for everyone by engaging them into a more efficient and adventurous lifestyle.

 

Problem and Market Research

We came up to this problem because we were all able to empathize with it so much. Living around USC, we are surrounded by a neighborhood that are sometimes known as lack of good food. Therefore, as we stayed longer here, deciding what to eat had become more of an issue.

 

Market Research

Consolidating the problem, we have to know, first of all, if the problem had already been solved by existing solutions. Therefore, we conducted online market research, identified several competitors and created the following comparative matrix:

Here are some questions we thought of:

- What is the overall competitive landscape?

Yelp and those who review restaurants would be our main competitor for the reason that they are already established and well-known. There are numerous other restaurant review Apps (not as strong as Yelp), food delivery Apps (indirect competitors) and unpersonalized generators.

- What are the greatest competitors’ strengths? What might you use?

Huge number of active users that gives it access to big data analytics. Those data are valuable in terms of generating individualized experience for each user, and improving business growth overall. (Eg: Yelp) Therefore, it is possible for us to form contract and import some user data from Yelp, or try to form our own database, because our machine learning algorithm needs big data support.

- What are the greatest competitor’s weaknesses? What will you avoid?

For Yelp or Google Reviews, although they do distinguish between vegetarian and non-vegetarian restaurants, all its functionalities are still not personalized toward the user. Instead, they focus more on presenting concrete information instead of the process of choosing. For our product, users will be able to create a list filled with their favorite restaurants. Also, users will be able to add friends and see their friends’ list and save it to their own database if they likes the list.


User Research

By having the whole market in mind as a bigger picture, the next step is to consolidate our user needs. To know our users more, we conducted a survey (sample size 60) and 5 interviews.

A clip of part of our interview notes to show the process

A clip of part of our interview notes to show the process

 

Here are our takeaways:

Interview

  • An aesthetically pleasing interface will increase users’ likelihood to use an App

  • Users like the distinction of normal users’ content from professional content

  • Users with special food restrictions would like an authentic and clear distinguish of what they can eat and what they can’t

  • Users feel stress and other negative emotions when choosing food, because they always have to go through a routine or a list

Survey

  • Most people (more than 80%) said that food means a lot more than just a solution for hunger. Instead, people think it’s everything - pleasure, experience, health, lifestyle, and even an adventure.

    • This gave us positive feedbacks because we know that it constitutes an essential part of our users’ lives, thus making our product have actual values in the society.

  • Most people (more than 50%) eat out at least half of the time in a week, and they are willing to try somewhere new at least once a week.

    • Since we are doing restaurant searches instead of grocery/cooking App, this proves that we have a big market.

  • More than 60% of the people have more than 1 food Apps on their phone, and more than 70% usually use them to decide what to eat.

    • This means that App is a common existing solution to people, so it would be easier for us because common user behaviors are already developed.

  • 60% people said that when it comes to food choices, they feel indecisive. However, most of them said that even so, this kind of choices are actually kind of fun. Most people take around 10 minutes or more when making those choices.

    • This tells us the user mindset and environment they are being placed in when making food choices.

 

POVs and Personas

 
Screen Shot 2018-04-01 at 1.07.08 PM.png
 

Journey Maps

 

Storyboard

Screen Shot 2018-04-01 at 1.08.43 PM.png
Screen Shot 2018-04-01 at 1.08.49 PM.png
 

Ideation

Empathy Map

IMG_3111.JPG
 

HMW?

IMG_7418.JPG

Sorted:

IMG_2073.JPG
IMG_2572.JPG
IMG_7115.JPG

Three key questions:

IMG_5962.JPG
 

reference products

Image uploaded from iOS (1) copy.JPG
 

mind map

IMG_6623.JPG
 

SOLUTION SKETCHES AND RAPID PROTOTYPING

IMG_9136.JPG
IMG_7727.JPG
IMG_0895.JPG
 

team voting process

IMG_0037.JPG
 

Conclusion of Ideation

Themes discovered:

  • Enjoyable: use design to change users’ feeling of the decision process. Aim to reduce users’ stress and make them feel like it’s a fun process.

  • Efficiency: use design to shorten the time of making a decision and help make users more decisive and confident

  • Personalization: the extent to which users can get restaurant recommendations based on their individual choices and preferences

Final solution sets and why:

At the end of our voting session, we selected three most successful screens that address the three above themes most accurately and comprehensively. They are listed as the following:

  • Enjoyable: A main screen with a huge button that says “Bite Me”. When users click on it, it will lead to the automatic generator.

  • Efficiency: A Tinder-like swiping screen that let users swipe left for the restaurants that they don’t like, and swipe right for the ones they do. (This comes after we gathered user preference data and generated the potential restaurants for them.)

  • Personalization: If users don’t feel like swiping right for the first 5 restaurants we provided, then there will be an “Update Preference” that leads them to an “Update” screen. This will let users change some of the decision variables such as price, location and restrictions, and then get better results when they return to swiping

 

Low-Fidelity Prototype

wireframe flow

 

Sitemap

 

Visual Design

Ultimately our brand and visual identity can be summed up as fun and engaging. We want users to be relaxed and happy while using our app and so we really focused on making the visuals as appealing as possible. The roundness of our logo as well as the color choices represent the lively, fun personality of our brand.

UI Kit

 

Logo

Artboard 1@3x.png
 

icons

Screen Shot 2018-04-01 at 1.31.08 PM.png
 

typography

 

High-Fi Mockups

signin.png
Mockup-biteme.png