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.

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 prominent 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.

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.

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.