Overview

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 collaborate with UI designers, PMs and the engineer team to redesign the add to cart process for the mobile website.

The new add to cart process was launched in December 2018, and it increased the add to cart conversion rate by 12.5%.

Role: UX Designer, Motion Designer, Researcher
Time: July - December, 2018

the problem

Bad Add to Cart Experience

The backend data shows that the conversion rate of adding items to the shopping cart is way lower than the industry average. There must be something wrong with it. My job is to identify and solve the problem.

Research

Learn from users

Due to all kinds of limitation and budget issues for research, I chose online usability tests to see what exactly happens when users shop at PatPat, and I found:

Bad Selecting Color Experience

Users have to scroll up and down the product page frequently to select colors. Because users need the details from the big image.

Hesitate to add to cart

After finishing selecting sizes & colors and about to hit the Add to Cart button, some users need to scroll up the page to check the information like prices, images, colors and sizes again to make sure everything is correct.
Deeper Thoughts

Action, Information & Feedback

The Nature of the Bad Selecting Color Experience is a lack of feedback for action. Users can’t get to see the main images and details of the color they expected after performing the color selecting action.

The Nature of the Hesitation is insufficient information to support an action. Users can't see the necessary information for the decision all at once. The information is located at 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. Since the actions of PatPat’s add to cart process have been simplified to the minimum extent, the design will focus more on information and feedback. Now we have the design goal: to provide appropriate information and feedback for the actions of the add to cart process.

Design Space

I listed all the actions in the add to cart process. Then I listed the information needed to support the actions and the feedback for the actions to identify what specific spot I should design for.

Idea Exploration

1. 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:

I chose concept 3 over the other two.

2. Boosting 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 will likely give up in the process. My solution is to replace the hesitation part with a review, a module that can display the information all at once to help users to make the final decision.

I went through 3 rounds of iterations for the review ideation:

the Solution

Easy Color Picker

Allow users to choose and compare color without scrolling up and down. Strong feedback for selecting colors.

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 purchased items.

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 users want is not available, they have to go back to the previous page to choose another color. That's annoying.

Improvement 1:

I decided to add the color picker on top of the expanded size picker so that users can easily switch to other colors when selecting sizes.

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.

impact

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

The Add to Cart Conversion Rate
improved by 12.5%

Reflection

1. Be a design evangelist.
Many people in your team don't see things from a design perspective. It is designers' duty to help them to do so. It would help make the product better and make communication easier..

2. Double-check your design before giving it to engineers.

The new add to cart design this time involved with many detailed animations. I didn’t think it through before giving it to the engineers. Later I realized there were some minor problems. So I had to ask the engineers to make some adjustments, which is not cool. Always make sure there is nothing wrong with your design documents and respect other’s time.

3. Go further with the design exploration.
Now I realize there might be a better design for the color picker. Actually, my design was pretty close to this one, just one step away. If I explored a little more, I might have got it. So always go crazy in the ideation phase.

Other Projects

Lucidchart
Redesign the onboarding experience of Lucidchart.
VR Hands
Create a new interaction method for Virtual Reality.
Back to Home