A comparison feature for Yelp

Regardless of your favorite city, the San Francisco Bay Area is an epicurean paradise. It's also a tourist trap and a bustling commercial hub, as well as host to several major universities and home to many transplants. So when your friends and family are visiting, you try to find the best place to eat that's nearby and within your price range, and Yelp is probably the easiest way to find reviews.

Finding great places is easy; deciding on which one is best is impossible.

comparison-feature.gif


User behavior captured in a persona

Yelp-Persona-Michelle

For this project, I looked up user data from several analytics websites to try to find out who the power users of Yelp were, and the preliminary research showed it was college-educated Asian women in major cities. There's certainly room for more research, but it gives us enough to do some user research on and come up with Michelle the Maven who's out with friends on the weekend and doesn't want to waste time or money finding the best place to eat.

To do this, she would benefit from a feature that would fit into the current help experience after the built-in filter that would allow her to compare several restaurants but without the cognitive strain of remembering all of them.

Instead of reading full listings and trying to remember what was important from all of them, this feature operates on the same principle as bubble sort/Bracketology: instead of comparing several restaurants by holding them in memory simultaneously, compare them one by one and pick the best of the two, and the last one remaining must be the best.

 Some results of user research for most important information and mental models for comparison visualizations

Some results of user research for most important information and mental models for comparison visualizations


Our track lead Kate Rutter suggested that since the use case was of one person trying to organize which restaurant her group of friends should go to, I should play with letting multiple people take part in the decision process. Like Congress.

"There’s supposed to be three branches of government: Executive, judicial and spiteful inertia." -- Stephen Colbert

This act of deciding, then, can be broken down into comparison and consensus.

Since solving spiteful inertia... I mean group decision making is a bit outside the bounds of Yelp, I went back to the persona of Michelle the Maven who's wants to make a decision quickly and confidently while walking with her friends. There are two Android conventions that can help her. First, taking the Filter button out of the top right corner and putting it into a navigation drawer that can be opened by swiping from left to right would let her navigate with one thumb, since she'd probably be using a larger Android device. This drawer would also have room for a Compare button, and it would be logical to put them together since both features apply (initially) to a list.

Second, while selecting restaurants to compare from the list, a contextual action bar would respond to input and let her know how much work she'll be giving herself later.

Inspiration and research

To compare many things quickly, I looked at apps and websites for vehicles, computer hardware, hotels, food, and came back to the idea of dating apps for filtering/making quick decisions. The OKCupid app has a swipe to keep vs swipe to dismiss (email and messaging apps do, as well); Tinder is probably a bit more famous for it, however. For someone trying to make quick decisions, though, it's less useful to keep things in mind for comparison, so for now, the feature would only use swiping to decide against a restaurant.

These final exploratory sketches were used to make wireframes to see if the information wanted by the users who I interviewed could still be visible on-screen.

new-features-wireframes2.gif

This drawer menu and 2 screens fit into the normal restaurant finding process between/beside filtering the list and viewing full restaurant listings.

All of these together would expand on the current features and information present in Yelp to offer new functionality that accounts for major user behavior in a way that allowing swiping between full listings doesn't.

 

 

Now it all makes sense.

NEXT STEPS

I chose for the first half of the project to try to limit the feature since I'd heard about how easy it can be to find that a UX project you're working on is getting out of scope. When Kate Rutter suggested that I was unnecessarily restricting myself, I realized just how narrow my choices must have seemed at the time. In the future, I'll definitely hype up my research and ideation process more when I pitch.

Also, as a technological limitation, using a PC has kept me from using a lot of Mac-only tools (in part due to my reluctance to set up a virtual machine to use things like Sketch and Facebook Origami). Photoshop, Illustrator, and InVision helped me get what I have of the prototype, and I think what I was able to produce so  quickly is clear. I plan to try adding gifs to InVision as well as learning Framer JS for more nuanced animations, in part because interaction design, animations, and interactive visualizations are some areas where my personal and professional interests are aligned.

Finally, I'm going to reach out to Yelp (and Feedly for my previous project) and talk to their product design team and get feedback about the project and moving forward with either of them.