Mobile Commerce

Seven Stages of the Checkout Journey

85.75% of mobile carts are abandoned. Venus Fashion increased conversion rates by 24% from site speed and mobile commerce checkout flow optimization.

Cart abandonment is a common phenomenon. On average, 69.57% of online shopping carts are abandoned. Mobile carts have even higher abandonment rates, averaging at 85.75%. This high mobile checkout abandonment rate is part of the reason that mobile conversion rates are typically one-third of their desktop counterparts. Fortunately, this gap can be reduced with websites speed optimization.

Combatting cart abandonment is complex. It tends to involve design, UI, and UX changes meant to simplify site navigation and checkout flows. Not to mention overall website performance optimization. But before you can cut cart abandonment rates you need to first understand every stage of the checkout flow.

Here are the seven stages of the online checkout along with optimization tips meant to cut checkout abandonment and increase eCommerce conversion rates.

Stage 1 - Adding to cart

1. Ensure the ‘add to cart’ button is in clear view

You do not want your user hunting for your 'add to cart' button. This should be a readily available button, placed above and below the fold, so it easily accesable from any part of the page.

2. Choose the right color for your ‘add to cart’ button

Colors affect results. It's best practice to give call to actions a pop of color - green or blue are known to be positive and encourage clicks. Avoid using red, as you want the user to perceive they are proceeding, rather than terminating their journey. Grey is another one to avoid, as it is perceived as an indicator that functionality is inactive or disabled.

Stage 2 - Viewing the shopping cart

1. Align your mobile checkout process with your business goals

The best mobile checkouts support the underlying business strategy, as well as  the target customer base. Some eCommerce companies focus on loyal, returning customers and therefore can and should follow a different set of best practices than businesses that primarily depend on attracting and converting new customers.

2. Optimize the mobile checkout page layout

A significant number of online checkouts can be improved just by focusing on page layout and styling. Form fatigue, complicated checkout flows, and non-mobile friendly layouts will hinder your ability to combat checkout abandonment.

Avoid these common misconceptions in mobile eCommerce layouts to boost your conversion rates.

3. Keep your gold above the fold

Display essential information and calls to action above the fold, so that consumers don't have to go looking for them. By showing only pertinent information and a clear call to action above the fold, you minimize the risk of consumer frustration that results in checkout abandonment.

Stage 3 - Shipping & billing details

1. Leverage layout to communicate important information

Done right, checkout layouts can support a positive customer experience by letting them know where they are in the checkout process, and surfacing important information.

2. Leverage returning customers’ data for a quick checkout experiences

eCommerce websites that have a large recurring customer bases can offer expedited checkout by pre-filling form fields with known information, such as saved shipping and payment details.

3. Minimize the risk of form fatigue through defaults

Online checkouts that contain numerous form fields have the risk of generating form fatigue. Mitigate this risk by minimizing the number of form fields to only those that are imperative for purchase and use known information to prefill as many fields as possible. The easier you make it for someone to checkout, the more likely they are to complete their purchase.

Stage 4 - Shipping method

1. Link shipping options to cost

More than half of carts abandoned are due to excessive shipping costs and added fees. Recognize that free shipping is highly sought after, especially among younger demographics. Consider adding shipping costs to the product price, or stating them front and center on the product page, to avoid surprises that lead to abandoned carts.

2. Build convenience into the checkout process

Simple and atomic pages help to create a smooth checkout experience.

3. Lay it out

Making consumers hunt for the next required action decreases the chance that they will complete their purchase.

Stage 5 - Payment

1. Avoid payment choice paralysis by limiting options

With the number of third-party payment options on eCommerce sites increasing, how many payment choices is too much? Display those that are most commonly used and accepted. Look into your own analytics and see which options are used more and less often, remove those that are hardly used and showcase the most popular ones.

2. Make errors easy to fix

Credit card validation failure can lead to cart abandonment, especially if it is not clear what field has an error. Display error messages in a visible part of the page, based on where the user has scrolled to, and be sure to tie the error message to the relevant field or inputted information, so it's easy to fix.

3. Provide reassurances on security and privacy

Safety and security is the norm when you ask for sensitive information. In fact, eConsultancy found that 58% of those that abandoned checkout flow did so due to concerns about payment security.

Stage 6 - Order review

1. Design the order review page for user efficiency

Smooth transitions between the primary order review page and its various editable sections improve the checkout experience and increase conversions.

2. Differentiate the order review page from the order receipt

3. Ensure the ‘place order’ button is in clear view

If the customer believes they placed and order, but never receives a package, customer satifsfaction rates will plummet. Be sure this is a large, visible button.

Stage 7 - Account creation and guest checkout

1. The case for guest checkout

A study by  found that shoppers are 20% more likely to select guest checkout rather than opting to log in.

2. The case for logged-in checkout

Sites like Amazon and Walmart require customer to log in order to check out. It’s a smart move for some, especially those that have a loyal customer base. When users create an account, you have the opportunity to build meaningful relationships with them. If customers abandon their carts, you can email them to woo them back.

3. When should you require for account creation?

From the retailer’s point of view, getting customers to create an account is a valuable tool for growing and capturing customer information for future promotions, cross-sells, and more. For a customer who has only had limited interactions with the retailer, being faced with this ask could be a checkout friction point, causing them to abandon their cart and turn to another retailer that does not force them to create an account to purchase.

Don't let potential customers leave with items left in their cart. Providing a clear, streamlined, and lightweight mobile checkout will benefit you and your customers.

Site speed is the new competitive battleground for eCommerce

Website speed impacts every aspect of your digital strategy. Site speed affects more than just bounce rates; every second delay in page load cuts conversions by 7%. And since Google's 'Speed Update', mobile site speed has become a determining factor in both search ranking and Quality Score.

Follow the example of leading retailers, like Venus Fashion that went from 15.25% of pages loading in under a second to a 72.75%, with a median load time of 320 ms with Layer0. The result: a 24% incremental lift in conversions. Don't make your customers wait, especially when they have entered the checkout flow.

No matter how your mobile site is performing today, Layer0 can increase your conversion rates and overall website performance. Layer0's open-source React Storefront is custom built for enterprise eCommerce sites and will includes pre-built thumbprint checkout, one-click logins, and page load times that are unmatched in the industry. The Layer0 infrastructure lets you optimize site speed across the stack to deliver instant loading websites using intelligent pre-fetching, auto AMP creation, CDN-as-code, and more.

Join other market leaders in transitioning to websites built using modern technology, including Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP), and server-side rendering, to deliver instant page loads and benefit from boosted conversions, search ranking, and ROI from SEM.

Get in touch to learn how Layer0 can help you.

Want to take your site to the next level?
Join the Layer0 Newsletter for the latest updates on performance.
Thank you! You've been added.
Oops! Something went wrong.
Thanks for registering, you're being redirected!
Oops! Something went wrong.

Don't wait another second. Go instant.

Get started in seconds