Yelp Diet Mode

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

My Role

My Role

My Role

UX Designer

UX Researcher

Responsibility

Responsibility

Responsibility

User Research



UI Design
Usability Testing


Wireframing

Team

Team

Team

Individual Project

Duration

Duration

Duration

2023/9-2023/12

3 months

The Problem

Dining out is risky for people with food restrictions, due to unclear menus and poor communication with staff.

The Problem

Dining out is risky for people with food restrictions, due to unclear menus and poor communication with staff.

The Solution

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

The Solution

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

Final Outcome

Final Outcome

Final Outcome

Final Outcome

Final Outcome

Feature 01

Diet Profile Setting

Builds a diet profile based on users’ personal restrictions. Includes a brief diet-toggle tutorial.

Feature 02

Allergen Labels &
Smart Filters

Allergen Labels & Smart Filters

Filter results to view color-coded allergen labels, ratings, and customizable dish options.

Feature 03

Diet-friendly Reviews

Commenting on diet services and letting users tag dish allergens to remind others.

The Process

The Process

The Process

The Process

The Process

Early Research

Facts About Restaurant Food Safety.

Early Research

Facts About Restaurant Food Safety.

Early Research

Facts About Restaurant Food Safety.

The Reasons Behind

competitive analysis

Recognizing a market gap, I decided to focus on the dining-out experience to create a unique solution.

competitive analysis

Recognizing a market gap, I decided to focus on the dining-out experience to create a unique solution.

competitive analysis

Recognizing a market gap, I decided to focus on the dining-out experience to create a unique solution.

competitive analysis

Recognizing a market gap, I decided to focus on the dining-out experience to create a unique solution.

Competitors have the problem of:

Dining-out guidance is unclear, with features not focused on dietary needs.

Dining-out guidance is unclear, with features not focused on dietary needs.

Dining-out guidance is unclear, with features not focused on dietary needs.

No personalize diet profiles or tailor recommendations.

No personalize diet profiles or tailor recommendations.

No personalize diet profiles or tailor recommendations.

Allergen information and filters are inconsistent, messy, and unreliable.

Allergen information and filters are inconsistent, messy, and unreliable.

Allergen information and filters are inconsistent, messy, and unreliable.

Competitors have the problem of:

Dining-out guidance is unclear, with features not focused on dietary needs.

No personalize diet profiles or tailor recommendations.

Allergen information and filters are inconsistent, messy, and unreliable.

Product Goals

From this, I set the following goals for the product:

Product Goals

From this, I set the following goals for the product:

Product Goals

From this, I set the following goals for the product:

Focus on dining-out experience with clear menus and dish suggestions.

Focus on dining-out experience with clear menus and dish suggestions.

Focus on dining-out experience with clear menus and dish suggestions.

Offer accurate personalization with a simple diet mode setup.

Offer accurate personalization with a simple diet mode setup.

Offer accurate personalization with a simple diet mode setup.

Provide clear allergen labels using color-coded icons and smart filters.

Provide clear allergen labels using color-coded icons and smart filters.

Provide clear allergen labels using color-coded icons and smart filters.

Enable reviews that tag allergens and note accommodations.

Enable reviews that tag allergens and note accommodations.

Enable reviews that tag allergens and note accommodations.

Product Goals

From this, I set the following goals for the product:

Focus on dining-out experience with clear menus and dish suggestions.

Offer accurate personalization with a simple diet mode setup.

Provide clear allergen labels using color-coded icons and smart filters.

Enable reviews that tag allergens and note accommodations.

User Research - Restaurant

Focus: Problems they meet while treating customers with food restrictions.

User Research - Restaurant

Focus: Problems they meet while treating customers with food restrictions.

User Research - Restaurant

Focus: Problems they meet while treating customers with food restrictions.

User Research - Restaurant

Focus: Problems they meet while treating customers with food restrictions.

It led to 2 Design Decisions

Decision 01

A concept based on Yelp

Restaurants prefer familiar platforms. Yelp attracts small local businesses that often lack clear food safety guidelines.

Decision 02

Two levels of restrictions

By clarifying dietary needs, the platform can reduce restaurant costs while expanding customer choices.

User Research - Customers

Focus: What is their dining-out process and main challenges?

User Research - Customers

Focus: What is their dining-out process and main challenges?

User Research - Customers

Focus: What is their dining-out process and main challenges?

User Research - Customers

Focus: What is their dining-out process and main challenges?

It led to 3 problem statements

Insight 01

How might we help customers easily share their dietary preferences to restaurants?

How might we help customers easily share their dietary preferences to restaurants?

How might we help customers easily share their dietary preferences to restaurants?

Insight 02

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

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

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

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

Insight 03

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

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

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

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

Usability Testing

I conducted usability testing with 10+ users, resulting in three key design changes.

Usability Testing

I conducted usability testing with 10+ users, resulting in three key design changes.

Usability Testing

I conducted usability testing with 10+ users, resulting in three key design changes.

Diet Profile

Before

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

After

Update the icons to prevent confusion, also better reflect the brand’s tone.

Add allergy icons to improve clarity.

Diet Special Menu

Before

Unnecessary categories with the use of the allergen tags

After

Categorize with diet filters to reduce unnecessary clicks.

Diet-related Comment

Before

Overly dense comment frames.

Users may be confused about whether allergen tags are clickable buttons or just labels.

After

Clean up the hierachy of the comment frames.

Match the CTA color with the diet mode to indicate the active mode.

Rebranding

Delight, Connecting, Discover

I rebranded Yelp’s design system to convey a trustworthy and delightful visual language, and refreshed the logo to reflect the updated brand identity.

Takeaways

Takeaways

Takeaways

Takeaways

Takeaways

What I learned

Conduct interviews with different types of users.

Ensure the on-screen legibility with complex visuals.

Maintain consistency across mobile and desktop.

If I have more time

Design the restaurant side experience.

Implement the online ordering feature.

Refine more of the original Yelp structure.