Some of the common reasons for low mobile checkout conversion rates are:
- Lack of a secure checkout process
- Product details not clearly visible
- Difficult navigation
- No option to compare products/prices etc.
- Difficulty in updating customer information
Whatever problems customers face with mobile transactions, research has shown just how important mobile checkout optimization is when it comes to driving conversions to your eCommerce store.
So in this post, we’ll be discussing 20 real-life brand examples of smart mobile checkout practices to help boost your mobile eCommerce conversions. This post contains:
20 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. Boden removes clutter and keeps it clean
Your checkout page should be aimed 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 immediately.
Since the mobile checkout page is an even limited space, take out all the unnecessary content on this page. Start by re-evaluating all the content on your current page and remove all the unnecessary elements.
This doesn’t mean all content though. Keep in mind that to convince some of your customers, they might need to see information on your shipping, return policy, and delivery details. So leave only the relevant stuff.
Boden offers a clean 3-step checkout process where customers can just add a product to cart, add their details, and pay.
3. 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 them estimate how much they have to complete. Plus, it helps make delayed gratification worth it.
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 ahead 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:
Find out 10 lesser known ways to combat cart abandonment: 10 Under-utilized ways to reduce shopping cart abandonment
4. 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 finds out that 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.
5. 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 every time. This 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 that extra time.
For example, see how much time autofill saves on Shopify's checkout page in comparison to the manual email address entry.
The Ultimate Guide: eCommerce Checkout Process Optimization
6. 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, 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.
7. 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 as well. 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 seen this? Checkout Page Mistakes eCommerce Businesses "Unknowingly" Make
8. 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:
9. 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.
10. Amazon optimizes for a one-handed user experience
The thumb is important for the touch 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 CTA’s on the lower section of your screen where it’s easier to reach. For the other areas of your screen, you can place your text-only content there.
The Ultimate Guide: eCommerce Checkout Process Optimization
11. Casper uses full-width CTA’s
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 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 CTA’s on mobile versions at least 44 pixels increases customer engagement with the CTA. 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.
Wide CTA’s are bolder, more visible, and very easy to click on. Because with a full width, you don’t have to worry about CTA alignment or placement.
On checkout pages, the CTA is bold, blue, and full width just like the example from Casper below:
Curious? Check out How do I increase my website’s checkout rate? (40 brilliant insights)
12. Apple makes forms compatible with user activity
Mobile devices especially iOS devices sometimes have this flawed user experience where when you try to fill a form and you tap on the form field, it automatically zooms in.
Here’s an example on an Apple iOS device below:
This can take up significant areas 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. Turns out that the form fields always zoom in whenever the font size is under 16px.
Here’s an example of how the same form fields don’t automatically zoom in at a font of 16px above.
13. 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 and not away, rather than using links that’ll redirect them to other pages of your mobile, 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.
14. 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 the benefits like it’s a way to have a faster and more convenient way to checkout.
However, since data security for cards online can be quite 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.
15. 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.
So to avoid spamming who might have checked out from a different device with promotional emails, track user shopping behavior on your eCommerce store to understand behavioral interaction.
Next, provide a sign-in option for returning customers or allow them to save to cart where they can access their previously saved items. Communicate the benefits of why they should sign in. This will help customers checkout easier without the struggle of having to find their favorite product in your store again.
16. 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.
So, you can try to reduce the number of clicks to complete checkout. This is what Maplin does by adding an Add to Basket option right on the category page.
17. 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 customer checkout experience first. Hence, you can optimize your mobile checkout design to fit the needs of your customers.
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 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.
18. 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.
19. Nordstrom allows customers to purchase later
A common checkout flow issue afflicting retailers is cart abandonment. You’d ideally want your customers to browse for products on the go and buy them at their leisure.
Conversion doesn’t end if the customer doesn’t buy then, they can come back and purchase later when have the time and patience to take their card out and finish the checkout process.
If you don’t offer them the option and rush them into checking out then and there, you’re losing customers.
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.
In case customers want to purchase their saved products together, it shows a separate Save for Later tab as well.
20. 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 checkout process to look for a coupon hence, it’s essential to add them to the page rather than in a sidebar. Customers may also ignore the coupon by considering it to be an ad due to banner blindness.
See how The Children’s Place keeps the coupon as a part of the checkout process and allows it to be applied right there.
The Ultimate Guide: eCommerce Checkout Process Optimization
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.
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.
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.
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.
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.
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.
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.
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.
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