Shopping baskets (or shopping carts) are a key part of the customer journey when shopping online. They are a gateway for visitors into your checkout process.
Retailers can choose to provide visitors with a wide range of information, links and other potential distractions, or alternatively they can keep their shopping basket minimal to focus purely on checking out.
Based upon my experience of working with a range of blue chip retailers over the last 10 years, there are a variety of best practice techniques and types of information to display in order to encourage visitors to proceed from the shopping basket to the checkout process.
In addition, retailers should look at answering as many customer questions as possible before they enter the checkout process, paving the way for a simple checkout that is a formality for most visitors.
The objective of the shopping basket
I would say that the primary objective for any shopping basket should be as follows:
Provide the visitor with all they need to know for them to be happy to progress to checking out, without any un-answered questions.
ASOS has developed a shopping basket which follows many of the best practice recommendations which I share with retailers, and this article looks in detail at some of the most important elements (in no particular order) of its shopping basket.
It is worth noting that ASOS also appears to be leading the way with some of its shopping basket functionality.
Stock availability made clear
There is a clear piece of information showing that the item is in stock, and ASOS has taken this a step further to also make it clear how long it has reserved this product for.
This helps tackle the issue of visitors returning to their shopping basket on a subsequent visit only to find the product they had added previously is no longer in stock.
The primary call to action is clear
There is absolutely no distraction when it comes to deciding which button in the shopping basket is the primary action for the visitor.
In addition, ASOS has used the word ‘securely’ on the button wording, which may improve click-throughs due to an improved sense of trust/security, although one alternative would be to say ‘checkout securely now’ as this is a more accurate description of the next step for the visitor.
Standard delivery costs are made absolutely clear
There is no ambiguity about what standard delivery costs will be, so visitors don’t need to wait until they are within checkout to know what delivery costs are. It’s worth noting that in my experience unclear delivery costs continue to be one of the key reasons why visitors abandon their checkout process.
Clear product details
Along with the product thumbnail and title, there is just the right amount of product information provided to ensure you know that you have ordered the right size, colour and quantity
Total price you will be pay is clear
Making the delivery costs clear on the shopping basket allows ASOS to make it absolutely clear what the visitor will be paying in total. Of course, the free delivery proposition for ASOS makes the subtotal and total prices in most cases the same.
Updating delivery options carried out within the basket
Many retailers don’t allow visitors to choose different delivery options on the shopping basket. Instead you have to wait until you are within the checkout process to change your preferred delivery option.
ASOS makes this a much more customer friendly experience by allowing you to choose other delivery options at the shopping basket stage. This ensures you are going into the checkout process knowing what you will paying and what delivery period you have specified.
Delivery upgrades are encouraged
By providing a facility for visitors to choose from a drop-down list of alternative delivery options, this in turn helps to encourage some visitors to consider upgrading to a potentially more useful delivery option (and potentially more profitable for the retailer)
Free delivery threshold promoted to encourage increase in order value
Like many retailers, ASOS provides a free delivery option when you spend over a certain amount, but where some retailers fail to promote this on their shopping basket, ASOS provides an intelligent marketing message encouraging visitors to consider spending a bit more to benefit from the free delivery option.
What is great about the design and positioning of this promotion is that it is easily seen as part of the shopping basket design, yet it doesn’t take over the page too much which ensures you are still drawn to the ‘pay securely now’ button.
Free returns clearly promoted
As well as promoting free returns during the shopping journey, ASOS recognises that this one of the many primary benefits of their proposition.
By promoting this clearly along with other primary benefits of shopping with ASOS the retailer is ensuring that visitors have plenty of reasons to proceed to the checkout and complete their order.
Secure shopping is made clear
ASOS has used a very prominent marketing area at the bottom of the shopping basket, with one of the key messages being about secure shopping.
This is important for first time ASOS customers and even more important for visitors who are wary of providing their personal and payment details online. Of course having a recognised brand name will always go along with in building trust and confidence.
Promotion of signing in for returning customers
Under the main page title ASOS has used a small but useful message for returning customers, encouraging them to sign-in to their account. This is particularly important if you store customers shopping basket contents against their account rather than simply by cookie.
Small, insignificant continue shopping basket
Although ASOS provides a continue shopping button (you can argue whether this is required at all, as at the shopping basket stage you haven’t removed any of your site navigation and other shopping facilities like I recommend retailers do once within checkout) this is very much an option for visitors which has no prominence on the basket design at all.
Once again this ensures that the primary call to action of ‘pay securely now’ isn’t competing with other buttons.
Small unobtrusive remove button
Retailers have to provide visitors with the ability to remove items from their shopping basket, but there is no reason to make this stand out in the shopping basket. ASOS simply uses a small text link which doesn’t attract any attention, therefore ensuring that visitors are encouraged to consider removing items from their basket.
Checkout button at the top of the basket
By providing a checkout button above the shopping basket contents, as soon as visitors visit the shopping basket, ASOS is encouraging visitors to think about checking out.
This is particularly important when retailers keep visitors on the product page once they add that product to their basket, as you know that when visitors arrive on their shopping basket they have specifically clicked a link to do this, rather than being redirected there as soon as they add a product to their basket.
Payment options are made clear
Although most visitors will be paying with a standard credit/debit card, there will be some visitors who like to pay with one of the lesser-supported cards.
By clearly displaying which payment methods are accepted at this stage, ASOS is ensuring that it isn’t going to leave some shoppers frustrated on the payment page within checkout.
Promotion of special delivery option and premier account
ASOS uses the promotional area under the shopping basket to promote both benefits for every visitor (free returns) as well as facilities which encourage new customers to consider becoming a premier account holder.
For this article on shopping basket best practice, I was planning to look at five different retailers who were doing good things, but having looked at ASOS I felt compelled to use it to demonstrate techniques that many retailers could follow in order to improve their basket to checkout conversion rates.
This isn’t to say that the ASOS shopping basket is perfect, but I’m hard pressed to find any big issues from a usability and user experience perspective.
If you are interested in e-commerce best practice principles for product pages, shopping baskets and the checkout process you may like to consider the e-commerce usability and best practice training course I deliver for Econsultancy.
I’m really interested to find out what you think to the recommendations in this article, and I’ve got a few questions to prompt discussion too.
- How does your shopping basket compare to some of what ASOS are doing?
- Do you feel ASOS could improve their basket with any particular changes?
- Has your business considered redesigning your shopping basket?
- Which other retailers do you feel have a good shopping basket design, and why?
I look forward to sharing further thoughts and perhaps debating some of the areas covered in this article.