Mobile e-commerce Design — Yelp Design Challenge
Product search and product detail page design aiming to get consumers into the purchase funnel
Create an e-commerce 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).
Duration: 4 days
Role: User study, UX Design, User Interface Design
Assumptions → Scope of Design → Competitor Analysis→ User Scenarios → Design + Iterations → Future Development
- Selling products to create warm, creative, and comfortable lifestyle
- Selling products with affordable price
- Targeting consumers with a wide age range
- mid-scale inventory
- Getting consumers into the purchase funnel
- Motivate consumers
- Find the product they want
- Know the exact information about the product
- Smooth browsing and buying experience
Scope of Design
After analyzing the consumer’s experience map of buying a product online (mobile), I’ll focus on “Entice”, “Entrance”, and “Explore” as the scope of design.
1. Product search page
Before brainstorming the design solution, I did a market research on existing mobile e-commerce products with similar business positioning or sharing the same business goal, such as: Taobao, Wow Design, Amazon, Zara, Shein. During the product analysis, I was focusing on the “product search” and “product detail” pages. (Blue parts are the reference of my design solution.)
Some key takeaways:
- Word stimuli when entering the search page to inspire consumers
- Multiple entry ways
- Show picture & concise information on the product result page (for the assumptive business positioning)
- Able to manage result
2. Product detail page
(Blue parts are the reference of my design solution.)
Some key takeaways:
- System visibility while scrolling (know where you are in the page)
- Fixed button call for action: save, add, and buy
- Extract helpful reviews
- Smart recommendation
Based on the the key takeaways for the market research, I created three user scenarios to guide my design solution and interaction flows of some key functions.
- Sarah, a college girl, saw a friends toy, and would like to buy a similar one, but her friend forgot the name of the product, so she opens Yelp Lifestyle’s search page, clicked on taking picture. Yelp Lifestyle captured the picture of the toy, and provide her a list of similar results.
2. Emily was a Yelp Lifestyle user. She opened the app as usual, saw a popular item on search page, and clicked in to the item to see whether she like it or not.
3. Joe, a fan of Pusheen products, would like to buy a Pusheen plush on Yelp Lifestyle app, but found out that the item was out of stock.
1. Search Page Interface
Search bar design: I choose option D for the search bar design over other options, because it allow consumer to search for a product no matter he or she knows the name of the product or not by typing or taking picture.
Search result display: I choose option B card display to show the search result, because it presents more item but less information of a product in one page, and according our business positioning, the product we are selling need more image showcasing and concise information such as price, rating, and sales.
2. Product Detail Page Overview
I decided to use option B (left) for the design of top of product detail page for better product showcasing. I also decided to use option A (right)(dots to indicate how may images total) instead of option B, since I would like to limit the number of image overview for each product in order to ensure the quality of each image.
For recommend products part, I choose to display product name, price, and rating (option B, left) to allow consumer to know the key information of the product. Finally, I decided to put fix buttons at the bottom of the page to call for actions, and I choose option C (with save, add, and buy)(right), since our business scale might not need other actions.
3. Product Detail Page Interface
When consumers scroll down the product detail page, the page will display a fixed thumbnail of the product, and tabs for product, review, details, and recommend sections within the page, for better system visibility and easy navigation.
4. Product Add/Buy Interface
After consumer click on add/buy the product, they could choose the style and quantity of the product, and the number will add to the shopping cart icon back on the product detail page, and the system will inform them the successful result as a feedback. If the item is out of stock, the option will be greyed out, and consumers could choose to get notification when it’s available again.
- More user study
- More interaction gesture : 3D touch
- Conduct user testing to get real user feedback