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