Mobile Checkout Best Practices and Trends in Ecommerce

Last modified September 12, 2020 By (Follow on ) 7 Comments

Our ecommerce conversion optimization team has done an extensive analysis of the mobile checkout experience of the top 40 ecommerce sites in the U.S. (by traffic, according to the Alexa.com Shopping category). In this article, we present the results and analyze the impact of this data on current mobile checkout best practices and mobile ecommerce trends.

This analysis includes:

  • Key UX features in mobile checkout for each site (24 features total)
  • The percentage of the top 40 sites that employ each feature
  • When applicable, AB test data we have for each feature
  • Our conversion optimization team’s recommendation for each feature

We’ve divided our analysis into 4 sections of mobile checkout:

  1. Cart
  2. Pre-Checkout
  3. Shipping
  4. Payment

Each section has between 4 and 8 features analyzed, with a total of 24 features discussed.

We go beyond just listing features to discussing which should be considered mobile checkout best practices and which can be ignored. For example, you’ll learn insights like:

  • What percentage of these sites employ payment systems like Apple Pay
  • What percentage have a save your cart feature?
  • Does it matter if you add trust badges on shipping and how many sites do?
  • Has our team AB tested these features and if so, what have we concluded?
  • For 24 unique mobile checkout features

At the end, for reference, we’ve included screenshots of the mobile checkout flows of each of the top 40 sites we analyzed.

Get the Mobile Ecommerce Checkout PDF Summary

Enter your email to get the summary.

Submit

Bonus: No time? Get a concise PDF summary of the data and our recommendation for each feature.

You can find details of our methodology, including the full list of the top 40 sites and the bottom of this page.

Finally, if you’d like to apply to work with us to increase your ecommerce conversion rates via AB testing, you can do so here.

Why Mobile Checkout Best Practices Are So Critical

Mobile checkout is arguably the most important ecommerce conversion optimization trend today.

Why?

Because most ecommerce stores have more mobile traffic than desktop, and it’s only going to get worse.

But mobile conversion rates are much lower than desktop. We typically see mobile conversion rates hover around half of desktop.

Brands with the best mobile checkout experiences will have a massive advantage over competitors for years to come. It’s our hope that this study will help your ecommerce site improve its mobile conversion rate through an improved checkout experience.

Mobile Shopping Cart Page Trends

Cart features we analyzed:

Add to Cart Button Takes User To?

click takes you to

Designers love to talk about “minimizing clicks”. So in ecommerce companies, deciding what happens when the user clicks “add to cart” can be a source of debate:

Should you take them straight to the cart? This minimizes clicks if they will only check out with one item, but increases it if they will add multiple. For example Etsy.com, BestBuy.com, and Wiley.com all do this.

Should you use a temporary notification? (Appears, says they added to cart, then disappears) This bothers the user the least but may not be “in your face” enough to encourage checking out. Nike.com, HM.com, and Macys.com all do this. In general “sliders” or “drawers”, even on desktop checkout flows seem to be an ecommerce checkout design trend in the last few years.

HM Temporary Notification

Should you use a permanent notification that pops up or slides up? This is very clear, but may create more clicks for the user. Here is Walmart’s:

Walmart Permanent Notification

The majority (over 50%) of our Top 40 sites used a permanent notification. These are very similar to taking the user to cart, because they have an option to proceed to checkout immediately or review cart or continue shopping.

The key difference is a permanent notification can often be closed (with an “X” button) and the user remains on the product page without waiting for page loads, so the experience is faster then sending them to the cart.

What is Best Practice for Add to Cart Notifications? Our AB Tests Show…

We’ve tested different add to cart notifications before and haven’t seen large, impactful changes in conversion rate (on both mobile and desktop).

For example in one mobile specific test, we tried different styles of a permanent notification with differing amounts of information and size.

Mobile PDP Add to cart flow

We saw clear differences in how many users clicked Proceed to Checkout vs. View Cart buttons (10% – 12%) with statistical significance but saw no net change in orders or revenue.

This suggests that the format of the add to cart notification may not make a huge impact in actual mobile conversion rates. As per our usability vs. desirability optimization framework, changes that affect a users desire to checkout (desirability) usually have a bigger impact than reducing friction (usability). This is a usability tweak so it’s unsurprising that it didn’t make a huge impact.

Growth Rock Recommendation: For high traffic or high transaction volume sites, this may be worth testing, but don’t hold your breath for large changes in mobile conversion rates (> 5%).

Number of Upsells in the Shopping Cart

upsell bar chart

65% of our top 40 ecommerce sites have upsells and cross sells on the cart page. Surprisingly 14 of the 40 sites we analyzed did not have any upsells or cross-sells on the cart.

On average, those that had shopping cart upsells, had 14 products recommended somewhere in the cart.

That’s a lot of products!

Typical mobile shopping cart upsell designs looked like this one, from Sears:

Upsells and cross sells are a huge factor for any ecommerce website because of their power to increase average order value (AOV).

What is the Mobile Shopping Cart Upsell Best Practice? Our AB Tests Show…

In our AB tests, we’ve seen upsells and cross-sells improve AOV significantly, but they are not always guaranteed to be effective.

Thus we strongly recommend every ecommerce site test this for themselves. Test different upsells, test including and not including upsells, and test how and where the upsells are presented.

In multiple tests, upsells have made no difference on AOV and revenue per visitor. As the site management team or owner, you want to know this so you can test alternative products, number of products, position, copy, etc.

On the other hand for those sites that don’t have upsells or cross-sells, they should for sure be tested as they have the potential of increasing our AOV and (most importantly) revenue per visitor, significantly.

None of our tests have yet to show a decrease in conversion rate due to the presence of upsells or cross-sells in the cart.

Checkout button is above the fold?

checkout above the fold

60% (24) of the top 40 sites had their checkout button above the fold on their mobile cart page.

A pretty well accepted ecommerce mobile checkout best practice is to put checkout buttons above the fold. You hear UX experts recommend this all the time.

But again, this is a usability tweak — where the checkout button is doesn’t affect a users desire to checkout. So should this be a best practice? What does the AB testing data say?

What is the Checkout Button Position Best Practice? Our AB Tests Show…

Because this is a usability tweak, we have only tested this once.

Checkout above the fold

In that test, we did not see a statistically significant change in checkout rate by adding a proceed to checkout button above the fold, contrary to what the well accepted best practice would tell you. In a second variation where we added detailed savings and order total amounts in addition to the button, we actually saw a trend towards a 2% decrease in conversion rate (albeit with only 84% significance).

Growth Rock Recommendation: You can test this as your results may vary (very few UX trends apply to every site) but we’d suggest focusing efforts on bigger potential wins.

Ask what’s actually holding customers back from checking out? Chances are it’s not that they can’t find the checkout button.

Proceed to Checkout Button is Called?

checkout button names graph

We love to make jokes about people who think AB testing is about button colors and button text and other tiny details.

The vast majority of the time, details like this make no difference.

However, if you’re curious about the proceed to checkout button copy, above is what we found in our top 50 ecommerce sites. Most of the top 40 stores simply called their button “Checkout”.

Growth Rock Recommendation: Again, as per our Usability vs. Desirability framework, we don’t recommend spending too much time on small UX decisions like this.

Displays Secure Checkout or Trust Seals

credit card logo

Credibility icons and social proof is, for sure, an ecommerce design trend these days (e.g. 2017, 2018, and 2019). It is one of the most oft-mentioned tactics in the conversion optimization community.

But it’s interesting that less than half (42.5%) of our Top 40 sites had a security message or trust seal on their mobile cart page. Even fewer (only 17.5%) had credit card logos. It’s arguable whether credit card logos are necessary today as consumers now expect all sites to take all major credit cards.

secure checkout

Advertising a “secure checkout” experience on the other hand is more controversial. As we indicate in the payment section, our AB tests have not shown a lift in conversion by mentioned security, or using security badges, trust seals or icons.

It’s possible that at least some of the 57.5% of sites we analyzed that also don’t mention secure checkout or have trust seals on the cart page have also tested this and found it didn’t make much of a difference.

What are Trust Seal Best Practices on the Shopping Cart? Our AB Tests Show…

Of course social proof is a well-known persuasion tactic and we agree with its usage.

That said, we have not seen credibility icons or social proof quotes make a huge difference in most AB tests, in particular in the checkout flow.

As mentioned below, our few tests of credit card and security trust logos on the payment step have not shown a conversion lift.

Growth Rock Recommendation: This is an easy test to run and we suggest you try it as many have reported data suggesting trust seals and security messages improve conversion rate. Just don’t hold your breath for a conversion increase. If you have a trust seal or security message on your site currently, it could be worth testing removing it. In our view, if something is not helping, its best to remove it to keep experiences as clean and distraction free as possible.

Total Savings Highlighted in a Separate Line Item?

savings highlighted

Savings (or, more specifically, perceived savings) are a huge factor in for ecommerce stores. We’ve seen evidence of this for many different ecommerce brands: low price (AOV < $30), luxury apparel (AOV > $300), furniture (AOV > $1000), to name a few. User surveys and customer support interviews in luxury apparel even indicate that customers love feeling like they got a deal or “the best price” (even on a $1000 purse).

But only 35% of the Top 40 sites we analyzed have savings highlighted as a separate line item in their order total in the shopping cart:

Overstock Seperate Line Item

So what is the best practice for how a store should highlight savings on the shopping cart page?

Our AB Tests Show…

We’ve observed something interesting in savings highlighting on the cart page: Highlighting savings at the product level seems to be significantly more important than highlighting it at the order total level.

mobile cart savings highlight

In one store, we saw a 4% increase in revenue per visitors and 3% increase in checkouts when we highlighted savings on each product, vs no statistically significant increase in either metric when we only highlighted it at the order total level.

Save Cart for Later Option?

save cart for later

Cart abandonment is such an issue for ecommerce teams that even writing this sentence feels like a cliche.

But on mobile? It’s even worse. Mobile users are notorious for adding to cart, and dropping off. So features like this that can capture their email — as long as it doesn’t hurt checkouts, can be really impactful.

Here is an example from Nordstrom:

We’ve tested a save your cart feature on many ecommerce stores and the results have almost always been positive.

Most sites already have this ability built-in, if a user is logged in. So the easiest way to test this is to include a button or link in the cart page that says “Save Your Cart for Later” followed by “by creating a free account”.

In one of our tests, we saw a whopping 250% increase in account creations by adding this link. Why so big? Because most ecommerce sites have dismal account creation rate other than people who already buy. (When is the last time you decided to create an account when buying clothing online for example?)

So adding this incentive (save your cart) and clear CTA on a very high traffic page (cart) increases account creations dramatically.

save bag later

But does this hurt checkouts?

This can often be a concern as you’re adding a secondary CTA on the cart page that could distract. Our save your cart tests haven’t shown a drop in checkouts. If anything both showed slight increases in checkouts.

Growth Rock Recommendation: All ecommerce sites should test adding save your cart functionality.

keep shopping

Keeping distractions to a minimum is a key conversion principle across all website CRO. You want to keep users focused on their primary desired actions.

Thus, our team feels that a “Keep Shopping” or “Continue Shopping” link is not useful on the cart page. Users can already continue shopping in many ways.

  • Back button
  • Logo to go to the homepage
  • The full navigation menu, which is present on almost all cart pages

Keep Shopping

Instead, we feel it can serve to distract from the primary CTA of proceeding to checkout.

Our AB tests show…

In fact, in one of our “save your cart” AB tests involved replacing the “continue shopping” link with “save your cart” and saw orders trending positive by 6% vs. original, albeit with only 83% statistical significance.

We hypothesized that removing the prominent “continue shopping” link in that instance may have been the true cause of the slight potential conversion rate increase rather than the save your cart link in that test.

About half of the top sites we surveyed had a continue shopping link. Notable sites without such a link in the cart include two of the biggest ecommerce sites today: Amazon, and Walmart.

Notably, for larger ecommerce stores like those, search is a major feature, and since normal nav elements remain on the cart, the search bar is, in effect, another “continue shopping” option for the user, rendering the “continue shopping” button less useful.

This redundancy is made starkly clear on Rei mobile cart page:

Rei screenshot

Growth Rock recommendation: Test removing your continue shopping link. In fact, consider replacing it with a “save your cart” link from the item above.

Pre-Checkout

Jump to:

Guest Checkout Option?

guest checkout option

The vast majority (75%) of the sites we investigated have a guest checkout option. It’s well regarded at this point as a conversion “killer” to not have a guest checkout option.

These brands in our list do not have guest checkout and require account creation to checkout:

  • Amazon.com
  • Zappos.com (owned by Amazon)
  • 6pm.com (owned by Amazon)
  • Costco.com
  • Target.com
  • Wayfair.com

What do you notice? The majority are huge brands with household brand names in the U.S.

Half are Amazon or owned by them. Amazon, of course, is built on registrations which feed it’s business model including growing Prime subscribers.

Costco.com won’t even let you checkout of their physical retail store without being a member so that goes without saying.

So the only two unexpected brands on this list are Target and Wayfair. They are both big brands, one in brick and mortar retail, and the other online, but other than size and brand recognition, nothing in their brand ethos would suggest it’s an obvious move to require sign in. Thus, it’s an interesting decision by them to demand users create an account.

Notably, other household brand names as big or bigger than Target and Wayfair allow guest checkout. In particular, Walmart, Home Depot, and Ebay (which historically started out as sign up required to bid on items and only later allowed guest checkout.

Growth Rock Recommendation: Unless you have the brand recognition and size of Target and Wayfair, you should probably stick to allowing guest checkout. At the very least AB test removing it and calculate whether the drop in immediate purchases is made up for

Separate Page to Choose Guest Checkout?

separate page guest checkout

The majority of top ecommerce sites (56%) still send users to a separate page prior to the start of the checkout flow to choose whether to use guest checkout or create an account.

Once again, traditional UX theory suggests “minimizing clicks” should help conversion rate.

Our AB Tests Show…

We’ve seen indications of a conversion lift by removing this page but nothing particularly convincing. The closest was a test run to 880,000 visitors, where, where removing this page (and sending customers straight to the checkout page) showed an improvement in a conversion rate of 1.5% – 2%, which held steady over multiple weeks but ended with only 86% statistical significance.

Growth Rock Recommendation: We suggest you test this yourself if you have the resources to run at least 1 – 2 test a week. If your AB testing bandwidth is limited, focus on bigger wins. If you run this, pay attention to a potential tradeoff between new account creations and completed orders.

Aside: 84% of these pages present guest checkout second to sign in for returning users. While we haven’t tested this (if removing this page entirely makes only a small difference, optimizing this page doesn’t seem like a good use of time), we find it interesting that almost all brands visually prioritize returning user sign in over guest checkout when it’s widely accepted that guest checkout is necessary because the majority of checkouts are from non-registered customers.

Second, on mobile, 36% of the sites don’t even have the guest checkout option above fold (on iPhone 8). This seems like an easy UX fix to make to improve mobile conversion rates.

hm guest checkout 1

Continue with Social Media Account Option?

continue with social media

Poor mobile checkout rates are the massive elephant in the room problem for ecommerce stores. Most crossed over from “majority desktop” to “majority mobile” traffic sometime in the past 3 years. But mobile conversion rates are abysmal compared to desktop.

One big reason for that filling in a bunch of forms on your phone still stinks. Consumers just don’t want to do it. So we’ve seen time and again AB tests that improve mobile Add to Cart rates but barely move the needle on completed mobile orders.

Continue with Facebook, Continue with Google, etc. help the users out by using your address known from that social platform. You no longer have to fill all that in.

newegg facebook

We found only 27.5% of the sites we examined have social options for checkout. We’re curious to see if that increases with time.

Growth Rock Recommendation: Test adding continue with social buttons as an alternative to normal checkout.

How Many Pages is the Mobile Checkout Flow?

checkout pages

Mobile users have less patience for page loads, so the conventional wisdom is to minimize the need for page loads, which slow them down and inevitably cause some fraction to bounce at each page load.

The average (and median) number of pages in the checkout flow of the sites we examined was right around 4.

The highest was REI.com at a whopping 7 pages of checkout (6 plus one for choosing guest checkout)

Checkout

Each of their pages are small and easy, asking for just one thing at a time.

On the other hand, HomeDepot.com has only 2 pages (assuming you don’t checkout with an appliance that needs insurance coverage, etc.): (1) guest or sign in (2) the entire checkout form on one page.

The counter-argument to reducing checkout pages is that long forms on one page are intimidating and may scare away the user. The Home Depot checkout page looks intimidating as a long screenshot but on your phone you’re only seeing one part at a time.

Growth Rock recommendation: We’ve heard both sides of this debate in web UX in general, not just ecommerce checkout. We suggest you test this for yourself.

Mobile Shipping Page Trends and Best Practices

Jump to:

Is There Some Form of Address Detection?

address detection

One of the main reasons for low mobile checkout rates is how tedious it is to fill in forms on mobile.

One way to counter that is with address detection.

55% of the sites we examined had some form of address detection, most of which work like this:

address detection

Our team has only tested address detection once in the past few years and we did not see much of a change in conversion rate. It’s worth testing and not hard to implement. Google Maps API for example lets you easily add autocompletion with your form.

Growth Rock Recommendation: It could be worth testing address detection. Form filling on mobile is a known pain point. In our opinion, this should be a mobile checkout best practice because it simply makes form filling easier on the user. Nonetheless it has yet to catch on as an ecommerce trend (mobile or not) and thus the vast majority of ecommerce sites don’t yet have this feature.

Do They Have Instant Form Field Validation?

instant form detection

Continuing on the theme of making form fills as easy as possible, nothing is more annoying to mobile users than filling out a long form, clicking submit, then figuring out there’s an error and hunting around for it.

Yet, 27.5% of our top 40 sites had this poor UX!

Including

  • Lowes
  • Wiley
  • Bhphotovideo
  • Zappos
  • Gap
  • Forever21
  • Gamestop
  • Sephora
  • REI

The solution is instant form field validation.

Here is the contrast, on Nordstroms, if I enter “1” in zip code and try to move on, it immediately tells me this is not a valid zip code. I fix it right there.

instant form field validation

Whereas on Lowes.com, one of the culprits, I can enter “1” in zip code and be on my way and won’t know until I click “use this address”.

Lowes instant form field validation

Growth Rock Recommendation: We haven’t done AB tests on instant form validation, but we don’t see a reason not to have it. Again, we think this should for sure be a mobile checkout best practice (really on all device types and sizes). Asking users to wait until they submit a form to see errors is just cumbersome. We recommend AB testing this (instead of implementing it outright) so you can see if any unintended consequences of instant validation may hurt your conversion rate. For example, some forms may be too quick to point out errors, causing users who are in the middle of typing an email address or phone number to see a red warning when they simply haven’t finished. If this hurts conversion rate, an AB test will indicate that for you so you can fix the problem.

Do the Number Fields Use Number Keypads?

number keypad

Form filling on mobile is a pain because typing is a pain. One way to help is to make sure fields that only require numbers (phone, zip) use the phone’s number keypad with larger, fewer buttons than the regular keypad.

This is also in the category of obvious UX improvements. Yet 12.5% violated this rule including:

  • Walmart
  • Bodybuilding.com
  • Gamestop
  • Wayfair
  • 6pm

For example here is J.Crew. When you click into zip, it immediately gives you a numbered keypad:

numbered keypad

In contrast, here is H&M when you click into zip:

HM UX Numbers

The UX is unnecessarily cumbersome. You have to click the number button on the left and then use the tiny number keys at the top of that keyboard.

Growth Rock Recommendation: You don’t need to AB test this, you can just implement this outright. There is no reason why a full keyboard is necessary for a number only field.

Is Site Navigation Hidden on Checkout Pages?

nav menu accessible

Distractions are the enemy of conversion rates. On that accord, it’s become commonplace to remove normal site navigation on checkout — on mobile and desktop.

On mobile, this means removing the hamburger menu and other icons in the navbar and often also unlinking the brand logo.

To let customer go back, there’s usually just one small link included. H&M has a great example of this:

HM Go Back Link

However, several sites (27.5%) of our top 40 violated this rule and had full navigation available in checkout. Specifically:

  • Amazon – As with many things, Amazon is maybe a unique case because the role the site plays in their customers lives is very different than other sites.
  • Nordstrom – They have a hamburger menu present, although it’s content is drastically reduced during checkout
  • Lowes
  • Kohl’s
  • Forever21
  • RedBubble
  • J.Crew

Lowes provides a very busy example of this:

Lowes

Growth Rock Recommendation: We don’t see a need for sites that don’t have navigation to test adding it back in, however for sites on the list above that do, we strongly suggest AB testing a distraction-free alternative like H&M.

Estimated Delivery Date Shown?

estimated delivery date

The conversion motivated reasons for showing delivery date is two-fold:

  1. Simply answer a potential question in the customer’s mind. They may need it by a certain date or just be curious.
  2. Increase desire by making the purchase feel more imminent or real. If they think “I could have this by Monday” they may be  more inclined to purchase.

65% of our top 40 sites had some indication of an estimated delivery or ship date, suggesting this has not widely caught on or been accepted yet.

We’ve tested adding estimated dates in the mobile checkout flow and have not seen any statistically significant lifts in conversion rate.

mobile cart top shipping date

A caveat on the above result is that for that client, the estimated shipping and delivery date for each product is already on the PDP, therefore showing it again in checkout may not have added any additional motivation to complete the purchase (there was no question about this in the customers’ minds).

Mobile Ecommerce Payment Page Trends and Best Practices

Jump to:

PayPal, Apple Pay, Amazon Pay Options?

This is a category to keep your eyes on closely. This could be the game-changing trend in mobile ecommerce over the next few years.

The entire mobile checkout experience including laborious form fills can be almost entirely skipped with an instant payment option like PayPal, Apple Pay, or Amazon Pay.

Look at how easy it is to checkout with Apple Pay on Kohls:

Apple Pay Checkout

No need to fill in address. No need to fill in credit card. One click on the Apple Pay button and with my fingerprint I’ve paid for my Grinch who stole Christmas pajama pants.

Although this is the first year Growth Rock has published this study, in our own practice we’ve noticed a sharp rise in brands with Apple Pay, for example.

payment types

Growth Rock Recommendation: We are actively testing these payment options across multiple clients and strongly suggest you do the same. These instant payment options like Apple Pay should be a growing mobile ecommerce trend and in our mind should be regarded as a mobile checkout best practice (if they aren’t already).

Does the Site Auto Detect Credit Card Type?

auto detect cc

In the category of unnecessary UX friction we have: asking the user to select Visa, Mastercard, Discover, Amex, etc.

You can detect it as they type their number as the abundant discussion when you Google “detect credit card type” would suggest.

Here is a nice StackOverflow discussion with a good summary of the ins and outs of this.

Only 10% of our Top 40 sites did not auto detect credit card type, but even that was surprising.

The culprits were:

  • Wiley
  • Macys
  • Lowes
  • Costco
  • Gamestop

Growth Rock Recommendation: We have not tested this because this falls in the category of smaller usability tweaks that may very well help but often don’t “make the cut” at any given time for resources to devote AB testing to. For higher traffic and revenue sites it could very well be worth testing.

Are There Trust Symbols on the Payment Page?

trust symbols

One of the most common CRO “best practices” is to use trust symbols or badges, like these:

trust badge

They can range from a full BBB or Norton badge to a tiny lock icon like HM.com:

HM Lock Icon

Can’t find it? Exactly, it’s small.

But only 37.5% of our top 40 mobile sites had a trust symbol on the final payment page.

Is that bad? Maybe not. In a few tests we’ve done on trust symbols on checkout pages (not mobile only), we’ve seen largely no significant improvement in conversion rate by including the badges.

Our AB tests show…

Here are 2 AB tests that did not show an increase in conversion rate via trust badges.

In one test we added

  • a Geotrust security badge
  • a lock icon with SSL encryption copy
  • credit card logos

…and saw no change in conversion rate.

This was for a site with the largest two age groups in Google Analytics demographic report being 55 – 64 and 65+ (thus, exactly the demographic you’d expect would need security badges).

mobile cart creditcards

In a second test, for a brand where the two largest age buckets were 25 – 34 and 35 – 44, we tested the inclusion of the following on the cart page:

  • McAfee Secured badge
  • Norton Secured badge
  • Lock icon with “Shop with Confidence”
  • A few store specific guarantees such as 20 year warranty and made in the USA

We saw no statistically significant difference in conversion rate. We tested multiple variations and the one with none of the above badges performed the worst during the test period, but the reduction in conversion rate from original was only 3.2% and statistical significance was only 68%. In other words, no statistically significant difference.

Growth Rock Recommendation: Do you need badges? Maybe not. Many brands on our list did not have them. They are very easy to test, so we suggest doing so. If for no other reason than to quell the debate about them in the office.

What is the Final Payment Submit Button Called?

Once again, we don’t think the name of this button is likely to matter, but it can be fun to see what competitors are using it, so here’s our histogram:

final order button name 1

Growth Rock Recommendation: Pick something and save your mental energy for other things.

Does Final Payment Submit Button Appear Above the Fold?

payment above fold

Another CRO “truism” is placing things above the fold. We’ve seen this work well in many contexts. Mobile checkout is not one of them.

Our AB Tests Show…

In our tests, consumers don’t seem to care where the order or proceed to checkout buttons are, when they are ready, they know where to find them.

In our top 40 sites, slightly more than half (57.5%) did not have their final payment button above the fold.

iherb checkout

Is There a Final Submission Confirmation or Review Page?

final submit page

We find the final “review” or “confirmation” page an interesting discussion point.

Is it necessary?

Can the customer not review on the payment page?

Is it worth the extra page load and moment of pause?

The main arguments for this page are:

  • To make sure there is no ambiguity for the customer before submitting their order
  • Reduce customer service headaches post purchase if there are mistakes (e.g. wrong address)
  • If you give them a chance to review, it will reduce errors on submission thereby increasing conversion rate

The counter-argument is of course that they may just be able to review on the final payment page itself and you don’t need to subject them to an additional page load.

We have not tested this but we think it’s interesting that there is very close to a 50/50 split in the top 40 sites.

Growth Rock Recommendation: This could very well be worth testing.

Newsletter Opt-In or Opt-Out Option?

newsletter

Who likes email marketing more than ecommerce companies? No one. Well maybe email marketing software companies, but I digress.

55% of our Top 40 sites included an option to join a newsletter during checkout (almost always in the final payment step).

We did not test this (because we didn’t actually buy from all 40 sites) but it’s more than likely that 100% of the sites would put you on a newsletter after purchase even if they did not have a newsletter opt-in.

So it’s interesting to see that around 45% choose not to even give the customer a chance to “uncheck” the newsletter box and opt-out.

Several of these “NO” sites force you to sign up (Amazon, Zappos, Target) but many have a guest checkout option.

For example here is Gap’s final submit page, there was no box to join their newsletter the entire time. You bet Gap will start sending me emails the moment I order.

Newsletter

All 40 Top Ecommerce Site Mobile Checkout Flows

Our Methodology

How did you decide the top 40 ecommerce sites were?

There are many lists ranking the top ecommerce retailers in the US and globally.

Many claim to have information on sales volume, but this is questionable as many of the brands don’t release it publically, so it has to be inferred.

We felt the easiest way around this issue is simply to use Alexa.com’s top sites list for the category shopping. We started with 50 and removed 10 that weren’t really “ecommerce” from a traditional UX perspective, or duplicates.

So for example Netflix is #2 on Alexa’s shopping category, obviously analysis of their mobile checkout flow is not particularly useful for typical physical product ecommerce retailers, so we excluded them.

Also amazon.co.uk is largely a duplicate (from a UX perspective) of Amazon, so that was excluded.

The final list of 40 we used are below with screenshots of their mobile checkout flows.

Top 40 eCommerce Mobile Checkout Flows

#1 Amazon[metaslider id=”2045″]
#2 eBay[metaslider id=”2066″]
#3 etsy[metaslider id=”2084″]
#4 Walmart[metaslider id=”2110″]
#5 Ikea[metaslider id=”2100″]
#6 BestBuy[metaslider id=”2121″]
#7 Home Depot[metaslider id=”2148″]
#8 Target[metaslider id=”2166″]
#9 Nike[metaslider id=”2181″]
#10 Wiley[metaslider id=”2227″]
#11 Cambridge[metaslider id=”2234″]
#12 H&M[metaslider id=”2248″]
#13 Humble Bundle[metaslider id=”2262″]
#14 Newegg[metaslider id=”2277″]
#15 Body Building[metaslider id=”2289″]
#16 Nordstrom[metaslider id=”2317″]
#17 Macy’s[metaslider id=”2331″]
#18 Lowes[metaslider id=”2344″]
#19 B&H[metaslider id=”2364″]
#20 Zappos[metaslider id=”2383″]
#21 Costco[metaslider id=”2409″]
#22 Kohl’s[metaslider id=”2425″]
#23 Gap[metaslider id=”2442″]
#24 Urban Outfitters[metaslider id=”2458″]
#25 Wayfair[metaslider id=”2473″]
#26 Forever21[metaslider id=”2487″]
#27 Gamestop[metaslider id=”2503″]
#28 Sephora[metaslider id=”2517″]
#29 Overstock[metaslider id=”2531″]
#30 REI[metaslider id=”2544″]
#31 Redbubble[metaslider id=”2580″]
#32 6pm[metaslider id=”2595″]
#33 Staples[metaslider id=”2610″]
#34 iherb[metaslider id=”2619″]
#35 Walgreens[metaslider id=”2635″]
#36 JCPenney[metaslider id=”2648″]
#37 Sears[metaslider id=”2659″]
#38 Barnes & Noble[metaslider id=”2677″]
#39 Adidas[metaslider id=”2695″]
#40 JCrew[metaslider id=”2708″]

7 Comments

  1. Peter Goodwin
    November 20, 2018

    Great article guys. Implementing the “save your cart” feature stat!

    Reply
  2. Danielle M.
    April 18, 2019

    tl;dr
    “it depends” and “security badges are meaningless”

    Reply
    • Devesh Khanal
      August 27, 2019

      Although your comment is meant to be snarky, it actually has a lot of truth to it. Folks that have really done lots of CRO know that “it depends” is a guiding truth. If you are looking for sweeping generalizations in UX that works for every site you’ve 1) come to the wrong place and 2) aren’t asking the right questions, in our opinion.

      Reply
  3. Marcia
    September 14, 2019

    too many inconclusive data.
    This could have been a great article, but I basically learned that nothing makes a difference and I shouldn’t bother.

    Reply
    • Devesh Khanal
      October 5, 2019

      Despite being amusingly snarky, there is an important point in this comment. But the conclusion (don’t bother) is misguided. True Premise: There aren’t magic little AB test hacks that will guarantee conversion increases. False Conclusion: that means you shouldn’t bother. Actual Conclusion: Sites that have enough revenue to where 10% or less changes in checkout conversion rate will make a sizeable impact on the business should carefully choose hypotheses and test.

      Reply
  4. Jon-Fredric T Anderson
    February 13, 2020

    Solid article. Really influenced some decisions on the re-design of our site. Appreciate it!

    Reply

Leave a Reply