Mobile-First eCommerce: What Customers Expect and Value in Mobile Shopping Experiences

February 22, 2016

Increasing conversion rates from mobile devices such as smartphones and tablets is a key goal of every ecommerce company. In 2015, the shopping-cart abandonment rate reached an all-time high of 70%, and it’s climbing. Since Morgan Stanley’s research suggests that 91% percent of adults use smartphones, why are only 14% of those consumers buying products online using their mobile device?

Yes, people tend to browse on their mobile device, then move to their personal computer to shop online. But people tend to do this primarily because of poor usability and the lack of affordance on smaller devices. Shopping-cart abandonment can be reduced on smartphones and tablets. However, many companies struggle with delivering a seamless browse-to-buy experience on mobile devices.

Shopping-cart abandonment—the loss of a customer who was going through an ecommerce site’s check-out flow—is widespread. A Forrester study found that 89% of consumers had abandoned a shopping cart at least once. Researchers attributed that high rate of abandonment to user sophistication: as shoppers become more experienced with online shopping, they are more likely to compare brand experiences online.

Champion Advertisement

Interestingly, the most popular time for customers to purchase products online is on weekdays between 12 noon and 2pm and on Sunday evenings.

Black-Friday Mobile Insights

On Black Friday in 2015:

There was an increase in mobile traffic versus desktop traffic. In 2015, for the first time, mobile-device traffic hit 55%, overtaking desktop traffic. Traffic from smartphone devices was higher than from tablets, showing the importance of user experience for small, hand-held devices.
There was an increase in mobile conversions online. Orders that shoppers placed online using mobile devices contributed to 36.2% of online sales—up by 6.89% from the prior year. This shows that people are not just browsing, but increasingly, also buying products on a hand-held device.
Apple phones dominated mobile commerce. Forecasts show that shoppers will place 77.6% of all the orders they place on mobile devices on Apple devices. Etailers need to consider building iOS apps to keep consumers interested and increase online conversions.
There has been an increase in PayPal payments on mobile devices. There was a 56% increase in PayPal payments for online purchases in 2015. This shows that we need to prioritize the customer journey for PayPal payments on hand-held devices.

Design Best Practices for Conversions

Here are some design best practices for improving conversions on mobile devices and across channels.

Cross-Channel Consistency

Though guidelines recommend design consistency across devices, do smartphones and other mobile devices really need a mini-cart? The Web sites with the highest conversion rates take users directly from product details to the shopping cart. Your goal is to offer efficiency and enough information to make customers want to move forward. For example:

cross-device and cross-browser consistency—The shopping-cart user experience encompasses the user’s perceptions and feelings before, during, and after their interaction using a mobile device. A user who is signed in and has saved items to their shopping cart on one device should be able to see them on another device or in another browser. Unfortunately, on some Web sites, when customers add products to their cart after signing in, they do not appear in their cart across devices. It’s important to correct this problem because it potentially decreases online conversions. Surprisingly, more than 60% of the clients I have worked with did not transfer the contents of the cart across browsers and devices.
stock reservations—Mobile best practices indicate that etailers should inform users of the stock-reservation period for items in their cart or how much time remains before they must buy a product. This usually takes the form of a counter that informs users of the time remaining until checkout. As shown in Figure 1, ASOS fulfills this requirement for desktop browsers, but stock reservations do not persist across devices. As Figure 2 shows, ASOS does not provide this useful information on mobile devices.

Figure 1—Stock reservation on the ASOS desktop Web site

Figure 2—The stock reservation does not appear on mobile devices

Efficiency and Ease of Use

Efficiency and ease of use are key for a checkout experience on a mobile device. Best practices include the following:

minimizing the number of form fields—Usability tests show that having a single-page checkout flow versus a multiple-page flow doesn’t make a difference to conversions. However, reducing the number of fields in a form does increase conversions. A case study by Imaginary Landscape shows that, when they replaced an eleven-field version of a form with a four-field version, there was a 160% increase in the number of forms submitted and a 120% increase in conversions. Start by getting rid of all optional fields.
promotions within the shopping cart—Currently, about 32% of people browsing an ecommerce Web site abandon the shopping cart, failing to complete their purchase. Decluttering the shopping-cart page by reducing the amount of information on it can help solve this problem. For example, provide a Promotions text box only when a promotion is actually running. Guide users to the place where they can obtain their promotion code—whether an email message or an advertisement. The interactive promotions section on the shopping-cart page should be contextual, allowing users to interact with it only when a promotion is currently running. Unfortunately, most Web sites do not do this.
mobile behavior and Amazon checkout—Interestingly, 50% of people on a mobile device abandon their shopping cart, showing that the cart’s usability and interaction design need attention. About 46% of people on a mobile device proceed to sign in. One of my clients, AllSaints, have implemented Amazon Login, shown in Figure 3, which lets users check out using their Amazon account and payment details. This saves customers time and has increased the company’s conversion rate by 34%. On average, users are now able to buy a product online within 30 seconds—in comparison to 1.3 minutes prior to their implementing Amazon Login. Web sites should display plugins containing such primary actions above the fold on mobile devices. Williams Sonoma also provide a quick way to check out, using VISA Checkout, shown in Figure 4, which increases user efficiency and control. Customers create an account once, then, wherever they use VISA Checkout, they never have to re-enter their credit card or address information. Prospects and customers speed through checkout using a single sign-in.

Figure 3—Using Amazon to sign in and check out

Persuasion

Persuasion is a key factor in the shopping cart. Some related best practices include the following:

returns and delivery—Highlight your returns policy and free delivery offers to encourage users to check out. Some retailers provide an intelligent marketing message, encouraging visitors to consider spending a bit more to benefit from the free-delivery option, as shown in Figure 5.
account sign in—Promote signing in to returning customers. Some retailers display a small message, encouraging returning customers to sign in to their account. This is especially helpful when a site stores customers’ shopping-cart contents in their account rather than simply using a cookie.

Figure 5—Persuasive content that increases engagement online

social proof—eBay informs users of the number of items already sold, as shown in Figure 6, increasing urgency and persuasion. Strangely, this experience is not consistent across devices. These enticers appear only on the desktop, not on the mobile device shown in Figure 7 or on a tablet. Seeing the number of purchases increases motivation because people tend to follow others’ lead, so social proof should appear across devices.

Figure 6—eBay’s desktop Web experience, showing social proof

Figure 7—eBay’s mobile site lacks social proof

Security and Trust

Highlight security measures and the available payment options. This increases visitors’ confidence in proceeding to checkout, while strengthening their intent to complete their purchase. To build trust, follow these best practices:

primary calls to action—Duplicate the Secure Checkout call to action if the page content extends below the fold. Users are likely to abandon their cart if they do not see the Checkout call to action once they scroll down the page.
security seals—Baymard conducted a survey on site-security seals with a large sample size—2,510 responses—testing up-to-date versions of eight of the most popular site seals. The results showed that Norton is the seal that engenders the most trust in customers purchasing online.
trust—To build trust, use the label Secure Checkout or Pay Securely Now on call-to-action buttons. Also, place the checkout button both above and below the shopping-cart contents. Placing this button both above and below the fold encourages visitors to check out. One of my clients increased their mobile conversions by 1.38% by placing their Check Out button both above and below the fold on their shopping-cart page.

Transparency

Before customers move into the checkout flow, the shopping cart should address issues of transparency around delivery details, methods, and costs, as follows:

costs—There should be no ambiguity about standard delivery costs. Visitors should not need to wait to know what the delivery costs are until they’re checking out. A lack of clarity about delivery costs continues to be one of the key reasons why visitors abandon the checkout process. A key challenge for most of my clients is the service tax, which a site can quote only after a customer has specified a delivery address—because the amount of the tax depends on that address. Some Web sites such as Selfridges do not provide the amounts of taxes on the shopping-cart page, but instead alert customers that the total is approximate until the customer provides delivery details, as shown in Figure 8. Some other Web sites—for example, Michael Kors, shown in Figure 9—do provide the tax charges on the shopping-cart page. If the taxes are going to change based on the shipping address that a customer provides within the checkout flow, a company should mention that the tax is an estimated amount. Otherwise, if the tax amount changes during checkout, this might be confusing to customers and damage trust.

Figure 8—No tax description before checkout on Selfridges

Figure 9—Tax description before checkout on Michael Kors

delivery options—Allowing visitors to choose alternative delivery options from a drop-down list, as in the Michael Kors example shown in Figure 9, helps to encourage some visitors to consider upgrading to a what may be a more useful delivery option, which is potentially more profitable for the retailer.

Flexibility

Some ways in which you can provide flexibility to customers include the following:

shipping a single order to multiple locations—A customer should be able to ship parts of a single order to multiple locations. Williams Sonoma lets customers do this, providing users with flexibility and control.
wish lists—Give customers the flexibility to edit their shopping cart and save selected products for later purchase rather than making customers buy them immediately. Shoppers should be able to save products in their shopping cart or add products to a wish list. Many people use a shopping cart as a glorified wish list, saving things for later purchase. Optionally, let shoppers add products to a wish list for future purchase. Most ecommerce Web sites now provide this flexibility. Top Shop and ASOS do this particularly well, as shown in Figures 10 and 11.

Save Item for Later on Top Shop — Figure 10—**Save Item for Later** on Top Shop

Save for Later on ASOS — Figure 11—**Save for Later** on ASOS

premium account service—Retailers like Shop Your Way and Williams Sonoma have implemented premium services to improve efficiency and benefit customers by letting them quickly purchase products online and get speedy delivery service. For example, customers can use the Williams Sonoma Advantage Card to receive the VIP treatment when shopping, as shown in Figure 12.

Figure 12—Williams Sonoma’s Advantage Card

Bridging Physical and Digital Shopping

Customers need a connected user experience across channels, bridging retail stores and the online-shopping world. Shoppers like to browse online, then shop at a store and vice versa. Here’s one way of doing this:

barcode scanning—An easy to use, business-to-business ecommerce app, Netalogue lets customers browse and purchase products using their mobile device or tablet. Shoppers can scan barcodes using their device’s camera, and the app identifies the product and lets them buy it. We need to see more retailers adopting this feature. Customers can compare prices and make purchases whether in a stores or at home. Shoppers simply point their device’s camera at an item, and the scanner overlays pricing, availability, reviews, media content, or other information directly on top of the item, and lets them immediately buy the product. Amazon leads the pack in product-image recognition and the ability to buy products using a mobile device while at a retail store.

Figure 13—Shopping with a mobile device while at a retail store

Figure 14—Video showing the use of a mobile device to buy products while at a retail store

Conclusion

A site’s checkout experience should be transparent, providing the right imagery to build trust and persuade customers to move forward and complete their purchases online. In this article, I’ve recommended best practices that showcase how you can increase conversions on ecommerce sites and mobile apps.

In Mobile UX Design | Web Site Design

Mobile-First eCommerce: What Customers Expect and Value in Mobile Shopping Experiences

Black-Friday Mobile Insights

Design Best Practices for Conversions

Cross-Channel Consistency

Efficiency and Ease of Use

Persuasion

Security and Trust

Transparency

Flexibility

Bridging Physical and Digital Shopping

Conclusion

No Comments

Join the Discussion

Afshan Kirmani

Other Articles by Afshan Kirmani

Other Articles on Mobile UX Design

New on UXmatters