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.
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.
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.
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.
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 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.
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.
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 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.
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.