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%.
UX Designer, Motion Designer, Researcher
Jul. - Dec. 2018
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.
Due to resources and budget limitation for research, I chose online usability tests to see what exactly happens when users shop at PatPat.
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.
Customers need to double check items’ information before hitting the Add to Cart button.
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.
Users can easily choose and compare color and get strong feedback without scrolling back and forth.
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.
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
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:
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.
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:
“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…”
Add the color picker above the expanded size picker, so that users can easily switch colors when selecting size.
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.
Change the second "Add to Cart" to "OK". So that the second button becomes a confirmation instead of repetition.