Improve Online Add to Cart Experience

PatPat is an e-commerce start-up with 4.5 million monthly users. It sells children's clothing to parents all around the world.  I was in charge of designing PatPat's mobile and desktop website, where most of its revenue came from.

In this project, I collaborated with PMs, engineers and UI designers to redesign the add to cart process of the mobile website.

The design was launched in December 2018, increasing the add to cart conversion rate by 12.5%.

ROLE

UX Designer, Motion Designer, Researcher

TIME

May - Aug 2020

background

Low add to cart conversion rate.

Data shows the conversion rate of adding items to the shopping cart is way lower than the industry average. My job is to identify and solve the problem.

The problem.

Due to resources and budget limitation for research, I chose online usability tests to see what exactly happens when users shop at PatPat.

Bad color selection.

Users have to scroll up and down the product page frequently to compare and select colors, because they need the details from the big image.

Hesitate when adding to cart.

Customers need to double check items’ information before hitting the Add to Cart button.

insights

Action, information & feedback flow is broken.

The nature of the bad color selecting experience is a lack of feedback for actions. Users can’t see the color details they expected after selecting the color.

The nature of the hesitation is insufficient information to support an action. Users can't see all the information needed for the decision all at once. The information is in different spots of the page.

The problems we found are about the relationship between action, information and feedback. Action is in the center of this relationship. PatPat’s add to cart actions have been simplified to the minimum extent. So the design will focus primarily on information and feedback. Now we have the design goal: to provide appropriate information and feedback for the add to cart actions.

The solution.

Easy color picker.

Users can easily choose and compare color and get strong feedback without scrolling back and forth.

Add to cart with confidence.

Give users clear information about the price, color, and size of the items before they click the add to cart button, so that they will be confident about their decisions.

Impacts

After the about 6 month of design, developing, testing and waiting, the new design was launch in December 2018, after the Black Friday and Christmas shopping season.

The add to cart conversion rate

improved by 12.5%

Design details.

Idea Exploration

Better color & size selection.

Users need stronger feedback for the color selection. The size picker also needs improvement because it's messy and influences the readability and clarity of the whole product page. To address these two problems, I explored different wireframes:

Idea Exploration

Boost add to cart confidence.

Users hesitate while hitting the add to cart button for the lack of support information. During the hesitation, users scroll up and down the page, trying to double-check information like price, pictures, color and size. They are likely to give up in the process. My solution is to replace the hesitation part with a review module, a module that can display the information all at once to help users to make the final decision.

Based on the new flow, I tried 3 rounds of wireframe iterations.

Test & iterations

We put the new add to cart process into A/B test and online usability test. The A/B test showed significant improvements in the new version. But We also got some users feedback from the usability test:

Feedback 1

“When the size I want is not available, I have to go back to the previous page to choose another color. And I don’t know if the size is available in the new color…”

Improvement 1

Add the color picker above the expanded size picker, so that users can easily switch colors when selecting size.

Feedback 2

If users trigger the size picker from Add to Cart button on the product page, they need to hit "Add to Cart" button again on the review module. That makes users confused and hurts the experience.

Improvement 2

Change the second "Add to Cart" to "OK". So that the second button becomes a confirmation instead of repetition.

Reflection

 Other projects.

Shipt
VR Hands
100 Day UI