Back

Shopping cart designs: Learnings from big retailers

10.07.2019

When it comes to eCommerce businesses, the top business priorities remain the same: improving conversion and retention rates, and preventing customer churn. 

The shopping cart requires particular attention of online merchants because it’s one step from the purchase. Alas, this is exactly where the potential buyer gets jammed: statistics show that the cart abandonment rate is nearly 70%, which is quite a lot.

So, why is the shopping cart the main point where a lot of conversion drops happen? There can be a list of reasons, but one of them is surely lousy design.

What to think about when you’re designing a shopping cart?

Customers who are browsing through your product catalogue can be in different phases of the sales funnel, meaning they might be ready to make a purchase, or still just looking around and collecting information in order to make the right decision.

One thing’s for sure: with so many brands to choose from, customers can leave your website in a matter of seconds if they get annoyed with the provided shopping experience.

To prevent this, there are two main areas you need to focus on, and that’s designing:

  • A shopping cart that’s easy to use
  • Clear call to action buttons

You don’t want your users to get confused about what they should do. It’s your responsibility to guide them through the sales funnel. With great UX, you can shorten the path between their first interaction with your brand and the moment they make a purchase.

But enough with the theory.

In order to bring actionable insights to you, we looked at the carts of the top 10 online retailers by revenue in the UK and analysed them up close.

Shopping cart designs of big shot retailers

1) Amazon.co.uk

A great thing about the UK’s Amazon website is its content hierarchy. Even though they have a lot of content on the page, it doesn’t feel that overwhelming for users. In addition, placing an ad for payment or credit just above the cart is quite clever.

On the downside, there are too many cross-sell carousels at the bottom. This is a bit risky as too many products can distract users before they arrive at the checkout. Also, if you take a look at the right column for suggested products, it has the same function as the one below the cart list – to motivate users to buy more. Repeating functions on the layout is a bit aggressive.

2) Tesco.com

Tesco was savvy to introduce the option of “substitutions” which can increase sales while ensuring a hassle-free shopping experience. With the simple and clear division of sections (list on the left, notifications on the top, summary on the right), users can navigate through the website with ease.

On the downside, user interface colours are poorly chosen. There is a lack of contrast between the elements. Also, there is a duplicate of the CTA “Book a slot”, which feels quite disruptive.

3) Argos.co.uk

Argos has cleverly included a list of USPs and benefits under their list of items, which ensures buyers understand the value they get and it complements the information about the product’s price. Shipping options are clearly explained and it’s also great they’ve underlined that the cart is secure and users’ data safely protected.

On the downside, navigation on the top is too heavy and prominent. Blue and yellow CTAs are giving too much contrast and attracting too much attention, despite the fact they are not that important for this step. The “check stock” section could be more intuitive. 

4) Johnlewis.com

On John Lewis’ website, you can see the stock of each item. This is useful for users because they can see if their desired product is immediately available or not. Above the CTA there is a list of the benefits that the user can get on its order, which is great. Transparency can support conversions.

On the downside, if you want to increase the quantity of your order, you can do so only by clicking many times on the button “+”. If the amount of products you want is big, this can be frustrating. Also, “Continue shopping” button is not visible enough and it doesn’t even look like a button. The logo on the top right should be a bit more emphasised to indicate the payment process is secure.

5) Next.co.uk 

Here, users can clearly see the total amount of selected items, which is a plus. Each item is easily editable for all options (e.g. size, quantity). Cross-sell of favourites is smartly added to remind the user about the item he/she likes, and that’s definitely a good way to generate more conversions.

As for the bad UX: on the top right, the position of the hard link “shop more” is ill-placed because if you navigate back – it’s logical for it to be on the left side. This way, the CTA can stand out from the rest of the content properly. The “Save for later” option is not very smart as this actually allows users to doubt or prolong their purchase decision.

6) Sainsburys.co.uk

Including a CTA checkout at the top and the bottom of the page is smart, and so is providing an option to sort items (especially in cases of buying multiple products). Highlighting the item row that’s being edited is also great because it provides better contrast.

There are a couple of cons of this website in terms of UX. The coupon/promotion pop-up on the top right is not well integrated at this stage of the buying process. It must be less intrusive.   Bottom navigation menu should be placed only at the checkout. Info sections about delivery and account must provide more details.

7) Ocado.com

Despite being among the top 10 retailers in the UK, Ocado provides a rather poor user experience and has a badly designed shopping cart. The list of preview images is lacking, and so are any detailed product information. The content hierarchy barely exists. 

8) Asda.com 

Asda can really boast with its clear and simple item list and good content hierarchy: just go through their reviews, tag prices, etc., really spot on. It’s also possible to sort items by categories of grocery, which resembles the shopping experience in a real, physical store. 

However, the CTA checkout is not well placed and should be at least aligned on the right so that it’s always visible and reachable for the user. Scrollable right column with ads can frustrate potential buyers and make them leave the website. It’s far better to have a cross-sell carousel instead.

9) Apple.com

Like you could expect anything less from Apple – their website shows good respect of the UX guidelines in general. On the cross-sell carousel, you can immediately add to cart accessories which certainly helps with conversions. The content hierarchy layout is also very good. 

And what about the improvement ideas? Well, CTA primary buttons could be bigger in order to visually stand out. The FAQ section at the bottom could be smaller: it is easy to utilise the toggle to hide/make visible only the information that is needed.

10) Marksandspencer.com

If you take a look at the cart list here, you will notice great text hierarchy. When it comes to choosing quantity, there is an easy-to-use dropdown feature. The website also shows the subtotal, which is a type of information users are typically interested in. The label “Checkout securely” is great for reassuring customers the payment process is safe.

Alas, some elements such as prices or delivery information – are duplicated on the cart page, which creates unnecessary clutter and might cause annoyance among users. List of payment suppliers should be on the bottom – not above the CTA.

 

Now that you know how the reputable names in the retail industry are optimising their shopping carts, you can definitely replicate their success formulas and test them on your own brand. 

In case you need some help from eCommerce experts, get in touch with Best Response Media and we’ll assist you with designing the best shopping experience for your customers! 

 

Share It! Tweet it! Publish It!