Yelp Design Challenge
- Mobile App Design
- Product Strategy
- Rapid Prototyping
As part of the hiring process for Yelp's Product Design Intern Role, I completed this design challenge in about a week.
"As part of our hiring process, we ask candidates to tackle a design exercise. Your portfolio and resume have demonstrated that you possess raw design talent. You rock! The goal of this exercise is to evaluate how your creative talent and vision apply to the challenges faced by a product like ours.
To better evaluate your product thinking, we don’t want you to perform any user or market research. We want you to make smart assumptions and weigh tradeoffs about what business goals and user goals to optimize for.
For the final result, we’re looking for pixel perfection, not a Balsamiq wireframe. We prefer the use of Photoshop or Sketch for your actual design.
The task before you is to complete one of these projects for either web or mobile (sorry, no wearables). Be sure to align your project choice and design with your strengths and vision."
"Create an ecommerce product detail and/or search page for a physical product of your choice. Each product has a title, multiple photos, a description, a rating, multiple reviews, user uploaded photos, a price, shipping information, stock information and a buy or add to cart button. You are encouraged to add additional elements. You do not have to design a complete flow (for example check out).
You can create your own branding or use Yelp’s branding and design as if it’s a complementary product. Optimize your design towards get users into the purchase funnel."
What product or type of products are associated with Yelp? Yelp swag tends to be fun and playful, such as wrist sweatbands with funny sayings (“Blood, sweat, and Yelp”). The language throughout the app and website is playful too. Yelp is a company that likes to have fun and I wanted to come up with a product that people could easily see being created by Yelp. I also used their existing style guide to maintain visual cohesion.
How can I optimize the design towards getting users into the purchase funnel? Overall, the business goal is to convert users into customers while the user’s goal is to find and purchase items quickly and easily. In the flows below, I detail the ways in which I balance these two goals.
What is the best platform for this product, mobile or web?
As the world becomes increasingly mobile, it made more sense to focus on a mobile app. Many users have their phone with them at all times, so being able to shop anywhere will translate to more purchases made.
- I removed the “More Options” icon and opted for a shopping cart so users can access it at all times, reducing the effort required to go to checkout. Since guiding users toward a purchase funnel is the priority of this design, I moved share options below the fold, under the item description.
- Instead of placing the price over the item’s image, I moved it under the star rating because text over photos always runs the risk poor readability. I added a shipping options dropdown menu to reduce the effort during this step.
- I added an icon beside the stock information to draw more attention to it.
- Because a large part of the user’s trust in an item relies on customer photos, I increased the size of the photo thumbnails so that they don’t have to keep navigating back and forth between pages to view the photo.
- I decided against the review highlights because I couldn’t justify taking up so much space for something that doesn’t particularly contribute to optimizing the user’s purchase funnel. Instead, I added something more useful—a breakdown of the reviews.
- Inspired by Yelp’s “Useful,” “Funny,” and “Cool” buttons, I added a way for users to appreciate one another’s contributions and perpetuate the positive feedback cycle.
- These screens only apply when the current item is out of stock. In version A, a banner appears under the item photo, with a link that takes users to another page to submit their email to be notified when it’s restocked.
- The more I thought about it, the more I realized that even one extra step is far too many for most users to bother with, so I knew I had to ask for their email on the same page. In the improved version, the floating CTA buttons are replaced by a prompt and an email text field.
Above the Fold
This part of the screen is the first thing users see when they view an item’s details, so it’s vital to make a good impression and to display all the most important information and options that point them toward a purchase.
1. Humans are visual creatures. That’s why I made the item photo span the full width, yet not take up the entire screen or more than half the screen, which can be overwhelming and display poorly for some photos.
2. Swipe through to view more photos of the item and tap to enlarge. The dots indicate how many photos are available to users and where they are in the sequence.
3. Yelp stars bring familiarity to the item and the app overall while displaying the number of friends who have reviewed boosts its trustworthiness and adds subtle social persuasion.
4. Users select item options (e.g. color, size) on the same screen while the item live-updates with each color option. Without the need to navigate to another screen or opening a modal, I reduce the number of taps required and streamline their purchase flow.
5. In addition to adding to cart, I provided the option to “Buy Now,” allowing users to skip the cart and go straight to checkout. This adds greater speed and efficiency to the purchase flow.
6. Quick access to the cart, so users can easily review all their items, edit their cart, or continue to checkout.
7. Stock information is immediately available to users. When stock is low, this displayed info gives users a sense of urgency, encouraging them to purchase.
8. Users select a shipping option on the same screen instead of navigating to another screen, modal, or going to checkout. Simpler, fewer taps means reduced friction in the purchase flow.
9. The two primary CTAs are highlighted as large, floating buttons, which hover in place no matter where the user scrolls. Keeping them prominent not only means users will see them, they’re also more likely to take one of those actions.
Although they constantly block a part of the screen, their accessibility promotes purchase, outweighing possible annoyances.
Optimize the Purchase Funnel
1. Nothing adds more trust and authenticity than photos taken by actual customers. Because these photos can play a huge role in the user’s buying decision, I made the thumbnails larger than usual.
Although they take up a lot of room, users can quickly scroll through the carousel to view more without the need to open a new screen or comb through reviews to get a good look.
2. Users can sort reviews by several criteria. I placed the “Most Thanked” option first because users are more likely to find those reviews helpful. Seeing reviews by friends adds major credibility to the item and is yet another subtle hint of social persuasion.
3. I included thumbnails of customer photos, so users don’t need to open the full review to see if there are any photos associated with it.
4. Avatar photos place a real human behind the review and put users at ease. They’re large enough to clearly see the face, yet not so large as to distract from the content of the review.
5. I displayed the seller’s overall star rating beside their name to add another layer of trust and transparency. Users can tell at a glance how other customers have rated the seller.
6. In this section, I suggest items that users are likely to purchase, based on the item currently viewed. This section loads six item thumbnails at a time for better performance speed, but users can scroll infinitely (or until there are no more related items).
Although this section may distract users from the current item, providing more options will ensure that they find the item that best suits their needs. So while displaying different items may lower conversion rates on this page, it will increase purchase rates as a whole. Without it, users may turn to other platforms and we lose them completely.
7. Because related items are from any seller on the marketplace, this section will likely hold much more content than the previous, making it easier to display in a grid and impractical to display on a carousel.
8. Functions at the top are sticky, so users can always like the item (increasing the chance that they will buy it) or go to their cart from any point on this screen.
9. Users can sort reviews by one or more star ratings, allowing a more informed purchase decision. Although this may not be favorable to the item, users appreciate the transparency and are more likely to do business with a product they trust.
10. Receiving a “Thanks” for leaving a review is positive feedback that reinforces that behavior. The more users leave helpful reviews for an item, the more trustworthy the item seems, and the more likely other users will purchase it. This small but significant reward/positive feedback loop also helps sustain the product’s economy.
11. Items from the same seller tend to be similar or complementary to the item currently viewed, which users may add to their purchase. Thumbnails, with names and prices, are displayed in a carousel which users can easily swipe through, or they can follow the link to the seller’s profile.
12. By placing the option to “like” on each item’s thumbnail, users don’t need to navigate to the item detail page. This reduces the number of steps required but more importantly, it keeps them on this screen and in the purchase funnel. Liking items also increases the chance that users will revisit and buy it.
13. When users scroll past the currently loaded content, it triggers a new set of content to load. While it’s loading, wireframe-like placeholders are displayed (ideally with some subtle animation), instead of a boring load icon, which gives it the appearance of a faster load time.
Out of Stock
Finding that the item you want is out of stock can be a major cause of frustration and defeatedness because typical out-of-stock messages are a dead-end (“Sorry, you’re too late!”). Fortunately, there’s a more empathetic approach to deal with out of stock items in a way that is constructive, useful, and frames the situation more positively.
1. When an item is out of stock, the Buy and Add to Cart button are replaced with a prompt encouraging users to enter their email to be notified when it restocks. This helps ensure that interested users will eventually make this purchase, rather than forget about it.
2. The key to easing users’ pain is to avoid focusing on the problem (e.g. “Oops, we’re all out!”), offering an immediate solution, and using positive language to focus on that solution. After tapping submit, users would be taken to another page displaying similar items that are in stock.
3. People are naturally hesitant to hand out their email due to fear of spam, so I put their mind at ease with a genuine promise the product intends to keep. I chose to phrase the prompt this way (“Be the first…”) to remind the user that providing their email results in a reward.
- Prominent CTA buttons
- Trust, transparency, and authenticity
- Easy access to purchase-related functions
- Minimal taps and reduced friction during flow
- Avoid navigating to another page to keep users in purchase funnel
If this were a fully realized product rather than a design sprint, I would perform user and competitor research to understand key demographics and the existing market. Most importantly, I would conduct usability tests to gather user insights as well as validate and find weak points in my design.
If I had more time on this project, I would also explore the complete purchase flow, rather than the item detail page alone. I'd look at the different user behaviors when using an ecommerce app, such as browsing, searching, comparing, discovering, etc. and optimize the purchase flow for all the different use cases.