Yelp Redesign


For my User Experience class at UCLA, we had to select a product and conduct a UX case study on it for 10 weeks. I decided to focus my case study on Yelp as it is one of the most commonly used apps by college students to find good restaurants nearby.

My Role: I worked on this project as a UX Researcher to find out the pain points in using the Yelp app and come up with a solution to solve it. Due to the limitations of a 10 week project, I narrowed down the scope of this project to only focus on the restaurant preview part of the Yelp app.

The Problem

I’ve always appreciated the functionality and purpose of the Yelp app because of its ability to provide such a huge database of information. However, despite of its popularity, Yelp’s UI design can be quite confusing and monotonous. Considering that it’s an essential app used by people every day, it lacks a clear UX flow and modern design. I identified 3 main problems with restaurant preview aspect of the app:

The Process

Heuristic Evaluation

To get a better understanding of what was not working with the current design, I did a detailed evaluation of a restaurant preview screen of Gushi on Yelp.

User Research

Before doing the user research, I identified key stakeholders of Yelp. This helped me to select a pool of participants for my interview.

User Interviews: I was able to conduct 44 interviews in total. The format of the interview was pretty simple and contained a couple questions related to the use and their experience of the app.

Cognitive Walkthroughs: I also conducted cognitive walkthroughs with 5 users and asked them to perform the following tasks:

1. Find the restaurant AOC on the Yelp app

2. Find the restaurant menu and timings

3. Find the option to write a review for this restaurant

4. Find the option to check into this restaurant

5. Find all the photos posted for this restaurant

The findings from the cognitive walkthroughs aided me tremendously to make some conclusions about the functionality of Yelp’s current design. For example, I was able to gather that many users did not think it was intuitive to find the option to write a review on the app. Most of them took longer than expected and the average time was about 10-15 seconds.

UX Flow and Wireframing

UX Flow: Before moving to the wireframing phase, I drew out the user flow for the product preview page on Yelp to get a better understanding of the type of information that was included in the screen.

Wireframing: After this, I started wireframing based on all the feedback received from the research. This helped me to cut down some aspects of the existing design and add new items to improve the overall structure of the screen.

Final Mockup

The final redesign for the product preview screen on the Yelp app was streamlined to pack a lot of information in an optimized manner. Information contained clear distinction through font hierarchy and an organized layout. New color scheme for ratings was also added to reflect normal color associations
(green for good and red for bad) as the previous rating system (orange to red) seemed confusing for some users.