Once your customer gets to the purchase stage, a good ecommerce checkout experience could make or break the sale. Here’s how to make sure yours is the former – complete with some great examples from online retailers.
Congratulations! You’ve got a shopper to the checkout stage of the customer journey, and you’re moments away from closing the deal and earning a sale. But don’t breathe easy just yet.
While getting a customer to the checkout stage is a big achievement, it’s not a done deal and there are plenty of things that can put the shopper off at this final, crucial stage and cause them to abandon their basket or decide they’ll come back later (and then not actually come back).
So, how can you ensure a smooth, frictionless ecommerce checkout experience, and what potential pitfalls do you need to be aware of so that you can avoid them? In this article, I’ll cover some key points of ecommerce checkout best practice and why they work, followed by some excellent examples of online retailers who have managed to nail the checkout process.
What makes a great checkout?
While I could write a whole essay on this subject alone, here is a (hopefully concise) summary of the most important things to bear in mind when evaluating your online checkout experience.
- No distractions. Enclosing the checkout – which refers to the practice of situating your checkout in a stripped-down environment without all the bells and whistles of the main site – ensures that shoppers are focused on the task at hand and not likely to be taken out of the checkout journey by links or other distractions.However, be sure to maintain visible branding and security information so as not to damage trust (see #8).
- Guest checkout option. While encouraging customers to register for an account is a good idea, making it a requirement to check out adds friction and can turn customers away. Instead, provide a guest checkout option and encourage guests to sign up for an account after the purchase is already complete.
- Choice of payment method. Not all of your customers will have a debit/credit card, and even those who do may prefer to checkout with something like Paypal or Apple Pay. Providing a ‘buy now, pay later’ option like Klarna will also entice consumers who want more flexible ways to pay.
- Concise forms. People hate forms, so making it as painless as possible is the name of the game: keep the number of fields and particularly the number of required fields to a minimum, and provide clear information about the location of any errors and how to correct them. Consider if you can auto-fill any fields (such as country and city when a user enters a postcode).
- Progress indicators. Provide clear indications of where the customer is in their journey at all times, so that they can easily identify the stages they’ve already passed through and the stages they have left to complete.
- Persistent basket summary. Remind users of the contents of their baskets and the total cost of the order so they don’t have to leave the checkout for this information. You should also provide a clear cost breakdown so that the customer isn’t surprised by any unexpected costs, leading to cart abandonment.
- Speed. This is about ensuring that your pages load quickly – slow-loading pages, particularly on the payment step, will make your customer worry that there is an issue – but also about ensuring efficiency. Are there any unnecessary steps in the process that you can remove? Can you implement an express checkout option? Some ecommerce vendors address this with a single-page checkout, although these can be tricky to design and don’t always make for an easier navigation process.
- Reinforcing trust. Trust is built up by the overall site experience and includes things like using clear messaging and layout, having a reliable site experience and standardising forms – but there are ways you can ensure that the checkout experience maintains that trust. Visible assurances about privacy and data protection are key, as is consistent branding; if you redirect to an outsourced payment provider, make sure that your branding is still on the page.
Now that we’ve looked at how to get things right, who out there is putting these points into practice? Here are seven examples that have particularly impressed me on my travels.
Gymshark, and its website built on Shopify, neatly ticks off each of the items on our list of best practices: it provides an enclosed checkout where shoppers can either check out as a guest or log in to an existing account.
According to Shopify, Gymshark is using Shopify Scripts, which lets merchants customize the site. For example, founder Ben Francis says, “Scripts allows us to customize the checkout and offer customers who make a particular purchase a complimentary gift.”
There’s an express checkout option with PayPal to speed things up, and checking out as a guest only requires you to provide a contact email, shipping address and phone number – a fairly minimal amount of information.
Helpfully, the site will also autofill your address based on information entered in any field – so you can start typing a number and street name, or a postcode, and the site will present you with a list of addresses to choose from.
Gymshark’s address finder can autocomplete your address from any field, using any part of the address. (Image: Gymshark)
A clear progress indicator at the top shows which stages have been completed and which are still to go, and the site will remember your progress if for some reason you click away and then return. You can also click between the stages to revisit a completed stage.
The shipping stage provides a clearly costed choice of delivery options, and there are multiple payment options, including credit/debit card, PayPal, and Klarna.
Gymshark offers multiple payment options at checkout, including credit/debit card, PayPal, and buy now, pay later with Klarna. (Image: Gymshark)
Appliance retailer Ao.com has a smooth, streamlined checkout process. It’s easy to check out without an account; the retailer invites you to sign in to your account at the basket stage (though if I had to nitpick, I’d say that the option isn’t very visible as you have to scroll down to find it) and then proceeds to allow you to check out as a guest with no other hurdles presented.
The checkout is enclosed with minimal distractions, but it’s still very visually obvious that you’re still on the Ao.com site with the same green bar at the top of the webpage. At the delivery details stage, Ao.com cuts down on form-filling by simply asking the user to input a postcode and (optionally) house name or number, which considerably shortens the whole process. There’s also an option to check out with PayPal after choosing a delivery slot, which allows the user to skip the personal details-entering step.
Ao.com maintains a clear visual branding throughout the enclosed checkout process. (Image: Ao.com)
Ao.com offers multiple payment options at the final step: card payment, payment via PayPal, and flexible financing with AO Finance. The checkout experience is also equally good on mobile, and I like the fact that the mobile site has a prominent telephone icon at the top of the page that you can select to reveal a helpline number (the desktop checkout also has it in the bar at the top). There’s also a live chat button in the corner that you can select to bring up a text chat window, although I found it often quite slow to load on mobile.
Ao.com features its customer service contact number prominently on both desktop and mobile, and also features a live chat option. (Image: Ao.com)
Sustainable shoe retailer Allbirds is another Shopify customer, with its website notable for bold product pages. It has a very tidy checkout process, too, with lots of flexibility. Immediately after proceeding to checkout, the shopper is presented with no fewer than three express checkout options: Shop Pay (Shopify’s native payment solution), PayPal and Amazon Pay; or they can continue through the full checkout process. There’s no obligation to create an account, just a discreet ‘Log in’ link above the contact information form.
Allbirds provides a number of different express checkout options for its customers. (Image: Allbirds)
Any errors or missing information in the delivery form are clearly highlighted, although I did wish that there was a quick address finder to speed up the process of entering my details. (Browser autocomplete can obviously do that work a lot of the time, but it’s nice to see retailers incorporate it).
The checkout process is nicely enclosed and very minimalist – almost too minimalist, with the company’s logo in the corner the only reassurance that you’re still on the website. I think some kind of top bar would have left me feeling a little less unmoored during the checkout process, but it’s a minor point. The site keeps a summary of your order visible to the right of the checkout (on mobile, it’s available in a little drop-down, which is a nice touch) broken down by subtotal and total and with the amount charged in tax marked.
Otherwise, though, it’s a very smooth ride that works equally well across desktop and mobile, and I particularly like the flexible payment (shoppers can pay by debit/credit card, PayPal, or Amazon Pay) and checkout options.
4. Whittard of Chelsea
Tea, coffee and hot chocolate specialist Whittard of Chelsea has a strong online retail game, and their checkout experience is no exception. The whole thing is slimmed down into just two stages – delivery (or collection from a select number of UK stores) and payment.
There’s a guest checkout option for new customers, and much like Gymshark, Whittard uses a smart address finder that will do the hard work of looking up customers’ addresses for them. Missing fields are also clearly highlighted.
The whole checkout experience contains clear messaging, along with assurances like “We’ll only use this for delivery purposes” below the phone number field which help to maintain trust. (The phone number also isn’t a required field, meaning that orders only require a name, email and delivery address). I particularly liked the addition of a slim blue banner at the top of the checkout page with a little padlock symbol reading “Secure checkout” – it’s clever, as we’re trained to unconsciously associate the padlock symbol with security, and just having it at the top acts as a reassurance. The look is all very on-brand.
Whittard’s checkout process takes place in just two stages, while a ‘secure checkout’ banner at the top reassures shoppers. (Image: Whittard)
Whittard provides three different options for payment: credit/debit card, PayPal, and Klarna. Built on Salesforce Commerce Cloud and launched in 2019, the current site also offers multi-currency and a localised content experience, which has led to a notable increase in international sales.
The retailer keeps its checkout process slimmed down by unfolding additional options when a button or checkbox is selected – for example, selecting a radio button to indicate that your order contains a gift will unfold a box that lets you add a gift message. This is particularly effective on mobile devices, as it allows Whittard to make the most of a smaller screen space without it feeling cluttered.
Whittard keeps its checkout process streamlined by unfolding additional options when a checkbox or radio button is selected – which is particularly effective on mobile. (Image: Whittard)
5. WH Smith
WH Smith has lots of language to build trust around its checkout experience. The first page bears the words “Welcome to secure checkout”, and like Whittard, the site has a padlock icon in the corner (or at the top on mobile) with the words “secure checkout” that remains present throughout the checkout process. I also like that the first page features a range of payment icons at the bottom so that the shopper knows they have plenty of options available.
WH Smith’s checkout process is full of language designed to reinforce consumer trust and confidence. (Image: WH Smith)
Finally, the shop provides a variety of payment methods including credit/debit card, PayPal, Visa Checkout, and pay later with LayBuy. I particularly liked the way that, when selecting a third-party option like PayPal or Visa Checkout, the site copy reads “We’ll quickly send you to [PayPal/Visa Checkout/Laybuy] to [take payment/set up your payments] and then we’ll confirm your order”. This prepares the shopper to be redirected so they won’t be thrown by it, and offers extra reassurance that they’ll be able to confirm the order with WH Smith at the end.
WH Smith warns shoppers in advance of redirecting them to a third-party payment provider, which helps prepare them for being taken to another site and reassure them that their order will be confirmed. (Image: WH Smith)
All in all, the checkout process only consists of three stages (if you count the confirmation stage) which are clearly marked at the top and highlighted to remind the customer of which stage they’re currently in.
6. John Lewis
I can’t fault John Lewis for its checkout process, which is simple, clean and straightforward. The shopper is presented with the choice of signing into an existing account or checking out as a guest, with language indicating that the checkout is secure. The “secure checkout” banner (with an accompanying padlock symbol on desktop) is present throughout the process as a visual reminder that the shopper’s details will be kept safe.
John Lewis shoppers are presented with a choice between signing in or checking out securely as a guest. (Image: John Lewis)
John Lewis’ checkout is another one that is visually minimalist almost to the point of feeling like it’s a separate site, although the John Lewis & Partners branding is visible in the corner. A quick address finder speeds up the process of filling in delivery details, but there’s also the option to enter your address manually – a lot of retailers with quick address finders don’t give you the option not to use them, which can be annoying if you’d prefer to use autofill or just do it yourself.
The desktop checkout keeps a summary of your order visible on the right-hand side, while on mobile it’s only visible at the Review and Pay stage, but that’s my only real quibble. Everything else, including the progress indicator at the top which ticks off the stages you’ve passed through, is very clearly laid out and easy to navigate – the desktop experience almost feels like a mobile one with its big icons, easy-to-select form fields and neat grid layout.
At the end, there’s a choice of payment options between debit/credit card and PayPal, and I think Apple Pay is an option for iOS users (I don’t have an iPhone, which may be why the option didn’t come up for me).
John Lewis’ desktop checkout process almost resembles a mobile site with its clean and ordered layout. (Image: John Lewis)
Sodastream, a vendor of sparkling water machines, has a simple checkout process that nevertheless ticks all the boxes. Its copy reinforces trust from the word go, with a “secure checkout” button that shoppers click to get to the checkout. There’s an Express Checkout with PayPal option for a quicker route through checkout, but even the full route only consists of three steps.
Sodastream uses a “Secure checkout” button to reinforce trust and confidence in its checkout process. (Image: Sodastream)
Much like Allbirds, Sodastream defaults to allowing you to check out as a guest, but makes a login link available for existing customers. The checkout process is enclosed, but keeps a bar at the top with the brand’s logo and a distinctive bubble pattern as a visual reminder that you’re still on SodaStream’s site.
I wish the site had an address auto-fill or quick finder feature, but otherwise it’s a painless and smooth process that works well on both desktop and mobile. Another good addition would be a Buy Now, Pay Later option as Sodastream is a retailer of larger-ticket items; as it is, the site offers PayPal alongside credit/debit card checkout which provides some payment flexibility.
What qualities do you consider to be essential for a good ecommerce checkout? Which retailers have you encountered with a great experience? Leave your thoughts in the comments!