Mobile Ecommerce Design: How to Earn More Conversions Institute Revenue optimization services Copytesting Blog Search Start 7-day trial for $1 Subscriptions Minidegrees Live sprints Online courses Free courses Resources

Mobile Ecommerce Design: How to Earn More Conversions

Mobile Ecommerce Design: How to Earn More Conversions

There are an almost limitless number of mobile usability gotchas that need to be identified and gradually refined.

That process took years on the desktop, and there’s no reason to assume it’ll be any faster in mobile.

Just as the personal computer forced people to rethink accounting and word processing, mobile devices challenge us to rethink how shopping should work.

This isn’t something you should stick your head in the sand on. Mobile ecommerce sales have grown from less than a trillion dollars in 2016 to nearly $3 trillion by 2020.

growth of mobile ecommerce revenue.

Fortunately for you, we’ve done thousands of mobile ecommerce user tests at User Testing, and three trends of effective mobile experiences stand out:

1. Invite users to search and browse.

mobile design that allows for searching and browsing.

People will usually come to a mobile commerce site for one of two reasons:

  1. They want to shop casually, by browsing through products.
  2. They want to go directly to a particular product they’re considering.

Clearly, these two motivations conflict. Browsing calls for a leisurely and entertaining experience, rich with media; buying calls for a quick jump to specific product information.

Above, the mobile website of a clothing retailer includes features designed to help visitors search or browse. The homepage features a prominent search box in addition to an accordion menu, link to the shopping cart, and homepage link (the company name).

Underneath is a reminder about a current discount and a half-displayed image, which clues a browsing user to swipe down, displaying more images that link to departments in the store.

Many mobile developers have discovered that, although a half-displayed image looks “funny,” it’s effective at getting users to swipe farther down the page.

example of half-displayed image on mobile ecommerce store.

A big design challenge in mobile is deciding which features and buttons should appear on the first screen, and which ones should be hidden in a sub-menu or on a secondary screen.

For instance, eBay’s mobile site understands that site search is a critical feature for mobile visitors; therefore, the search bar is front and center at the top of the page (along with a call to action to install the native app, something critical to understanding attribution later on down the road.)

ebay homepage with app download and site search prominently displayed on mobile.

Ideally, the top features on a mobile shopping site or app adapt to the user’s intent. For example, if a user is in browsing mode, you should display a lot of product images and make it easy to navigate through store departments. If a user is in buying mode, display filters and purchase support information.

But how do you know which mode a user is in? Short of mindreading, there’s no perfect answer. It’s often possible to infer a user’s likely intent. For example, someone who has browsed in the past is (probably) more likely to do so in the future.

In the example below, the “Click the arrow for More Like This” can signal that a viewer is in browsing mode:

example of tooltip to discern buyer mode.

On the other hand, someone who immediately runs a site search for a specific product is probably in purchasing mode and should be treated appropriately.

If a visitor has no history, it’s possible to design a landing page or first screen so that both paths are available to the user. The user, in turn declares their intent based on which one they choose.

Toys R’ Us does this nice and subtly.

Be sure to give the user an easy way out of a particular mode if their needs change, or if you’ve guessed wrong about what they want to do.  Even if someone was in buying mode yesterday, they might want to browse today.

2. Understand how shopping crosses devices.

app and web data becoming one.

Increasingly, companies are finding that the purchasing process isn’t limited to a single device; it crosses from smartphone to tablet to computer (and back again).

The companies that pioneered mobile computing talked about the personal “real estate” that various devices occupy. The smartphone lives in a pocket or purse and is used for short sessions throughout the day. The personal computer is used for relatively long, immersive sessions when the user is sitting down, often at a desk.

We’re still figuring out the geography of the tablet, but so far it appears to live on a side table next to the easy chair at home, where it competes with the television for attention.

Tablet and smartphone access by location.

The purchasing process may involve all three devices. For example, a user might receive a smartphone message from a friend that mentions a pair of shoes.

During the day, the user might check them out on a laptop. Then, in the evening, over a glass of wine—the shoes are ordered via tablet.

Bloomreach found that prom-dress shopping often involves two devices and two users: a daughter on a smartphone finding possibilities, and a mother on a personal computer checking prices and making the purchase:

video

Companies struggle to understand this sort of buying process. Traditional analytics would say that the personal computer was responsible for the prom-dress purchase, but, in reality, both the computer and smartphone were responsible.

So we need more advanced analytics capable of tracking people across multiple devices, and the shopping process on both devices needs to be designed so they can easily collaborate. (MixPanel or Heap are favorites here.)

User tests can test this cross-device shopping behavior.

One way to get around this is for sites to have a native app, which (depending on the vertical) has the user perpetually logged in, or requires the user to log in before the purchase is finally made.

In the (dated) example below, there’s an email from Amazon Local about a weekend getaway in Vermont. These are the series of screens to complete the purchase.

Step 1: The initial email

offer email

Step 2: Where to view the offer

Installing the app means that Amazon Local always knows the identity and location—among other things—of the device, even when not technically “logged in.” If the app is installed, Amazon can see when the email was opened, links clicked, pages visited, etc.

The log-in prompt that comes at the end of the sequence is more of a security measure for payment than an actual prompt to log in.

viewing option screen

Step 3: The mobile product page

Notice how the size of the photo, reviews, and “See Options & Buy” are the main elements of this page?

mobile product page

Yes, there are plenty of text details as you scroll down, such as additional amenities, package options, and a map to the location; however, for many buyers, the seven images, 3.5 star rating, and price are more than enough to click through to the next page, which helps narrow the options.

Also notice how the navigation isn’t cluttered on the product page? It’s almost entirely absent, with the exception of the left-facing chevron next to the Amazon Local logo in the top left.

One final thing I’d like to point out: The only other item in the navigation on the product page is the sharing option on the top right. From here, whenever a user shares the page via text, social network, etc., a unique share ID is generated.

At the very least, this provides data about sign-ups from shared links and, at most, could be cross analyzed with shipping data for other logged-in users to see when two people from the same household share deals with each other.

Step 4: Buying options page

offer screen

Alone, this page is fairly straight forward, but, over time, pages like this can clue you in to a user’s income level, buying preferences, and, in this case, availability to travel.

This increases the customization options for the mobile experience down the road, and improves the personalized marketing experience overall.

Step 5: Log in

login screen

As I mentioned earlier, this is more of a security measure than it is a prompt to actually log in.

Of course, there are so many more ways to design a multi-device experience. In the book Designing Multi-Device Experiences, Google designer Michael Levin gives an example of how sharing with yourself can work.

The cooking site AllRecipes, when displayed on a computer, is optimized for researching recipes. After recipes are chosen, a smartphone can display a shopping list generated from the selected recipes (below left). Later, a tablet in the kitchen can display step-by-step cooking instructions (below right).

Multi-site experiences

This kind of multi-device experience plays to the strengths of mobile and desktop platforms—without taking anything away from either.

3. Let the smartphone be a smartphone.

Although it’s possible to improve mobile conversions on almost any shopping site, the biggest improvements may come not from tweaking web shopping to fit on a mobile screen but by creating new forms of shopping for the unique strengths of mobile.

A simple example of this is flash sales, which take advantage of the immediacy and personal nature of a smartphone:

example of time-limited sales.

There are also big opportunities in the interaction between mobile devices and brick-and-mortar stores.

For a long time, smartphones in stores were seen as the enemy, a tool that let users browse goods in a store only to order them online (“showrooming”). That’s always a risk, but we’ve seen retailers explore the use of a smartphone as a shopping assistant.

For example:

  • Make it easy for a shopper to look up detailed information on a product in the store, without having to track down a sales associate. (QR codes are one way to do this.)
  • If there’s a long line at checkout, enable a shopper to order a product online and have it delivered.

For brick-and-mortar locations, it’s important to understand showrooming rather than fear it. In a study by the University of Columbia, only 6.1% of mobile-assisted shoppers were constantly on the lookout for the lowest price.

five types of mobile shoppers.

It may come as a breath of fresh air to learn that most mobile-assisted shoppers still value the best experience and prefer the in-store experience over everything else.

An action plan for mobile ecommerce design

The mobile conversion problem can’t be solved instantly. It’s driven by many small issues rather than one big thing. Mobile site design is a harder job than desktop because screens are smaller, and because the best practices for mobile are still being refined.

Ecommerce companies that treat mobile as a second-class citizen are putting themselves at risk as mobile continues to claim a larger share of total web traffic.

Here are eight steps to ensure that your mobile presence is the best it can be:

1. Standardize your terminology.

standard language

Make sure the language you use in your store matches the vocabulary used by your customers. This applies to the tags and menus you use to identify your products and also the button labels you use for navigation within your store.

When in doubt, copy the terms used by the biggest ecommerce leaders. They’re the ones being seen by the most customers.

2. Limit the use of menus.

mobile ecommerce menu.

We think two levels of menus, with each list filling about one screen, is about the max for a mobile site. If you need more than two levels, add a landing page after the second level to keep people oriented.

Think like an elevator in a department store.

3. Make everything tapable.

Untappable items

The mobile paradigm is to tap and edit in place, rather than going forward and back. Don’t make it impossible to edit items like billing or shipping addresses directly from the interface.

4. Give access to the desktop view of your store—but not by surprise.

opportunity to see full site from mobile site.

It’s not uncommon for mobile shoppers to want the full site just in case they might be missing out on critical information that’s not visible on the mobile version.

Don’t force the desktop version on them, but let them have a link to load the full site.

5. Optimize tor two kinds of mobile visitors.

two kinds of mobile use options: search or browse.

Provide paths for visitors who are shopping and those who are browsing. In the image above, it’s reasonable to think that mobile visitors who search or immediately navigate to the clearance page are closer than those who start by browser by gender.

Remember, mobile is all about immediacy and personalization, so analyze browsing patterns of mobile buyers to find out where the shift from browser to buyer happens. Use qualitative feedback loops to learn more about what buyers need to make a frictionless mobile shopping experience.

6. Take advantage of what mobile does best.

Mobile shopping is a tactile experience. Rather than struggling to turn a mobile device into a computer, optimize for the things it does best.

Make it fun to interact with—reward users for “playing” with your site. If you haven’t already done so, test flash sales.

7. Integrate shopping across multiple devices.

google web plus app analytics.

Track users across device types, and make it easy for them to share a discovery or shopping session with themselves that they can resume later on a different device.

8. Rethink for mobile.

This is the hardest task, but also the most important one. Learn how mobile can change the shopping process. If you have a brick-and-mortar presence, explore ways that mobile can supplement your in-store experience.

The real question isn’t how smartphones convert, but how your whole business converts.

Conclusion

If you have a successful ecommerce business, you already have a set of assumptions about do’s and don’ts for online shopping. Some will transfer to mobile; others won’t.

It’s impossible to say ahead of time which ones are which. Test those assumptions with a mix analytics and user testing. Analytics tell you what people are doing; user tests tell you why they’re doing it.

Testing is especially important if you’re creating a mobile app. In the web world, you can easily launch a first-draft website and iterate to improve it. In mobile apps, users try something once or twice then move on. Online reviews punish apps that aren’t satisfying from day one.

Rather than launching and iterating, the best approach to mobile is to test early and often, throughout the development process, and before you hit the app store.

Related Posts

Join the conversation Add your comment

  1. Great Tips Michael! This will be a great guide for online entrepreneurs who want to leverage their business on different devices by developing a mobile app . Especially now, that google will also take into consideration mobile friendliness of a site.

Comments are closed.

Current article:

Mobile Ecommerce Design: How to Earn More Conversions

What’s on my mind

Hi, I'm Peep Laja—founder of CXL. I'm a former champion of optimization and experimentation turned business builder.

I do a lot of thinking, reading, and writing around business, strategy, and optimization. I send a weekly newsletter with what's on my mind on this stuff.

Subscribe

Categories