Mobile e-commerce Design — Yelp Design Challenge

Product search and product detail page design aiming to get consumers into the purchase funnel

Challenge

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


Process Overview

Assumptions → Scope of Design → Competitor Analysis→ User Scenarios → Design + Iterations → Future Development


Assumptions

Business Position:

  • Selling products to create warm, creative, and comfortable lifestyle
  • Selling products with affordable price
  • Targeting consumers with a wide age range

Business Scale:

  • mid-scale inventory

Business Goal:

  • Getting consumers into the purchase funnel
  • Motivate consumers

User’s goal:

  • 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.

Consumer’s experience map of purchasing a product on mobile app

Competitor Analysis

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:

  1. Word stimuli when entering the search page to inspire consumers
  2. Multiple entry ways
  3. Show picture & concise information on the product result page (for the assumptive business positioning)
  4. Able to manage result

2. Product detail page

(Blue parts are the reference of my design solution.)

Some key takeaways:

  1. System visibility while scrolling (know where you are in the page)
  2. Fixed button call for action: save, add, and buy
  3. Extract helpful reviews
  4. Smart recommendation

User Scenarios

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.

  1. 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.
Sarah’s experience of using the app

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.

Emily’s experience of using the app

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.

Joe’s experience of using the app

Design

1. Search Page Interface

Search bar design

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 design

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

Product detail page
(Left) Top of product detail page; (Right) Number of product images

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.

(Left) Recommend product; (Right) Bottom of product detail page

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.

Product detail page interface

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.

Add/buy product interface

Future improvement

  1. More user study
  2. More interaction gesture : 3D touch
  3. Conduct user testing to get real user feedback