Return to knowledge base main page
Shopping cart improvement
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.
Let’s analyze this 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.
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.
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.
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.
They tested out a few variations, and here is the winning design variation:
And the comparison of both designs side by side:
As you can see, the amount of attention on the Free Shipping banner increased almost two and a half times, from 9.2% to 22.2%. Now, 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 noticed more.
Since the product name and details take up less space, 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.
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
