The structure of Checkout in large-inventory eCommerce: Understanding its dynamics to simplify its process

Using a breadcrumbs trail in your checkout process is important as it shows you prospect exactly where they are in the checkout process and how many steps are left to order completion.

– Ian Daniel.

An approach to the checkout concept

Here is a primary definition for Checkout: “A phase of the process of online shopping in which the customer enters delivery instructions and pays for the item”[1]. Indeed, it is a phase through which the user can finally withdraw the item from the bag and complete the purchase process. But this one is as well the phase in which the user ceases to be a prospect to become a customer. It can be settled then, that we are facing a very important matter, since the conversion of prospects largely depends on the good experience that they might have during the purchase process.

Commonly, this journey is executed over pages that guide the user throughout the process, the so-called checkout pages, whose structure behaves linearly into five fundamental stages[2]. And despite these stages may have variants, they overall adequate to explain the checkout nature.

In most websites this structure is presented to the user in two ways: on multiple pages, or a single page[3], giving rise to what is known as multi-page checkout and one-page checkout. The first form guides the user step by step through a form that is divided into several pages, while the second condenses all the steps on a single page.

Image 2. One-page Checkout.

Cart Abandonment

It was noticed above that conversion largely depends on the experience that the users have during the payment process. Thus, if such a process is not satisfying, a phenomenon called cart abandonment can occur. Unlike a physical store in which the buyer grabs the product and takes it to the registrar to finalize the purchase, in eCommerce stores, the buyer has the option of abandoning the purchase in the middle of the process, therefore producing the much-feared Cart Abandonment[4], one of the most significant problems that the websites of eCommerce stores must face.

These abandonments can occur for different reasons. In the US, for example, 60%[5] of the abandonments are related to just-browsing users. That is, users that were not in the mood to buy, but only scanning through the store. However, according to recent data[6], 23% of the abandonments are related to a complicated checkout process, which suggests that, in order to reduce the dropout rate, it might be significant to target for shorter and simpler payment journeys. Achieving that could be best done by studying and understanding the process of purchase on the different websites of eCommerce stores.

Goals and research methods

It stands apparent, as for this point, that the checkout stage is a key factor for customer conversion, and if it is not structured properly it can produce an increase in the dropout rate. And since, it is essential to understand its dynamics to improve it. Backed on such a justification of importance and relevance, this study proposes to analyze the checkout process in a set of emblematic e-commerce stores in the United States in order to observe the way in which they currently structure such processes themselves. This study aims to establish, via a frequency analysis, a structure that explains which is the way these large stores use the most for their checkout process.

To carry out this end we have chosen a small sample of 14 wide catalog stores, which have been selected from a database of 50 wide catalog stores that Quo has built for research purposes. The selection criteria of this corpus can be confronted here. Despite being a small sample, frequency analysis has been the method that has allowed us to discover the behavior of the different elements analyzed on each page. ‍

Preliminary results on the UI research

One of the primary points to highlight in this study is to do with the label that the different stores use to refer to the Shopping Bag. These can be very diverse: Cart, Basket, My Bag, and Shopping Bag. However, there is a trend to use the name Shopping Bag to refer to the summary of items the user has picked for purchase. Given the analyzed sample, 58% of the stores use the Shopping Bag designation, as shown in the frequency table below.

Another point to highlight in the sample examined is the checkout being presented as a 5-stage process, which starts after pressing the Add To Bag Button. The order of these stages can vary, however, we can describe them in a very broad way in the following scheme:

First. Purchase summary stage

It is the stage preceding each purchase, and it shows the user a window with a set of information that display in a systematic and detailed way aspects such as:

1. Items
2. Name of the product
3. Price
4. Size
5. Color
6. Quantity
7. Estimated price
8. Option to proceed with the purchase

For 100% of the sample, this stage is presented through two windows. The first is a floating window in which the information specified above, appear. Frequently, this window is displayed in the upper right corner of the navigation bar, as demonstrated in Image 4.

The second window is the shopping bag itself and usually opens by clicking on the Checkout button on the floating window or the bag icon in the site navigation bar. This last window is formed by the information listed above, plus additional ones, which are organized, in 100% of the cases observed, in three segments:

1. Shopping Bag: Whose structure is made up of the information that details the purchase, such as the item or product, description, quantity, price, and options remove, wishlist, etc.
2. Order Summary: The categories that make up this segment refer to the number of products, the subtotal cost, the initially estimated shipping cost, initially estimated taxes and the absolute total cost of the purchase.
3. Checkout: This segment is made up of the categories related to the different payment options customers are having available. In 100% of the sample these categories are summarized in: Proceed to Checkout, Checkout with PayPal, Promo Code.

Image 5 shows how this structure is applied in different types of stores, even when they are visually organized in different ways. The red box includes the elements of the Shopping Bag category, the green one take elements of the Order Summary category and the blue box has elements of the Checkout category.

Second. Registration Stage

This stage aims to collect the user's personal data. For 86% of the cases observed in this study, registration is carried out through 2 options: As a user, and as a guest – See image 6–. In the remaining 14%, registration is required.

When entering as a user it is necessary to create an account, in which case a window similar to that of Image 7 is shown.

Third. Shipment or delivery data stage

For 100% of the cases studied, after the account is created, a thread is generated that can be represented as follows:

i. Data fields: It is formed by a set of boxes in which the user is asked for their address data: first name, last name, country, address, city, code, postcard and telephone. Mandatory fields are usually designated with an asterisk. There often is a checkbox that is available for being marked to use the address indicated in this stage, for billing as well – This can be seen in Image 8.

ii. Shipping options: for 100% of the sample, the stores offer users several shipping methods, which usually range from basic, regular, express and next day options. An example is shown in Image 9.

Fourth. Billing and Payment stage

According to the purchase process, it is observed that at least 86% of the sample chooses to connect the Billing Address and Payment Options phases in a single stage called Payment or Billing. This allows us to arrange this stage into two phases, as displayed in Image 10, where the Billing Address and Payment Options categories are displayed as parts of a larger category called Payment.

However, on a few occasions, the Billing Direction phase is displayed as part of the Shipping phase, at its end, and in a small checkbox. In our sample, approximately 14% follow this trend, and despite this, we can still classify the payment stage in the following 2 subcategories:

i. Billing data: 14% of our sample use a small box to indicate that the Billing Address will be made equal to the Shipping Address. 36% defaults to Shipping information and is presented in a box with an option to change it, after which a form is opened to add the Billing address. 21% of the sample utilizes a box with the option “Use Shipping Address”, and following this, a form with fields to input the data in case the Billing Address is different from the Shipping Address or simply to observe /edit the data after loaded.

ii. Payment options: This stage relates to the different methods offered to the user to pay for their order. For our sample, a vast variety of payment options and combinations for these options can be observed. Nonetheless, a tendency to use two structures gets through that variety, as displayed in Image 12.

As observed in the graph above, there is a trend to use the Credit Card-PayPal and Credit Card-PayPal-Apple Pay payment options combinations. These combinations sum together up to 57% of the use frequency in our sample. Each of the other options' frequency is much lower. On the other hand, if we take into account how these options are presented to users, we can determine 3 displays: form fields, buttons and form fields plus buttons. Such displays can be seen in Image 13.

Despite this, it is worthy to notice that PayPal, Apple Pay and Amazon Pay are payment options that customers can see at the first stage of the purchase process, since proceeding with them saves the user these steps.

Fifth. Review Stage

This phase appears to be elective since approximately 50% of the stores omit it in their purchase process. The remaining 50% cases commonly consist of a set of blocks, each of which shows:

1. Purchase
2. Summary shipping
3. Summary user data
4. Summary billing
5. Summary delivery method
6. Summary payment

Not all stores use all of the listed above. Moreover, only 29% do so, while 14% simply present a summary of user data, purchase and delivery, and  7% shows a summary of purchase and delivery, all of which we can see in the following graph.

The structure of the Checkout

These different stages in which the Checkout takes place are not strictly displayed in the order in which it was described above. It seems that each store plays with these stages to structure a process of its own. However, the frequency of appearance on the Checkout elements suggests that there are some ways to structure it to which the stores are delivering greater preference. For example, the frequency of the Registry + Ship + Pay + Review structure is shown in 50% of the cases, which indicates that it is the most usual option in the different sites. The second structure that stands out the most is Registry + Ship + Pay, whose frequency of appearance is 28%. Next is Ship + Pay + Registry and Registry + Ship + Review + Pay, with 14% and 7% respectively. The following models give us a clearer idea of ​​the different structures that we can find in the Checkout.

i. Structure Registry + Ship + Pay + Review, 50% frequency.

ii. Structure Ship + Registry +Pay,28% frequency.

iii. Structure PayShip + Registry, 14% frequency.

iv. Structure Ship + Registry + Pay + Review.

Conclusions

i. The name Shopping Bag to refer to the shopping bag, is the term most frequently used.

ii. The checkout is presented as a 5-stage process.

1. Purchase Summary
2. Registration
3. Shipping
4. Billing and Payment
5. Review

iii. In the Payment Stage, 86% of the sample chooses to link the Billing Address and Payment Options stages into a single one named Payment or Billing, while the rest divides these two into the Shipping and Payment stages.

iv. For Billing and Payment, 36% defaults to the shipping information and presents it in a template with an option to change it, in which case a window is opened to type the billing information. 21% shows a window with an option for “loading the same shipping address", after which users could type to edit if required. The rest of the sample uses a small box to indicate that billing will be done at the same shipping address.

v. As for payment options, it is often used the Credit Card-PayPal and Credit Card-PayPal-Apple Pay groups of options. On the other hand, if we take into account how these options are presented to the user, we can determine 3 possibilities: a group of form fields, buttons and form fields plus buttons.

iv. The review stage may be considered as optional, since approximately 50% of stores omit it in their purchase process.

vii. The Checkout can be represented into four structures: Registry + Ship + Pay + Review, Registry + Ship + Pay, Ship + Pay + Registry, and Registry + Ship + Review + Pay. The first two are the most frequent.

viii. In our sample, multiple-page checkout processes predominate by 92%, being the one-page variant  very scarce.

Overall, two basic structures can be established for the checkout, whose frequency is remarkably high: Registry + Ship + Pay + Review, and Registry + Ship + Pay. There are other structures whose frequencies are low, so they can be considered as variants of the first two structures.

Proposal: base structure

After carefully observing the different checkout structures in the different stores, we have been able to establish that a structure stands out above the other variants. And such a structure can be taken as a base-building in the checkout of the wide-catalog eCommerce stores.

References

[1]Oxford Learner's Dictionaries. Recovered from  https://www.oxfordlearnersdictionaries.com/topic/online_shopping/checkout_1

[2]Daniel, I (2011) E-commerce Get It Right!. NeuroDigital.

[3]Germanakos P, Belk M (2016) Human-Centred Web Adaptation and Personalization: From Theory to Practice. Springer, Switzerland.

[4]Daniel, I. Ibid.

[5]"Cart Abandonment Rate Statistics - Baymard Institute." 10 Sep. 2019, https://baymard.com/lists/cart-abandonment-rate. Accessed 9 Dec. 2019.

[6]Baymard Institute. Ibid