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:
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):
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: http://www.lukew.com/ff/entry.asp?1579
I notice wiggle.com 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: