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.
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
As described in The Guide to Usability Testing, one of your most important steps is determining who you’re designing for. Once you know your audience, you can pick the right users to later test the designs.
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
Below, you’ll find detailed explanations of the common and less-common tasks that we assigned to each group of users.
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)
- 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.
- 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.
- 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.
- 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)
- Use Yelp to find a new restaurant near you that you haven’t been to yet. Spend no more than 5 minutes looking.
- 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.
- 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.
- 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
Because we were running remote usability tests, it only took us about an hour to get our results. Here were the top insights, followed by screenshots of the new redesign in UXPin. You can follow along by clicking through to our high-fidelity prototype.
1. The homepage should focus on the Search bar.
All five test participants relied heavily on the search bar, even for tasks that could easily be completed by using the categories instead (like finding an interesting restaurant).
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
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
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.
We suspect that part of the reason why people didn’t use Categories is because they’re still too visually cluttered and situated in an odd location.
Current Design
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
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
A large part of Yelp’s business model relies on engaging users through its Events, so it was a bit surprising to us that this was pushed off on the corner in a sidebar.
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
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
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
As we watched the videos of our tests and listened to our users, we noticed that almost every single person commented on the amount of clutter on the site. When you look at Yelp’s website, you can see there’s plenty of competing priorities that suggest design by committee.
Current Design
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
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
Our usability tests revealed that the hierarchy and nomenclature of the “Feature Filters” and “Sort By” needed quite a bit of reworking.
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
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
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.
Now that we streamlined the filters and sorts, we also needed to restructure the results page. When we listened to the feedback, we heard three of the five users mention that photos of the food are a strong influence on decisions. They also wished they were easier to view right in the results.
Current Design
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
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
Once we finished the redesign, our CEO Marcin Treder made an interesting comment that the new site reminded him of AirBnB. When you take a look at the AirBnB homepage below, you do see an uncanny resemblance.
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.
