Mobile accounts for more than 50% of all ecommerce traffic. Yet, mobile converts at only 1/3 the rate of desktop; that is, 3% on desktop vs. 1% on phones. Why don’t mobile shoppers buy? And, how can you make them convert?
While you can’t always make mobile shoppers convert at the same rate as desktop shoppers, there are some quick wins that will help you boost mobile conversions. In this article, I’ll review 10 simple tests you can run in order to improve mobile conversions and turn shoppers into customers.
The general principles are:
- Be Ruthless: Space on mobile devices is extremely limited. Don’t try to put too many different things on a page. You’ll just end up distracting users.
- Reduce Choice: Reducing choice will nearly always improve conversion rate, and it’s especially important on mobile.
- Focus on Speed: Mobile shoppers are very impatient, even more impatient than desktop shoppers. You need to both (1) reduce the number of steps, and (2) ensure the site load time is optimized.
1. Place Products Directly on the Homepage
Many ecommerce websites like to feature sales, brand stories, etc. on their homepages as a way to welcome and wow visitors. Here’s an example from Alex and Ani:
This is a beautiful design, no doubt about that. There is the wow effect when someone comes to the homepage.
However, sometimes on mobile, these pages can become too distracting for users, and it’s easier to simply place your best-selling products directly on the homepage. This reduces the number of steps from the following four:
- Homepage (Wow Page) > Click on CTA
- View Products
- Add to Cart
To these three:
- View Products
- Add To Cart
Here’s an example of what I mean:
This test is very simple to run. Just remove your sliders, and put your best-selling products on the homepage.
If your current homepage is full of banners and other distractions, you will see a significant decrease in your bounce rate, which means more people will move further down the funnel and ultimately lift conversion.
2. Make Checkout One Step or One Page
Design your checkout process to be one step or one page. This takes some work to implement, but it can have a drastic impact. Some checkouts on mobile look like this:
To make checkout a more seamless experience, you can try one of these options:
- Use jQuery to break up checkout into one page with steps
- Embed all the checkout steps in one page
Option (1) is my preference. Here is a great example from TopShop.com:
Do you see how users can keep track of the steps at the top? This is a great way to ease someone through the checkout process.
Option (2) is to embed all checkout steps in one page. Here’s an example from Alex and Ani:
The entire checkout is one scrolling screen.
Because people at checkout are so far down the funnel, reducing steps like this directly impacts revenue.
We’ve seen checkout redesigns lift conversion and revenue by as little as 10% and by as much as 40% (depending on the baseline). Finding your “optimal mobile checkout” is well worth the investment, especially for stores with >$1M in online sales.
3. Reduce the Number of Checkout Fields
The smaller the number of fields that must be filled during the checkout process, the higher the conversion rate. This is true for any online form on any device, and it’s especially important on mobile.
Here are a few things you can remove:
- Zip Code vs. City and State: Zip code is all you need.
- Account Creation: Save this for later! Getting people through checkout is more important than getting new accounts.
Here is a simple zip code test for the first option:
Removing fields is extremely simple to test (though it can be tough sometimes on the backend to implement).
The second option is to completely eliminate account creation from the first step of your checkout process. Here’s an example from New Balance:
While they ask for an email address, this is incorporated into the checkout process (rather than asking shoppers to “continue” after they fill it in). This is an easier ask to shoppers.
Even here, I’d argue that you don’t want to put the email address and auto opt-in early in the checkout because it will scare some people away. Definitely, dropping someone into the checkout flow without any account creation is the right way to go.
4. Emphasize Checkout Speed
People who are on mobile have even less time than people who are on desktop. To get more people down the funnel, try using the words “Fast & Easy Checkout” or “1-Step Checkout” as your CTA (instead of “Checkout”).
Here’s an example:
In our last mobile tests, simply changing the calls to action to emphasize speed improved checkout clicks by ~15% and overall conversion by ~10%. Again, this test is easy to do (just change the button!). Because everyone will need to go through checkout to purchase, this also is a very high impact test.
5. Remove Calls to Action
Space on mobile is extremely limited. Even though you might get away with having multiple CTAs on desktop, it’s extremely important that you prioritize and remove CTAs on mobile where they are not necessary.
Some of the CTAs you can remove are:
- Email Newsletters: Place those after someone has checked out (not before)
- Product Wishlist: A “favorite” or “heart it” button is okay on desktop, but there is usually not enough space on mobile
Here’s an example test:
It’s much better to ask for email signups / new account creation after someone has made their purchase (rather than before). Getting someone to click on “checkout” is much more important than getting new email signups in nearly all cases.
6. Boost CTA Size
Not only should the “Add to Cart” and “Checkout” buttons be the key CTAs on your mobile site, they should be gigantic. If people can’t click ‘em, they can’t buy!
Here’s an example of what I mean:
Since this is a small change, you will be looking at smaller impact here. Most tests we’ve run on button size will see only ~5% change in conversion. Still, because all shoppers need to reach product pages to become buyers, these are high impact tests. Plus, they are easy to run, and they can get you a quick result.
7. Reduce Product Choice
Try limiting the number of products you sell (especially on category pages) to your top-selling products. Users can scroll through only so much, and you are better off breaking up products into chunks.
Here is an amazing example from Under Armour:
Do you see how they use a “show all” button here (instead of blasting out the other 18 products)? I can almost guarantee this helps their total conversion rate.
Here’s another example from New Balance:
Again, with 31 other products, it’s better to focus on your top sellers and give customers the option to “see more” or “see all” (rather than force them to scroll down the page).
Conducting an A/B test here is simple. Just compare your original pages with a page that has several products and a “show all” button. The revenue impact of this test really depends on how many people are clicking through to your product pages. However, for any high-traffic site, this test is worth running.
8. Make Navigation Easy
For a multi-product retailer, mobile navigation can get complex quickly. How can you fit so many products into so small a space?
There are two standard approaches:
- Reduce Navigation: Take away some products that sell less and steer your customers toward your top sellers.
- Break Navigation into Steps: Break up your navigation into maybe 2-3 different sub-options so that it’s easier for people to scroll through.
For the first approach, Hunter Boots does a great job of asking users to “discover” products (rather than simply listing them all on the homepage):
This is an excellent solution.
The other approach is to break up your navigation into steps. This especially makes sense for large multi-product retailers. New Balance does great work here using sub-menus:
Men’s Shoes Sub-Menu
The advantage of this approach is that you can rapidly direct customers to the exact product they are looking for without (1) sacrificing any product “choice” in the navigation (potentially losing customers), or (2) making customers go through any more steps, since they land right on the product page.
9. Place the Search Box in a Prominent Location
Make sure your search box is obvious. The two best spots for it are either (1) at the top of your navigation, or (2) at the top right/left of your website’s header.
Here’s an example from Pura Vida Bracelets:
Top Navigation Position
And, an example from Hunter Boots:
Again, space on mobile is limited, so making it easy for customers to find the exact product they are looking for can reduce some friction.
10. Minimize Images to Improve Speed
Some mobile commerce sites run into issues when loading large image sizes. This is common because load times can be longer on mobile than on desktop.
If you’re not careful, your site can end up loading like this:
Wait times (even short ones) impact conversion, especially on mobile. The amount of opportunity you have for conversion improvement depends on how poor the load time is. As a rule of thumb, if you see images loading like this for longer than 1-2 seconds, you have a reason to go in and improve site load time. There are a few studies on this from Firefox and Walmart that show a clear relationship to conversion lift and incremental revenue.
How do you test this?
Actually, this is more of a “fix.” But, if you do want to set up a strict A/B test, you simply set up a split URL test using (1) one version with original images, and (2) one version with smaller/faster images (or, one version with your original hosting provider and one version with a different hosting provider). This will make the revenue improvement easy to measure.
Be ruthless about what you allow in mobile. Always try to reduce steps and reduce choice. Keep speed in mind on your site’s language, design, and implementation.
If you know of any tests I missed here, or if you have any other ideas, please include them in the comments below!