Boosting Add-To-Cart Rate Through Pre-Selection

Service

UX Design

Client

Bodymod

Year

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.

Previous logic before pre-selection

Initial logic

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.

First sketch solution

Second sketch solution

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.

Pre-selecting colour when filters are applied

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.

Google Analytics Shopping Behaviour

Next Work

  • Website for Blue Monkeys in Space

    Web Design
    HTML & CSS
    2022