Good checkout design reduces cart abandonment by giving customers a friction free checkout experience.
Customers have a short attention span so the easier the process the less likely they are to leave a website without buying.
Let's see how a user-centred checkout experience, like the one we designed for Pumpkin Squash, can help drive conversions and minimise cart abandonment.
‘69% of all eCommerce visitors abandon their shopping cart’*
*Source: Baymard
Most companies accept that some customers will abandon their carts at some point in the checkout process but if a company can save just 6% of those lost customers they could be looking at a significant revenue boost.
Why is it that so many orders are abandoned?
- Extra costs too high (Shipping, tax, fees). 55%
- Asked to create an account. 34%
- Too long / complicated checkout process. 26%
- I couldn’t see / calculate total order cost up-front. 21%
- Delivery was too slow. 16%
- Returns policy wasn’t satisfactory. 11%
- There weren’t enough payment methods. 6%
- The credit was declined. 4%
Objectives: Streamline checkout process and remove barriers to buying
Now that we knew the problems causing cart abandonment I was able to design a checkout where:
- Extra costs were transparent and shown up-front.
- Guest checkout was offered as an option.
- Checkout was simplified with a 1, 2, 3 stepped process.
- Total order cost was displayed at the start.
- Padlock icon and trust seals displayed to promote confidence.
- Show delivery times to avoid disappointment.
- Show ‘easy’ returns policy.
- Provide multiple payment methods.
The checkout process begins when a product is added to the cart
The above screenshot demonstrates what happens after a product has been added by the user.
Let’s discuss the callouts (1 – 6):
- Add checkout buttons at the top and bottom of the cart to direct the user to purchase.
- Include product photos for visual reference, descriptions and prices. Make it easy for users to remove products and change quantities with stepper buttons so that they don’t have to go back to the product pages to order more.
- Be upfront about costs by providing a breakdown of prices, fees and discounts.
- Display different payment methods in addition to credit cards to increase conversions. E.g. Paypal, Apple pay.
- Add information about ‘FREE deliveries’ and ‘FREE & EASY returns’ to promote confidence in the user.
- Padlock icon and trust seals make site trustworthy.
Remind customers of why they should shop with you:
Multiple payment methods, free delivery, easy returns and secure transactions.
The following prototypes were created to test how the cart would display once a product was added to the cart
Test early and often so that changes can be made to the website as quickly as possible.
The following prototype shows how the cart will display on desktop and tablet devices.
- Add checkout buttons at the top and bottom of the cart to direct the user to purchase.
- Include product photos for visual reference, descriptions and prices. Make it easy for users to remove products and change quantities with stepper buttons so that they don’t have to go back to the product pages to order more.
- Be upfront about costs by providing a breakdown of prices, fees and discounts.
- Display different payment methods in addition to credit cards to increase conversions. E.g. Paypal, Apple pay.
- Add information about ‘FREE deliveries’ and ‘FREE & EASY returns’ to promote confidence in the user.
- Padlock icon and trust seals make site trustworthy.
Try adding a product to the cart on mobile devices.
Animation plays an important role in displaying the cart
- The card slide provides a visual cue to the user that a product has been added and is ready to be bought.
- I would advise to keep the cart open, let the user decide whether to close it or move onto the checkout. Gently coax them towards the checkout. :)
Create a clear visual hierarchy using different font weights and sizes to make content scannable.
If you accept coupons add a link but don't make too much of it or your customer might leave your site in search of a coupon and never return. When someone clicks the link display an input field.
Try using the following prototype to see how this works:
‘34% of US Adults abandoned their cart in Quarter 4 of 2018 when forced to create an account’*
*Source: Baymard
Provide a guest checkout
The following prototype is an example of a 'Guest checkout' on mobile devices, that I designed for my client. Please click within the display, hints will be offered for help if required.
The following prototype is an example of a 'Guest checkout' on desktop and tablet devices.
Guest checkouts, remove compulsory sign ups that only serve as a barrier to sales.
1/4 of potential customers abandon online purchase because of forced registration.
- Customers resent filling on forms, make it easy for them by asking for the bare minimum of details.
- Offer the ability to become a customer after the sale on a thank you page, you will already have most of the customer details to create an account just ask for a password and confirm.
- Incentivise new signups by offering a 10% off next purchase coupon.
- Use the term 'New customer' rather than 'Register' it sounds more personable.
‘26% of US buyers abandoned their cart in Quarter 4 of 2018 due to a long checkout’*
*Source: Baymard
Answer: Simplify the checkout
The following prototype is an example of a checkout for 'Registered customers' on mobile devices that I created for my client.
Click within the display, hints will be offered for help if required.
The following prototype is an example of a checkout for 'Registered customers' on desktop and tablet devices.
- Notice the progress bar which indicates where the user is in the checkout process.
- The hamburger menu and other icons/links have been removed leaving the logo and link back to the homepage. This prevents the user from navigating away and focuses them on the checkout and task in hand.
The prototype above uses a 3 step approach to improve the checkout flow and minimise steps
1. Your details
During the first step registered customers will be asked to supply their username and password and new customers or unregistered customers will be asked for a postcode to see whether they live in the delivery area.
2. Delivery
Following a positive postcode check the user clicks the ‘Continue to delivery’ button and inputs their delivery preferences.
Delivery details are taken before billing because the information entered here can be reused to fill billing address details in step 3 by selecting ‘Use this address as my billing address.’ This speeds things up because this information will not need to be retyped.
3. Payment
Payment details are considered last of all because entering a credit card number is the hardest task to complete.
Billing address details will be pulled from the customer’s delivery details and autofill the text fields.
17% of users do not trust websites with their credit card information and abandon their carts*
*Source: Baymard
Communicate to the user that the website is secure. For this reason, I displayed trust seals and used simple language. The words ‘SSL certification’ are not understood by most people.
Single page vs multi page checkouts
Our approach to checkout design uses 3 pages but you can also use a single page.
Single page checkouts reduce page clicks but can be long and sometimes confusing.
What’s good about the multi-step approach is that drop-off rates can be measured and if you capture an email early on, you can attempt to recover abandoned carts by sending emails to the lost customer with a first buy discount.
In summary
We can reduce checkout abandonment by:
- Minimise steps and reduce amount of form filling.
- Make buttons clear, consistent in style and name according to their purpose.
- Make it easy to change or remove cart items. Use images and descriptions for products.
- Streamline the registration process. Use guest checkouts and let new buyers register after purchasing.
- During checkout ask for easiest info first.
- Use trust seals to let customers know your website is secure and trustworthy.
- Display multiple payment options.
- Use clear shipping information, clearly display return policies early on and don’t make too much about coupons. 🙂
DO YOU HAVE A PROJECT WE CAN HELP YOU WITH?
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
