STEP #1: CHALLENGE
Sport Chek, Canada’s largest sporting goods retailer of footwear and apparel, was working on increasing conversions in the form of transactions.
They offer free shipping for orders over a certain order value. Nowadays, providing free shipping is quite common sense, and it’s nothing too special; accordingly, information about free shipping is not too prominent on their cart page. Also, the information about free shipping is very generic. It’s obvious that there are plenty of opportunities for optimization regarding the free shipping information.
So they decided to focus on impacting user behavior by optimizing the free shipping information banner on their shopping cart page.
STEP #2: ATTENTION INSIGHTS
Let’s analyze their shopping cart page:
Which elements are most important on this page? Of course, the product name and info, that are used to double-check if the correct product was selected, followed by a quantity, total price, the ‘Checkout’ button, and the ‘Free Shipping’ banner.
Regarding visual attention, the ‘Free Shipping’ banner receives only 9.2% of the attention, which could be improved based on this attention heatmap. So, one of the goals became to make this free shipping info more prominent visually so it’s more noticeable. Vibrant colors and some icons can be used to draw more attention to it.
The first insight: increase the visual prominence of the free shipping banner using vivid color, icons, and a border.
Moreover, the attention to the concerned element is affected not only by the properties of the element itself but also by the properties of other elements and the whole layout. A significant amount of attention is scattered on the page title, link ‘Back to Shopping’, product name, and product info that could be shaved off from these elements. Also, trivial column labels such as ‘Items(s)’ and ‘Qty’ could be removed, as well as links ‘Remove Item’, ‘Move to Wish List,’ and ‘+ Additional information’ so they don’t distract the customer from the main task and the ‘Free Shipping’ banner.
The second insight: remove trivial elements or reduce their visibility so they don’t distract the customer.
The ‘Promotional Code?’ section can be connected to the ‘Order Summary’ section to make only three distinct sections on the right: the ‘Order Summary’ section, the ‘Free Shipping banner,’ and the ‘Checkout’ button. It would make the attention flow even smoother, concentrating on the essential elements and leaking even less attention.
The third insight: combine the ‘Promotional Code?’ and the ‘Order Summary’ sections into one to make the distribution of attention more coherent.
Another goal was to communicate this info about free shipping in such a way that it would make it more relevant for the customer so it would seem kind of as an added value to the customer that differentiates them from others.
Hence, they decided to personalize this ‘Free Shipping’ message by stating that the user qualifies for the free shipping or displaying how much the customer needs to increase the order value to qualify for it.
STEP #3: RESULTS
They tested out a few variations, and here is the winning design variation:
The comparison of before and after side by side:
The first insight: as you can see, after changing the text color to red and adding the red border and the vehicle icon, the ‘Free Shipping’ banner became more visually prominent. The amount of attention on it increased almost two and a half times, from 9.2% to 22.2%.
The second insight: the product name and details take up less space, so attention to them decreased and was transferred to the sections on the right. Since the customer already chose the product, it’s not so important to highlight the product name and specs – they are needed just for a quick double-check. At this stage, the most important thing is to guide the customer to the checkout.
To add more, since they increased the white space a bit and removed some trivial text elements, the Clarity score increased by 2%. That’s not very much, but reducing the cognitive load and boosting the visual clarity on this page might add to a more effortless customer experience and, thus, higher conversions.
The third insight: the attention flows smoothly and naturally from the ‘Order Summary’ section above to the ‘Free Shipping’ banner below (see image below), and thus the latter gets more eyeballs on it.
This winning variation resulted in a 7.3% increase in transactions with solid 99.5% confidence.
Having in mind that thousands of transactions are made every week, this increase was a big win and a significant added revenue.
Source: Conversion
