Testing and Redesigning Yelp, Step 4: Design and Iteration

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!"

Sketching

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

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

A sketch of the new search results page

Wireframing

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.

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.

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

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!