How mobile-first design can improve checkout experience

Oct 29, 2020 | Articles

Andrea Burgueño

Andrea Burgueño

Contributor

No matter how much you’ve worked on your e-commerce, if your mobile checkout is bad, it will be very hard for you to sell anything. Let’s admit it: the checkout is the most important part of an e-commerce experience. Why? Because that is where the magic happens. Users become actual customers. But if this is not your case, you might want to know how mobile-first design can improve checkout experience.

What is actually mobile-first design

Mobile-first design basically implies building your site for mobile before working on a desktop version. Apart from the fact that nowadays most of the traffic is mobile and therefore it makes sense to focus primarily on mobile, there is something else. When you plan your website for desktop, then you have to cut half your ideas to make your site mobile friendly.

When you work on mobile-first design, instead, you can easily scale your site and adapt it to desktop.

The mobile checkout is still an issue

According to several statistics and studies, over 25% users abandon the site during the checkout process. Why? The purchase intent is there, the decision has already been made, but suddenly, shoppers decide not to buy anything.

A few years ago, this could have been linked to security concerns and to navigation and usability issues. Now, security concerns are not really a problem anymore, but design still is.

Even though online shops have been working hard to solve issues like unclear product details and difficulty to compare products, navigate and get information, in general, there are still some wrinkles there. Images, details and other aspects are clear when going through catalogs, maybe, but what happens when customers start adding products to the cart?

In general, it’s fairly easy to check different products as well as their features without leaving the page. The problem usually starts after users add their products to the cart. The very simple fact that the purchase process gets interrupted during the checkout clearly indicates that prior to that point everything went according to users’ expectations.

The good news is that they can easily be solved by working on mobile-first design and testing continuously.

The shopping cart

Clarity of shipping charges and timing, price and product is a MUST. So is flexibility. How often do you buy a product, check in in the cart and realize that size or colour is actually wrong? Wouldn’t it be great being able to change products or features directly from the cart itself?

However, the most important thing is that, when customers are checking their cart, they see product and details, price, shipping time and costs at a glance. No one likes surprises when it’s time to pay, so make this information very clear from the very beginning.

Clarity makes users feel confident about their purchase but also, sometimes, like we were saying before, realize that they have selected the wrong option or have second-thoughts. Avoiding long, complicated processes to change simple details is key for the checkout to be effective.

Remember: you need to keep mobile users on your website until they complete the purchase. That’s why mobile-first design is key for your checkout to be successful. The option of opening a hundred tabs is not available here. That’s why you should try to reduce every process to the minimum number of steps by creating as many shortcuts as you need.

What mobile-first design does to your shopping cart

So what does your shopping cart need to actually convert? Well, here is a list of elements that you should definitely work on:

  • Product name, price, photo and details
  • Ability to remove, save for later, change details of the products
  • Show total price and the sum of product price and shipping charges
  • Show estimated date of delivery and give users the chance to change it
  • Offer the possibility of choosing a pickup location
  • Call to action

Save for later or make a wishlist

Users frequently check the same products in more than one app or mobile website. Also, sometimes they add products to carts and think about whether to finalize the purchase or not, depending on factors like their own monthly budget, for instance. So, as much as we want a smooth flow that leads people directly from the product view to the purchase, there are always other aspects that could affect the process. That’s why the “save for later” button should be one of your best friends here.

In other words, giving users the option to save items for later reduces cart abandonment and allows customers to get back to their purchase when they are ready to buy the product. Having to locate the products again mostly forces users to use desktop to complete the purchase, which is neither practical nor effective.

When you give users the chance to save products for later or even make a wishlist from the very beginning, people will remember that these products are there, waiting for them to end what they started. Not only because the desired product will be easy to locate and buy or will pop-up again the next time they are on the page. Also, because if you give users the possibility of creating wishlists, you can set up a series of alerts that pushes customers towards the purchase.

Delivery address form

Let’s face it. No one likes filling long forms. It’s boring, time-consuming and gives users innumerable chances to make mistakes that could be hard to detect like typos. So, here is how mobile-first design solves the problem:

  • Limited number of input fields
  • Labels above the input fields
  • Asterisks warning of required fields
  • Display the right keyboard for each type of input
  • Shipping address should be default billing address, but the user can add another one
  • Advance fields when completed
  • Use auto-suggestion, auto-detection and address lookup

What about guests? Mobile-first design keeps them in mind

Not everyone wants to log in. Maybe users have landed on your store for the first time, but they have not become frequent customers yet. In this case, it is very convenient (and very quick too) that users have the option to check out as guests.

If you think that this is not such an important thing or you are convinced that not offering the “guest option” is a good way to retain your customers, let me tell you that you may be wrong.

Studies prove that over 60% of users find it difficult to identify the guest checkout option. This means that 60% of people actually wish to check out as guests. If you give users what they want, they will be happy to return to your store. This is the easiest way to transform users into customers.

Users should be able to double-check their orders easily

There is not really much to think about here. Mobile-first design establishes a very clear hierarchy to organize information in a way that makes the checkout much easier.

  1. User details and shipping address – There should be an option to edit these fields
  2. Product details and number of items – With “remove” and “save for later” options
  3. Detailed price with taxes and shipping charges – Show discounts
  4. Auto-apply rewards and coupons – This needs to be very obvious in order to encourage users to keep buying and winning rewards

Easy payment and multiple options

People don’t like giving their credit card details to buy things online. This is a fact. Mobile conversion rates are higher when users can pay with e.g. Paypal. Think about entering a lot of data, writing your full name, the number of your credit card, expiration date, etc. vs. just logging in into Paypal and confirming your purchase. Exactly. The second option is much quicker and easier.

In other words: you need to offer mobile-friendly payment options. Though, not too many. They should be a few, recognizable, trustworthy, clear payment options. Also, use icons and badges to remind users that the transactions are secure.

And if your customers have previously used credit cards, just give them the option of selecting that card again. This way the checkout will be much faster.

Don’t forget to confirm the purchase

Let customers know that their transactions were successful by displaying a message and sending them an e-mail. Also:

  • Summarize what they bought
  • Confirm payment AND payment method
  • Give users the chance to last minute questions
  • Share the link to follow the shipping process
  • Close the process with a CTA that keeps users engaged

Mobile-first design: the effort will pay off

I know. It’s a lot to work on. If your e-commerce was perfectly designed for a flawless website experience, the shift to a mobile-first design might seem like a huge undertaking. Also, if this is your first attempt to launch an online store, there is a lot to digest. However, the effort will pay off.

Mobile-first design is very logical after all. Think about all this as an investment. The more you work on an easy, simple, mobile-first design, the easier it will be for your business to adapt, change and scale.

Sharing is caring!