Yelp Redesign

For the design exercise, I chose to redesign some portions of the Yelp app and search for new approaches to the age old problem of picking a place to eat.

Research

For this exercise, my only option was to rely on the public research of others — not very thorough and often relevant to previous versions of the app. That said, there were still some takeaways:

Almost all users begin with Search.
Price categories were unclear.
Users love photos of food and ambience.
Users want to filter but find it difficult.
Reviews are a bit buried on the venue detail page.

Mindsets & Ideas

Because the user base for this app is very broad, mapping out task mindsets is probably more useful than personas. “We didn’t focus on age, gender, income level, or experience using the Web, since Yelp users come from all backgrounds.” A single user could open the app with different mindsets anyway.

1. Search / cuisine / proximity: Existing core flow

Yelp is a segment leader in content/data, but on mobile this strength can become a problem. The app tries to expose the huge wealth of content, but the mobile mindset is typically more about choosing quickly than diving deep into the details. The presentation of that content could be much better prioritized and less cluttered.

2. Variety

"No, I had Mexican for lunch." The desire for a different kind of food from recent meals. For users who eat out frequently, the app could deduce recent meals from location data, and use this to surface something different.

3. Clearer pricing

The research showed the current $$$$ vs $ approach is vague and confusing for users and would be improved by surfacing specific dollar amounts.

4. Giving reviews a curve

Improve trustworthiness of reviews by badging reviewers with their average review score to understand whether their terrible rating of this venue is abnormal or not.

5. Order / pay before arriving

This search filter exists, but you should be able to make reservations in the app. It could also be great to explore the option of ordering and paying before you arrive at the restaurant for a sit-down meal.

6. The sharing economy

This is probably different enough to live outside Yelp, but it would be interesting to facilitate people hosting home-cooked meals for small groups of strangers (soon to be new friends.)

7. Couple / group decision

This is an all-too common scenario that isn’t currently served. A group decision could be approached by

Process of mutual elimination
Prompting one user to suggest 2 or 3 spots and letting another user make the final choice between those
The fact that most of these decisions probably begin over texting mean this might best be addressed by an iMessage app that can live in that context.

8. Swap dining picks

Get paired with a foodie stranger where you pick each others’ dining establishments. Break out of your restaurant rut. Share a secret spot without publicizing it widely. Could also work well when visiting a new city.

9. New venues / avoiding crowds

The task of focusing on new venues works well, but would be nice to add the opposite: focusing on places with no waiting and a quiet atmosphere.

Executions

I chose to work on:
#1: Refining the existing core flow with a visual refresh and to better aid comparative choice
#7: A tiny iMessage app to help 2+ people pick a restaurant together quickly
#8 and #9: Swap Dining Picks

Start with rough sketches

1. Core flow redesign

My approach here was to make finding the right venue faster by making comparisons easier in many parts of the flow.

The existing app:

Heuristic of current design

Landing screen dry and unbranded
Venue info is scattered and unclear which photo it ties to.
Photos in suggested search results are too small to be useful.
Map prioritizes location accuracy when clarity is paramount in this moment
Map: floating panel obscures the map, a docked panel would be easier
Map: Numbered pins are hard to remember. Initial letters of restaurant names is a better mnemonic even if not unique.
Filter and List/Map buttons are easily lost
List view: photos are too small.
Star rating is part of brand but adds a lot of visual noise. The color is really the most important aspect for a quick read.
Detail page: CTAs are scattered and poorly organized.
Under reviews, user details are overkill.
The distinctions between the use of Review, Review Highlights and Tips has become blurred so that the content feels duplicative.

Visual redesign

I wanted to give the app an overdue visual refresh and make it lighter and more aesthetic, but without dramatically altering the established Yelp brand: fun, energetic and decidedly mid-market. This lets it flex a bit as a restaurant partner from fast food to fine dining.

This meant adding more white space and creating a clearer visual hierarchy while retaining the bulk of the powerful functionality. In some cases, similar features were streamlined.

Below is my Sketch page where I started on the left with the existing designs and refine as we move to the right to the final designs.

Search results

Streamlining to leave as much room for the photos as possible, but keeping all critical decision information.

A 2-up grid uses space better and allows enough listing on the page at once so a fair amount of comparison can be done without scrolling.

The old star ratings were part of the brand but added a lot of distracting visual noise. The redesigned ratings keep the color — the quickest read — but uses a simpler, bolder circular form that can still be read with some precision. I tried a few placements including over the photo before settling on this one.

Users like to filter quickly most of the time so they remain exposed. Surfacing rough amounts for a full meal is more concrete and valuable info than asking users to interpret dollar signs $$$$.

Users can see the map by reverse scrolling/swiping down anywhere which is indicated by the exposed strip of map just beneath filters.

Panning all photos at once

Swiping left or right on the page switches all the page's photos so that the photo subjects – food, interiors, exteriors, etc. – always match for quick comparison before diving in.

Map view

Users arrive here from the Search Results screen by reverse scrolling.

Large, overlapping pins and the floating info card both made the old map cluttered. Filters and venue info are now docked out of the way where the user can page through from left to right.

The old pins asked users to remember numbers as they switched views. Using initials is an easier mnemonic that allows smaller pins and eliminates the numbers from the Search Results page as well.

A quieter gray map lets colored pins communicate some rating info.

Detail page

This page has to present a lot of organized info clearly so users can quickly confirm the selection. I strengthened the visual hierarchy and organized the CTAs into a more consistent and parallel structure so that the user’s options are clearer.

I liked the old design’s reverse scroll to reveal photos as it keeps them at the top without using too much valuable real estate. But a simpler execution where they aren't blurred backgrounds is cleaner and better.

The primary floating CTA should change if the user has location services turned on: Directions if you are far from the venue, Check In if you’re at the venue and Review if you’ve already checked in.

Because reviews are so central to Yelp, they have added variations like Highlights and Tips . But the UGC within them shows that the distinction between them is often unclear to their audience. Jumping right into one category of reviews that are sorted by quality is better for the vast majority of Yelp’s users.

Many other irrelevant reviewer details have been replaced by the average score they give to venues giving this particular review more context.

Comparison page

For deciding between a small number of options, a directly comparative view can be helpful. Focus starts on the few factors likely to inform that decision before leading to standard CTAs.

2. App for iMessage

I included this because I would personally get some use out of such an app and perhaps others would as well. That said the UX for this is very simple: it’s basically just matching checklists and then using the matched results to drive a search.

Asking users what they are hungry for is the most straightforward, but I suspect asking users for foods they specifically don’t want would be more successful in producing actionable matches. I also tried letting users vote on different cuisines with a Tinder-like interaction. I did not get a chance to finish refining this approach so I wouldn’t call this a visually finished direction.

#3: Swap dining picks

Why let a stranger pick your next restaurant?

Stranger can be selected with similar checkins and ratings as yourself
Social aspect of trading tips
Escape rut of the same restaurants
Discover new places that are NOT hot and trending
Find good local spots while travelling

Recently I was on a work trip to Philadelphia, a city I’d never been to where I knew no one. I chose restaurants by Yelp ratings, but the experiences were still mixed. The highly-rated venues were often crowded mob scenes. I wished a local could show me a great neighborhood spot that wasn’t trending all over the internet.

I imagined there was likely another Yelp user, a parallel version of myself, who lived in Philly but was currently in the Bay Area with a similar issue. We could trade info on our own local spots and each get to know a new city more intimately. With all Yelp’s user data of check-ins and ratings, the app could easily pair users with similar tastes. The added benefit is sharing spots like friends would, without contributing to potential over-exposure so that quiet local spots can remain just that. This experience could of course also be adapted for two residents of the same city who want to find new places off the beaten path.

There’s something compelling about the connection between strangers trading recommendations and acting on them at roughly the same time. It’s important that the two participants don’t dine together initially; that’s essentially a date and this should be lower pressure.

User profile

Some educated guesses as to likely attributes:

Many foodies
Could include adults of most any age
Could include many frequent/business travellers
Not trendsters as they are looking to avoid the trendier spots

UX needs / user journey

I then quickly typed out my assessment of the journey / needs:

Marketing / awareness (offsite)
User education (onsite)
Sign up / profile creation
- Venue preferences, type and style
- Enter some of your favorite local venues (privately) to establish your style preferences based on Yelp’s wealth of data.
- How much ID verification / trust establishment is necessary here? Some perhaps, but not as much as Airbnb.
- In addition to current city, past places of residence may tell a fuller story of experiences and taste.
Swap Dining Picks
- Set your city location
  - Location must be refined down to at least a neighborhood if not specific address
- Set date
  - Defaults to now
- Get paired with your food guide
  - Matched based on stylistic and venue preferences
  - No vetoing your guide, it’s contrary to the nature of ceding decision power.
- Initiate correspondence, prompt users for the details of this situation (is there anything they specifically want to try? Are they dining alone or with someone?)
- Swap initial recommendations
  - What happens if you’ve been to the place before?
- Link to Directions and Lyft
- After meal, prompt for feedback
  - Especially in the case of a trip with multiple meals where this can inform following meals.
- Users mutually rate each other?

Initial wire / sketch

Initially, this idea was more about giving a stranger some degree of control over your entire diet for a certain period. So in addition to location pickers, I also sketched a couple date pickers: a fairly standard one and another that let the user multi-select meals over an entire week. After further consideration, the use case of just wanting one meal right now seemed infinitely more common.

Flow in visual design

The fastest start to the experience would be in an active search field, but probably also too abrupt. A very simple landing screen also leaves room to surface some venues to your taste.

Because most cities are too large for one person to know intimately, we need to know what neighborhood you’re looking at. So if the user broadly searches a city, the app must push them to be more specific.

In addition to location, you are also matched based on your history of checkins and reviews. Once you’ve matched, the most straightforward and familiar way to swap recommendations is a text conversation, but with venue search functionality added in a similar style to iMessage apps.