Improving bookmarks in Yelp cover image

- UX / UI -

Improving Bookmarks on Yelp

Overview

 

With over 45 Million listings of Businesses, Parks, and Museums around the world, Yelp is an invaluable resource for foodies and travelers. Bookmarks may allow users to save a business listing, but it's underpowered, disconnected from the desktop experience, and located in an off-screen menu.

 

 

User Problem

 

  • Bookmark search filter isn’t available in Map view.

 

  • Users don’t remember why they bookmarked a certain business.

 

  • Desktop version allows users to classify new bookmarks as Must Try, Review Later, and add a note. None of which are accessible on mobile.

 

Business Problem

 

  • When Yelper's bookmark a business, the reasons are ambiguous.

 

 

Users Solution

 

  • Create a panel for Bookmark Options where users can add custom categories and notes.

 

  • Allow users to filter and display Bookmarks according to those custom categories.

 

  • Promote the improved feature by moving Bookmarks to the main navigation.

 

Business Solution

 

  • Yelp can leverage this data to create target campaigns to pitch to their clients.

My Role

 

UX Design

UI Design

Prototype

Motion Design

 

Tools

 

Illustrator CC

Adobe XD

After Effects

Photoshop CC

Axure RP

 

Duration

 

80 hours

 

Date

 

March 2015

Research & Insight

 

I recruited 6 participants to conduct an ethnographic study on how they use Yelp. After determining their level of experience, I presented them with a few scenarios then observed while they performed tasks. After compiling the data with an Affinity Map, I created the following personas.

User Persona 1.
User Persona 2.

Hack Notes

 

As a workaround for the inaccessibility to notes from Yelp on the desktop, Users have been repurposing the Post Review comment box.  Rather than a review, they write a reminder note and save it as a draft.

Hacking Yelp to add notes on mobile.

User Flow

 

This is a diagram of the path users will take when Adding, Customizing, or Removing Bookmarks.

User flow for adding bookmarks.

Filtering your collection of Bookmarks in list or map view.

User flow for filtering bookmarks.

Wireframe

 

Created in Illustrator and XD, I structure wireframes as trees so I can get a clear view of the journey from start to finish. This method will expose gaps in a pattern which can indicate missing interactions.

Wireframe.

Prototype

 

Clickable prototype that demonstrates the improved bookmark experience on Yelp for iOS. Created in Adobe XD.

Purposeful Animation

 

Use animations to transition between screens. (Side Note: These examples precede the prototype which was modeled in Material Design before I changed to Human Interface.)

Bookmarks Options

Filter Bookmarks

Bookmark options panel animation.
Bookamrk filtering animation.
Prototyping in Adobe XD vs Axure RP

- UX / UI DESIGN -

Prototyping in Adobe XD vs. Axure RP

Where is the lightswitch on this Smart Bicycle?

- UX / INTERACTION DESIGN -

Theres no light switch on this smart bike?

Improving bookmarks in Yelp cover image
User Persona 1.
User Persona 2.
Hacking Yelp to add notes on mobile.
User flow for adding bookmarks.
User flow for filtering bookmarks.
Wireframe.
Improving bookmarks in Yelp cover image
User Persona 1.
User Persona 2.
Hacking Yelp to add notes on mobile.
User flow for adding bookmarks.
User flow for filtering bookmarks.
Wireframe.
Improving bookmarks in Yelp cover image
User Persona 1.
User Persona 2.
Hacking Yelp to add notes on mobile.
User flow for adding bookmarks.
User flow for filtering bookmarks.
Wireframe.
Bookmark options panel animation.
Bookamrk filtering animation.
Improving bookmarks in Yelp cover image
User Persona 1.
User Persona 2.
Hacking Yelp to add notes on mobile.
User flow for adding bookmarks.
User flow for filtering bookmarks.
Wireframe.