Keys to design an eCommerce checkout

No time to read? press play.

In this article, we are going to present some insights about the checkout process in eCommerce. Nevertheless, we must understand the concept before going deeper into the best recommendations to improve checkout flows.

What are checkouts in eCommerce?

What are checkouts in online shopping? Although it may seem a simple concept to understand, this is a frequent question searched on the Internet, even among digital entrepreneurs.

Walmart, Zappos, Amazon and other marketplaces have already optimized their checkout processes to the maximum. Indeed, this also becomes the main issue for eCommerce, as bad practices in this area have a very negative impact on shopping cart abandonment rates.

Bad experience

According to SaleCycle data, the average abandonment rate for shopping carts in 2018 was no less than 75.60%. This means that more than 7 out of 10 users who started shopping abandoned their purchases before starting the payment process.

This percentage was most alarming in 2017. According to AbandonAid, the average rate of abandoned carts was 81.40%. The evolution, thus, has been positive. Will we see rates close to 60% in 2019? It’s hard to say. But achieving it is in the hands of the eCommerce.

By checkout in online purchases, we refer to any of the eCommerce pages intended for the purpose of completing the payment process. The online shopping checkout process starts when the consumer clicks “Finish purchase” or the shopping-cart icon in the top bar. They are then redirected to the checkout page itself to complete their purchase.

On the checkout pages we may find several elements:

Summary of the purchases made: items, number, size… as well as the possibility of removing them from the shopping bag.
Fields with the shipping address.
Fields for entering a discount or promotion code.
Section with shipping options.
Payment method selection field.
Help links, such as FAQs.

In a physical store, the equivalent to the checkout page would be the counter and the cash register. Once customers bring their products to the cashier, although they always finish their purchase by completing the payment process, this does not always happen in eCommerce!

As shown by the SaleCycle and AbandonAid data, most shopping carts are abandoned before completing the purchase (if this actually happened in a physical store it would be funny, wouldn’t it?). However, in eCommerce, it is an unavoidable indicator that the checkout process is not working as it should. Some factors that may explain it include:

Poor loading speed of eCommerce.
Few payment options available.
Checkout with too many steps.
Need to register to finalize the purchase.

Generally speaking, there are two types of checkout processes: one page and multi-step. Both designs are common in online stores in all sectors, but where are they different?

Checkout process in eCommerce: one page or multi step?

As well as the meaning of the checkout page, we will answer another frequently asked question: which is the best option in eCommerce, one-page checkout or multi-step checkout?

One-page checkout

In checkouts with a one-page design, all the elements are displayed on a single page: cart items, billing address, shipping options, etc. The creation of this type of page aims to minimize waiting times between pages and thus speed up the payment process.

Advantages

One of its main advantages is the reduced number of clicks that users must make. Theoretically, this should reduce the friction between the eCommerce and the consumer.

Another interesting advantage of one-page checkouts is simplicity: at a glance, customers can see all the fields and options, thus having the possibility of modifying them in a moment before completing the payment.

Disadvantages

But these checkouts have obvious disadvantages. For example, the need to group all the elements on the same page could intimidate first-time customers. At least, that’s the opinion of eCommerce who don’t use one-page designs for their checkout flow.

It is also said that these designs take longer to load. Due to the large number of fields and items to be displayed, the waiting time is longer. As a result: more waiting time, more rebounds and abandoned shopping carts.

Multi-step checkout

On the other hand, in checkouts with multi-step designs, the different elements (items, payment methods, etc.) are not concentrated on a single page but are distributed on 2-3 different pages. In that way, users can focus all their attention on each section of the checkout, one by one.

Advantages

One of the main advantages of this design is that it simplifies the work of consumers, guiding them step by step through the checkout process. Users also feel less overwhelmed, as they are not being shown all the elements at the same time.

Disadvantages

Multi-step designs should reduce the time for loading, but this assumption may be misleading: the need to move from one page to another represents the same time (or even more) as required by one-page designs.

In any case, both types of checkout have proven their effectiveness in eCommerce. Importantly, the question we must asses is: how can they be improved?

Find your business motivation!