Empower Yelp with Cards
Social engagement & Anti-choice-overload searching experience
Overview
This project is aiming to redesign Yelp app to help it recapture users' engagement for more crowd-sourced reviews and ratings. To achieve this goal, two challenges I tackled in this project:
• Choice-overload searching issues;
• Weak motivation for leaving reviews and comments.
By achieving the above improvement, I introduced card as the fundamental visual component, made essential adjustments on the info architecture of IOS app, redesigned the user profile pages to create scenarios for social behavior, and add new designs against choice overload pain point.
This project is finished by several stages including the anti-choice-overload idea coming out for my first start-up app in Appstore. I was onboard for this start-up called Chisha(吃啥) in 2014 and help our team to get the first round investment from IDG. I quit in 2015.
吃啥（Chisha）means "where to eat". It is an app providing local business recommendations based on users' data. Now it is a popular blog on Wechat platform.
FINAL DESIGN
My solutions to the these two big challenges(Choice-overload searching issues; Weak motivation for leaving reviews and comments) can be summarized as three highlights:
Flash Card;
Impactful collections;
Social-centered profile.
Before jumping into the full design process, let's have a peek of the overall solution firstly.
DESIGN PROCESS
Challenges
Choice-overload problem
One of the main complaints about yelp's search feature is the choice overload issue. Yelp's primary tasks at this stage won't change. Providing a tool to users for spots recommendation and reviews is the reason people use to move into this system and are triggered for further behaviors within the system.
High-level user goals:
• Users can make a content decision within 1-3 mins;
• Users can make a reservation within another one mins;
• Users can always collect loved restaurant and easily create and share collections with topics
Put myself in the driver’s seat.
Designer should know what PM and SDE value mostly. Also, we need to understand the overall product before dig into pixels. Therefore, we can avoid bad communication and lack of understanding through design process.
In this project, besides designing an anti-choice-overload search experience, I tried to zoom out firstly to have a whole picture the product.
Put myself in the driver’s seat.
Designer should know what PM and SDE value mostly.
Recapturing users' social engagement
Yelp added ME tap on its bottom bar, which shows its significant ambitious to recapture its popularity as a social-driven platform. Yelp needs to escape the dilemma of low engaging frequency except for its capability as a search tool.
High-level user goals:
• Motivate users' social related behaviors: reviews, comments, collect, like, etc.
• Stimulate users load-in rates during the no-meal period.
• Empower active users substantial social impact.
Methodology: Top-down while Bottom-up
I believe the adjustment of a single pixel may affect the whole system. In most of my design practice, I learned that if an ecosystem is established, there is no separate component exciting. A sound designer should keep his/her focus on tiny details while keeps a perspective from the top level. Like working on software from Pad++ in the 1990s to today's illustrating or modeling software, I believe designers should also zoom-in and zoom-out frequently during a project. I always keep this " zoom button" in my design methodology list. Top-down while bottom-up, finally arrive at a solution close to perfect in any level, which is what I call an answer that makes sense.
Top-Down: Zoom out to grab a whole picture
Literature Research(top - down)
“Can there ever be too many options?”
Before diving into the anti-choice-overload solutions, it is necessary to evaluate whether or not it is a true problem for the majority. I did literature research and held a discussion in another class on this the following papers:
-Benjamin Scheibehenne, Rainer Greifeneder, and Peter M. Todd. 2010. Can there ever be too many options? A meta-analytic review of choice overload. Journal of Consumer Research 37, 3: 409–425. [link]
- Moser, C., Phelan, C., Resnick, P., Schoenebeck, S.Y. and Reinecke, K., 2017. No Such Thing as Too Much Chocolate: Evidence Against Choice Overload in E-Commerce. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. [link]
- Antti Oulasvirta, Janne P. Hukkinen, and Barry Schwartz. 2009. When more is less: the paradox of choice in search engine use. SIGIR’09. [link]
- Chapter 2 from Blink, Malcolm Gladwell [link]
Go to this link to see more discussion if interested.
Information Architecture Refinement
(top - down)
I choose to start the design process by drawing the current information architecture based on Yelp's app interface. The reasons I start here are:
• Obtain a whole picture
• Understand the previous design logic
• Learn or capture where trade-offs happen
• Orientate current restrictions and flaws
Insights: Two main sections are isolated from each other and no consistency has been built between.
Bottom-up: Zoom in to pixels.
Focusing on simply the UI elements.
Current design critique
Introducing Card as new basic visual component
( bottom-up)
Cards are trending now.
Yelp's core business model is recommendations and reviews, which is a perfect match with the form of the card as a visual component because:
• card is convenient to be a container for a photo, text, and a link about a single subject;
• card is well-suited for showcasing elements;
• card has strong visual connections to the form of menus, napkins, and restaurant posters;
• card is natural material interaction metaphor;
I mainly used the Material Design guideline and Yelp's design guideline to guide my visual design.
Wireframe
Prototype
I believe that a prototype is worth a thousand mocks.
For this project, I use the principle to make the interactive prototype to test the card design and adjust related experience design including information architecture redefine.
Design Details
Lessons
Swipe or Scroll? Swiping the card away may force users to make decision carefully, however, it perhaps adds too much burden to users. Compared to scroll cards interaction, such as APP store new design, might be another option. Need further user test.
Still reviews-based? I thought about whether or not includes selected reviews in the cover cards as Yelp is based on reviews given from users. Need further user test.
Try not to mix up “follow a user” and “follow a collection”. As my design bring on collections to follow, it might be confusing for both users and for backend data. More work should be done to not mix up those two features.( consider new feature of instagram, follow # )