Boosting Add-To-Cart Rate Through Pre-Selection
UX Design
Bodymod
2024
About the Project
Overview
Bodymod is a global shop specialising in piercing jewellery, offering a wide range of styles and sizes to suit diverse preferences.
During observation, it was discovered that many users were attempting to add products to the cart on the product page without selecting a colour, while this rarely occurred with the size attribute.
What I Did
Quantitive User Research
Prototyping & Design
Analytics & Optimisation
Outcomes
+18%
Percentage increase in the add-to-cart event rate
+9%
Percentage improvement in the conversion rate
The Journey
Understanding the Problem
Screen recording analysis was conducted to observe user interactions. The findings showed that users often selected the jewellery size but left the text attribute unselected before pressing the "Add to Cart" button. When this occurred, a notification bar appeared to indicate the need to select all attributes. However, some users either didn’t notice this notification or mistakenly assumed the item had been added to their cart, leading them to abandon the page without completing the required selections.
Upon further investigation, it was revealed that when the colour attributes were changed, the image also changed, whereas this was not the case for size attributes. This could indicate that customers, upon seeing the product image, were confident that a colour had already been selected: silver, gold, rose gold, etc.
Sketch Solutions
The first sketch solution was to display a warning message directly within the section where colour option needed to be selected.
In the second sketch solution, if the "Add to Cart" button is clicked without selecting a colour, a drawer appears prompting the user to choose a colour option.
These solutions would provide immediate feedback, prompting users to make a selection before proceeding. However, they wouldn’t entirely prevent the issue, as the root problem was that customers often tried to add the product to their cart under the assumption that a colour had already been selected.
Prototype
It was decided to pre-select a default colour on the product page, which reduced the likelihood of errors and shortened the purchase journey by one click.
After discussions with stakeholders, the following decision was made: if a customer applied a colour filter on the category page, that colour would be automatically selected on the product page. This approach allowed for a quick implementation of changes and enabled testing of the hypothesis with engaged users.
Testing
The implementation resulted in a +17.72% increase in the add-to-cart event rate, which also led to an +8.84% increase in conversion rate.
After successfully testing the hypothesis, it was decided to apply pre-selection to all products. By default, the most popular colour, silver, was selected, with the option to choose a different colour based on the popularity of each specific product, material, season, or even campaign.