9 tips how to design a mobile checkout process

E-commerce has been on the rise in recent years and it starts to become a big portion of total retail sales. In the US alone, according to ComScore’s report “State of the U.S. Online Retail Economy”, by Q1 2017, Total Digital Commerce grew to account for nearly 1 in every 5 dollars spent by consumers. Proportionally to that, m-commerce also becomes pretty significant, reaching now 22% of total e-commerce. More and more consumers not only search for products using their mobile devices, but also finish the checkout process with payment and delivery settings.

Therefore, we need to start designing shopping experience for small screens the same way we do it for desktops. Clients need to have the same functions and possibilities regardless the device they are using. This is a challenge especially in the context of the checkout process, when the client has already decided about the purchase and is heading to the checkout. Badly executed user experience at this moment can cost you not only this particular transaction but also the client who won’t return to the store.

Check our mobile app development services

This article collects a dozen of good practices to keep in mind when designing the checkout process. So let’s get started!

01. Don’t force your clients to register an account.

According to the Baymard Institute Research this is the second biggest reason people abandon their purchase (the first one is extra costs too high, like shopping prices for example), mainly because people don’t remember their logins and passwords. And if they are not signed up, there is this thing called register forms. Filling any form on a mobile device is a pain in the neck and the “sign up” ones are among the longest to fill out. On mobile, it’s slower than on a computer and gives the customer a lot of time to rethink their purchase decisions. Nobody wants that. Allow the purchase without signing in, or without registration. Provide the option for “guest shopping” and make it visible! Baymard Institute also found that 88% of mobile checkouts fail to make the option clear enough and users overlook it. If it’s not there at a glance, it’s like it doesn’t exist at all.

02. Make your forms more user friendly.

You need to think about the forms as an obstacle between the customer and the purchase of the product. Of course they are necessary but you can do a lot to make filling them a lot easier. This is a huge subject and it deserves its own article or two. So for now let’s focus on the bare minimum.

First and foremost, the client will add a delivery address and here we come in with auto-suggestions and auto-completions. You can utilize filling the address information based on a zip code (although it’s not entirely reliable in the case of the smaller cities where one code returns a few or more streets). Ask users for their location and feel the form for them. Or use Google’s geolocation search, where users can fill their form with data based on a few typed in letters.

Avoid dropdown lists. Always try to display all options at once. If you have a lot of items to choose from, you may want to think about a search option within the list. Also, a good idea is to show most popular choices at the beginning of the list. For example, if you need users to choose a city, statistically they live in one from let’s say five biggest cities in your country. In most cases. Make them visible at the top and add option to search more.

Display the context keyboard. If the field requires only numbers – display the numeric keyboard.

03. Design for the touch not for the mouse.

Too small clickable areas are especially noticeable in the poorly executed responsive design websites. After scaling down from desktop to mobile they are still optimized for the user with the mouse instead of the user with the touch screen. According to the MIT Touch Lab, the average width of an adult thumb is 2,5 cm and the index finger is between 1.6 to 2 cm. It converts respectively to 72px and 45 to 57 pixels. The simplest answer to that is to use patterns from Material Design system by Google for icons and typography. And add some padding to your text links.

04. Consider “quick buy” option.

The purchase must take as little time as possible, regardless of whether the customer is using a desktop computer or a smartphone. Nevertheless, in the mobile experience all the process simplifications are literally worth every penny. So for the returning customers, an excellent option would be the so-called “Quick Buy” button, which adds a product to the cart and automatically redirects the customer to the purchase summary right for the confirmation. All the delivery and payment settings are either taken from the account preferences or from previous purchase settings. Just like that. Give that to the clients and you have just provided the store with a ton of impulsive shopping… I mean, happy customers! Obviously.

05. Make sure that the payment process is as it should be.

Consider using the payment providers that are trustworthy and recognizable within your target group. And give as many options as you possible can so that users can choose their favorite methods. And if you want to handle credit cards directly in the store, make your system safe and forms are easy to fill.
Always inform about acceptable card types.

Always inform about acceptable card types.
Don’t hide the card number and let your users enter it in any way they prefer: with spaces, dashes, without any of the above. You can format the number on your site without making the clients think about it.
Display the card type based on the number that was entered. This insures the users that the data was filled correctly.
Do not add any extra dropdown menus in the expire data inputs. Users are in the process of typing in the card number. Let them type in the date and like with the case before: with the slash or without.
When you ask for the “Security code”, display a visual tip what it is and where to find it. You can design mini cards with a marked code on them. At this point, you know the type of the card so you can show the right hint.

06. Do not show the discount code input just before the checkout.

This is probably the most common anti-pattern in the history of e-commerce. Typical users who come across this input usually undermine their purchasing decisions. They start to wonder if they can buy the product cheaper. They are abandoning the checkout process and go looking for codes scattered on the Internet. Of course, the codes themselves are not bad, they serve to build customer loyalty, they attract new ones. Just make sure that they do not distract the users at the stage when they have already made a purchase decision. Consider other possibilities of giving discounts: dedicated pages, URLs that activate a product discount in the shopping cart. There are many options.

07. Make the progress in the process visible and understandable.

Seems obvious, but it’s not always executed well. Users always need to know where they are, at which stage and what is ahead of them. They need the information about the number of steps to complete the task. And the less of these, the better the chance of getting the transaction complete.

08. Avoid cluttered layout and don’t make the process too complicated.

The Holy Grail of every shopping process is the simplicity and the speed. In earlier points, I wrote about a few ideas on how to make things simpler and more user friendly. But it’s worth adding some other tips. Avoid any distractions, they include not only discount codes, but also unnecessary pop-up windows, navigation bars with store categories or advertising. A complicated purchase process with redundant forms, unnecessary registration or forced sales techniques are among the main reasons why consumers abandon the cart. It is worth remembering that. Try to work on the maximum simplification of the process.

09. Include the option to end the purchase on other device.

At the beginning, I wrote about the growing number of consumers ending shopping on mobile devices. These numbers are going to grow, but still there is quite a lot of customers for whom the smartphone is not the default device which they make their shopping on. In addition, many people are still starting to shop on a tablet or a phone, check out prices outside home or look for products in a context but far from their computer. Once they find what they are interested in, they tend to finish their purchase at home in the comfort of their computer. You really want to address that. Give them an option to save the cart or send it to their e-mail address, remember if a customer is logged in, create a “save for later” option for postponed purchases.

Conclusion mobile UX checkout tips

All of the good practices above are general guidelines and there are certain situations in which individual points will not apply. Because of the specific target audience, there will be a conflict with some solution or simply it will not affect the conversion. The role of designers and UX specialists is to adapt the design to the needs of the user, and sometimes to the technical, budget and time limitations. Fortunately, the improvement of the shopping experience is possible even with the smallest tweaks.

The most important thing you need to take from this article is to always remember to think about the user. Create a shopping cart and checkout steps as simple, easy, transparent and engaging as you can. The easier it is to buy stuff, the better chance there is people will do just that. And this is your goal.