Mobile Commerce

How to Design a Mobile Checkout Flow That Converts

Checkout is the most important part of your entire web experience because that is where all the work you’ve put into customer acquisition, education and retention actually converts to revenue and ROI. If your mobile checkout flow is bad - they don’t buy and there’s no ROI.

So what makes a great mobile checkout experience? Without deep analytics of your customers’ actions at checkout and the ability to quickly iterate improvements, it’s impossible to know what type of mobile checkout flow is the best for your business.

But after working with hundreds of customers on mobile checkout, we have a few recommendations.

1. Enable Users to Checkout as a Guest

Over 60% of users on mobile checkout as a guest. This is an important option for new users and those who have forgotten their password, since going through the email password flow is particularly cumbersome on mobile. Ensure that the guest checkout option is easily accessible above the fold. 30% of users abandon cart if asked to register up front. If your site requires users to create an account it helps to provide an explanation.

2. Simplify the header and footer and clearly display the progress bar at the top of the page

25% of users abandon at checkout because the website navigation is too complicated. Simplify the design of mobile checkout and remove unnecessary links to keep the user focused on filling out the necessary fields. Label each step and show a prominen progress bar to help users keep track of where they are in the mobile checkout process.

3. Default to select “same as billing” or “same as shipping”

The “same as” selection helps users avoid re-typing their address. Sites that have this option selected by default, more than 90% of the users keep the selection. Typically, mobile users have the same billing and shipping address, but this will depend on the site and business type.

4. Reduce emphasis on promotion and discount

A/B testing across a variety of e-commerce sites shows that closed promo code field results in higher conversion rates. An open promo code field encourages users to coupon hunt and often results in revenue loss. More than 25% of shoppers abandon the checkout process to look for a coupon.

5. Clearly display error messages and do not remove previously entered information

Avoid using generic error messages such as “invalid.” Instead, explain the error and navigate the user to where the error is on the screen. When a user must correct an error, don’t clear all the fields they’ve already completed, especially those with correct information. Shoppers get frustrated when asked to re-enter valid information due to an error in a separate field.

6. Clearly indicate each required field with an asterisk

On sites that do not explicitly denote required versus optional fields, 3 out of 4 users experience usability issues and “field is required” validation errors. Clearly label each required field to prevent validation errors and simplify the user experience.

7. Auto-select credit card type & autofill city and state based on zip code

Auto-detect information like credit card type and location to save the user time and make a better mobile checkout flow. Auto-detection of the city, state, and card type reduces the number of text inputs, which are particularly cumbersome on mobile.

8. Display security or verification badges in your mobile checkout flow

17% of users abandon the checkout process over concerns about payment security. It is important to create a sense of trust and security during the mobile checkout flow. Including credit card logos and seals from anti-virus software brands help the users feel more secure. Norton seals give users the strongest sense of trust when purchasing online.

9. Include alternative payment methods

Mobile conversion rates are higher when retailers offer alternative payment options like Paypal and Visa Checkout. When available, over 23% of smartphone users checkout with and alternative payment method.

And at long last, the promise of m-commerce is starting to be fulfilled. Never before has the gap between a good and bad mobile checkout experience affected revenue so much.

If retailers give the user a clear, focused, streamlined and lightweight mobile checkout flow  — while recognizing the advantages and limitations of a mobile experience — all parties will benefit.

No matter how your mobile site is performing today, Layer0 can increase your conversion rates and overall mobile performance, so don’t hesitate to get in touch to learn more.

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