Some of the common reasons for low mobile checkout conversion rates are: 

• Lack of a secure checkout process
• Unclear visibility of product details
• Difficult navigation
• No option to compare products/prices etc.
• Difficulty in updating customer information

However, given that 80% shoppers preferred browsing product reviews and comparing prices over mobile instead of visiting a store, says something. 

This means one important thing for eCommerce businesses: 

Top notch mobile checkout optimization is the need of the hour.

In this post, we’ll be discussing 25 real-life brand examples of smart mobile checkout practices to help boost your mobile eCommerce conversions. 

Here’s a quick look at what this post contains:

- 25 brilliant mobile checkout examples

- 8 emotions that'll help you boost checkout conversions

‍

25 BRILLIANT MOBILE CHECKOUT EXAMPLES

1. Sephora offers a secure checkout option

Build trust in your store by ensuring that your entire website is safe and you have this security trust badge around to prove it.

For starters, when customers tap on your address bar, it should show that their connection is secured.

A simple HTTPS instead of an HTTP will go a long way. 

You can also use trusted third-party security badges of payment processors on your checkout pages.

An example is the rapid SSL badges. 

Leverage guest checkout options for customers who might be skeptical of entering their card details on your eCommerce store.

With alternative checkout options like PayPal, Amazon Pay, and Venmo, you’re likely to get more conversions because customers who are very security conscious will get a safer checkout option that doesn’t require so much commitment.

See how Sephora uses the PayPal button as a guest checkout option?

Customers who might be interested in creating an account can opt for the actual checkout button.

2. Glossier places express checkout options first in the flow

eCommerce businesses naturally want to draw out customer information through relevant forms on the checkout page. 

However, when it comes to mobile checkout optimization, your primary lookout needs to be on the ease the customer experiences to pay up and close the purchase. 

Featuring express checkout options upfront, at the start of the information flow, takes care of this challenge. 

Glossier introduces their information fields after they’ve displayed the express checkout options. 

‍

‍

3. Boden removes clutter and keeps it clean

Your checkout page should aim at a single goal which is directing customers to check out. 

When customers encounter stumbling blocks or distractions like a registration pop-up or social media links, it stops them from checking out fast. 

Since the mobile checkout page is limited in space, take out what’s unnecessary. 

Keep in mind that to convince some of your customers, they might need to see information on your shipping, return policy, and delivery details. 

Boden offers a clean 3-step checkout process where customers can just add a product to cart, add their details, and pay. 

4. Firebox keeps forms short and shows progress

Filling forms on mobile isn’t something your customers may look forward to—they may feel impatient or simply not interested. 

This is where a progress indicator on your mobile design can help you double down on conversions.

Think of it as a map that not only accounts for the time spent but also helps estimate how much there is to complete.  

When using a progress indicator on your mobile checkout page, ensure it’s located at the top of the screen and sticky. 

That way, regardless of how far below they scroll, they can see it at all times.

And unlike desktop breadcrumbs, you want to keep the steps shorter. 

Preferably between 3-4 steps to reduce the percentage of form fatigue and checkout abandonment. 

Check out Firebox's progress indicator: 

‍

Been thinking about cart abandonment? Read: 10 Under-utilized ways to reduce shopping cart abandonment

5. eBay ensures that pages load fast

When optimizing for mobile, the ideal load time is below 3 seconds because mobile users are more impatient compared to desktop users. 

So while a desktop user can wait for 5 seconds, a mobile user would have clocked out at 3.

And at the checkout stage, every customer counts.

This can be understood from Deloitte’s study: it found that the load time is the most important reason why mobile users abandon. 

In fact, 10% of customers end up not purchasing just because of slow loading. 

Here’s what Unbounce’s report finds as well. 

‍

‍The report also shares how eBay was able to achieve a 0.5% increase in add-to-cart count by decreasing their load time by 0.1 second. 

6. Shopify nudges customers to checkout completion with autofill

Since the average mobile user comes in contact with online forms every day, it can get quite tiring entering the same details time and again. 

Form fatigue can lead to serious checkout abandonment on your eCommerce store. 

Thankfully, browsers like Safari and Chrome support autocomplete on certain forms like first name, last name, email, on forms to help reduce the time and effort spent on filling checkout forms.

By allowing autofill settings on your eCommerce store, customers can quickly fill out long shipping details in one tap. 

You can also introduce an option that asks customers if they want to use the same shipping address as the billing information. It helps save time.

For example, see how much time autofill saves on Shopify's checkout page in comparison to the manual email address entry.

‍

7.  Victoria’s Secret keeps space for order edits on the checkout page

Whether it’s changing the number of orders or changing the color of an item in their cart, a customer can decide at the checkout page to make minor changes to their orders.

Rather than having them leave the checkout page with hopes that they’ll get back to it once they are done, provide an option for them to edit their order right there.

With this slight tweak, you can reduce cart abandonment and even increase a customer’s order value.

In our example below, see how Victoria’s Secret brings up an edit display for customers who want to change the specifics of the order in their cart.

8. Target shows their customers accurate shipping costs

While shipping costs, taxes, and other delivery fees are essential to the running of your store, customers can find them a little too high especially when these prices are fixed in a particular currency rate.

The truth is: your customer’s purchasing power is tied to their location. 

That’s why it’s better to use customer location to determine shipping costs and taxes.

Another reason why you should use customer location is to help manage expectations for delivery. 

With the right data, you can show them just how long their purchase will get to them.

You could even offer a pickup option at a nearby store if they’d be interested. 

In this example, Target uses location to show the accurate shipping costs for customers.

‍

Hey, have you read this? Multi-step vs single page checkout, which is better for your eCommerce store?

9. Apothecary 87 makes it easy to pick and choose delivery options

Customers add-to-cart and then stick out to finish the rest of the checkout process because they’re convinced the product will enrich their lives. 

And this means unclear delivery information or options at the mobile checkout can be an instant turn-off. 

On the other hand, when you make it easy to pick and choose delivery options, customers can instantly see what difference it’ll make to the length of the checkout process as well as the cost (because typically, shipping charges are calculated after the customer information has been entered.)

Here’s a look at how grooming brand Apothecary 87 makes it super comfortable for mobile users to access delivery options. 

In fact, depending upon which option they pick, the information layout changes to keep them better informed about next steps. 

10. Nike helps customers checkout faster with a dynamic keyboard

Devices vary in size and although some mobile screens are wide enough, filling forms on them can be quite error-prone. 

This is especially because some devices require that you toggle between numeric, alphabetic, and special character keyboards.

However, you can optimize for 39% of these prospective mobile shoppers by reducing the effort that goes into changing keyboards.

By introducing dynamic keyboards that change with checkout field needs, you can double down on your mobile conversions. 

So when you need a customer to type in a phone number, or use a numbers field, be dynamic by showing only a numeric keyboard. You can do this for letters or special characters as well.

Here’s how Nike uses a dynamic keyboard that changes between the email and phone number field:

‍

11. Jet shows cost-breakdown upfront on the order review page

Do you feel that your extra costs are a little high? Or would you just prefer to hold on to it till when they checkout? That’s doing your eCommerce store more damage than good.

Communicate your shipping fees and other costs clearly above the fold of the checkout page or on the review order page. This way your customers don’t feel betrayed when they get to the end and realize that there are extra charges they weren’t ready to commit to. 

If your additional costs are on the product page or review order page but located below the fold, it’s possible customers can still miss it. This is because, on mobile, they might not scroll to the end of the page. So move your extra charges to a more visible location to avoid a faux impression.

See how Jet (recently acquired by Walmart) clearly shows off the subtotal, shipping fee, estimated tax, and other additional costs on its review order page before taking you to the actual payment page.

12. Amazon optimizes for a one-handed user experience

The thumb is perhaps the most important for the mobile user experience. 

According to research, cradling your phone with both hands can make it easy to reach all corners of the screen. 

However, since most mobile users are one-handed, only the middle area of the screen can be easily accessible.

Now having this in mind, optimize your screen for a thumb by putting the CTAs on the lower section of your screen where it’s easier to reach. 

For the other areas of your screen, you can place any body text content.

In our Amazon example below, the areas at the top screen marked in red are the hard-to-reach areas. So you’ll see that the CTAs are placed at the middle and lower sections of the screen. 

‍

Presenting The Ultimate Guide: eCommerce Checkout Process Optimization

13. Casper uses full-width CTAs

On a desktop, while the size of the CTA might be noticeable, it usually doesn’t take up an entire row because your screen is big enough to click on. 

However, when optimizing for your mobile checkout, you have to take into consideration the size of a human thumb and its general interaction with your page.

Research has shown that making the CTAs on mobile versions at least 44 pixels increases customer engagement. 

So, for conversions on your checkout page, ensure that your primary CTA buttons are at full width. This means they should cover up an entire row space. 

Wide CTAs are bolder, more visible, and very easy to click on.

On checkout pages, the CTA is bold, blue, and full width just like the example from Casper below:

‍

14. Apple makes forms compatible with user activity

Mobile devices, especially iOS devices, sometimes carry a flawed UX feature that can be disorienting for a buyer:

 When they try to fill a form and tap on the form field, it automatically zooms in. 

Here’s an example on an Apple iOS device below:

This can take up a significant area of the screen, leaving your customer trying to zoom out or entirely close that tab to avoid having to deal with this issue.

The key to optimizing for field input zoom is to ensure that your form font size is always above 16px.

Here’s an example of how the same form fields don’t automatically zoom in at a font of 16px above.

15. Made presents FAQs in a dropdown format

Rather than links, use dropdown accordions on your checkout page.

The difficulty customers experience with their mobile transactions sometimes comes from having too many distractions on the checkout page. 

If you have a high number of hesitant visitors, they may want to view the content of every link which could take up so much time.

A great way to reduce distractions is by removing the number of links you have on your checkout page. 

Since the goal is to keep them on the page, rather than using links that’ll redirect them to other pages. 

Instead have them view the details directly on your checkout page using dropdowns. 

With dropdown accordions, customers not interested in the details also have a collapsible view where they can choose to not see the content. 

It helps keep the page very detailed yet organized. 

Below, see how Made uses dropdown accordions to provide help with customers’ frequently asked questions in a very organized format.

16. Atterley allows the option to save cards

Many customers rarely have their cards with them when they are browsing through products and so in cases like this, they simply just add it to cart to make a purchase later on.

Take advantage of this situation by providing an option to save card information. 

This way returning customers can easily use a saved card to complete their transaction on the spot.

Tell them they won’t have to repeat this action again if they wish to shop with you next time. 

However, since data security for cards can be tricky, ensure that you ask before proceeding to save their card details on your eCommerce store. 

Also, conduct site audits to be entirely sure that saved cards are protected. Because a data breach is a sure way to lose customer acquisition and even retention.

Below is an example from Atterley of a checkout with an option for customers to use their saved card to check out faster.

Curious? Check out How do I increase my website’s checkout rate? (40 brilliant insights)

17. ASOS offers cross-device checkout

While so far, we’ve talked about optimizing for a mobile device, many customers switch between their devices before completing a purchase. 

They may have been browsing from a desktop or tablet before choosing to finally checkout with a mobile device.

Track user shopping behavior on your eCommerce store to understand behavioral interaction.

This way you can avoid spamming the customer with the same promotional material across channels as well. 

Next, provide a sign-in option for returning customers or allow them to save-to-cart where they can access their previously saved items.

See how ASOS uses its wishlist to encourage users to sign in so all their saved items can be synced.

‍

18. Snug maintains straightforward instructions on every page of a multi-page checkout

Noisy and distraction-ridden checkout pages are a pain – even more so for mobile users. 

While scrolling, customers only want to be reminded of what they are to do next to close the purchase faster. 

To enable this, you don’t always need a one-page checkout  – as long as you can keep the instructions across the multiple pages crisp, easy to understand and supported by breadcrumbs to track checkout progress. 

Here’s an example from Snug, the sofa brand. 

Notice how ‘show order summary’ and ‘hide order summary’ makes it easy for the buyer to instantly grasp all the info at one go. The brand also makes it a point to highlight the benefits when a customer chooses to view the summary. 

‍

19. Maplin reduces the number of clicks

Many customers resort to mobile shopping for a simpler and faster checkout experience. 

It’s easier to buy on-the-go on a mobile than on a desktop. 

These customers may already have checked out the product they would want to buy or have done a product comparison on mobile itself earlier. 

Long story short, mobile customers are more likely to be in the purchase stage of the funnel.

You wouldn’t want to cause any delays or obstacles in their checkout journey. 

Reducing the number of clicks can be one step in that direction.

This is what Maplin does by adding an Add to Basket option right on the category page. 

‍

20. Fandango offers a smooth checkout by using mobile UI right

Checkout processes look widely different on desktop and mobile.

So, the elements that may work on a desktop checkout may not be as effective on a mobile checkout. 

The idea is to think about and prioritize the mobile customer checkout experience first. 

One example of this is: users primarily prefer to perform tasks with touch on mobile rather than typing—which works better on desktop. 

Fandango keeps this distinction in mind and designs its mobile checkout page flow accordingly. 

‍

While it uses a drop-down option for booking tickets on its desktop UI, it shifts to an increment selector option on mobile along with an option to type as well. 

This shows how you can switch your checkout UI to match the device and improve your checkout conversion rates.

21. The Home Depot leverages geolocation for faster delivery

Mobile devices offer several advantages as compared to desktops. 

It allows integrations of several features with the mobile UI that can make for a fulfilling checkout experience. 

For example, while checking out on mobile, the feature to auto add your shipping address can make the process a lot less cumbersome. 

Google allows the GPS information tied to a physical location to align with the checkout process by adding a simple code. 

Brands like BestBuy are already using it to success with 28% of customers considering it to be a major value addition. 

The Home Depot offers this feature to its customers as well and auto-identifies location to connect to the nearest store for delivery. 

22. Nordstrom offers the option to purchase later

A common checkout flow issue afflicting retailers is cart abandonment. 

You’d ideally want your customers to choose their products, bag them, pay immediately and get out. 

However, in the real world, this is not always the case. 

Many shoppers like to take their own sweet time to view and review products, only to buy some of them at a later date. 

That’s why the Save for Later option is so important. 

This little button ensures your customer can bookmark and buy later. 

Even if they forget, you have the option to send them an email nudge to direct them towards a purchase. 

Nordstrom does this well by adding a Save for Later option on its checkout page. 

23. Room & Board makes information on additional taxes easily viewable

When it comes to mobile checkout optimization, it’s imperative that you make the order summary both detailed and readable without scrolling too much. 

But as important as it is to clearly describe the product price and any shipping/delivery fee that’s involved, it’s also necessary to state additional taxes. 

This is especially relevant for brands that engage in cross-border or international eCommerce. 

Taxes have a legislative angle to them and you don’t want to scare away mobile customers citing a much higher (surprise surprise) price without stating why it shot up at the checkout stage. 

Room & Board makes it a point to charge additional taxes based on specific state tax laws and where the delivery is to be made.

(However, the brand is also sensitive to bring this information out for the mobile user through a pop-up box that opens up when the “taxes” link is clicked.)

24. The Children’s Place allows customers apply coupons easily

Customers want to avail coupons as soon as they see them. 

It’s best to make the coupon visible right on the checkout page even before the customer starts adding any details. 

This boosts their desire to purchase as well. 

Do allow the total to update on the same page so that it reflects in the final amount. 

Around 25% of people abandon the checkout process to look for a coupon. 

Customers may also ignore the coupon by considering it to be an ad due to banner blindness. 

The ideal way to highlight a coupon section is clearly to display an empty field with a CTA saying “apply” next to it. And this is best placed on the sidebar. 

See how The Children’s Place keeps the coupon as a part of the checkout process and allows it to be applied right there. 

25. Bonobos cross-sells within the 10%-50% price range (& throws in a first order discount)

We agree that cross-selling intelligently for mobile – where products are placed conveniently and can be added instantly – can be a blessing. 

Especially on the checkout page, it’ll mean an increased possibility of increasing the customer’s average order value (AOV). 

However, take care not to cross-sell outside the 10%-50% price range of what your customer can afford. 

On mobile, this can not just take up unnecessary space without adding value but also potentially put off the customer from the entire purchase. 

You can effectively peg your checkout cross-sell prices by drawing from existing customer behavioral data, which can tell you about their purchase history, what price ranges they explored and what they bought into etc. 

Bonobos follows the 10%-50% price range rule without fail. 

In the following example, the main product in the cart was $79 – so the brand suggested another that cost $119. 

To make it even more attractive, a first order discount pop-up presents itself subtly enough and then recedes downwards after it has caught the customer’s attention. 

‍

‍

BONUS: 8 EMOTIONS THAT’LL HELP YOU BOOST CHECKOUT CONVERSIONS

Customers experience a wide range of emotions during their interactions with a brand. As per this research, customers start their journey on a positive note but by the time they reach the checkout stage, they often become frustrated and leave. 

If eCommerce brands can appeal to the right customer emotions at each stage of the purchase journey, they will enjoy significantly higher checkout rates.

1. Comfort

Putting customers at ease and making the site look familiar is crucial for eCommerce stores. 

When customers feel that they’re getting exactly what they want, the way they want it, they are comforted and feel at ease. A feeling they are ready to pay for over and over again via repeat purchases. 

How to make your customers comfortable during checkout:

• Have an adaptable store design, which is extremely mobile-friendly. 
• Use progress bars and single-page checkout processes. 
• Use familiar icons and CTA buttons. 
• Set up store navigation based on popular templates. 

A great example of a simple and intuitive checkout process is Zipbuds. 

They use a single screen checkout with a progress bar on the right side.

2. Ease

Cart abandonment is often caused due to an expectation gap. A gap between a consumer’s perception of the online shopping process and the actual process itself. Customers have a genuine fear of not keeping up with technology and are embarrassed if they won’t be able to navigate the site. If the process is technical, complicated, or long, customers will lose interest and move on to another store. 

How to help customers checkout with ease: 

• Reduce the number of fields and forms in the checkout process. 
• Use autofill in forms wherever possible. 
• Enable auto applying of discount codes and coupons. 
• Keep visual distractions to a minimum when it comes to site design and copy. 
• Be clear and upfront about vital information like delivery timelines and product features.

Here’s an example of a great checkout feature by Skullcandy. 

It allows returning visitors to directly log in and auto-fill their information from the previous purchases. New users have the option of creating an account to help them checkout faster in the future. 

3. Security

Concerns regarding payment security and data privacy are the best explanations for why customers abandon their purchases at the very last stage. These fears are often exacerbated by prior bad experiences and stories of online shoppers being duped. 

How to offer a secure checkout process for customers: 

• Always present multiple payment options to customers.
• Allow guest checkout options so customers don’t have to share their personal data unless they want to. 
• Provide social proof through reviews and ratings as a confidence-building mechanism.
• Use certificates, awards, and badges.

A lot of stores ask for billing information before they ask for shipping details. This sends the wrong message that the brand only cares about money. 

Stores like Warby Parker do this right. 

They let customers know when and where they would be receiving their order before they ask for billing details.

4. Calmness

Sometimes, the smallest thing can set a customer off.

The checkout page can be visually different from the rest of the store or the cart value at checkout is much higher than anticipated. These small things lead to fear or guilt and customers abandon the entire purchase.

How to offer a calm checkout experience to customers: 

• Update cart value in real-time as products are added. 
• Ensure there are no hidden or surprise costs added towards the end.
• Ensure complete cost transparency and show detailed breakdowns from the start. 
• Allow customers to subtract items at checkout and provide alternate finance options like installments. 

Here’s a great example of what to avoid. Notice how the Christian Louboutin store changes radically when it goes from product page to cart checkout. 

5. Trust

There are several layers of assurance about products, payments, and data that need to be delivered to the customer to build trust. To convey these emotional assurances, brands can use visual mnemonics like certificates and badges. These need to be from independent authorities that customers can trust.

It is also vital that customers can have a real-time conversation with someone from the store in case they have any further doubts. 

How to build a checkout process that customers can trust: 

• Display seals and certificates that prove security and authenticity 
• Improve page speed and display it without any error
• Incorporate a live chat support option for customers
• Use positive engagement messages like, “How can we help?”
• Offer delayed and planned payment options for customers. 
• Display reviews and testimonials from customers and experts. 

Here’s a prime example of a checkout page that’s optimized to build trust. Case Buddy displays 3 different badges of security right at the top to reassure the customer. 

6. Delight

Research has shown that dopamine is released in the brain even before customers hit the purchase button. This means the purchase journey itself can be extremely pleasurable and rewarding for customers. A good way to further this dopamine hit is to load the checkout stage with incentives and rewards. 

How to induce delight through your checkout process:

• Offer purchase incentives including discounts and offers. 
• Offer conveniences like free shipping and guaranteed returns. 
• Offer surprise and mystery gifts with purchases to create anticipation. 
• Enabling expedited delivery to reduce wait times. 
• Showcase unboxing videos so customers get a taste of what to expect. 

Sephora offers 2 free samples with every order and customers can choose the ones they want. 

This is over and above the usual discounts and coupons and is a great example of customer delight. 

7. Satisfaction

There are plenty of ways customers feel let down after clicking the purchase button. Post-purchase dissatisfaction hits even harder emotionally because the payment is already made. It often leads to long-term resentment. 

Confirmation of purchase, thank you and follow-up emails, and overall feedback are extremely important in maintaining post-purchase satisfaction levels. 

How to attain customer satisfaction during checkout:

• Develop a post-purchase email strategy that includes multiple confirmations for transactions, shipping, and delivery. 
• Curate a personalized thank you message for every order. 
• Create a follow-up communication sequence for feedback.
• Send timely reminders for product refills and repeat purchases, especially for FMCG products. 

Here’s a great example of post-purchase communication from Clinique. 

They estimate when the customer will run out of shaving cream and convey that in a humorous way. They also try to do an upsell by urging customers to purchase an additional unit for themselves. 

8. Encouragement 

An online store either gets serious shoppers or those looking to browse or compare products. The latter isn’t committed to purchasing—and requires a series of emotional nudges to push them towards checkout.

These can be financial incentives or process-based conveniences. Both deliver an emotional payload that converts idle browsers into paying customers. 

How to encourage customers to checkout:

• Improving the checkout experience by adding progress indicators and auto-fills. 
• Using limited time or quantity promotions to convey FOMO and urgency.
• Using up-sell and cross-sell strategies for more ROI and value per order. 
• Enabling single-click purchases for mobile shoppers and saving cart details for website customers. 
• Avoid pushing purchases too early in the customer journey and sending too many follow-ups.

The perfect example of an emotional nudge was when OnePlus used the invite system. 

You could only buy a OnePlus phone if you had an invite and only from their store. The joy of an invite was huge—it made the entire customer base feel special.

The Ultimate Guide: eCommerce Checkout Process Optimization

The Bottom Line

Optimizing for mobile checkout is paying attention to both the major and minor details of your page. Start with the data-driven suggestions discussed above to make a head start on increasing your mobile conversions.

You can also conduct a 360-degree analysis of your current eCommerce mobile experience to find deeper insights. Get started with a free mobile audit from ConvertCart today.
Today, more than 50% of eCommerce traffic comes from mobile, yet 78% of this traffic does not convert due to shopping cart abandonment.

Keep Reading: 25 Stunning Examples of Checkout Pages