- By offering native shopping for social and mobile, MVMT Watches 2X mobile conversions on Shopify Plus; will hit $100 million in 2018
- Six months after developing an omni-channel solution, using mobile-integrated smart dressing rooms, Rebecca Minkoff grew sales 6-7X
- Within two months of its mobile relaunch, Merchology grew mobile conversions 40%, revenue per device 340% YOY
Despite its promise, mobile commerce can be a frustrating and painful experience … for consumers and businesses alike. Why? Two reasons:
- Mobile-friendly sites are all but universal
- Mobile-friendly isn’t enough to capture mobile sales
On one hand, of all the things people did on their phones last year, mobile shopping was the fastest growing segment — up 54% YOY.
On the other, during 2017’s online holiday shopping season, desktop accounted for 44% of all traffic but still commanded 61% of sales, according to Adobe Digital Insights.
In other words, mobile browsing does not equal mobile buying … except on Shopify.
Over Black Friday Cyber Monday 2017, Shopify saw mobile account for 64% of all sales, an increase of 10% year-over-year.
What explains this difference?
To find out, we dug through the latest reports, industry-wide statistics, proprietary data, and three case studies on businesses dominating mobile. What we unearthed are …
10 trends already shaping the future of mobile commerce
- Start with Commerce, Not Mobile Design Trends
- Connect Social Marketing with Social Selling
- Anticipate Omni-Channel Mobile Shoppers
- Offer Native Mobile Ecommerce Checkouts
- Use Progressive Enhancement as Your Backbone
- Create Mobile-Only Personalized Experiences
- Leverage Mobile Chatbots for Abandoned Carts
- Tune-Up for Fast Mobile Page Speeds
- Factor in Local Search Behaviors
- Don’t Forget About Mobile Accessibility
1. Start with Commerce, Not Mobile Design Trends
First things first, “responsive design is not mobile optimization.” That was the thesis — and headline — of Shanelle Mullin’s masterful 2017 article on ConversionXL. Within the piece, Talia Wolf offered this distinction:
“Though responsive design is much better than having to ‘pinch-and-zoom’, it isn’t an optimized experience for mobile visitors.
“At its core, responsive design makes the desktop experience look good on mobile, but it doesn’t address the specific needs of mobile visitors.”
In the case of ecommerce, a caveat is in order. While the “needs of mobile visitors” must certainly be respected, what matters is marrying their needs with your own. Afterall, a delightful user experience (UX) is worthless if it doesn’t culminate in sales.
At the enterprise level, it’s easy to get seduced by mobile design trends, instead of investing in proven optimization tactics. How can you unearth the difference?
You start with what the very best are already doing right.
On this front, perhaps the best summary of the industry’s current best practices is Inflow’s Best In Class Ecommerce Mobile Report, which includes a downloadable matrix of the top ecommerce brands and how they stack up across a host of mobile design and optimization criteria:
Chief among their insights are two tips … a don’t and a do.
Don’t use hero slider images:
“Long despised by CROs everywhere, it looks like the rotating hero slider is finally going away. This year’s list sees only 2 sites still rotating the hero banner, down from 7 last year.”
Do use a top navigation menu:
“Having a top nav on mobile is something only a few innovative sites are doing. … The Inflow conversion team has tested this all last year and it has yet to not work.”
Merchant Spotlight: Merchology
Corporate branded apparel and accessories provider, Merchology, learned via its analytics data that the majority of its mobile site visitors weren’t converting. The company needed to quickly re-design its ecommerce site in to offer a mobile-first customer experience that would make checking out on a mobile device easier.
“Wouldn’t it be great if ordering from a mobile device was just as fast and easy as ordering from a desktop or tablet?” said VP of Marketing, Nolan Goodman before redesigning the Merchology site.
Merchology’s team discovered that users were switching from mobile to check out on their desktop. The company used the data to build a case to fix its mobile-first site design.
Two months after launching the redesigned mobile site, which offered a simplified and automated checkout experience thanks to Shopify Scripts, Merchology achieved astounding results:
- 340% YoY lift in revenue per mobile device
- 40% increase in their mobile conversion rates
The Scripts that helped to power Merchology’s native mobile checkout powerhouse include:
1. Automated Discounts
Individual product discounts are applied automatically, enabling customers to immediately see the discounts they’ve earned in their carts.
2. Dynamic Pricing
To reduce the number of steps to checkout, Merchology created its own custom code with Scripts which:
- Looks inside a customer’s cart
- Identifies when they’ve made a change
- Automatically adjusts the price in real-time
“Simplicity drives sales regardless of device,” says Nolan Goodman, VP Marketing at Merchology. “We’ve made it simple to order and checkout regardless of whether a customer is using a desktop computer, tablet, or mobile device.”
2. Connect Social Marketing with Social Selling
According to Mary Meeker, the average digital adult spends 5.9 hours a day on their mobile devices. And the majority of internet users access social networks on their smartphones or tablets. In addition, 55% of consumers have bought something online after discovering it on social media.
That’s why you must invest in a social promotion and advertising strategy to increase mobile traffic and conversions on your native social selling channels like:
Merchant Spotlight: MVMT Watches
Shopify Plus customer MVMT Watches already had a mobile-first designed ecommerce site when it launched a Facebook Shop in 2014 – around the time that mobile usage surpassed desktop users for the first time. That’s when the company saw its mobile usage increase to 60% almost overnight.
The MVMT team wanted to “cut out steps in the purchasing process” and make it easier for social media users to buy directly via their favorite social networks.
Over the past three years, MVMT Watches has scaled past $60 million in annual revenue and is on track to generate $100 million in 2018.
But MVMT couldn’t have achieved these results without a mobile-commerce approaching to advertising. In fact, their success on Facebook, Instagram, and Pinterest earned the company official case studies on all three platforms.
Are you selling everywhere your customers buy?
Keep reading to discover more about the future of mobile commerce. But if you’d like an executive overview of multi-channel ecommerce, download The Enterprise Guide to Multi-Channel Ecommerce.
Inside, you’ll get one-pagers detailing …
- Comprehensive data on the opportunities and threats
- Business spotlights for insights on top channels
- Checklist for selecting the right multi-channel platform
“When people see something they love they want to buy it immediately," says Spencer Stumbaugh, VP of Marketing at MVMT Watches. "It’s easy to get lost on a website. So we started thinking about how to make commerce easier for social media users.”
3. Anticipate Omni-Channel Mobile Shoppers
Strange as it sounds, a sub-par mobile ecommerce experience could deter customers from purchases — even when those customers are shopping in a store.
A new Forrester Research report reveals that “smartphones will impact [via internet research] 34% of total U.S. retail sales in 2018, which is more than $1 trillion. By 2022, the research firm estimates smartphones will impact 42% of total retail sales.”
Likewise, the Harvard Business Review found in an exhaustive study of 46,000 shoppers:
Only 7% were online-only shoppers and 20% were store-only shoppers. The remaining majority, or 73%, used multiple channels during their shopping journey. We call them omnichannel customers.
Even more to the point, HBR noticed a trend:
“Our findings showed that omnichannel customers loved using the retailer’s touchpoints, in all sorts of combinations and places. Not only did they use smartphone apps to compare prices or download a coupon, but they were also avid users of in-store digital tools such as an interactive catalog, a price-checker, or a tablet.”
Mobile commerce lies at the heart of an omni-channel retail strategy.
For instance, Upstream Commerce Retail Intelligence found that “88% of shoppers say that they prefer to ‘webroom’ or research purchases online and then buy them in-store.” The main reasons for this online-to-offline behavior were to “find the lowest price” and “compare product” features.
Alternatively, “76% of shoppers say they regularly research products in a brick-and-mortar store before ultimately buying online.” The top reasons for offline-to-online were to “find the lowest price” and to “avoid a checkout line.”
Regardless of the direction your customers move in, bear in mind that 60% of internet users “start shopping on one device but continue or finish on a different one, and 82% of smartphone users say they consult their phones on purchases they're about to make in a store.”
Aligning your in-store experience with mobile shopping, whether you follow the examples of outstanding omni-channel brands or go the way of stand-alone pop-up shops, is critical. Using QR codes, mobile-specific comparison pages, geo-fenced SMS coupons, and prioritizing FAQs on mobile are just some of the methods both large and medium organizations are doing this.
Many are also turning to mobile-enabled in-store checkouts and mobile wallets.
Long lines in-store can be a major drag. Mobile point of sale (POS) devices — like PayPal, Square, and Shopify POS — offer an easy-to-use and cost-effective solution.
In the case of mobile wallets, the big three (Apple, Google, Samsung) all use NFC (near-field communication technology for making payments. It works by simply tapping your NFC-ready phone on NFC enabled payment terminals.
From an ease and cost perspective, there are no clear-cut answers. For NFC, you’ll need to get new terminals to have support as well. In most cases, the price of the terminal stays the same or you pay a premium that is ~$50. Bulk pricing also brings down costs.
So far, these omni-channel strategies have revolved around in-store applications. The demand to merge retail and mobile, however, also extends to before your customers step inside.
Merchant Spotlight: Rebecca Minkoff
By using data-driven omni-channel touchpoints, like smart fitting rooms, customers can:
- Try on clothes in-store
- Add items to their virtual cart via their smartphones
- Find sizes and variants (like color) not available in-store
- Execute mixed physical-and-digital purchases
By harnessing the data collected within its smart stores, and connecting it to additional customer devices and touchpoints, like their website, Minkoff increased sales by 6-7X within the first five months of launching.
With additional direct SMS marketing, smart store shoppers can sign-up for text message alerts, linking their phone number directly to their online profile (typically enabled by email alone).
Along with POS integrations and multi-channel listings, Minkoff provides a consistent customer experience to each user.
“The new definition for luxury is being able to be empowered to select the service level that she wants, when she wants, on the device that she wants,” says Emily Culp, SVP of Commerce and Omni-Channel Marketing at Rebecca Minkoff.
4. Offer Native Mobile Ecommerce Checkouts
Not to be melodramatic, but mobile ecommerce lies or dies at the checkout. If only a small percentage of your online sales are coming from mobile users, you may need to refine your checkout process.
By following the golden rule: less is more.
As far back as 2012, Econsultancy advised merchants “to make the purchase journey as short as possible.” Today, that principle is even more foundational: fewer clicks, fewer screens, fewer fields, fewer taps, clicks, and swipes all add up to one thing: more customers.
Here’s where we turn to a few in-house advantages on Shopify Plus.
Ideally, once a user enters your mobile-checkout process, they should be presented with mobile-first payment options that enable them to purchase in a single click. On Shopify Plus, you can do this through:
- Shopify Pay
- Apple Pay
- Android Pay
- Amazon Pay
Offering all five at once can be overwhelming. For first-time customers, include only those options that are most popular among your existing customer-base.
This doesn’t mean you should skip traditional logins and credit cards, as long as those methods have proven themselves as attractive to mobile shoppers:
Shopify Pay is another competitive advantage. During Black Friday Cyber Monday, over 400,000 people spent over $30 million 3X faster using Shopify Pay.
Shopify Scripts — which lets you customize and personalize the entire cart-to-checkout process — can be used to show, hide, reorder, or rename payment methods during the checkout based on products in the cart, customer group or tag, a customer’s shipping address, or their device type:
Lastly, Shopify announced a new, accelerated Dynamic Checkout flow this past April which offers your mobile customers the ability to check out single products directly on a product page using their preferred payment method or wallet.
Some of the key benefits of installing a dynamic checkout button include:
- Accelerating mobile conversions by reducing the number of steps to complete a purchase
- Delivering a personalized mobile checkout experience by serving up your customer’s preferred payment method or wallet
- Capturing customer intent earlier with a custom checkout button which appears directly on the product page and circumvents the need to add a product to cart first
Supported accelerated payment methods include:
- Apple Pay
- Shopify Pay
- Google Pay (soon to be added)
For details on how to show a dynamic checkout on your Shopify Plus store, refer to the overview on the Shopify Help Center.
5. Use Progressive Enhancement as Your Backbone
Mobile design is achieved through two main paths.
Along the first, you start with a full-screen desktop experience and trim down for screen sizes through a process known as graceful degradation. Along the second, you begin with the smallest, most foundational elements of your UX and work your way up.
As Tse explains:
“Progressive enhancement is a development approach, not a technology choice. You [or your] developer, decide on a base level of user experience for your site or application, and more advanced functionality is added if a browser supports it.”
For a detailed examination of progressive enhancement, take a look at What is Progressive Enhancement and Why Should You Care?
A better end-user experience significantly impacts mobile usability, but progressive enhancement can dramatically impact the next best practice as well.
6. Create Mobile-Only Personalized Experiences
The mobile web is both a blessing and a curse for ecommerce merchants. Users have short attention spans and are easily distracted by text messages and social media notifications — or whatever hilarious thing the barista just said in their favorite coffee shop.
To stand out, create personalized user experiences that help keep their attention long enough to convert them into buyers.
Optimize Page Layouts For Traffic Sources
On a mobile device, you need to help customers find exactly what they’re seeking in just a few seconds — while using less real estate than on a desktop to make your sales pitch.
Personalizing product recommendations based on the traffic source of new visitors is a smart strategy.
If a user arrived on your homepage after a search for hockey equipment, consider moving product recommendations for hockey players higher above the fold to help with relevant product discovery.
When visitors enter your URL directly or arrive at your site via a generic search, you can use Tinder-style product discovery widgets on your homepage to quickly introduce users to popular products.
Personalize Free Shipping Messages for a Visitor’s Location
A simple, yet emotionally impactful way to personalize a user’s experience on your site is by identifying their IP address to deliver custom free shipping offers.
For example, when a user adds items to their cart on your site, a message can dynamically adapt to reflect the value of items relative to the free-shipping threshold.
If the first message displays “FREE SHIPPING to TORONTO with a $50 purchase” and a user adds a $25 product to the cart, it’ll change to “YOU’RE $25 AWAY FROM FREE SHIPPING” to encourage users to buy more.
Personalize Promotions Based On a User’s Device
There’s a lot that you can glean from identifying the type of device from which a user is visiting your site. For example, data from Black Friday 2016 revealed that iOS users for a large outdoor merchant’s site spent about $110 on average while Android shoppers had an AOV of around $85.
In this case, the merchant could display a 20% off coupon, via a page curl notification (see image below), for orders larger than $100 for Android users while that same 20% off promotion could be applied to more expensive items for iOS users.
7. Leverage Mobile Chatbots for Abandoned Carts
Emails are a tried and proven way to encourage customers, through reminders and special offers, to buy the items they left behind in their checkout cart. But chatbots are quickly gaining ground in this area — either in conjunction with or instead of emails.
In fact, an Oracle survey found that “80% of businesses either already use or plan to use chatbots by 2020.”
If chatbots aren’t on your radar, keep in mind that ~70% of Millennials prefer to shop online and spend 6 hours per week doing so; they also prefer using text messages over emails to communicate with businesses on their smartphones.
And according to Chief Marketer:
“[T]hey desire a combination of both one-word answers (such as yes, no, help) and natural language feedback at the level of two-way communication with businesses. The majority of millennials, 60% to be exact, prefer two-way text engagement—citing that it’s easy to use, along with being fast and convenient.”
Cupshe, which has over one million Facebook fans, addresses this need by using a chatbot to help customers browse and shop conversationally.
Bikini Luxe uses a combination of emails and Facebook Messenger to send special offers to customers who have already linked up their Facebook accounts:
Over Black Friday Cyber Monday, Pura Vida Bracelets used Facebook Messenger to rescue abandoned carts through a series of three updates:
The lesson from this example is that it’s important to go beyond personalization that simply uses <FName>. That’s why Pura Vida’s Facebook Messenger promotion on Black Friday Cyber Monday was:
- Easy: Clicking “Checkout Now” sent visitors directly to their full carts, with no need to re-add items nor re-enter information
- Urgent: A “Last chance to get 50% off” message reminded customers that now is the time to buy
- Relevant: Pura Vida’s cart rescue only included what someone had already shown interest in
8. Tune-Up for Fast Mobile Page Speeds
While it’s not the most exciting topic, decreasing a site’s load speed matters for attracting, acquiring, and keeping customers. After reviewing a dozen case studies, Skilled found that site performance affects a host of ecommerce metrics:
Mobile design maintains the aesthetic of its desktop counterpart, but in many cases, it fails to optimize behind-the-scenes elements that unnecessarily eat data. The result is a beautiful experience that visitors pay for in lengthy load times.
Not only do nearly 60% of Google search results now come from a mobile device, just this month Google officially announced that “starting in July 2018, page speed will be a ranking factor for mobile searches.” All this means …
The costs of slow load times add up fast.
We’ve written extensively about how to improve speed and site performance here on Shopify Plus, and it’s no accident the very first step in that cornerstone guide reads: “Start by Testing Your Mobile Performance.”
Google PageSpeed Insights is the perfect starting point to test not only your own site but your competitors as well. If you’d like a detailed checklist to follow, simply go to How to Improve Ecommerce Site Performance: 10 Steps to Faster Page Speed and Better Sales.
9. Factor in Local Search Behaviors
When it comes to comparison shopping and impulse buying, mobile devices and local search go hand-in-hand. In fact, a recent Google study found that
50% of smartphone users are most likely to visit a store after conducting a local search.
Plus, “34% of tablet and desktop users will also buy in-store after a local search on their smartphone.”
There are some important steps you can take to offer a convenient mobile shopping experience and ensure that your products and services are showing up in local, mobile searches.
Some experts recommend offering solutions like a “quick snapshot of your prices on a mobile landing page,” or “a ZIP [or postal code] box to generate a map to your closest store locations.”
Also, don’t forget to include your phone number in any Google Ad Words campaigns via call extensions. That will make it easier for customers to call you about local store promotions that you are advertising when they are searching nearby.
That’s because Google gives ranking priority to its own properties (like Google+, YouTube, etc.) in its search results. Google has strict guidelines on how to complete a local business profile which you can check out here.
In addition to optimizing your own website and Google+ pages for local, mobile search, you should pay attention to local review websites. According to a survey by Influence Central:
“90% of consumers think the information they get from reviews is more important than talking to a salesperson.”
Of course, catering to omni-channel shoppers and factoring in local search are smart best practices for retailers blending physical commerce with pre-purchase mobile touchpoints.
10. Don’t Forget About Mobile Accessibility
Many State and Federal laws in North America and Europe are becoming sensitive to the needs of disabled citizens. Large enterprises and SMEs alike are facing the Americans with Disabilities Act (ADA) and Section 508 lawsuits. And rules are already beginning to form in Europe.
Shopify Plus Partner Something Digital advises that merchants engage in accessibility exercises to ensure compliance — as well as avoid litigation — as part of their IT and marketing calendar.
Unfortunately, the majority of the mobile web is not built with accessibility in mind.
Many sites even prohibit users from taking advantage of the accessibility or personalization features of modern smartphones.
Accessibility Best Practices
Shopify’s Liquid template technology allows store owners to add accessibility features directly from their store’s back office.
According to Something Digital, web developers can use Aria attributes to let browsing platforms know that accessibility features are enabled on a site. These attributes can be added to plain HTML, which essentially tells the platform: If you’re looking for where to start with accessibility, here I am.
This goes a step beyond plain old semantic HTML, which describes the type of content and details its purpose.
For screen readers, the most important element of site design is the ability to maintain focus. When a link is clicked and displays a modal window, for instance, focus should be moved to that modal.
Once dismissed, the focus should then be returned to the prior link or text area from which it was stolen. Something Digital doesn’t advise to remove modals altogether; instead, consider if using them is necessary or common practice and approach them with accessibility in mind.
By replacing iconography with simple text instructions, mobile users can benefit from the smaller page sizes. Plus, by implementing common keyboard navigation techniques to menus, web crawlers such as Google can understand and prioritize navigation structures on your sites.
Another best practice is using browser plug-ins to test out designs that emulate common color blindness. With these plug-ins, you can find potential issues with conversion, such as drawing attention to your calls-to-action.
Where Should You Start?
You can begin by performing a quick check of your site. There are many tools online to test simple ADA guidelines like font size and colors.
Some of those tools include:
To learn more, you can read about the ADA Guidelines. After performing a quick self-assessment, reach out to a knowledgeable Shopify Plus Partner agency like Something Digital to continue the conversation about a UX audit and accessibility primer.
The Future of Mobile Commerce Is Already Here
You don’t have the luxury of time to delay a mobile-first, accessible ecommerce design and UX optimization.
Shopping was the fastest growing segment of tasks people did on their mobile devices in the past year. And Shopify Plus merchants are already reaping the benefits.
Not only can a mobile-first UX help you to convert more customers directly via their mobile devices; you’ll also capture more prospective customers who are searching online (either locally or in general) and want to comparison shop on your website and your competitors’ sites using a mobile device.
Once you’ve got the sales data to show that having a mobile-first design is helping to influence multi-channel purchase decisions, you can continue to track results and develop a plan to roll-out other mobile customer experience channels – all with an eye towards building and sustaining brand loyalty.