Best Practices And ExamplesDesigning A Better Mobile Checkout Process

Advertisement

A record number of shoppers are turning to their smartphones to research potential purchases1. Meanwhile, the bigger question — are those same users willing to complete the purchases on their mobile device? — is quickly being answered. The US, for example, saw an 81% spike2 in mobile e-commerce (m-commerce) sales in 2012, comprising a $25 billion market.

And it’s not just apps. By a landslide, users prefer mobile websites to apps for shopping. For every shopping activity, including researching products and prices, reviewing products, participating in promotions, and purchasing, most respondents3 (61 to 81%) preferred using a browser to a native app.

In the days and months to come, it will become increasingly important for retailers to fuel this growth by creating seamless, user-friendly checkout processes that inspire trust and that make full use of all of the advantages the medium has to offer.

Let’s dive into some examples of mobile checkout processes and see what we can learn.

Let’s dive into some examples of mobile checkout processes.4

1. Include Only Vital Fields

We’ve all answered those dreaded questions, such as “How did you hear about us?” While they may serve the vendor, they do nothing for the buyer, who is offering up their hard-earned cash and deserves to call the shots here.

While these questions are annoying on a desktop, they can be fatal in mobile. Take these two examples:

Mobile checkout processes compared.5

On the left, the responsive mobile checkout6 process by Moby7 succeeds by reducing the fields to the bare essentials, condensing the entire process into one cohesive page.

On the right, Kay Jewelers8 shows how a simple experience can quickly become extraordinarily cumbersome. Three pages in total display unnecessary fields such as “Evening phone” and “Mobile phone,” while breaking fields apart — the “Address” field is given three imposing lines (instead of just one for a ZIP code), and the user is required to retype their email address.

2. Allow Checkout As A Guest

Providing an option to check out as a guest should be standard practice across media (although 24% of e-commerce websites9 don’t), and especially on mobile. A user is much less likely to complete an order if they have to go through the process of creating an account and confirming it. The statistics back this up, sometimes shockingly so. One major retailer reportedly saw a $300 million leap10 in sales by removing the “Register” button!

Burton's checkout process.11
Burton starts its checkout process by hedging its bet, giving the user all three options: “Sign in,” “Create an account” or “Checkout as a guest.” Larger view12.

3. Leverage Mobile UI Elements

Fandango has a fluid mobile checkout experience. One big reason why is that it leverages the advantages of the medium, often relying on touch controls, which a user is much more likely to use than typing.

Fandango’s desktop UI versus mobile UI.13
Fandango’s desktop UI versus mobile UI. Larger view14.

In Fandango15’s desktop UI (left), a user is prompted to select quantities using a typical drop-down menu. In the mobile UI (right), they are prompted to update quantities using increment selectors (with an option to type as well), which is speedier in that medium.

4. Remove Distractions, Not Content

Once a user is in the checkout process, they have obviously expressed a willingness to buy. Put another way, the website has switched from being a salesperson to being an order fulfillment center. With that in mind, remove anything that draws their attention anywhere other than the task at hand.

Conversions can rise in enclosed checkouts16, a tactic you may have noticed when purchasing from Amazon. With this technique, the vendor removes the standard header, including the menu links and search bar, which could drive the user elsewhere. A checkout page can be made especially simple on mobile.

Dillard’s checkout process.17
Once a user is in Dillard’s18 checkout process, their only escape is to tap the logo in the top-left corner.

Social media links in GNC’s shopping cart.19
Social media links, like these in GNC20’s shopping cart, should have no place in the process and could drive users away. Larger view21.

A content-rich checkout page might seem like a good idea, but it will distract the user from their purchasing decision.

This doesn’t mean we should remove all content. Mobile engagements typically last 80% as long as desktop ones, and that number is rising. Users might still have questions about shipping guidelines, delivery, terms and conditions and more. A good experience should give them the option to find answers.

Crate & Barrel’s mobile website.22
On Crate & Barrel’s mobile website23, standard questions are showcased at the bottom of the shopping cart page, enabling the customer to get answers without leaving the checkout funnel.

5. Show Progress

A user wants to know where they are, where they are going and how much longer until they’re done. Progress bars alleviate anxiety here.

Recent studies show that the majority24 of major e-tailers show a progress bar, although many implementations leave much to be desired.

Under Armour's mobile website.25
While Under Armour26’s mobile website leads users through the process with a simple, sensible progress bar, it would improve by describing the steps to come.

6. Build Lightweight

Above all, time is precious. 74% of mobile visitors27 will leave a website if it takes longer than five seconds to load. Users have come to complete an action, and they are already convinced that it’s the right thing to do, so it’s best to get out of their way.

Adhere to the “Seven Guidelines for Designing High-Performance Mobile User Experiences28.” And use a testing tool to optimize loading times; Mobitest by Akamai is my choice29.

Tom’s Shoes has a quick-loading checkout page.30
It’s not going to win any design awards, but Tom’s Shoes31 has a quick-loading, bare-bones checkout page that does the trick.

7. Provide Security Reassurances

One of the biggest reservations32 users have left about mobile e-commerce is security. To get over this hurdle, designers needn’t be subtle: provide as many reassurances as possible that the experience is secure, and drive the point home. This means using iconography, SSL certificates and dedicated callouts in copy.

1-800-Flowers.com33
1-800-Flowers.com34 actively reminds users of the security of their order using a variety of tactics.

8. Google Wallet, PayPal And Amazon Are Your Friends

Instead of forcing users to fumble through checkout forms and type their address, use a trusted service such as Google Wallet, PayPal and Amazon to get users two taps away from completing their payment. Their information will be automatically populated, and the process will be nearly complete.

Mobile e-commerce experiences on Shopify.35
No-frills mobile e-commerce experiences on Shopify.

Mobile e-commerce experiences on Shopify, like this one for DODOcase36, aren’t visually exciting, but that’s not the point. They hush any noise, while allowing users to quickly check out using trusted third-party applications.

9. Take Advantage Of Geolocation And One-Touch Calling

The Home Depot’s mobile website.37
The Home Depot38’s mobile website lets users pick up items in store and uses GPS to find the closest location and check inventory.

Use GPS information to easily point a user to a physical location, as an alternative to a Web conversion. By using a URL string like http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location39 on mobile, Google will automatically retrieve the nearest location and provide directions. Best Buy observed that 28% of users40 visiting its mobile platforms were using it to make an in-store purchase, making it a successful value proposition.

Also, use one-tap calling with the tel: protocol41 to enable users to call for support with one tap — a much easier experience than jotting down a phone number.

10. As Always, Test Across Systems And Setups

Mobile testing with the User Agent Switcher for Chrome.42
Mobile testing with the User Agent Switcher for Chrome. Larger view43.

Mobile testing can be difficult and time-intensive, but with the market split between an array of operating systems, prioritizing by market share44 and testing at multiple resolutions is important. Getting your hands on a phone for each OS is always best, but if that’s not possible, you can use a browser plugin named User Agent Switcher for Firefox45 and Chrome46. It can be an invaluable time-saver for testing, allowing you to bounce between different OS experiences on your desktop.

The other factor in the OS conversation is design. Many designers of mobile Web experiences make the mistake of borrowing interface elements from their OS of choice. For instance, a designer who uses an iOS device might adopt Apple’s button styles. While this would make sense in a native app, a mobile website is a cross-browser experience, and a native aesthetic will likely turn off users of other OS’ — or, even worse, might just plain look bad.

Conclusion

At long last, the promise of m-commerce is starting to be fulfilled. Never before has the gap between a good and bad mobile checkout experience affected revenue so much.

If retailers give the user a clear, focused, streamlined and lightweight path to making their purchase — while recognizing the advantages and limitations of a mobile experience outlined above — all parties will benefit.

(al)

Footnotes

  1. 1 http://www.internetretailer.com/2013/01/08/nearly-half-smartphone-owners-research-products-mobile
  2. 2 http://www.emarketer.com/Article/Record-Retail-Sales-on-Smartphones-Tablets-Take-Greater-Ecommerce-Share/1009595
  3. 3 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/d
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/03/under-armour-500.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/02/good-vs-bad-22.jpg
  6. 6 http://built.bymoby.com/mobile_checkout/
  7. 7 http://builtbymoby.com/
  8. 8 http://m.kay.com/en/kaystore
  9. 9 http://www.smashingmagazine.com/2012/09/04/the-state-of-e-commerce-checkout-design-2012/
  10. 10 http://www.uie.com/articles/three_hund_million_button
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/02/burton.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/02/burton.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2013/02/fandango1.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/02/fandango1.jpg
  15. 15 http://mobile.fandango.com/
  16. 16 http://econsultancy.com/us/blog/6623-why-you-should-enclose-the-checkout-process
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/03/dillards.jpg
  18. 18 http://m.dillards.com/search
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2013/02/gnc.jpg
  20. 20 http://m.gnc.com/aHR0cDovL3d3dy5nbmMuY29tL2hvbWUvaW5kZXguanNw
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2013/02/gnc.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2013/03/crate-and-barrel.jpg
  23. 23 http://m.crateandbarrel.com/
  24. 24 http://www.pitstopmedia.com/sem/checkout-progress-bar-survey
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2013/03/under-armour-screen.jpg
  26. 26 http://www.underarmour.com/shop/us/en/
  27. 27 http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/
  28. 28 http://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing-high-performance-mobile-user-experiences/
  29. 29 http://www.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2013/03/toms1.jpg
  31. 31 http://www.toms.com/
  32. 32 http://www.webcredible.co.uk/user-friendly-resources/white-papers/mCommerce-user-behaviour-report-2012.pdf
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2013/03/1800flowers-2.jpg
  34. 34 http://www.1800flowers.com
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2013/03/dodocase.jpg
  36. 36 http://www.dodocase.com/
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2013/03/homedepot.jpg
  38. 38 http://www.homedepot.com/
  39. 39 http://maps.google.com/maps?daddr=american+mattress&saddr=Current+Location
  40. 40 http://www.mobilemarketer.com/cms/news/commerce/5548.html
  41. 41 http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2013/02/useragentswitcher.jpg
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2013/03/useragentswitcher.jpg
  44. 44 http://stats.areppim.com/stats/stats_mobiosxtime.htm
  45. 45 https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
  46. 46 https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US

↑ Back to topShare on Twitter

Derek is a Partner and Creative Director at CLIQUE, a leading Chicago-based digital agency. He's helped over 200 companies get off the ground and worked on digital campaigns for some of the world's largest brands. He's passionate about entrepreneurship, mobile technology and music. You can follow him on twitter at @_dereknelson.

Advertising
  1. 1

    Man alive, Derek – these are some snazzy tips for us mobile checkout creators. In a nutshell you’ve nailed it, my friend.

    Though clearly companies have advantage in having proprietary code for mobile checkouts it’s a big shame there isn’t a standard framework for developing these things. It would be a huge shot in the arm for the etail industry at large, and ultimately for the customer.

    1
    • 2

      Dave: thanks for the comment, and totally agree. I think that responsive checkout process by Moby is actually a good starting point from a front-end, but overall, these processes are all over the place and in need of some standardization.

      A big variable that makes them so scattershot is the amount of information a retailer can require. The bigger and more trusted the store, the more likely the buyer is to complete a longer checkout process. For example, Amazon has an 8-step process that I can’t imagine many people would fill out if it was for a local book store they’ve never heard of. But Amazon can get away with it, because they’re Amazon. Many other large retailers follow suit, making it a lot more difficult to find a one-sized model.

      1
  2. 3

    Great info. It seems many local newspapers are making you create logins…not exactly e-commerce, but I dont read their articles anymore. I’ll find the news without the extra steps. Also, we need a mobile solution with a universal login that auto populates name/address and credit card info. Would be nice to go to any website, click on a product, and instantly “checkout”.

    0
  3. 4

    Just one of many articles I have read on mobile checkout forms, somehow I just can’t stop gazing at all the small differences in design choices. Thanks for the helpful post!

    I’d like to see a more indepth analysis of feedback when adding something to your shoppingcart and the step after, on mobile. In many cases I find them quite confusing. Sometimes it takes me to a new screen to select a quantity, with the option to checkout right away, then sometimes I have to press an “add” button again to actually add it to the cart. Often it’s not clear to me if I can just press back and go back to shopping for other items (did I indeed add it to my shoppingcart?). Does anyone else have trouble with this?

    0
    • 5

      Thanks, Harry. I’m aiming to do some in-depth looks on m-commerce homepages, product pages, and shopping cart page UI’s in the future. To be continued…

      1
      • 6

        Hi Derek, Thanks for this great post. The worst is to explain it to customers, they cannot understand why their website should look different on mobile:)
        And yes, please make the research and analyse the product page, would be great to follow your advice. xx, Anita

        0
  4. 7

    So Derek, would it be preferrable to have a streamlined extra long page single page checkout (if you have more than the # of fields required in comparison to your example from Moby), or a 3 step short page checkout? I am not sure which would win in the case of say, a furniture/home decor retailer where the value of the purchase is much higher than say a clothing retailer. Thoughts?

    I also didn’t see a mention of the basket page, would you consider that not at all part of the checkout, considering that’s where most checkouts begin is the basket review?

    Thanks again for the great article!

    0
    • 8

      Lea,

      Thanks for the question. An interesting fact is that the # of steps is a checkout isn’t actually affecting usability too much (the Baymard folks have a lot of great stuff on this topic). Like any UX question, it all comes down to perfect execution, trust, and how reasonable your requests of a user are. A good middle ground for your situation may be an accordion-style checkout, which isn’t fool-proof, but if executed well can be a great solution.

      0
  5. 9

    My company’s checkout routine is fully responsive as well. It even changes the form fields based on what country you are from since many cultures have different ways of formatting things like addresses.

    For how big ecommerce is, it amazes me how piss poor so many online checkout routines are.

    0
  6. 10

    The responsive mobile checkout is awesome…wonderful!

    Thank’s so much for writing post like this.

    0
  7. 11

    Carissa Ganelli

    March 14, 2013 2:19 pm

    Hi Derek,

    Thanks for this. We’ve built in most of these to LightningBuy our single click mobile checkout product. We’ll be waiting a long time for merchants to adopt these best practices. After all, PayPal has been around for how many years and only a fraction of merchants accept it. Amazon 1-Click has been around for over 13 years and there are very few merchants who come close to having something like it (I know Amazon has the patent but very few merchants have a 2-click or 3-click checkout process). So, instead of waiting for merchants to do this themselves, we built LightningBuy as a single click mobile checkout that bypasses their cumbersome mobile shopping carts. Merchants can plug in LightningBuy and reduce their long carts to a single click. Something else to add to your list is to change the default keyboard to match they type of characters required. For example, when asking the user to enter their zip code, the default keyboard should be numbers NOT letters. Same for telephone and credit/debit card number. You’d be amazed how many carts automatically default to the alphabet keyboard even when asking the user to enter in numbers.

    0
  8. 12

    NIce, no bs no cruft the examples provide a clear path to conversion

    0
  9. 13

    Thanks for featuring our work as an example. Really great to do my daily bookmark reading and find a mention :)

    0
  10. 14

    Great article. Just what I was looking for. In the process of converting our current website to fully responsive and haven’t had experience in m-commerce. Thanks for the tips! :)

    0
  11. 15

    Great article with fabulous points. I agree with the points about signing up for checking out – can drastically reduce the nuber of checkout process complete. Can’t tell you how many times I’ve dropped out of a checkout because of it. This doesn’t only happen in e-commerce, unfortunately. I’ve also seen with our product at WalkMe that a progress bar is so useful and taken well by users. I, myself, always like to see where in the process I am standing. Thanks for this wonderful resource!

    0
  12. 16

    One of the biggest issues is 3D Secure integration, it totally wrecks the experience, and is based around crappy old tech (iframes).

    Having implemented mobile checkouts for enterprise clients, this always comes up. Visa etc, need to pull their fingers out on this one.

    http://en.wikipedia.org/wiki/3-D_Secure

    0
  13. 18

    Michael J. Williem

    March 19, 2013 6:32 pm

    This is one of the best mobile tips around the web for both developers and web owner! Nicely Done!

    0
  14. 20

    Whilst these are all good points. Not many of them apply specifically to mobile (only 3 and 9). They are general good practise for checkout design.

    Also by using custom mobile UI elements you lose things like the default iPhone scroll wheel, which is already well optimised.

    0
    • 21

      Appreciate the comment. I’d agree with your first point to an extent. Overall, good experience design is good experience design, and wanted to make sure that no mobile designers lose sight of the foundational elements here.

      To your second point: I don’t see custom and native UI elements as mutually exclusive, and I think designers can sometimes even combine them for the best interface. On an example like Fandago, you’re giving the user the power to choose their path: if they select the quantity box itself, it can open up a scrollwheel or just a text box, or they can use the “+” and “-” if they’d like to go that route.

      0
  15. 22

    Nice Article!

    0
  16. 23

    creativePUNDITS

    April 9, 2013 12:01 am

    If i would say pro active step regarding mobile checkout process. I think and feel that people don’t want to register in the product website through mobile. Can we make it possible direct paying system. I hope it would be easy and direct selling point. Either website can make another functions that they can detect user mobile number and name from ISP. I don’t think any website is doing this. This is great idea and which i am sharing with you.

    I would like to hear from all technical experts about this.

    0
  17. 24

    Excellent article. Can you point me to any research on optimizing the checkout process for tablets?

    0
  18. 25

    I question whether responsive is the best solution when it comes to creating an e-commerce checkout that needs work effectively on desktop, tablet and mobile.

    In my experience a successful mobile checkout journey needs to significantly different to the desktop/tablet version. Trying to do this within a responsive framework can be limiting, resulting in a compromised solution.

    0
  19. 26

    Great article! Mobile ecomm has definitely changed in the last 12-18 months as folks have really started to interact and (most importantly) transact via their mobile devices.

    To put in context how much higher the bar is being set these days, I just read a study by Kentico Software in which 85% of shoppers use their mobile device to comparison shop, but that 44% percent of shoppers won’t return to a site if it’s not mobile friendly. This of course needs to play out not only in the checkout process, but the discovery of content throughout the experience.

    The digital firm I’m at, COPIOUS here in Portland, OR works with clients in a bunch of market verticals but it’s honestly been most challenging in the ecomm space due to the level of complexity in the delivery of content and variety of viewports out there. That, and performance concerns around database-driven sites are magnified by many ecomm platforms out there. Food for thought….

    0
  20. 27

    Just dropped in to say fantastic article, very good read.

    0
  21. 28

    Great guidelines! Thanks!

    0
  22. 29

    Brilliant, brilliant, brilliant. I was just finalising a checkout option for my website and I’m happy this article reached me before it went live. Great advice here – this is why I love Stripe. It’s easily the best checkout option, but I wanted a custom design and decided to follow in Stripe’s footsteps with how to go about it, and also a few tips from this article.

    Nice job.

    0
  23. 30

    I agree that sites should streamline from desktop to mobile… however, I actually believe that mobile and desktop should be the same experience. Why offer something on desktop and remove it from mobile. If you would eliminate it for your mobile version, perhaps you should ask yourself why you have it on the desktop version. Now days people use mobile far more than any other device. This suggests that a large section of your users will come to your site mobile first…so…if something is not available on the mobile device, then the assumption becomes that you don’t have/support it period.

    just thoughts…

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top