Category: UX advice / Ecommerce guides

Mastering the ecommerce experience funnel: checkout



This is the final part of my series explaining the core ecommerce experience funnel—what each step needs to do to convert users. Here’s the intro, landing pages are part two, listings is part three, and product pages are part four.

– – –

The checkout flow is the sharp end of the ecommerce funnel: if the user has got this far then they have shown that they are very keen on what you're selling and are ready to make a purchase. The checkout is the functional step of getting the requisite information to make that happen.

It's often the most formulaic part of the site and as a result it is an area where you can find a lot of design advice. Despite this, plenty of mistakes still get made by companies: according to ecommerce specialists the Baymard Institute, 69% of users still abandon their baskets (combined from 40 studies, as of 2018).

Checkout flows are essentially about form-filling and users often find this dull. As a result they don’t pay too much attention and are prone to making mistakes. Whatever you can do to make this easier and more reassuring is valuable here.

Requirements

There are really only four potential sections to a checkout flow. You may not need all of them but you shouldn't need any more than this. These four are the basket or product customisations; delivery information; billing information; and payment details. These steps could be separate pages or they could just be sections on a single page, as long as they are split out so it is clear for the user what is required at each point.

1a. Basket

When a user can buy multiple products on your website at once then you’ll require some kind of basket functionality to contain the products they want. I've written about what's required in a good basket here.

1b. Product customisations

If you don’t have a basket then you’re likely to have a product customisation section, which tends to only exist on more complex services or experiences. Examples are seat selections for trains and planes or booking add-on services. These should come first in the checkout, as they are likely to relate to the product page that the user has just been looking at, so it naturally continues that journey. This way you ease the user into the checkout flow and get them to build their commitment to buying by making the product more personal.

2. Delivery information

If you will be sending items to customers you’ll require the user to choose which delivery service they want, an address to deliver to, and probably a phone number for delivery drivers to contact. It’s important to show this near the start as it could alter the price and you want to allow users to see this early rather than spring it on them at the end. In addition if a user is keen to get something by a certain date they'll want to find out quickly if this is possible.

Delivery information in checkout

3. Billing information

Billing information is a step which is going to be required by almost all sites as it checks payment card details match the person paying. It is required by most payment providers, and usually means a name and address (you can speed up this step by asking the user if it's the same as the delivery one, which it often is). You should ask for an email address by this point so you can contact them about their order—and if it's a digital product, this will form the delivery mechanism.

4. Payment details

Finally we reach the payment details, which is a step every flow must have. Here users enter their all-important card details, or choose a payment wallet (sometimes this can be entered earlier to encompass other steps). This usually comes last in the flow because it involves a third party provider and you'll want to be sure you've collected everything you need first before sending users to them.

Single rather than multi column checkout

Success

The linear nature of a checkout flow means there’s a clear metric as to whether something has succeeds or not: either the user proceeds to the next step and ultimately pays or they don’t. This makes it easy to monitor the data and see whether it is working. You should have a funnel measuring how successful these steps are and the one with the lowest conversion is your first port of call to improve.

It is often worth starting all of your website improvements here. It should be easier to get someone who has entered the checkout flow to convert, over someone who has just landed on your site.

Multi step checkout process

The checkout flow is one step in the ecommerce chain whose days may be numbered—certainly in the sense of having a custom one for every store. With the convenience of payment wallets on mobile like Apple and Android Pay containing all of a user’s details, they can just pay with a fingerprint (or a face).

If you’re going build a direct relationship with your customers, then your checkout will have to be super-smooth and easy to use to compete against the massive convenience of single-tap payments.

If you want more advice on how to get your ecommerce site converting, take a look at my book Designing Ecommerce websites.

Last updated on 18 February 2019

ux / web design / ecommerce / checkout / payment / usability /

Designing Ecommerce Websites free ebook

Articles on similar topics

How do top ecommerce website display order summaries in mobile checkout flows?

Delivery or collection or both? The dangers of a mixed basket

The UX design of an effective ecommerce basket page – an illustrated guide