Single vs multipage checkout

A client suspected their checkout was under-performing. I was tasked with finding out what the problem was and what solutions I could offer…


1. Some Stat Facts.

A quick trip to Google Analytics told me the existing webstore was in poor shape:
drop out rates through checkout
Sample Range: May 28-June 27 2012
According to Beymard Institute 65.23 is the typical cart-checkout abandonment rate (ref: 14 Cart checkout Abandonment Rate Statistics, Baymard Institute February 25 2012) for ecommerce websites

So what’s going on?
For this analysis I’ve split the drop out into a number of different parts: before billing and payment and during billing:

Before billing payment
41% loss at view cart represents loss of users before they commence the checkout process. Deeper analysis of the stats suggests:
• 36% visit other product pages
• 17.3% exit the site
• 3.58% return to the homepage
• % remainder other pages on site
But this metric should not be viewed as total abandonment of the cart because a fair % stay on the website and might attend checkout later, yes?

During billing and payment
Of the 57.2k users beginning the start of the checkout workflow only 33.2k proceed to payment confirmation which is equivalent to a 48% drop out. This figure seemed unusually high.

2. Review Checkout

I carried out a heuristic  evaluation of the checkout flow and here’s what I found:

1. Multiple steps to completion
2. Lack of clear shipping, availability, order summary information
3. Styling and alignment of form fields reduced readability
4. Form validation techniques did not offer feedback in real time; errors not picked up by user until form submit
5. Long, obtrusive forms

3. Wireframe Analysis

The client handed me some wireframes which they thought would improve performance…..but these were not much better; the process was still multi-step, still included pre-registration, still  lost focus around the checkout. All these factors could divert the user from reaching confirmation screens.

For UX geeks
The logged in state forced users through two extra steps: specified preferred shipping destination manually, specified preferred payment method manually. Don’t you agree the user should be defaulted to the previously logged-in state with this information pre-filled (with an option to change, of course). Answers on a postcard.


I wanted to recommend something that locked users into checking out quickly. I had heard about one page checkout and wanted to base my solution round something similar.

But first you need an evidence base…

Reasons for Changing: Evidence From Multivariate A/B Testing
A number of studies have compared 2 versions of checkout workflows that incorporate either multiple page checkouts and one page, consolidated checkouts.

An example : Official Vancouver 2010 Olympic Store:

Control: Original, Multi-Step Process

Ttreatment, Single page checkout

Results: Dropouts down by ~20%; revenue per transaction up by ~18%


Here’s a wireframe sketch for how a one-page checkout might look (this is heavily abbreviated, but you get the drift):

single page checkout sketch

1)if user already has account then the user can login and all fields will populate with previous transaction details; user can edit if required (there could be other business rules including storage of previously entered addresses, but I want to keep this illustration simple).
2)the order total is displayed top and right and number for customer service is obvious (plus other reinforcements eg delivery estimations etc)
3)reinforced security: ‘money back guarantee’, cards accepted and virus screening icons
4)validation should be in-line ‘natch


According to The Baymard Institute, while a one page optimised layout may not necessarily outperform a well designed multi page layout, a one page layout is still a very important concept to bear in mind when designing a checkout because:

  • Fewer screens mean fewer steps, fewer opportunities to make a mistake, less time spent getting familiar with the content of the screen (even if it’s milliseconds), and no need to remember information from another step.
  • It conveys of simplicity and ease-of-use for the customer
  • It forces the business to restrict the number of form fields to an absolute minimum and forces the form to focus on core tasks necessary for purchase completion
  • By removing multiple pages, the one page checkout leads visitors directly to the checkout process with all information relevant to the buying process  on the same page and this could help their decision making
  • Of the A/B test cases where the performance of multi vs single page checkout was measured, statistically significant results were observed in terms of increased conversion and increased average purchase price

But what do you think? Have you tried a single page checkout? Did it work? Let me know!

other references:


I notice dispenses with shipping and billing addresses in favour of a single delivery address. A quick comp:


Strava have a wonderful example of single page checkout for when there is no need for a delivery address for example subscription or internet only services:



7 thoughts on “Single vs multipage checkout

  1. Pingback: Colmcq UX
  2. Glad to see people are still discussing the move to single-page checkouts. It seems like a rough consensus that a single-page form is the better route but not enough hard facts are out there to reinforce the idea (aside from the Vancouver Olympics).

    Multi-page forms are what the internet grew up with so people are still quite comfortable with them. I think that comfort is derived from the fear of change for seasoned internet users, but as time passes more and more will go toward fast ajax-based approaches. Having a page reload for 8 steps on a poorly connected mobile device is no way to win over a potential customer.

    1. I’d love to see more research Carson, but there’s not much. I’m also seeing a move towards carousel single page checkouts but I’m not a massive fan because of the way data is obscured. Anyway, who knows…!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s