Best UX Practices for Mobile eCommerce Checkouts


Latest research in eCommerce checkout processing reports that up to 68% of buyers abandon their cart before reaching the payment page, a scary number if we look at how big of a difference it would make if only 1% of the abandoned cart numbers declined, even scarier when we think in terms of 5% or 10% decline in abandoned carts.

With mobile becoming the go-to solution for online shopping, owners of eCommerce businesses have to start thinking about new, practical and viable ways of improving the checkout experience for the sake of user satisfaction, but also for the sake of huge percentages of sales that are being lost due to easily workable mistakes.


Source: Baymard

As the above graph from Baymard’s study shows, a user having to create an account to finish a purchase, and a complicated checkout process are in the top 3 reasons why shoppers abandon their carts, a number that could be greatly reduced through effective modifications in the UX design of your existing mobile checkout pages.

So, rather than looking at all the wrongs, we should explore what is currently working as far as mobile UX checkout for eCommerce is concerned.UserTesting’s mobile checkout study concluded several preferences of mobile customers:

As a result of such studies, it’s easier to understand what are the concerns of mobile shoppers, and what can be done in order to improve the user experience, not to mention have your conversion rates for checkout pages begin to rise up after a long downfall.

The following practices will work practically on any eCommerce store out there, they’re universal in their appeal and stand for everything that customers are most frustrated about during their mobile checkout experience. Grab a cup of coffee and start taking some notes.

Make The Checkout Process More Obvious

Since all cart abandonments are directly correlated with the actual shopping cart itself, it should be the first place to begin searching for areas to optimize. First question is, what is the appropriate action after a user adds an item to their cart? Should you highlight an item being added to the basket, or should you make the checking out process more obvious?

untitledSource: John Lewis

John Lewis checkout process is a great example of a well-designed shopping cart experience that’s intuitive, but also unobtrusive. Whenever a customer clicks the “Add to basket” button, a small modal window appears confirming the action whilst offering to go directly to the checkout page, or see other items in the basket; clever!

Streamline The Checkout Page Transition

In eCommerce it’s all about pointing users towards the checkout page. Incredible isn’t it, how a single page can determine the success of a business, but it’s true. The takeaway here is to make the checkout as clear as possible for the customers as to how their actions are being accounted for, and what kind of steps they can take after completing an action, such as adding an item to the basket.

Another thing that John Lewis does exceptionally well in their mobile design, is the actual checkout process itself.


This comes back to what was said earlier in the post, about simplicity of checkout pages and the immense importance that customers put on this page in regards to ease of use. So after a customer clicks theCheckout now button on the modal window at the product page, they’re taken to the page shown above.

Here are the key points that this page executes incredibly well:

  • Upon selecting the preferred method of delivery, customers can quickly locate their home address using only their postcode; within a single click, the need for typing in your address manually becomes obsolete.
  • The payment form (see below) on the next page provides an effortless form of paying for your selected goods. Customers can select to pay with their credit card, or for easier digital shopping a PayPal option is also added; once again touching on what we learned earlier in the post. To top it off, John Lewis instill trust in their customers by adding a bite-size Norton Security badge in the corner of the form; another big concern for eCommerce customers is security, small tweaks like this will go a long way to retain customer trust.

Creating a Secure Payment Processing Page

The following visual shows a fully optimized payment processor page that includes vital components such as, the display of accepted credit card types, the ability to use PayPal for a quicker checkout, and includes a security badge to reaffirm that the brand is doing everything it can to protect sensitive user information.

John Lewis Review Pay.png

A well rounded payment form for an effortless mobile shopping experience.

Even small tweaks such as the checkout page progress bar (as you saw above) can have huge effects on customer patience, and their attention span for finalizing the checkout process.

In such rapidly evolving times of digital media and mobile shopping, it’s vital to understand that these improvements have become somewhat of an expected standard for a pleasant user experience.

What About Small Businesses With Few Products?

If there’s one thing to know about web design, it’s awfully expensive. Unless you have an in-house designer (who’s costly enough by himself), then your other option remains to hire a professional designer to build the website for you — in this case the mobile ux checkout process — and that in itself can cost anywhere from $100/hr to $250/hr for professional services. Small businesses rarely have large stacks of money to throw at such services, but don’t despair because there’s another extremely convenient alternative available: third-party hosted external checkout pages.

Let’s say you’re a freelancer just starting out with selling your design materials online, it makes little to no sense to invest thousands of dollars into a full-blown web design (desktop & mobile) when you could just use something like Gumroad to take care of the payment process for you.


Gumroad is fully compatible with physical products, please read their guidelines on the setup process.

Implementing Gumroad could mean that you wouldn’t have to worry about the troublesome process of designing a user-friendly mobile checkout page, Gumroad’s team of designers have put in their best efforts to create a painless checkout experience for virtually any product that you’re trying to sell.

gumroad mobile ux.png

The above example showcases the 2-step process that Gumroad uses for every single mobile checkout. It’s so simple yet so effective that it provides instant appeal to those small business owners who’re not looking to shell out $10,000+ on a design just yet.

Your product pages themselves remain unaffected as you can point all of your Buy Now buttons towards the Gumroad link that you’re given once you add a new product. It’s a radical choice in terms of using a payment processor that’s been in the industry for at least several years, and shown a great track record in terms of performance.

Leave a Reply

Your email address will not be published. Required fields are marked *