Work

About

Resume

Brief

Final Outcome

Research

User Interview

Wireframing

Visual Design

Usability Testing

Outro

Yelp Diet Mode

A new Yelp with diet-friendly features to help people with food restrictions better dine out.

This redesigned Yelp improves the overall user experience of the original Yelp, and helps people with food restrictions better dine out. Users can switch between the 'Diet Mode' and the regular mode through the toggle. In the 'Diet Mode', there will be personal recommendations based on users' dietary preference. This project provides both mobile and desktop versions.
Individual Project
2023/12
3 months
User Research
UI Design
Usability Testing
Information Architecture
Branding

The Problem

It is risky for people with food restrictions to dine out, because of the inefficient menu, and the inadequate communication with restaurant staff.

The Solution

A Diet-friendly mode on Yelp to give personal recommendations tailored to users’ dietary preference.

If the video couldn't be loaded, please click here:

https://www.bilibili.com/video/BV1DUpYeZENT/?spm_id_from=333.999.0.0&vd_source=ee7d9405b77508a584bf330beac9e027

Story Board

Let's meet Christina.

Christina's story with Yelp Diet Mode.

She was firstly asked to fill in her diet restrictions to build a diet profile, which recorded her dietary preference.

After she finished building the profile, there was a short tutorial about this new dietary feature.

Then she searched for some restaurants. She could apply allergen filters to specify the searching results.

She clicked into a diet-friendly restaurant, browsing the menu, applying diet filters to find dish tailored to her dietary preference.

She clicked into a diet-friendly restaurant, browsing the menu, applying diet filters to find dish tailored to her dietary preference.

In the detail page of the dish, all the allergens are labelled in different colors to be easily read. There also listed the customizable choice in the dish.

She entered the profile page to start making a new review.
‍
Then she switched to diet-related review to make a review on diet service.
‍
She also added an allergen to one dish to remind other users.

The process behind..

Research

Facts About Restaurant Food Safety

The Reasons Behind

Competitive Analysis

In order to get some reference from similar features, I conducted a competitive analysis. According to the analysis, I decided my product to focus on dining out experience, and having some socialization to enable users to see recommendations from others.

Apple Store Statics 2023

User Interview - Restaurants

In order to better understand users' demands, I conducted a user interview including both restaurants and customers.

Why Restaurants' Voice Also Matter?

A good dining out experience requires the active participation and commitment of restaurants as well.

Interview Goals

Challenges while treating customers with food restrictions

What kind of platforms they would like to collaborate with

The Insights

Most potential challenges in treating allergic customers is their unclear communication and requirements.

In order to avoid extra costs, restaurants would like customers to specify the level of their diet restrictions.

Restaurants are more willing to use allergy- related functions on platforms they have already collaborated with.

Design Decision #1

Designing new features based on Yelp

  • Most restaurants are more willing to use platforms they have collaborated with.
  • Yelp is a popular online review platform with a large user base.
  • Yelp focuses on local small & medium businesses, which are more likely to lack clear food safety guides.

Design Decision #2

2 Levels of Restrictions

  • Better specify customers’ diet requirements to help restaurants save budgets.
  • Expand customers’ options.

User Interview - Customers

Interview Goals

Challenges while treating customers with food restrictions

What kind of platforms they would like to collaborate with

The Insights

Customized options are important for customers with food restrictions.

Most people with food restrictions lack of an effective way to find suitable restaurants.

The ordering process can be inefficient and risky due to the unclear menu and servers without a thorough training.

Persona & Contextual Studies

A repetitive and risky ordering process

Problem Statements

Based on the pain points in customers' current behaviors, I have proceeded 3 problem statements and the features tackled to these problems.

3 HMW

Design Solutions

1. How might we enable restaurants to effectively understand customers’ dietary preferences?

Customer Profile

2. How Might We make customers quickly identify diet-friendly options on menu?

Allergen Labels

Diet-Friendly Menu

3. How Might We help customers easily locate restaurants that cater to dietary preferences?

Diet Filters

Diet-Related Reviews

Wireframing

After I confirmed the 5 key features, I have developed them into 4 main flows.

Information Architecture

Besides the new diet-related features, I also have adjusted the original Yelp structure to better organize the information architecture. For example, I combined the 'Me' page and 'More' page together because they have overlapped functions.

Visual Design - Moodboard

To start the visual design, I created a moodboard that conveys the key words for Yelp: delight, connecting, discover, trustworthy.

Color Palette

Then we created the color palette. We have changed the previous Yelp red to a salmon red to make it more visually appealing. Besides, in order to better differentiate the two modes, we have used a pair of complementary colors to stand for each of them.

Usability Testing

Change the icons for ‘Avoid’ and ‘Limit’ allergens

Users may confuse the original design with the ‘cancel’ button and try to click on it.

Cancel the ‘Diet Special Menu’

The original two categories are unnecessary because their only difference is whether certain tags have been applied.

Add a Tutorial for the ‘Diet Mode’

Users may not understand what the toggle stands for, or may not notice this function.

Pop Up the Colors of the Buttons

The original button is not visible enough in the colorful interface.

100 screens

We created 100 high-fidelity screens in total, including the mobile ones and desktop ones.

Outro

What I learned

  • Challenge myself to conduct interviews with different types of users.
  • Practice on maintaining legibility on screen with multiple information and colors.
  • Develop both the mobile and desktop screens while keeping consistency.

If I have more time

  • Design the restaurant side experience.
  • Implement the online ordering feature.
  • Refine more of the original Yelp structure.