Hub · Blog



9 principles of mobile checkout design

Whether a customer abandons the checkout process within a mobile app or website largely depends on the usability of the checkout design. We’ve identify top 9 principles that should be kept in mind while you design a mobile checkout experience:

1. Let users purchase as a guest


Deciding to make a purchase is already a big enough commitment to your brand, registering an account before purchasing seems like an even bigger commitment. Which is why forced account registration at the start of the checkout process causes 23% of checkout abandonment.

It is recommended for account registration to be an option after payments. By then, you would have collected plenty of information of the user, which you can use to pre-fill the registration form, and all the user have to do is just tap on a ‘confirm’ button to register. It is also worth letting users know what the benefits of registering are, giving them more reasons to take that extra step.

2. Remove distractions on page

enclosed checkout

Your customer is ready to pay, why distract them with other elements of your app or website? By keeping your customer in an enclosed checkout environment, you remove any unnecessary distraction, security reassurance features are more prominent, and customer can only go one way – towards payments and order confirmation.


3. Display progress bar

Checkout progress bar

Manage your customer’s expectation of length of time and amount of steps needed to make a purchase. 21% of consumers will abandon the checkout process if they think the checkout process takes too long.

Instead, give your customers an idea of how many steps the checkout requires, make each step as minimal and clear as possible. Ease your customers into the process by asking for simple information in the beginning, and longer information towards the end – customers are less likely to abandon a journey they started knowing that it’s only few short steps to completion.


4. Big, clear call-to-action

CTA button

Who doesn’t like big buttons that you can tap on? Have your call-to-action right in the middle, big, and brightly coloured. Make it easy for your customers to see that there’s one desired action on the page, and that’s the action they should take.


5. Minimal form fields with clear labels


Do you really need to know my middle name? Or my home phone number? Or my birthday? Ask only for the necessary information to fulfill a purchase. Label the fields clearly to avoid any confusion.


6. Pre-fill known information of user


If a customer has registered previously, you can use the information she’s provided to pre-fill known fields and preferences. This shorten the time spent within checkout, removing unnecessary friction out of the process.


7. Relevant input method and real-time validation


Drop-down menus are great for fields like house number. Calendar view is great for date selection. If you’re asking for a series of numbers, provide a numeric keypad, not a full QWERTY keypad. Consider what makes the most sense as an input method for each field.

Use real-time validation within the checkout process can help reduce the chance of error messages and prevent customers from having to resubmit a form.


8. Don’t make users pinch-and-zoom

screengrab #9.png

There’s nothing more frustrating than having to pinch-and-zoom during checkout information entry. It adds friction, it makes the page look amateurish, it just doesn’t cut it. Make sure every page is optimised for the mobile screen, because frankly if you think your customers are okay with pinching and zooming while trying to tap in their information, they probably think it’s okay to not buy that bag from you.


9. Use a payment solution designed for mobile


Not all payment solutions are built equal, and one size certainly does not fit all in this case. You would be doing your mobile app or website a disservice if the payment solution you use is not built to work seamlessly on mobile devices.

The payments experience you provide should match all the above principles to further reduce checkout abandonment. From the user interface to speed of payment completion, your payment solution should be designed to disappear into the background, not stick out like a sore thumb.

If you’re interested in finding out how you can integrate a payment solution that adhere all the above principles, head to this page to request a free app consultation and our experts will be in touch.


About Judopay · Judopay simplifies in-app payments, enable frictionless checkouts and intelligently prevents fraud for leading companies globally. Our payments and mobile experts help guide businesses and their development partners to create best in class apps to make paying faster, easier and more secure. Founded by serial financial technology entrepreneurs in 2012, Judopay is backed by leading venture investors and supported by banking and card scheme partners to offer in-app payments that are simple, frictionless and protected.


Great partner for mobile payments

"Judo has been a great partner in delivering solutions that excite and delight our customers. They have a deep understanding in mobile and their payments platform provides a seamless and intuitive experience."

Download our Xamarin SDK

You can find more information on integrating our Xamarin payments SDK here.

Contact us, we'd love to hear from you

* Required. We will get back to you soon and we never share your details.