User Experience / How to create a better ecommerce checkout UX

How to create a better ecommerce checkout UX

Andy Thorne
graphic collage of images with geometric shapes

Ambitious online retailers could be inadvertently putting up hurdles for their customers. The good news is, this can be easily avoided by creating better ecommerce checkout UX that convert leads.

Ecommerce checkout UX: Contents

  1. Payment Stages to support for lead conversion
  2. Use visual progress aids
  3. Add a guest checkout option
  4. Reduce form filling
  5. Issue order confirmations
  6. eCommerce loyalty

How many ecommerce shopping carts are abandoned? Different studies report varying amounts between 55% and 80%. Even the lowest figure represents a substantial number of unconverted leads. It also equates to a lot of wasted marketing spend and frustratingly poor sales.

(Importantly, the abandonment rate goes up for mobile eCommerce)

The main causes of abandoned shopping baskets can all be found in the Checkout process. Including unexpected shipping costs, over complex fields, unwelcome registration processes and concerns about payment security.

This tells you loud and clear that your ecommerce UX (user experience) pivots on having the best transactional page and streamlined systems to support it.

Here’s our guide to improving eCommerce checkout UX.

Payment stages to support for lead conversion

Modern consumers want speed and convenience, so your payment page needs to provide a step-by-step way to check out easily.

It’s just simple logic. Though it’s shocking how many online retailers create a checkout system that’s overly complex or deeply confusing.

Modern consumers want speed and convenience, so your payment page needs to give them a step-by-step way to check out easily. Primarily:

Cart adjustments

A swift way to change shopping basket contents. Including altering amounts and colour choices for example. Add in a quick reminder about batteries and other linked purchases but keep it brief.


Manage expectations within the content on your product pages, then make delivery options unambiguous and ‘clickable’ during checkout.


Use all the latest payment options and a system that makes selecting a preference effortless.

Coupon codes

The field to add coupon codes must be clear too. If you make it hard, site visitors won’t hunt or stay around.

Order review

Consumers appreciate the chance to double-check their order before pressing the final ‘go’ button. It’s the sort of UX feature that builds eCommerce loyalty.

If you follow this structure, users can enact checkout in five simple stages, that provide clarity and reassurance.

Use visual progress aids

Users can see that their order is being handled seamlessly.

Cement your checkout UX with a visual reference. For example, a progress bar at the top of the page indicates the stage that site visitors are at.

Users can see at a glance how simple your eCommerce checkout process is, and their success in completing each stage.

They can also see that their order is being seamlessly handled and that they are just seconds away from a stress-free purchase.

Add a guest checkout option

You can ask your customers to register an account at the checkout but add the option for them to check out as guests too.

Let’s keep this brief. If you ask eCommerce users to register on your website, that’s fine. If you demand they do it, so they can buy from you, that’s not fine.

You will lose potential sales in large numbers.

All you need to do is add the option for website users to check out as guests.

Reduce the form-filling

Don’t overcomplicate your checkout with multiple additional fields and lots of text to read. Your hard-won leads will evaporate… fast.

Sticking to the fundamentals of good practice in eCommerce checkouts ensures that users complete their transaction with the minimum of fuss. If you overcomplicate it with multiple additional fields and lots of text to read, then your hard-won leads will evaporate… fast.

Some online retailers believe high standards of customer service include asking for all sorts of permissions. Or they try to ‘grab’ as much marketing intel as possible from site visitors.

Apart from requiring a lot of thought and ‘clicking’, some eCommerce checkout forms are difficult to complete on mobile phones. Alienating users even more.

The core message is to keep it to the absolute basics, and briefly refer site users to where your T&Cs and privacy statement are provided in detail.

Issue order confirmations

Provide a simple confirmation after purchase with details about their purchases, when to expect the delivery and contact details for customer service.

Another example of checkout UX good practice is providing a simple email confirmation after purchase. This should start with a message to thank them for placing an order with your company.

Then, the email should list what they’ve bought and reiterate delivery information. This builds confidence in your customer service and gives them a reference point if they start to query their purchase.

Your order confirmation should also include any instructions on how long they have to cancel or amend their choices, and where to get information on your returns policy.

Lastly, it’s vital to provide contact information for your customer service team. This indicates transparency and trustworthiness.

Ecommerce Checkout UX and loyalty

Investing time and effort into a smooth checkout process avoids abandoned shopping carts and brings customers back for more.

Think about your own experiences for a moment. Are there online retailers you rely on for ease of purchase and good service?

One of the best ways to research examples of great eCommerce checkout UX is to look at top-performing online retailers, like John Lewis, Marks & Spencer, Argos, Next and Dunelm.

However, the rule of thumb is to work with eCommerce website design specialists Factory Pattern to create payment pages that build sales. Easy!