Skip to main content
Close PromoBar
Access now Access now Access now Accelerate growth as a startup—learn why fast, iterative feedback is critical to startup success with our latest guide   Access now    Accelerate growth as a startup—learn why fast, iterative feedback is critical to startup success with our latest guide Access now Access now Access now

Testing and Redesigning Yelp, Step 4: Design and Iteration

UserTesting  |  December 03, 2014

yelp ebook header

Over the last several weeks, we've been working on a fun UX exercise with UXPin and Optimal Workshop: an imagined redesign of the ever-popular Yelp. Before doing any design work, we defined the product, set up our quantitative and qualitative research, and analyzed the results. Today, we'd like to share the design process and unveil our imagined "new Yelp!"


The designer for this project was UXPin CEO Marcin Treder. Marcin's first step in the design phase was to sketch the basic structure of the new homepage. These were the primary changes he made based on the results from our research:

  • More prominent Search bar
  • More prominent Events tab
  • Streamlined categories

yelp sketch of new homepage

A sketch of the redesigned homepage

Next up, Marcin sketched a new version of the search results page, with these changes:

  • Larger photos
  • More clearly defined price categories

yelp sketch of results page

A sketch of the new search results page


Next, Marcin took his ideas into UXPin to build low-fidelity wireframes. In the wireframe, the Search bar was moved to the center of the screen at the top of the scroll and given plenty of "breathing room." 

yelp wireframe search bar

The low-fi wireframe of the homepage Search bar

Right below the Search bar, the "Best of Yelp" categories displayed as cards. The goal was to make the categories easier to understand at a glance and less "overwhelming," as the users in our tests described them. The categories were chosen based on Optimal Workshop's card sorting research.

yelp wireframe categories

Low-fi wireframe of the "Best of Yelp" categories

Events were given their own section in the middle of the scroll, below the categories. We predicted that this would make the events more noticeable than they are in the current version.

yelp wireframe events

Low-fi wireframe of the Events section

Lastly, all of the other secondary features and SEO items were included in a mega footer at the bottom of the page.

yelp wireframe mega footer

Prototyping and iterating

If this had been an actual redesign, and not just an exercise, at this point we would have user tested the wireframes before moving on to the prototypes. For this exercise, though, the team got hallway feedback on the wireframes and made note of the necessary changes before creating the low-fidelity and high-fidelity prototypes. In UXPin, Marcin added interaction and animations to the most important elements.

yelp prototype search

This low-fi prototype allowed the designer to build and test key functionality.

Finally, the visual design elements were added in the high-fidelity prototype phase. Here is Yelp before and after the redesign:

yelp before

BEFORE: Yelp's existing homepage

yelp final prototype

AFTER: The final high-fidelity prototype of the Yelp homepage

Learn more in the eBook

For more tips and details on how we tested and redesigned Yelp's website, and to play with the live prototype, sign up to get the free eBook today!

Insights that drive innovation

Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.

Thank you!
Get ready for some great content coming to your inbox from the team at UserTesting!

About the author:

With UserTesting’s on-demand platform, you uncover ‘the why’ behind customer interactions. In just two hours, you can capture the critical human insights you need to confidently deliver what your customers want and expect.