Ecommerce checkout design: Converting visitors and delighting customers.

Don’t you love a good checkout? A breezy, easy-peasy, accommodating checkout that makes the final step a piece of cake for your customers? 

Today we want to make a pledge for better checkouts. 

In our experience talking to users at every imaginable step of an ecommerce journey, we have found that nothing can upset a customer more than an unclear, confusing and demanding checkout that gets in the way of the products they need / want to buy. 

And if you’re on Magento, check out our Magento web design services.

Let’s dive right in. Use the table of contents to skip to any section of interest. Your users will thank you for it! (and so will your boss when conversion rates and lifetime values improve) 

Why checkouts matter 

It can be tempting to think that by the time the user gets to your checkout page, they are so stubbornly decided to buy your product that nothing will get in their way. 

But think about it. Users arrive at an ecommerce site with a lot of thoughts in their minds. They want to buy your product but they also worry about making the wrong choice. Can I spend the money? Could I not pick this up in the store near work and save delivery costs? Should I not be making dinner by now? Am I late for The Archers? 

Every moment of friction can paralyse the customer and make those doubts louder in their heads. Every passing minute makes the user more impatient. 

Let’s talk numbers. Checkout pages have an average conversion rate of between 20% and 60% (footnote). This is super high compared to any other page on your site, however, there is ample room for growth. And more importantly, every little improvement makes a huge difference to your revenue, without increasing any costs. 

If you land 100,000 people on your checkout page every year, assuming a £50 Average Order Value and a 25% checkout conversion rate, you’re making £1,250,000.  

If you improve 10% your conversion rate (to 27.5%), you will be making an extra £125,000 per year. And have more, happier customers with good memories and future orders. 

Checkout is high-stakes, risky work  

Be warned. Working on your checkout is a high-stakes, risky business. 

Implementing the wrong feature can cost you money. And breaking the checkout can cost you your business. 

You need a solid understanding of the improvements you can make, the testing framework that can help you validate your ideas or expose risks, solid engineers to deploy it securely, and a great multi-disciplinary project team to make it all happen. Make sure you’ve engaged all the right people across the business and beyond, and followed good design process with research, testing and prototyping. 

Don’t be casual about it. Promise?

A good checkout is designed with your customer in mind 

Great checkouts are uniquely designed with the business context in mind. 

Understanding your users and how they buy your product is very helpful. Are they busy parents with a mobile phone in one hand and a baby in another? Or youngsters that have used their smartphones since they were 12? Are they buying a big-ticket item with complex technical specs or doughnuts? Are they subscribing or one-time-purchasing? 

At this point, dare we mention the R-word, research. 

Do user research taking users through the current checkout. What are the pain points? What might be better? After some of these interactions, start building prototypes, with more user research along the way. Do they find the new design more appealing, clearer, faster? 

However, you don’t need research for everything. Offering more payment methods is better than offering fewer payment methods. A fast-loading site is better than a slow-loading site. Offering guest checkout is better than not offering guest checkout. Regardless of what any individual user may say, an accomodating checkout with options and less need for user input is always a better checkout. 

Choosing your checkout flow type (multi-step vs accordion vs one-step)

Despite what one may think, there isn’t one checkout flow type that consistently outperforms others. Chances are that you can have a great high-performing checkout of any type, as long as you avoid their particular risks and implement them correctly. 

True. Depending on your circumstances, one of the checkout flows might be a better candidate, but the ultimate decision will still rest on many factors. 

For example, expensive purchases with customisation options and many fields required will typically perform better as a multi-step checkout, whereas impulsive purchases might do better with a one-step checkout. 

What really matters is how well can you implement it to maximise their advantages whilst avoiding their risks. 

In this article, we will focus on characteristics of effective checkouts, even when the implementation of these guidelines might differ technically by checkout flow type/

Characteristics of a good checkout

Clarity is the number one characteristic of good checkouts. Users want to be clear on what they’re buying, how it will be shipped or could be returned. A moment of doubt is paralysing and will result in drop-off. We don’t want that. 

By the time the user gets to the checkout, there can be no surprises, especially hidden costs. 

Here are some ideas that will work in most scenarios

No surprises: be clear on additional costs before reaching checkout

A great example of this is shipping costs. Make sure the user has learnt what delivery, click and collect and return options they have as they browse products. 

There are different ways to do this. 

For brands offering free delivery (including based on a purchase threshold), a small banner below the header can do the job really nicely, as it doubles up as a benefit for the customer. 

Product description pages are also a good moment to show this information, including a link to read more. In this example from John Lewis, there is a very clear bit of copy featured prominently in the PDP, leaving product information (not as important in apparel) to the bottom of the page 

Or why not get creative and think of other ways in which this crucial information is shown to users as they browse through the site. ASOS shows this information for anyone changing the site’s locale (genius) 

Reduce the number of fields to the absolutely necessary

We know that around a quarter of users abandon checkouts¹ that are too long or too complex, whilst the average checkout has as many as 13 fields on average.

Most checkout flows can obtain all the necessary information with 8 fields: email, name, postcode + address picker, phone and payment (either digital wallet integration or the combination of card number + address + CVV), which can decrease abandon rates when compared to 13 fields by as much as half!

Credit to the Baymard Institute for their amazing research on this topic.

Make the main button (at each step) unique and consistently placed.

Whether you’re using multi-step or one-step checkouts, users will need a button to continue through the checkout and place the order.

Because users feel really familiar with checkouts and tend to rely on visual cues to know what to do next, they can benefit from having the primary button both consistently placed and uniquely designed.

To achieve this consistent placing, you can also make it sticky. This way users will be able to identify it as the main button, even when they don’t read the micro-copy.

Remove or optimise header and footer 

The checkout has to eliminate distractions and most ways out. Help the user concentrate. 

Optimise the header for checkout by stripping every element of navigation and only including “Continue shopping” at the top. 

Footers are less straightforward. You can follow the logic and strip all the information from the footer, although some trust signals here can help conversion and might need to be clickable, for example, review widgets. 

Make obvious how to edit submitted information 

Users often need to review submitted information, either because they become conscious they might have made a mistake, or simply to check all the information is correct. 

Accordion checkouts, when correctly implemented are the most user-friendly as they can show summaries of every section alongside a little edit link. Commonly, users get this allows them to get into the information, and edit it. 

Having said that, accordion checkouts carry a great risk. Users will often automatically click the browser back button to navigate to the previous step. When this happens without the right technical implementation, this action can take the users away from the checkout, and lose all the information already typed. This can definitely upset users and lead to drop-off.

For multi-step checkouts, make the process steps not only clear and consistent with the actual experience, but also clickable, so that users can go to the right process step and edit their information.

Show order summary  

This is a very obvious one.

Show order summary, including quantities, weight or other basic product attributes. 

In this example from Jing tea, not only product attributes are shown on the sidebar as the user completes the form, but also the gift message, so they can give it a final once over before purchase. 

What a great way to offer users some tranquili-tea. 

Input form validation 

Help the user fill out the form by alerting them as soon as they enter non-valid information. Importantly, tell the user what’s wrong, as in the below examples.  

Little touches of helpfulness can go a really long way. What a wonderful way to think about UX, “how can we help users make this purchase that they showed clear interest for”. Some ideas below 

Cart / Basket persistence

Persistent baskets tie users’ items on the basket to their accounts, so they’re available when they return (whatever the device or browser). 

This is a really helpful feature for users, who sometimes need to abandon sessions to walk an excitable dog, cuddle an upset child or deal with a burning roast (we all been there). 

Different platforms handle persistency differently, and you might need to use an extension for some of them.

Guest login 

It’s great for merchants to have their customers create an account when they first purchase an item. It opens a world of possibilities such as email marketing and other personalisation features. 

However offering guest login should be non-negotiable, as it can prevent a significant percentage of your first-time customers from purchasing, especially as mobile traffic in ecommerce continues to climb. 

The good news is that you can have the best worlds. You can offer guest checkout, and the ability to create an account right after purchase. 

For most brands, leading with guest checkout is a fine option, as in the below example from Skatehut. 

Discount code (not too prominent) 

Featuring a way for the customer to input a discount code is a fine balance between being helpful…and not too helpful.

If you don’t make it prominent enough, you will confuse those who have one and potentially upset the purchase (especially true if you don’t have a customer service live chat). 

But if you make it too prominent, you can send the message that a discount code is probably there somewhere, just a search away.  

Do feature the discount code, but do it as a text link, and not a field. If you do it as a field you are making it seem as if one is expected, prompting users to go hunting for one.   

Address autocomplete (eg Loqate)

Of all the fields to fill in a checkout form, the address fields are the biggest barrier and pain point for users. This is why good checkout have autocomplete features, taking the start of a full address, or a postcode to autocomplete all the details relating to the user’s address. 

Make it Fast

Fast loading checkouts can keep your users focused and getting on with the purchase. 

To get your checkout performing, you need to follow best practice as with the development of the rest of the site, such as minimising front end code. 

To assess the speed and performance of the site, make sure you’re frequently testing with tools such as Lighthouse or Google Search Console. 

Payments, payments, payments

Offering a multitude of payment methods, (including deferred payment methods) is key to ensuring the final step of the purchase. There are no excuses not to offer these as most ecommerce platforms will come packed out of the box with a good range, however, if you work on Magento, you can extend this functionality with the Braintree Payments extension we maintain for PayPal.

Want to take your checkout to the next level? Contact us to discuss how we can increase your checkout conversion rate

Footnotes

1. Baymard Institute, checkout research