How to Design a Better Mobile Checkout

By Jessica Ann
June 26, 2014

We’re no longer shopping by walking the aisles and lining up at a register. Instead we’re shopping through our mobile devices. Mobile e-commerce increased by 81% in 2012, bringing in $25 billion. As we look to the web design trends for the rest of the year, it’s more important than ever to think about how to design a better mobile checkout.


The best way to maintain that kind of growth is to make the experience as friction-free as possible. People shopping in a store will get frustrated and impatient if made to wait in long lines or if it’s difficult to get their questions answered. Just as some brick-and-mortar stores get a reputation for a top-notch shopping experience, an online shopping provider can build a reputation for easy checkout.

Here are some ways to improve the mobile checkout experience and increase the chances your customers will complete the process:

Mobile E-commerce is Increasing

The first step to improving checkout experience is to fully appreciate the situation. Mobile commerce is expected to reach more than $86 billion by 2016. That’s 24% of all retail e-commerce, and the growth will likely continue.

The popularity of tablets undoubtedly contributes to the increase in mobile checkouts, with $24 billion spent from the large-screen mobile devices in 2013. With smartphones having lost their early lead, designers have to keep in mind the rise of tablets as the dominant mobile checkout use case.

Simplify the Process

When someone has decided to buy something online, they have already overcome all sorts of obstacles. It takes a leap of faith for many to even consider offering their credit card information over the Internet. And then there’s the chance what they’re buying won’t look as perfect for them as it did on the website (or the model, for that matter). So once they have committed to a purchase by heading to your checkout page, the process should be as barebones as possible.

Screen Shot 2014-06-26 at 10.06.05 AM

Don’t ask unnecessary questions, offer annoying up-sells or opt customers into mailing lists. Remember, they’re on a smartphone or a tablet. That means screen real estate is precious. And their attention cannot be lost in frivolous requests. You’ll need to ask for their name, shipping and payment information. Anything else will take up space and frustrate your customer. The worst sin of mobile checkout design is unnecessarily complicating the process. So, include no more that what’s needed to complete the purchase.

Be Our Guest

The only thing worse than making someone fill in unnecessary fields to complete a purchase on a mobile device is requiring them to make a profile with your site. Don’t require account creation in your checkout process. It’s like requiring people in a physical store to take out a loyalty card just to complete their purchase. Many customers don’t want to be bothered, and will go to another store if you keep making these types of demands. Your customers want to buy things as quickly and with as little interference as possible.

Design your mobile checkout experience like you would a physical store. Make the default user a guest, and provide a link somewhere to create an account for those interested. But don’t require anything at checkout except what you need to charge and ship.

Moving Along

The best mobile checkout experience will require one simple page of information and show a big, bright “Purchase” button at the bottom. Compare the Moby and Kay Jewelers checkout pages pictured in this article. The longer the page, the more likely the process will hit a snag. There is always the chance of customer fatigue (“Why do they need all of this?!”), typos and second-guessing the purchase price. By the time they are checking out, customers are eager to give you money, so make it as simple as possible.

If you need more than one page to complete the purchase, provide a clear indication of how far along the process is at each new page. Also offer the ability to move backward as well as forward. This assures the customer they are nearing a successful purchase, and gives them a chance to correct any errors they may have made in a previous screen and maximizes their sense of control.

If you’re aiming to design a better mobile checkout, keep the above ideas in mind during the design process. It will produce the best possible mobile experience for your customers, and will future-proof your design as mobile commerce continues to grow in the coming years.

This entry was posted on Thursday, June 26th, 2014 at 11:19 am and is filed under Products, Small Business, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply