Connect with your exact customers
See, hear, and talk to your customers
Uncover insights about any experience
Share key insights across your organization
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:
A sketch of the redesigned homepage
Next up, Marcin sketched a new version of the search results page, with these changes:
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."
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.
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.
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.
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.
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:
BEFORE: Yelp's existing homepage
AFTER: The final high-fidelity prototype of the Yelp homepage
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!
Get our best human insight resources delivered to your inbox every month. As a bonus, we'll send you our latest industry report, The rise of the Experience Economy!