How Drupal Commerce creates the best ecommerce checkout flow

Acro Commerce and the Commerce Guys are designing the ecommerce checkout flow that will become the standard in the Drupal Commerce module for Drupal 8. The aim is to create a checkout experience that is easy, frustration-free and reduces checkout abandonment, thus improving conversion rates and the bottom line for site owners.

Not to be confused with cart abandonment, checkout abandonment takes place when the user has entered the checkout flow and opted not to complete the conversion. Both are important stats for ecommerce sites to be aware of, but for now, we are only focusing on the checkout abandonment issues and how a proper checkout flow can combat these issues.

For more information about Cart Abandonment, check out our video and article on how to reduce cart abandonment.

Reasons for checkout abandonment

Additional Costs

Some users have no intent to buy but want to see the total price and will move as far through the checkout process as necessary. What they are looking for are any “extra” costs ie: shipping, tax, or any additional fees associated with the purchase. Keeping these costs hidden until the end of the checkout process is the #1 reason for checkout abandonments.

Solution

The Drupal Commerce checkout gives companies the opportunity to be as upfront as possible with all additional costs being outlined on the cart page BEFORE customers enter the checkout flow. This includes estimated shipping functionality that can provide a quote for customers based on their zip/postal code.

Forced account creation

The #2 reason for checkout abandonments is forcing users to create an account or login to an account before continuing the checkout process.

Solution

The Drupal Commerce module focuses on a no barriers checkout process while still ensuring the client has the ability to track and maintain customer information and purchase history. To do this all that is required of the user is an email address. Once the email address is submitted we use real time validation to check if there is currently an account associated to that address.

If YES, then the user has the option to login (the benefits of logging in will be clearly outlined) or they can continue throughout the checkout without logging in.
If NO, the user has the option of creating an account or they can continue throughout the checkout without one.

This gives the illusion that there is no need for account creation, however, behind the scenes the Drupal backend is automatically creating an account for every email address that is submitted.

Sense of security

Customers need to feel comfortable when handing over confidential information; otherwise, they will take their business elsewhere. Some customers perceive the different parts of a page as being more or less secure; make the payment input look “more secure”.

Solution

The Drupal Commerce checkout flow focuses on visual styling, icons and accreditation badges that can raise the perceived security of non-technical customers.

Discount/Coupon codes

Let’s be honest—everyone loves a good deal. Coupons and discounts can be a very handy marketing tool, but they can also encourage customers to leave the checkout flow to look for a discount code if they are prompted to enter one.

Solution

With Drupal Commerce, we didn’t make it an obvious step in the checkout process, but we don’t totally hide it either. Its position is clearly marked, and if a customer has a discount code, they will be able to find the form field easily, but it won’t be glaringly obvious for a user who doesn’t have one. Also the use of the word “discount” rather than “coupon” was a conscious decision, discount tends to give a more exclusive feel whereas coupon gives off the impression that everyone should benefit.

Cart view - Improving checkout flow in Drupal Commerce

UX Issues

There is a fine line to walk when creating a checkout flow. You don’t want to overcomplicate the process, but you also don’t want to make it so simple that customers question the company’s legitimacy.

Solution

The Drupal Commerce mantra “The customer should not have to think”. Once the customer enters the checkout flow they shouldn’t have to ask questions, the process needs to be an intuitive guide that doesn’t confuse or patronize the customer. To achieve this the checkout UX has been designed to reflect our comprehensive research. Including the following key observations:

Data Input

Arguably the most important part of the checkout process is the gathering and processing of information from the customer which is required to complete the transaction. Filling out forms is a tedious process, many customers are worried (even anxious feeling) that they will make a mistake; to the point of filling out extra (optional) information (that they aren’t that comfortable providing) just to avoid “messing up” the form. Important to consider:

Shipping address should be used as Billing Address by default
Do not ask for data that has already been provided by the customer
Indicate BOTH required and optional fields
Show examples of input format, yes, even for simple data
Use concise descriptions placed next to or below each field.

Errors

Even with a solidly designed form, errors will still occur. How the system helps the customer recover from errors will go a long way in terms of customer satisfaction and the overall impression of your site/brand.

Clearly, visually, indicate where the error has taken place
The error message must be in close proximity to the erroneous field
Avoid jargon, be clear and concise

Buttons

Be sure to avoid ambiguous button labels

Continue… what? shopping? to the checkout?
Use phrases that aren’t open to interpretation, like “Checkout now”, “Pay for My Order”, “Keep Shopping”

Layout & Navigation

The Drupal Commerce module will be a multi-page checkout with a top page navigation that clearly indicates which step of the process the customer is on and which steps are remaining. The beauty of Drupal is that it can be customized to the needs of the client so if a company needs a different layout due to the nature of the product that can be easily accommodated.

Customer Info - Improving checkout flow in Drupal Commerce

Acro Commerce is excited to be working alongside the team at Commerce Guys to create and design an ecommerce checkout flow that will become the new industry standard.