WEBSITE DESIGN GUIDE - OPTIMISING YOUR ONLINE STORE'S BASKET AND CHECKOUT

Your basket and checkout pages should make it quick and effortless for the visitor to complete their purchase - giving them all the functionality they need whilst asking as little from them as possible.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

By this point your visitor has found a product they initially liked the look of, they've seen more information about it and it still looks right for what they need. They’ve managed to add it to their shopping basket and it’s now the home stretch for both you and them. Unfortunately, although you might imagine the last part of the journey to be relatively straightforward, there are still plenty of things that can wrong that prevent the visitor from completing their purchase.

I have three bits of good news and then one bit of bad news. The first bit of good news is that this is one area of the online experience where your site’s performance is highly measurable and where you will have a very clear metric to try and drive; the basket (or cart) abandonment rate. This is a percentage of all visits which have products added to the basket that don't end up transacting. We want to get this number as low as possible, not only to avoid missing out on sales but also to improve the visitor experience - not being able to buy a product you like is deeply frustrating. This metric is never going to be as low as zero - visitors might abandon their purchase because they've simply changed their minds - but we can do our best to get it as close to zero as possible.

The second bit of good news is, as you can measure the visitor experience here, you can also very directly see the financial impact of improving it. For example, if a basket abandonment rate on a website selling £10,000 of products a month is 50%, and its owner works to reduce it down to 40%, this equates to £24,000 a year in extra revenue. This should hopefully be motivating enough to make you want to drive improvements, and allow you to evaluate how worthwhile time spent on this part of the journey might be.

The final bit of good news is that the basket part of the journey is pretty straightforward, and few visitors have any significant issues with it. As such, we’re going to cover it quite quickly and move on to the more important checkout element as soon as possible.

That's enough good news (sorry!) - now on to the bad. This is the part of your online store where many designers have the least amount of control. You should expect some customisability, but typically it is not as extensive as on the product page or the product detail page. If this is the case for you, the below can still be used as a guide for when you’re choosing your online store in the first place, or when evaluating the visitor experience your current store delivers.

2. THE BASKET

 

Return to contents

Broadly speaking, the shopping basket can be broken down into two distinct parts; how the basket functionality is handled across the website and how the basket page itself works. Let's take both in turn.

 

How the basket is handled across the website

To start, you need to work out how the basket should display and behave across other pages of your website. This is relatively straightforward and only really requires:

  • That it is clearly recognisable as the basket - typically through use of the ubiquitous basket icon.

  • That it displays on as many pages as possible. There are very few pages where it shouldn't display, but you might have pages that your store isn't integrated into.

  • That is is positioned consistently on each page, typically in the top right.

  • That it summarises what is in it - typically by showing a count of the total number of products in it and, if there is room, the subtotal.

  • That clicking it either links to the basket page itself, or loads more information about what is in the basket (and then also shows a link to the basket page).

You then have to decide how to confirm to the visitor that a product has been successfully added to their basket. Without this feedback, the visitor might believe an error has occurred or might even accidentally add their product multiple times. This feedback can be given in a number of ways:

  1. Animate the basket icon, for example by temporarily re-colouring, increasing its size or giving motion to certain elements on the page.

  2. Load a modal window on the page the product was added from, confirming its addition and the new basket subtotal.

  3. Temporarily change the ‘add to basket’ button to read ‘added to basket’, potentially re-colouring it as well.

 

Of these, my personal favourite is option one, but it probably makes little actual difference to the visitor which one you opt for. The main thing to avoid is confirming this product addition by loading either the basket page itself or a separate confirmation page. This forces an unexpected page change for the visitor and takes them further away from the product detail page and the product page (making it harder for them to continue to find other products they might like).

 

How the basket page itself is set up

The requirements of the basket page itself are also quite simple.

All products in the basket need to be displayed clearly, in table format, showing the product image, its name, the size/variant, the cost and the quantity the visitor added. This table should then provide a subtotal, and then clearly display any taxes, discounts and delivery costs, before showing the total itself. 

Visitors also expect some control over their basket from this page. The very best basket pages will allow visitors to achieve all of the below, without forcing them to go backwards in their journey:

  • Products can be removed either through a delete button or by setting the quantity to zero.

  • The quantity of each product can be changed in a drop down menu.

  • The variant of the product can be changed, for example the size of an item of clothing.

  • A promotional code can be added, confirmed as successful and then the new total cost shown.

  • Related services or after-care can be added, for example extended warranties or service plans.

 

Lastly, this is a good time to provide any final reassurances to the visitor before their purchase, for example by displaying trust seals or by communicating your returns policy. Be selective with what you show here though, as the page should be kept clean and minimalist to avoid detracting from what is actually contained within the basket.

 

3. THE CHECKOUT JOURNEY

Return to contents

Let's move on to thinking about the more important checkout stage. Before we explore specific parts of the checkout itself, there are a few important aims that you should be working towards when making any design decisions in this area.

The first is to provide the visitor with a simple and easy process. We want to make this part of the journey as streamlined and visitor-friendly as possible to reduce any kind of cognitive burden and ensure that anyone with any level of patience, ability and competency can make a purchase.

The second is to eliminate anything that will distract visitors from their purchase, as we want their focus to be solely on completing it. You'll notice that many sites’ checkout pages have a very simple white background and the main navigation bar has either been removed altogether or has been massively scaled back. The purpose of this is to prevent visitors clicking on something that takes them away from the checkout page. As such, it should go without saying that no adverts should be shown at this stage.

The final aim is to reduce all other barriers to purchase. These could include having to register, not having preferred payment options available or a lack of an acceptable delivery proposition.

With these key aims out of the way, we will now examine each part of the checkout page from top to bottom. We’ll then round off this guide by covering a handful of other pieces of advice to make this part of the visitor’s journey as smooth as possible.

Logging in/registering

The first thing that most sites ask the visitor to do before even reaching the checkout page is to either sign in or register. There are some very good reasons for this from both the visitor’s and the business’ point of view.

  • The visitor can later log in and see their previous orders, check the status of a delivery, or save their card and address details for easier checkout next time round.

  • The business can begin to build a database of its customers - who they are, what they buy and how they can be contacted (and hence marketed to).

 

However, if we were to examine this stage of the journey in isolation, it’s easy to argue that this log-in requirement negatively effects the purchase experience. It slows the purchase down (by requiring time spent signing up or time spent logging in) and it acts as another hurdle that has to be overcome before the visitor can ultimately complete their purchase mission. It’s no surprise that forced sign-in is a key reason for basket abandonment.

There are two ways to improve the experience at this stage:

  1. Allow guest check-in. The visitor still has to supply their information, but they are immediately taken to the checkout page where they can complete their purchase. Once completed, they can then be offered the chance to fill in a few more details to create an account if they wish.

  2. Keep the registration form as concise as possible. Limit data collection to the absolute essentials (this might just be name, email address and password).

Payment

At some point, you will have to ask the visitor how they want to pay for their purchase. The most important thing here is to give a wide range of payment options covering all major debit and credit card types, a large online payment provider such as PayPal and any major local payment methods such as Alipay in China or Sofort in Germany. Of course there are legitimate business or financial reasons why all of these might not be available to you, but that is the visitor expectation of any modern online retailer.

Beyond the specific options themselves, there are just a few more things to note about payment:

  • If possible, don't force the visitor to select their specific type of credit or debit card, as this creates another unnecessary opportunity for the visitor to make an error. Instead, the best online stores will derive the card type from the first four numbers on the card.

  • If you have the infrastructure to accept gift cards as payment, this is where they should be captured. Any functionality here needs to account for the fact that the gift card might not have sufficient balance to cover the total cost of the order, so another payment type may also be needed.

  • If you accept discount codes then this is also where they need to be entered. Upon entering a code, the new total should display and there should be a visible indication that the code has been accepted, or a reason why it has been declined.

 

Delivery

On to delivery where, again, visitors will be looking for a variety of different options to choose from and where, again, you likely have limitations in terms of what you can provide. You are unlikely to be able to offer the same choice or speed as the biggest online retailers, but you’ll still be be expected to offer at least a couple of options:

  1. A ’standard’ low-cost (ideally free) option.

  2. A premium option offering faster or nominated/named-day delivery.

If you can offer those then that’s a fantastic start. Beyond this, there remain a number of other page elements to work on:

 

  • Clearly display your delivery options, including how long each typically takes and how much they cost. If you have multiple options then show these alongside each other for easy comparison.

  • Provide autocomplete address or postal code lookup functionality. The former works in the same way as it does in a search context (the visitor starts typing their address and the form tries to autocomplete it for them) and gives the visitor the best possible experience. If this isn’t available, postal code lookup (which works by searching for an address based on a postal code) is a now an expected part of any online store. Both save the visitor time and, importantly, reduce the risk of errors stemming from them incorrectly entering their information.

  • If the visitor has entered a billing address, allow them to copy it to the delivery address fields. This will save most visitors time as the vast majority of orders are delivered to the visitor’s own address.

  • Allow visitors who have signed in to save their address. This avoids them having to enter it again on future purchases.

 

Confirmation

By this stage, the visitor has entered all the information you need from them in order to complete their purchase and they can now hit the ‘confirm order’ button. Congratulations - you made a sale! However, we’re not quite done - you now need to confirm the visitor’s order. This has four elements to it:

  1. Transition the visitor to a new page, clearly confirm the purchase has gone through and remind them of the items they have bought.

  2. Link them to a PDF receipt, or a receipt in any other print-friendly and saveable format.

  3. If you have their email address, send them an email confirmation with this information in it.

  4. If the visitor has gone through guest checkout, now is a good time to offer them the chance to register for an account. The benefits of doing this should also be made clear to the visitor - for example the ability to track their order, or money off their next purchase.

And that’s it; the purchase is complete, the visitor is happy and you have more money in the bank. Whilst the ordering of all the different elements above was intentional - representing what I consider to be the typical checkout journey flow - it doesn't need to be stuck to religiously. If your checkout flows in a slightly different way then that’s fine, what is most important is to ensure each part of the process is fully optimised.

 

A few final things…

Ideally, all of the above (with the exception of registration/sign-in and the purchase confirmation) should happen on one single page. ‘One-page’ checkouts offer a number of benefits over ‘multi-page’ checkouts:

  • They load quicker as loading one longer page is almost always faster than loading multiple shorter pages.

  • It makes the visitor feel like the process is simpler because there are fewer clicks and fewer pages to navigate through.

  • All the information can be completed and amended without having to move backwards and forwards across different pages.

  • Visitors can see what information they are going to be asked to complete, so have a clearer indication of how much progress they have made and how long is left to go.

 

Although I have a strong preference for one-page checkouts, as with everything on the internet there is an ongoing debate about which type of checkout is actually better. Multi-page checkouts also offer specific benefits (including better tracking of where in the process abandoned baskets occur and offering less cluttered and simpler pages) so if you don’t have a choice as to which to use then don’t worry too much. If you do have a multi-page checkout then just try and alleviate some of its drawbacks by keeping pages speedy and giving visitors a clear idea of where they are in the process and what is coming up.

The final thing I want to talk about is form optimisation. The checkout page requires visitors to fill in a lot of information, across many different form fields. This not only means that there is a lot that can go wrong, but also that the visitor is required to spend a fair chunk of time giving their information, which can lead to frustration and impatience. This is particularly true on mobile. Luckily, there’s a few things you can do to make your form fields as efficient and easy to complete as possible:

  • Ensure any fields are wide enough to allow the visitor to see the information they are entering.

  • If relevant, make it clear the format that the field is expecting to receive. For example, with phone numbers, do you expect the visitor to enter their international dialing code or not?

  • If invalid data has been entered into a field, or if one has been missed by the visitor, highlight the error as clearly as possible. Give a visual cue (such as a red error icon or block highlighting of the field) and give detailed information as to why the error occurred.

  • Avoid clearing data from fields if the visitor is moving backwards and forwards throughout the checkout, or if a field has errored. This prevents them having to spend time re-entering their information.

 

4. CHECKLIST

Return to contents

  1. Find your current basket abandonment rate so you can measure the impact that any optimisations you make have had.

  2. Ensure the visitor’s basket shows clearly and consistently across all store pages.

  3. Confirm to the visitor when they have successfully added a product to their basket.

  4. On your basket page, clearly lay out all the important information for products currently in the basket.

  5. Allow visitors to change the quantity and variant of products in their basket and, if relevant, add discount codes and after-care products.

  6. Make all checkout page decisions in service of providing a simple experience, removing distractions or removing barriers to purchase.

  7. Allow visitors to check out as a guest or, if they must register, keep the registration form as quick to complete as possible.

  8. Give your visitors a wide range of payment options to pick from.

  9. Don’t force visitors to select their specific type of credit or debit card before they enter its number.

  10. Make it clear where to enter gift cards and discount codes on the checkout page.

  11. Give visitors at least two delivery options - free and premium.

  12. Clearly display the speed and cost of any delivery options.

  13. Make it easy for visitors to supply their address through use of address autocomplete, address lookup, copy from billing, or saved address functionalities.

  14. Follow the checkout page with a confirmation page that lists the products bought and gives visitors a copy of their receipt.

  15. If holding the email address of the visitor, send them an email confirmation following their purchase.

  16. Prioritise one-page checkout if it’s available.

  17. If using multi-page checkout, ensure your pages load quickly and clearly indicate what part of the process the visitor is on.

  18. Optimise any form fields on the checkout page by signposting the expected input and making errors easy to understand and rectify.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.