Yelp Search Redesign

Yelp is incredibly powerful. It's best-in-class in terms of data and an essential app for accessing basic info about restaurants and venues. However, many features have been added at the expense of its core value - easily searching and displaying venue information. 

For a design exercise, I decided to rethink mobile search on Yelp. 

 
mockup_screens.jpg
 

Process

 
 
 
 
 

Research

Customer interviews

In order to achieve a data-informed design, I hopped right into interviews. Specifically, I spoke with 12 Yelp users regarding

  • General likes and dislikes
  • Any features they'd wish to see added or improved
  • Their main reason for using Yelp

Business interviews

While users are the driving force behind the design of any app, I wanted to ensure I was keeping Yelp's business needs top-of-mind. I spoke with a former Yelp employee to verify the core business model and identify any pieces of the app that were not up for changes. While recommended restaurants and reviews needed to stay, Yelp was surprisingly open to making a variety of user-friendly improvements.

Competitive Landscape

I also spent time looking at Yelp's main competitors, namely Foursquare, Zagat, Zomato (acquired Urbanspoon) and Spot. I also looked at some industry best practices for the way other apps dealt with search + maps.

Project Definition

Users actually like Yelp's search results - both map view and list view. This completely debunked my preconceived notion going into this - I figured users would prefer a fancy combined list/map view - complete with swipeable cards a la the competition.

In actuality, users don't want Yelp to be the hippest, best-looking app for discovering the best new restaurant. They want an app that helps you quickly and easily find the venue that fits your needs...right then.

Function is paramount. Along with an updated aesthetic, Yelp needed more efficient search filtering that was simplified and more present.

Ideation

I began brainstorming various ways to make filters more present and to simplify information display. I settled on 2 main ideas:

  1. Updated map view search results + a prominent filter button
  2. Combined map and list view search results + a prominent filter button

After thinking through the information architecture, eventual animation interplay between screens, and running the concepts by a couple more people, I decided on idea #1. Idea #2 would have required horizontal scrolling of all venue cards (the expanded information bubble that appears when a user taps on a given map marker). Especially when considering that users enjoyed the overall function of the current map and list views, I decided this compromise would have been unwieldy and likely would have degraded the experience.

Mockups and Delivery 

Search fields (default start screen)

Search fields (default start screen)

Search and location input

Search and location input

SEARCH

Currently when opening Yelp, a user is deposited on a map with venue markers populated by your last remembered search or random Yelp businesses within your proximity. When opening the app to start a new session, every user I interviewed ignored the map and went straight to the search bar.

Rather than waste time populating a map and deleting the previous search term, users should be deposited on a clean search input. Upon typing, the search input animates by sliding to the top of the screen as suggested businesses and terms fade into view. As per most mobile use cases, the location input defaults to current location.

The red and orange circles are stylized location markers that fall from the top of the screen as the app is loading - a way to make the load experience more fun.

 
Search results (map)

Search results (map)

Search results (list)

Search results (list)

Search Results (Map)

The search query defaults to the map view, as nearly every user I spoke with prefers this in a mobile use case. The input fields animate to the top portion of the screen, and a graphic toggle now allows quick switching between map and list views.

The largest addition here is the new Filter Button, which animates and spins onto the screen after the map has finished loading. Pressing it brings up the revamped filters menu. Users often missed the 'quick filter' buttons at the top of this view in the current app. These text-heavy buttons were removed in favor of a more centralized filtering system. Now, whether on map or list view, you are one tap from filtering your search results. When traversing the map or scrolling down while in list view (finger moving in bottom-to-top-of-screen motion), the Filter Button disappears until the movement stops or scrolling direction changes. This ensures that it is never in the way. 

Most of the on-map functionality remains the same, with the largest change being an updated venue card that displays an image to better help users evaluate options without having to click into the venue's profile view.

The list view now employs a card system, rather than the stacked bar system currently in-use by Yelp. Seeing a slight shadow around each venue helps visually differentiate them from one another, enabling quicker scanning.

 
Screen Shot 2016-10-22 at 2.41.42 PM.png
Filter button changes color when user-defined filters are active

Filter button changes color when user-defined filters are active

Filters.png

Filtering

On Yelp and in most competitive apps, the ability to filter is always next to the search input. However, in almost every case, after typing in the search input, the CTA is to 'search,' not to leave the search input and add filters before commencing with the search query. 

For this reason, and because nearly all users I interviewed admitted to adding filters after their initial search, I removed the ability to filter from the default search input screen above. By making it accessible via a Filter Button from all search results pages, the search process is streamlined.

Upon clicking the Filter Button, an updated filters menu slides from the bottom of the screen. Beyond being updated aesthetically, filtering options were rearranged to reflect those most-used by users and the strongest business cases for Yelp. For instance, due to Yelp's just-announced Nowait integration, I made sure to place the ability to filter by waitlist availability higher on the menu. 

 
Use 3D Touch to quickly text a friend where to meet you, call the venue, or look at a menu (if available).

Use 3D Touch to quickly text a friend where to meet you, call the venue, or look at a menu (if available).

3D Touch

While this feature needs some more time to be thoroughly explored, I've often wanted to get a small piece of info about a venue that is buried on its macro profile page.

When doing customer interviews, 2 users mentioned they would love an easier way to quickly share a restaurant with a friend (other than copying and pasting the address in a text message manually). This feature actually already exists, but it's so buried in Yelp's UI, that most didn't even know it was there. 3D Touch could be a fun way to quickly make some of these options available to those who seek them out.

 
Venue page (macro).png

Venue Profile Page

While most of my research centered around search, there was a fair amount of discussion around reviews and 'saving' of restaurants based on various criteria.

I didn't quite have time for a full update of the profile page, especially when I wanted to consider a more readable system for displaying long-form reviews, simplifying secondary information (directions, addresses, noise level, etc.), and cleanly displaying action items like reservations and waitlists.

But I did want to give the hero portion a quick refresh. Key information like food category, daily hours, and rating are still clearly portrayed while cost and number of reviews (2 of Yelpers most desired traits) are now given more emphasis. Upon scrolling down, certain pieces of non-essential information fade away as the hero image translates and minimizes in size, freeing up more screen space for secondary information found lower on the page.

With different language and more streamlined iconography, users can still bookmark a business, begin writing a review, or share the business from the profile page.

Swiping horizontally within the menu bar will trigger horizontal paged scrolling, allowing the user to access simplified and restructured Reviews, Collections, and Settings sections.

 

Future Steps

I thoroughly enjoyed thinking through this challenge. With more time, there's a variety of prototyping and validation items I'd love to tackle, including

  • Animations - Prototyping animations via Principle or Framer would better convey my UI decisions.
  • User Testing - While I did run my ideas by a couple people, ultimately allowing me to decide against the combined map/list view, I did not have time to get my final designs in front of eyes for a second time. Using Invision or some other prototyping tool, I'd love to generate a user test with the goal of evaluating usability of the updated search flow, use cases for various filters, and the viability of the 3D Touch shortcuts. 
  • Collections by Location - Designing the UX/UI flow around adding collections of restaurants or businesses based on location would be a blast! A couple users suggested saving restaurants based on a road trip route or by city...both of which I think could hold a lot of value.

If you have any questions or would like to walk through any of these decisions by phone or in-person, I'd be beyond happy to do so! Feel free to reach me at jonathan.igner@gmail.com or 8189173743.