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. This 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 in 2016, large ecommerce sites on average have 39 potential areas for improvement.

The other thing to keep in mind is that 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 those fields easier and more usable is valuable here.


There are really only four potential sections to a checkout flow. You may not need all of them but you certainly shouldn't need more than this. At a high level these four are 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 clearly broken up so it is clear for the user what is required at each point.

Product customisations

These tend to only exist for more complex services or experiences, and could be arrival times for hotel stays, seat selections for trains and planes, or booking additional 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.

Making these alterations will likely change the price so this should happen early on in the process for transparency. Also by doing this first you can ease the user into the checkout flow and get them to build their commitment to buying by making the purchase more their own.

Delivery information

This is obviously a step that is only required if you will be dispatching items to customers. At this stage you 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.

Again it’s important to have early 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.

Wireframe of checkout page delivery info

Billing information

Billing information is one step which is going to be required by almost all sites. This is the details required to check a payment card matches 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 at this point so you can contact them about their order—and if it's a digital product, this will form the delivery mechanism.

Payment details

Finally we reach the payment details, a step every flow must have. At this point the user enters their all-important card details, or chooses a payment wallet.

This usually comes last in the flow because it involves a third party and you'll want to be sure you've collected everything you need first before sending their details over to be processed. Virtually every site will use a third party to process their payments even if it's hidden from the user.


The linear nature of a checkout flow means there’s a clear metric as to whether something has succeeded 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.

Links on ecommerce checkout flow

The simple linear flow should be emphasised by not including extraneous links to other parts of the website. You should certainly avoid displaying the main navigation and present a more stripped back version, to prevent users from getting confused or distracted about what they are meant to do next.

This brings to an end my guide to the elements that make up the ecommerce experience. The success metric here also defines the success of everything that has gone before in the ecommerce experience, so it is often worth starting with your website improvements here. It should be easier to get someone who has entered the checkout flow to convert, over someone who has only just landed on your site.

Speed is also important in the checkout flow. It's not an area users want to dwell for long periods, so having a low time on page here is a good target. If it gets too high it is probably a warning sign that users are getting stuck or are making errors—something to keep an eye on.

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 different 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 even a face). If you’re going to continue to get those valuable customer details, then your checkout will have to be super-smooth and easy to use to compete against the massive convenience of single-tap payments.

Last updated on 10 October 2018

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

Designing Ecommerce Websites free ebook

Articles on similar topics

Mastering the ecommerce experience funnel: product pages

Mastering the ecommerce experience funnel: listings

Mastering the ecommerce experience funnel: landing pages