Ecommerce checkout design is something of an obsession for us here at Econsultancy because it’s an incredibly important part of the user journey.

A well-designed checkout allows shoppers to complete their purchase quickly and conveniently, while a poor user-experience can cause frustration and basket abandonment.

In general site owners should aim to make the process as simple as possible, stripping out any unnecessary text fields to reduce friction and delays.

Personally I’m a big fan of a one-page checkout as it takes a great deal of skill to strip the entire process down to the bare essentials.

It also requires a certain level of bravery to be willing to put so much emphasis on the user experience ahead of data capture.

There is also evidence to suggest that it can create an uplift in conversions. For example:

  • ProImpact found that a one-page checkout improved conversions by 13.39%.
  • Xanthos improved a client’s conversion rate by 67% after implementing a one-page checkout.

With this in mind, I’ve cast my net into the internet to see which brands are currently using a single-page checkout.

It was actually more difficult than I thought to find decent examples, so if you know of any then please let me know in the comments section.

And for more on this topic, read our posts on the best mobile and ecommerce checkouts.

Wamli

I was unfamiliar with Wamli prior to writing this article, but there’s a lot to like about the site’s checkout process.

A progress indicator displayed at the shopping cart shows that there are a mere three steps in the entire checkout process, and I like the copywriting on the guest checkout.

The checkout page itself is beautifully simple – it only needs your name, billing address, and payment details. 

Annoyingly it also forces new users to create an account by entering a username and password, but that’s a relatively minor point.

Olympics website

The Olympic Association's ecommerce store is a mess and I wouldn’t recommend that anyone use it as a template for their own site design, but it’s still a useful example of a single-page checkout.

After choosing a username and password, new customers need only enter an email, name, address and payment details to make a purchase.

Unfortunately the simplicity doesn’t make up for the poor copywriting, confusing layout and failure to load properly.

Honey Badger

Clothing retailer Honey Badger has a very simple checkout. Users only have to fill in around 10 fields before the purchase is complete.

Unlike the others on this list Honey Badger doesn’t force new users to create an account, and it’s also responsive so it scales down neatly onto a mobile screen.

MailingBags.ie

Another example that shows how difficult it is to design an effective single-page checkout. Though all the details are entered on a single page, the flow isn’t entirely natural.

Also, MailingBags.ie only accepts PayPal so users have to navigate to an external site in order to complete their order.

Sephora

Sephora uses a staged checkout, however it all appears on a single page.

As you can see here, the different stages of the checkout (e.g. password, place order) are listed below the current form so that when the user clicks ‘continue’ the next form appears.

I’m less keen on this method as it’s essentially a multi-page checkout masquerading as a single-page checkout, with separate CTAs to navigate through each stage of the process.

UBuy Coffee

This is another example of a staged checkout form that appears on a single page. I’m not sure the official term for this – perhaps nested, or a concertina checkout?

Either way, I don’t feel that this type of single-page checkout offers the same convenience as the Wamli example. 

ShadeStation

This is a very slick example of a nested checkout. 

When you click a ‘continue’ CTA the next form neatly slides out, and it requires minimal personal information.

AO.com

AO.com takes the single-page checkout to its extreme by also including the shopping basket on the same page.

Text at the top of the page states: “To keep it simple for you we’ve made our checkout one page. Everything you need to complete your purchase is here.”

It then displays the entire checkout process in four clear steps, beginning with a basket summary and ending with your payment details.

In my opinion it’s extremely user-friendly probably the best example of a one-page checkout that I’ve seen so far.

Mulberry

I’ve previously tested Mulberry’s site and was impressed by the checkout UX, which uses a nested design.

When using the guest option shoppers really only have to fill in their name, address and personal details to complete a purchase, so overall it’s a very fast and convenient checkout.

David Moth

Published 15 October, 2014 by David Moth

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via LinkedIn

1720 more posts from this author

You might be interested in

Comments (8)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Will Gadsby

We considered going for a one page checkout during early stages of our redesign (new site live next week), but as a B2B site we found too many hurdles; purchase order numbers, needing to check that cardholder address matched invoice address (in case of employee using boss's card), which matched delivery address etc.

about 3 years ago

Avatar-blank-50x50

Rasmus

Some of the above examples still have fields which are not really necessary for buying.

One of the most minimalistic 1 page checkout I've seen:
http://andmorefashion.com

about 3 years ago

David Moth

David Moth, Editor & Head of Social at Econsultancy

@Rasmus, that's a really good one. Thanks for flagging it up.

about 3 years ago

Avatar-blank-50x50

BookaHotelDeal.co.uk

In the travel industry several operators use a single page check out for better U/X because they simply store your card details and share it with the hotel to charge your card. This is a trusted secure method being practised for several years through strict secure servers
As for us, we are the merchant so do request an additional step whereby we separate guest details from payment details for a further level of security. It does add an extra step in the customer journey but is well secure

about 3 years ago

Avatar-blank-50x50

Joe

Thanks. Good article. Any thoughts on best in class checkout when click and collect is involved as a delivery option? Feels a lot to put a single page?

about 3 years ago

Avatar-blank-50x50

Daniel Green

I've always though the Scan.co.uk checkout was pretty sleek. Their follow up automated mail program is pretty rad too. Would have been cool to see it on here.

about 3 years ago

Avatar-blank-50x50

James Brian

This is really superb share. I was wondering regarding ways to reduce checkout to as little number of pages as possible. I am glad I found your article and this will help me save tons of time. Thanks for sharing. Keep up the good work.

about 3 years ago

Avatar-blank-50x50

sarah langer, none at none

I really like tigerchef.com one-page checkout. The address find thing is cool.

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.