yelp-header-image3-1

A fresh new look for the Yelp app

Yelp app redesign project (2018) - 5-week prototyping project

Yelp.com is a crowd-sourced business review and social networking site.

Why redesign?

As the sole UX designer for this project, I focused on the following for the app redesign:

  • User research
  • Wireframes
  • Design mock-up
  • Usability testing

My role

During a five-week design and prototyping class I focused on identifying and improving the current Yelp app:

  • Improve the existing navigation
  • A visually outstanding user experience

Problems that needed to be solved

After spending sometime on the app, I noticed some opportunities for improvement:

  • Navigation - finding a restaurant
  • Social interaction with friends
  • Advertisement placements
  • Creating a review

Out of the issues I experienced, I focused on improving the navigation to find a restaurant.

Platform

iOS and Android

User Research

I have never used the Yelp app, so I experienced the app from a new user's perspective. Once I downloaded the app and signed in, the home screen was a lot to take in: Rows of icons, an advertisement and a partial restaurant photo where all crowed into a layout above the fold. This demanded that the user had to scroll down the page to actually see nearby restaurants.

I wanted to know which categories had the most views in the app. I went online to do a little research and found https://zhiyangzeng.github.io/, which was exactly what I was looking for. The graphs and pie chart below especially stood out to me. With this information, I was able to organize my business categories from those with the most reviews to the fewest in my redesign.

Since finding a restaurant was my main focus, I wanted to dive deeper and see how Yelp laid out the copy for each restaurant profile. A few things I noticed:

  • The information hierarchy was unorganized.
  • What was each dollar sign worth?
  • The map was crowded with restaurant locations overlapping each other.
  • There wasn’t any vegan or food allergy information.
  • I wrote down all of the business information that was presented on the restaurant page and the general issues I encountered using the app. I then reviewed my notes to help reorganize and lay out the information in a manner that would create a better user experience.

User task flow

With the user research I collected, I started laying down the pathway for users to find a restaurant they’ve heard about. Below are a few changes that will help users get there faster:

  • Users don't have to sign in every time they enter the app if they’re not comfortable signing up.
  • Location access can be turned on in seconds.
  • Displays the top four business categories at your fingertips.
  • Less scrolling for restaurant information.
  • Voice recognition is a search option.
  • Alerts to remind users of appointments and reservations.

Wireframes

To find out how the restaurant information would be laid out, I started with a number of wireframe sketches to make my notes and findings come to life. While sketching out my wireframes, my goal was to satisfy every user with a focus on making the new Yelp app design accessible and inclusive for everyone, including users of any age and people with dietary restrictions or food allergies.

wireframes

High-fidelity wireframes

Splash Page

yelp-splashpage
1. User sign in

Once the user opens the app, they will have the option to continue As a Guest or Sign In. If the user chooses to enter As a Guest, they will continue to see the home screen. If the user chooses to Sign In, a splash page will appear.

Location Access

yelp-location-access-screen
2. Location access options

Users will be able to view the location access page after they launch the app. If the user chooses Don't Allow or Maybe Later, they will have the option to set up location access within their Profile page or the next time they use the app.

Nearby Businesses

yelp-nearby-screen
3. Finding a restaurant

If the user chooses the location access, the app will show the number of nearby businesses.

Nearby Restaurants

yelp-nearby-down-arrows-screen
4. Choosing a restaurant

Once the user taps the restaurant photo, a drop down menu appears with nearby restaurants. Tapping the photo again will close the dropdown menu.

Restaurants (Italian)

yelp-restaurtant-screen
5. Selecting a specific restaurant

Once the user is on the Restaurants page they will see which restaurants are nearby and what the serving options are. Users also have the option to call the restaurant, view the menu or find out more information about the restaurant.

Restaurant Profile

yelp-restaurtant-profile-screen
6. Pizzeria 88 profile

When the user is on a restaurant’s profile page, they are able to see the hours the restaurant is open, what the price range is, and get directions. If the user scrolls down, they will see the restaurant's URL, reviews, coupons, delivery and takeout options, amenities, payments, photos, and social media channels.

Restaurant Hours

yelp-restaurtant-profile-hour-screen
7. Pizzeria 88 hours

By tapping on the Hours button, the restaurant’s hours are displayed. Users also have the option to call, view the menu, or get directions with the row of buttons at the bottom of the screen.

Restaurant Prices

yelp-restaurtant-profile-prices-screen
8. Pizzeria 88 prices

The user is able to see the price range of a restaurant by tapping the Price button. If the user wants to go back to the restaurant’s profile page, all they need to do is tap the information button.

Design mock-ups

After I sketched my wireframes, they came alive in color. Using Yelp branding and remaining consistent with the website (which the current app is not), I moved forward by adding the accessibility features and elements in a hierarchical manner.

Splash Page

yelp-home-page2

Location Access

yelp-location-page2

Nearby Businesses

yelp-near-by-page3

Nearby Restaurants

yelp-near-by-page-down2

Restaurants (Italian)

yelp-restaurants3

Restaurant Profile

yelp-information-info_page2

Restaurant Hours

yelp-information-hours_page2

Restaurant Prices

yelp-information-price_page2

Yelp app prototype

Usability testing

After the mock-ups were completed, I wanted to see if my homework paid off, so I worked in InVision to flesh out the mock-ups and brought my designs to life.

I came up with five questions to ask three users of different ages (30-50) to test my Yelp app redesign. Each of them had previously used the Yelp app. They used my prototype on their devices to get a sense of how my design would be presented on different smartphones.

The user testing was successful and each of them found my new navigation experience to be clear and efficient. During the user testing, the most repeated comment that came up was that the copy was too small for them to read on their smartphones.

The outcome

Results from the user testing showed that my redesigned interface made it easier to find a restaurant and the content was a lot easier to understand than the current Yelp app. The information hierarchy was organized in the page layout, dollar signs also represented price ranges, visual icons showed which restaurants catered to customers with a special diet or those with food allergies, and the new design was accessible and inclusive for everyone.

My takeaway from this project was that I am able to layout out a mobile navigation and content within five weeks as well as complete a redesign, from the initial research stage to a final visual prototype.

"I like this design better than the present Yelp app!”

Margot Bausher – Inside Sales at Talyst Systems