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% of 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 mobile checkout best practices to help boost your mobile eCommerce conversions.
Here’s a quick look at what this post contains:
- 25 brilliant mobile checkout examples
- What is mobile checkout optimization?
- What causes mobile shoppers to abandon their shopping carts?
- How do I optimize my mobile checkout page?
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, show a "secure" connection.
HTTPS instead of an HTTP will do.
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.
Alternative checkout options like PayPal, Amazon Pay, and Venmo reassure customers who are very security conscious.
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 flow optimization, you need to focus on payment ease.
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 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.
To convince customers, highlight 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.
You might also like to read: 18 Store Owners Share eCommerce Checkout Best Practices for 2024
4. Firebox keeps forms short and shows progress Filling forms on mobile isn’t something your customers look forward to.
This is where a progress indicator on your mobile design can help you double down on conversions.
Think of it as a map that 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 is 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:
Check out: Email Capture: 45 high-converting examples & what makes them great
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.
Source 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 repeatedly.
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, to help reduce time and effort.
With autofill settings turned on, customers can quickly fill out 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.
See how much time autofill saves on Shopify's checkout page in comparison to the manual email address entry.
You'll love to read: eCommerce Email Mobile Optimization: 35 Guidelines For Store Owners
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 may want to make last minute changes on the checkout page.
So 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 featuring shipping costs, taxes, and other delivery fees is essential, customers can find them high when they show up in a particular currency versus another.
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 delivery expectations.
With the right data, you can show them just how long it'll take to reach them.
You could even offer a pickup option at a nearby store.
In this example, Target uses location to show the accurate shipping costs for customers.
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 at mobile checkout UI can be an instant turn-off.
Make it easy to pick and choose delivery options, and customers will experience a faster checkout process.
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 nformed 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.
You'll Love this: Designing the PERFECT Order Review Page(examples,must-haves, mistakes & more!)
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 is truly 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.
You might like: eCommerce Checkout Process Optimization
13. Casper uses full-width CTAs On a desktop the CTA typically doesn’t take up an entire row because the screen is big enough to click on.
However, when optimizing for your mobile checkout UI, you have to consider the size of a human thumb and its 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.
Too many distractions on the checkout page can cause customers to experience problems with mobile transactions.
If you have a high number of hesitant visitors, they may want to view every link which could take up so much time.
Reduce links on checkout page 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.)
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 organized.
Below, see how Made uses dropdown accordions to provide help with customers’ frequently asked questions.
16. Atterley allows the option to save cards Many customers rarely have their cards with them when they are browsing so they add to cart to come back and buy later.
Take advantage of this situation by providing an option to save card information on your eCommerce store.
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.
Also, conduct site audits to be entirely sure that saved cards are protected. Because data breach is a sure way to lose customer acquisition and even retention.
Below is an example from Atterley of a checkout UI with an option for customers to use their saved card to check out faster.
Check out: How do I increase my website’s checkout rate? (23 proven ideas)
17. ASOS offers cross-device checkout 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.
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—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 want or have done a product comparison on mobile.
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: mobile users primarily prefer to perform tasks with touch rather than typing.
Fandango keeps this distinction in mind and designs its mobile checkout page flow accordingly.
While it uses a dropdown option for booking tickets on its desktop UI, it shifts to an increment selector option on mobile along with an option to type.
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 less cumbersome.
How Geolocation works for mobile checkouts 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 the 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 detailed, readable and with limited scrolls.
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 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—o the brand suggested another that cost $119.
To make it even more attractive, a first order discount pop-up shows up first, then recedes downwards after it has caught the customer’s attention.
You'll love this: 15 Brilliant (Non-Intrusive) Mobile Pop-up Examples In eCommerce
BONUS: What is mobile checkout optimization? Mobile checkout optimization is the process that eases up a shopper's experience of buying and checking out post purchase on mobile.
When you're optimizing the checkout flow for mobile, you're essentially making the process of keying in personal details and paying up more intuitive.
Why this is important is because mobile users are steadily growing—in fact. between late 2022 and the first quarter of 2023, 79% of smartphone users bought at least once using their mobile phones.
What causes mobile shoppers to abandon their shopping carts? While mobile shoppers abandon their shopping carts for a host of reasons, the top ones seem to be:
1. Unexpected shipping costs According to research, 61% of online shoppers abandon the cart when they unexpectedly find high shipping costs.
This is no exception for mobile users as well.
Come to think of it, most people (about 90% ) would gladly buy if free shipping is on offer—so on the contrary if they find they have to pay more and the cost goes up at some point, cart abandonment becomes a natural consequence.
2. The need to create a user account At a time when a mobile shopper is hurriedly trying to pay up and end the process, some businesses make account creation mandatory.
This throws off an otherwise smooth and fast process and may force mobile shoppers to share information that they're not yet willing to share.
3. Payment security concerns Given that 1 in 2 American internet users had to face online breach in 2021, it's natural that mobile shoppers are wary of modes of payment.
If they find the ways to pay are not trustworthy, they may instantly decide to jump off. It may also happen if the interface looks untrustworthy in the absence of trust badges and security seals.
4. The need to do research 78% of shoppers have been found to do product research while they were hanging out online instead of a store. Now this clearly talks about the mental space shoppers are in when they're trying to make mobile purchases—they're always on the lookout for better deals.
So even if they've reached mobile checkout flow on a particular store, they may want to abandon their shopping cart and research options across other stores.
How do I optimize my mobile checkout page? 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.
Source If eCommerce brands can appeal to the right customer emotions at each stage of the purchase journey, they will enjoy significantly higher checkout rates.
Here are the 8 key emotions that you need to incorporate into your mobile checkout page optimization strategy to boost conversions.
1. Comfort Putting customers at ease and making the site look familiar is crucial for eCommerce stores. To ensure this, you must create a seamless and familiar experience when optimizing your mobile checkout page.
Moreover, you’d want to ensure that customers find comfort while checking out. This helps boost repeat purchases and customer loyalty.
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 Addressing cart abandonment = giving shoppers what they initially expected. To optimize your mobile checkout page, it's crucial to acknowledge customers' concerns about technological proficiency and navigation difficulties.
Simplifying the process, minimizing technical complexities, and streamlining the procedure are vital steps to prevent customers from losing interest and seeking alternatives elsewhere.
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 Boost your payment security and data privacy to ensure top-notch mobile checkout. Very often, customer abandonment at the final stage often originates from fears 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.
It's super important to keep things looking the same as people checkout on your mobile page. Try not to suddenly change stuff, like making the cart cost a lot more when they're about to pay. That can make folks scared or guilty and they might just leave everything behind.
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 When you're optimizing your mobile checkout page, it's super important to make customers feel safe. You can do this by giving them lots of reassurances about products, payments, and their data.
One cool way to do this is by adding badges and certificates that you get from trusted sources. These things really help folks trust your store.
Oh, and don't forget, it's also great if customers can chat with someone from the store in real-time if they have any questions.
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 releases 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 When you enhance your mobile checkout, think about how customers might feel after they buy something. Sometimes, they might feel disappointed, especially after paying. This can make them unhappy for a long time.
So, what can help? Sending them confirmations, saying thanks in emails, and keeping in touch for feedback. These steps keep customers happy once they checkout.
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.
By aligning and incorporating these key emotions with your mobile checkout page, you can create a harmonious and seamless shopping journey that resonates with your customers' preferences and enhances your checkout conversion rates.
Recommended reading: The Best One Page Checkout Examples in eCommerce (2023 Update)
35 Stunning Examples of Checkout Pages
Multi-step vs single page checkout, which is better for your eCommerce store?
Before you go... 98% of visitors who visit an eCommerce site—drop off without buying anything.
Why: user experience issues that cause friction for visitors.
And this is the problem ConvertCart solves.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions.
How we can help you:
Our conversion experts can audit your site —identify UX issues, and suggest changes to improve conversions.
.svg)
.jpg)
.svg)
.svg)
.svg)
.svg)
