The Power of Minimalism: A Story of Redesigning Yelp

Design by committee is death by a thousand cuts.

It kills slowly, as more and more people weigh in with their opinions, until the “revised” design looks like a stew of lesser parts. It certainly doesn’t need to be that way, especially for large companies like Yelp.

Image for post
Image for post

We chose to redesign their site to show how usability testing done properly can unleash the power of just one. Based on our experience as designers at different companies, we found usability testing to be the best defense for design decisions.

When in doubt, let the user stand between you and overbearing stakeholders and the evidence will speak for itself.

Since we also added a usability testing capability to UXPin, we figured that the experience would also give us a richer understanding of how others might use our own tool.

Let’s take a deeper look at the process, testing methods, and insights that lead us to redesign Yelp to look more like AirBnB.

Pick the Right Users

Image for post
Image for post
Yelp’s Q2 2014 site results show that user acquisition remains strong.

As you can see above, Yelp doesn’t seem to have a problem with acquiring users.

So we figured it would be more interesting to explore user retention. This meant that we would focus on semi-frequent Yelp users — people who weren’t total newbies, but somehow weren’t compelled enough to follow the fast-track to Yelp Elite status. From our own experience, we’ve also found that getting feedback from these on-the-fence users can actually lead to changes that benefit both ends of the spectrum (power users and new users).

We didn’t focus on age, gender, income level, or experience using the web since Yelp users come from all backgrounds. We followed industry best practices and ran our study with a total of 5 users (which should uncover 85% of a site’s problems).

Create the Right Tasks

After each task, we asked test participants if they were able to complete the task successfully and the level of ease or difficulty of completion (also known as the Single Ease Question). These tasks represent Yelp’s primary function as a business search engine.

Tasks: Group 1 (Yelp account holders)

  1. You need to reserve a private dining space for a group of 15 people. You’re looking for an Italian restaurant with a classy ambiance. Your budget is around $20/person. Find a restaurant near you that matches all of these needs.
  2. Your best friend is having a birthday soon, and you’ll be planning a party. Find 10 bars or lounges near where you live that you would be curious to look into later for the party. Save them so you can easily find them again on Yelp.
  3. You’re driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Use Yelp to find out if they are open at 8:00 pm on Tuesday.
  4. Go to the place where you saved the 10 bars for your best friend’s party. Keeping his or her tastes in mind, choose one that would be a good match.

Tasks: Group 2 (Not account holders)

  1. Use Yelp to find a new restaurant near you that you haven’t been to yet. Spend no more than 5 minutes looking.
  2. You need to reserve a private dining space for a group of 15 people. You are looking for an Italian restaurant with a classy ambiance. Your budget is about $20/person. Try to find a restaurant near you that matches all of these needs.
  3. You’re looking for something fun and unique to do in your neighborhood this weekend. Try to find a concert, play, or other event using Yelp.
  4. You’re driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Find out if they are open at 8:00 pm on Tuesday.

Analyze Results & Start Designing

1. The homepage should focus on the Search bar.

In fact, four out of the five participants went straight to the search bar to find a restaurant. Only one user used the categories, and she quickly found them “overwhelming” and went back to the search bar.

Current Design

Image for post
Image for post

The search bar currently sits at the top of the page with lots of city listings nearby (some not even related to the current location. This decision, we suspect, was driven by SEO purposes. We decided that since search is Yelp’s primary function, why not just give it a front-and-center treatment?

New Design

Image for post
Image for post

You can see how we added more fidelity to the new search bar, but also gave it more “breathing room” and color contrast for emphasis (a very effective tactic described in Web UI Best Practices).

Because writing a review is a core interaction for Yelp, we also added a “Write a Review” button in the top left corner. The city listings were moved to the footer (not shown here) since nobody used them during testing.

2. Categories need to be more visual and less cluttered.

Current Design

Image for post
Image for post

Currently, categories sit to the left of the screen in a sidebar that’s nearly double the length shown here.

As a result, some users complained it was too overwhelming. When you consider everything else that Yelp crams onto the page (like “Reviews of the Day” and callouts for its mobile app), it’s no wonder that the designers had to use thisList UI pattern.

New Design

Image for post
Image for post

As described in Web UI Patterns 2014, this Cards pattern is great for displaying a wide range of information in a way that isn’t just an ocean of text.

Our revised design is more visual and only presents 8 categories at once. To reveal more, users would simply click on the shaded button “Other Businesses”. We also moved the Categories section near the top of the page for additional emphasis.

3. Make it easier to find events

Considering the Events sidebar is hard to access, it wasn’t surprising that nobody in our test used it. When asked to find an interesting event in their area this weekend, one test participant used the search bar while the other navigated through the Best of Yelp section.

Current Design

Image for post
Image for post

Currently, Events are either hidden on the far right in the top navigation (not shown here) or pushed away to a sidebar in the middle of the scroll.

New Design

Image for post
Image for post

Our revised layout places Events in the center of the scroll. We could either insert a feature photo to the left of the text, or have a video playing in the background. This treatment is visually cleaner, and better serves the business objective since its actually easily accessible.

4. Don’t fear the footer

Current Design

Image for post
Image for post

The sidebar is heavily cluttered. If we remove it entirely, we free up space for content to flow more naturally down the center of the page.

New Design

Image for post
Image for post

We got rid of the sidebar and moved secondary items like Popular Events or Lists (which the usability testing indicated was never even used) to a newly-created footer. This footer also held items that were clearly for SEO (like listing different neighborhoods).

5. Filters & Sorts demand visual hierarchy

The most important feature filters were “Open Now”, “Accepts Credit Cards”, and “Serves Dinner”. Users also mentioned that pricing was confusing, and 7 Features filters (like “Has a DJ”) weren’t considered important all.

Current Design

Image for post
Image for post

Yelp’s current sorts and filters lack hierarchy (all items seem to be scattered). It’s not even possible to sort by meal unless you click “More Features” and select again from a long menu.

Such a core function should not require more than one click.

New Design

Image for post
Image for post

Our new design isolates the most important filters and restructures the entire section into square groups. Each filter category only includes four options, which visually organizes all the possible choices.

Since 90% of users felt “Open Now” was the important filter, we actually let it stand as a separate object. Since it didn’t add that much more text, we also clarified pricing with category-specific price ranges.

6. People love pictures, so let’s give them more.

Current Design

Image for post
Image for post

Most users relied on photos to determine ambiance, yet the thumbnails in the listings are too small. The search results page doesn’t allow for you to save restaurants for later reference, either.

In our testing, 33% accomplished the task of saving restaurants for later reference, but they complained about difficulty. 67% failed or gave up.

New Design

Image for post
Image for post

We enlarged the thumbnail and layered a “Save for Later” button for easy bookmarking. The new layout resembles more of an F Pattern for easier scanning and isolates the address and phone number (two important pieces of standalone information).

Imitation is more than just flattery

Image for post
Image for post

We certainly didn’t set out to replicate AirBnB, but this image-heavy layout is extremely efficient (and rather visually pleasing) when you’re focusing on a focused set of user goals.

AirBnB’s flat interface makes it frictionless to find a place to stay (which is its core business value). When you consider Yelp’s core function is search-based (finding businesses), the use cases aren’t that different from AirBnB — and so it’s not that strange that our new UI looks similar.

We understand that a big part of Yelp is the community, but sometimes it helps to refocus on just the basics.

We minimized the window dressing since most people use Yelp to find a good place for their next meal, not to see what “Fresh Lists” or “Today in Talk” were written in the past 48 hours.

Design is such a difficult field because the solutions are oftentimes elusively simple. In this case, the usability testing showed us that sometimes it just boils down to the fundamentals — execute them well, and the rest falls into place.

To learn more about topics like prototyping, UI patterns, usability testing, and interaction design, check out our library of free e-books.

Each book includes plenty of expert advice and visual case studies from top companies.

Written by

UX content strategist, data detective, tinkerer of websites. Yes, that's what my hair really looks like.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store