How To Design A Great Ecommerce Checkout Flow

November 25, 2019

The Bolt Team

Ecommerce checkout process from items to paying to shipping

To make the most of customers buying on your ecommerce site, improve conversions, and reduce checkout abandonment, you need to perfect your checkout. This article will help you optimize your checkout flow and keep customers on track.

The expansion of online shopping has made ecommerce the first stop for most customers. To create a great user experience, improve conversions, and reduce checkout abandonment, you need to perfect your checkout.

This article will help you optimize your checkout flow and keep customers on track. To make this accessible and easy to digest, we’ve broken the information down into the following sections:

To start, let’s examine the essential steps of an ecommerce checkout process, and then dive into why customers are abandoning checkout. Once we have a good understanding, we’ll cover best practices for optimizing an ecommerce checkout.

Bolt One-Click Checkout

Start treating millions of shoppers like returning customers and make their checkout easier than ever.

Try Bolt Today

What are the standard checkout process steps?

The checkout process is the series of steps a customer follows to purchase the items in their shopping cart on an ecommerce store. This includes every step that a customer goes through to proceed through to checkout. An ideal checkout flow will have a smooth, frictionless user experience.

The typical checkout process for a customer is:

shopping cart > billing info > shipping info > shipping method > preview order > payment > confirmation

Digital products and goods won’t require shipping information or shipping method, as you’ll download what you’ve purchased. Physical goods will require shipping details and methods to be input. Depending on the store, you will need to optimize the checkout flow.

All checkouts have the same essential steps, whether they are part of a single page checkout, multi-page checkout, or even a more complicated checkout process. Below are the 7 essential steps any ecommerce checkout will contain:

1. Initiate checkout

Initiate checkout on cart

Checkout begins when the customer leaves the shopping cart to proceed to checkout. This is done through a call to action button, typically labelled “Checkout,” “Buy Now,” or something similar. Once a customer has engaged with this option, they are advancing to checkout.

2. (Optional) login or signup

Proceeding to checkout without login

Allow the customer to proceed to checkout without registering for an account. Enforcing account creation acts as an obstacle in the checkout process, and will deter the purchase process. Give the users an option to login if they are returning customers.

3. Billing information

Enter billing information

An essential part of any checkout is choosing the payment method and entering billing details. Form fields should be intuitively designed to fit all required billing information, and billing details should be one of the final steps of the checkout process.

4. Shipping information

Enter shipping information

One of the main draws of ecommerce is getting things delivered to your door. Collect shipping information, ideally with a streamlined set of form fields. Create a checkbox with “Shipping address same as billing address” pre-checked.  

5. Shipping method

When customers are inputting shipping details, it’s a good idea to request the shipping method. Make it easy for your customer by collecting these pieces of information together. When possible, provide as much variety in shipping methods as possible, so customers can choose the delivery method they prefer.

6. Preview order

Checkout with order summary

Once customers have filled out their information, many checkouts then let them preview their order. Display as much relevant information as you can, including order subtotals, taxes applied, delivery fees, and total cost.

You’ll also want to include product details, such as quantity, item name, and a short description. When possible, make this available throughout the entire checkout flow for the customer’s reference.

7. Payment confirmation

Often on the ‘preview order’ screen, the final step involves confirming the order and completing the payment. This call to action should be prominent, as it finalizes the sale. This is the end of your funnel, and you should capitalize on customers that have proceeded to this step, capturing the sale.

Why you’re losing sales & people are ditching your checkout

There are lots of reasons why customers abandon checkout, many of which are common across ecommerce sites. Some will be more relevant to you and your business, while others may not be as impactful.

To help you find the causes of checkout abandonment on your platform, you can look at the main reasons for checkout abandonment as per Baymard Institute’s statistics drawn from 41 separate cart abandonment rate studies:

  • Extra additional charges – Unexpected or additional costs added at the time of checkout almost always deter customers or at the very least cause them to second guess their purchase.
  • Forced account creation – Forcing customers to create an account or register with their store creates added steps to complete checkout, and in some cases actually turns away a potential guest or one-time customer.
  • Non-inclusive shipping options and pricing – Customers that get to the checkout only to find that their preferred shipping method is not available or is too costly may cause them to change their mind and abandon their purchase.
  • Overly complex checkout – Customers are looking for a fast checkout experience, often purchasing online for the convenience. An overly complicated checkout process fails to provide the ease, speed, and convenience customers are seeking for ecommerce transactions.
  • Errors and crashes – While small errors are understandable, significant performance issues, errors, and crashes cause users to lose trust in your service, or seek a service that provides a better user experience and interface.
  • Security and protection – Having a safe and secure checkout is a cornerstone of any ecommerce platform. Customers will not enter personal, shipping, or billing information into a service they don’t trust will keep their information safe.
  • Performance and load times – The overall performance of your service plays a big part in whether customers rely on your ecommerce store. Keeping load times for your checkout pages fast and responsive is important for keeping customers interested in buying on your platform.
  • Missing payment options – Inadequate payment options is a major reason customers leave checkout. Customers want to pay with their preferred method, and in some cases, only have certain methods they can pay with. The less options you have available, the lower your conversions will be.

Best practices to nail the ecommerce checkout flow design

Knowing why customers are abandoning checkout and keeping them from leaving are two very different things. You need to start with an understanding of the causes of abandonment to be able to effectively build a checkout flow that addresses — and solves — these problems, allowing you to work towards checkout optimization.

To help you address the issues you are having head on, we’ve broken these best practices into 3 main categories:

  • Making the checkout process faster
  • Designing ways to better entice buyers
  • How to stop customers from leaving last-minute

How to make the checkout process faster

Online shoppers are seeking a convenient, smooth, seamless process that saves them time and effort. To make this possible, checkouts need to be fast and efficient for customers. This includes checkout page load times, number of steps, and the difficulty of navigating the pages on a mobile device.

Here are some strategies for improving the speed of your checkout:

1. Simplify, simplify, and simplify some more

Customers shopping online are looking for a straightforward and convenient experience. To give them this, continuously simplify your checkout process, eliminating any unnecessary steps, reducing the number of form fields, and saving customers precious time. The simpler you can make the entire checkout flow, the easier it is for customers, and the more conversions you will see.

2. Offer guest checkout

Nike checkout with member and guest checkout options

Forcing a customer to create an account or register at the time of checkout is one of the worst things you can do. It creates an obstacle for the customer when they are about to complete a purchase. Instead, offer customers the option to checkout as a guest on your ecommerce site, making it more accessible for all customers, especially new visitors. This also speeds up the process for those that simply want to breeze through checkout.

3. Autofill addresses and validate in real-time

Example of an autofill address form field from Best Buy

Integrate a software tool that enables addresses to be autofilled and validated as they are being input. This will make checkout faster and simpler for customers, but will also ensure accuracy of the address details your customers are inputting. This saves you time on validating an address, and clears up confusion about the address they should be billing or shipping to.

4. Allow social sign-in

Myntra checkout with social connection options highlighted

If you require — or prefer — customers sign up or register for your service, allowing customers to connect via their social media accounts can help make the process faster and simpler. This saves them creating an account and inputting their personal information, and instead, allows them to connect an account that already confirms and verifies this information.

Designing an optimal checkout page means considering everything from the beginning to the end of the checkout flow. Design and development is a constant process, and you will want to make adjustments as they make sense to improve the design. Over time, you’ll optimize your checkout page design to reduce checkout abandonment and drive more sales.

Below is a selection of best practices for designing your ecommerce store to motivate buyers to complete checkout:

1. Indicate checkout progress

Made checkout with progress indicators highlighted

Use a progress indicator to easily convey to customers what stage or step of checkout they are on. This shows customers how far they’ve come, and what stages are ahead, guiding them along in the process. This makes checkout simple to follow, and gives the customer an idea of how much longer the checkout will take to complete.

2. Prioritize mobile user experiences

The majority of ecommerce customers are now shopping on their mobile devices. To capture this audience, it’s essential to develop and design your mobile UX to be as seamless and smooth as possible. Follow best practices when it comes to checkout development by creating a responsive design, so customers get the same experience across devices.

3. Summarize cart contents and order details

Bellroy checkout with order summary section highlighted

Display a full summary of all order details including product, payment, and shipping information. Giving customers the ability to review their order prior to finalizing payment is essential for giving them a clear picture of the order. If possible, you should display this throughout the entire checkout process, but it is a must for the end of checkout before a customer finalizes payment.

4. Use visuals to simplify process

Whenever possible, use visual indicators rather than text. We process visual cues much faster, which helps shoppers retain information quicker. The faster your customer can understand the process and the cues they are being given, the easier they can complete checkout. This makes for a better user experience for the shopper, and leads to higher conversions for you as a retailer.

5. Simplify the checkout process

The checkout process should be as few required clicks and steps as possible. A checkout modal overlay over a cart page is an excellent way to do this. You can also keep things to a single page, optimizing a one page checkout, which can greatly reduce checkout abandonment.

6. Guide users through order forms using microcopy

Bellroy checkout page with microcopy sections highlighted

Microcopy are the short descriptions (in a tiny font) that help explain what each form field requests. You can use this microcopy to provide more information to the customer at different stages of the checkout flow. Giving customers the information they need exactly when they need it makes it easier for them to follow along. 

7. Make your value clear to visitors

Remind customers about the value that you provide, whether that be the exclusivity of your product or service, or the personal touch that your service gives customers. Consistently remind customers of the value they are getting out of this purchase to motivate them to complete the purchase through your store.

8. Test, review, adapt, repeat

Perfecting your checkout is an ongoing process, and you should integrate analysis and improvements as a regular part of product development. Consistently track analytics, test the performance of your site, monitor the impact of your campaigns and updates, and consistently improve your product through each iteration.

How to prevent customers from abandoning at the last minute

Despite doing many things right, customers still abandon checkout right when they are poised to buy. While it may seem that you’ve done everything up to that point, the final moments before the sale are crucial to finalizing it.

These are some of the main strategies for capturing the sale when customers are poised to buy, and how to reduce your checkout abandonment rate:

1. Employ clear call to actions

Bellroy checkout with call to action buttons highlighted

Funnelling customers to a point of purchase requires a lot of effort on your part, including marketing, product development, distribution channels, and more. Once customers are in the checkout process, you want to capitalize as much as possible. Establish clear call to actions that lead your customer towards completing purchase.

2. Use error notifications

Bellroy checkout with error notifications for form field errors

Clearly indicate errors throughout the checkout steps, if possible, automating form field validation for your order forms. These help guide the user through the process, ensure the accuracy of the information being input, and help you validate the information you get from customers as they checkout.

3. Offer multiple payment options

Bellroy checkout with multiple payment options available highlighted

The more payment options you can provide a potential customer, the better. While many customers will choose a method of payment available, some customers will leave if their preferred method of payment is not available. Offer as many payment methods as you can, adding more as they are viable for you.

4. Display trust signals

Asos checkout page with Norton security badge displayed

Providing adequate security is essential for keeping customers on checkout. For customers to feel confident in the security your service provides, prominently display security and trust signals throughout the checkout process. This will give customers confidence that their financial information is protected.

5. Be careful about using discount boxes

Under Armour checkout with discount code available to all customers

Providing a box for a discount code to be applied at checkout is great for customers that have a code. For those that don’t, the discount box is an indication that they may be missing out. These customers may exit the purchase funnel to try to look up a code. If they are unable to find a code, they might not return to complete the purchase.

Avoid integrating a discount code box at checkout for customers that haven’t indicated they have one, or make the option less prominent, so those without a code will miss it, and those with a discount code will seek it out and find it. If nothing else, provide a discount code to all customers so that they will all continue through to checkout.

6. Ask customers to register after checkout

We’ve already addressed providing guest checkout as a way to speed up checkout, but we cannot stress enough that you should never force account creation prior to a customer being able to checkout. This directly blocks their process, adds a step, and makes it more difficult and time-consuming to purchase. Instead, consider following up with a customer, requesting that they sign up or register with your service after the sale has been made.

7. Connect users to customer support

Connecting customers to support — whether that be a knowledge base, an online chat, a call center, or some combination of the above — can make the difference between an abandoned sale and a conversion. Analyze why customers are leaving your checkout, and implement ways of connecting customers to the support they need in that situation to help mitigate abandoned checkouts.

Rather than building an ecommerce checkout process yourself, rely on an optimized, streamlined, and frictionless checkout system. Bolt’s checkout platform is designed with customers in mind, making it easy to enter information, follow through each step, and complete payment.

Their technology uses a number of variables to detect and prevent fraud, protecting you as a retailer, and protecting the customers purchasing through your store. With a 100% fraudulent chargeback guarantee, you can rely on Bolt to protect your shoppers so you can focus on providing incredible products and services to your customers.

ThinkShop by Bolt does not constitute professional tax or financial advice. Contact your own tax or financial professional to discuss your situation.