Conversion Optimization

How To Make Your Mobile Conversion Rates Soar: A Primer

The average mobile eCommerce conversion rates stuck at a mere 1.82%. Why? Let’s find out.

How To Make Your Mobile Conversion Rates Soar: A Primer

The advent of the covid pandemic has shot up the daily online users with the majority of these users making use of mobile over their desktop or laptops. Mobile internet traffic accounts for 55.64% of the entire global online traffic. Let us hit you with another statistic - 79% of smartphone users have made a purchase online using their mobile devices in the last 6 months. Considering these figures, mobile conversion rates are still shockingly lower than you’d expect it to be.

The average mobile eCommerce conversion rates stuck at a mere 1.82%.

Why you ask? Let’s find out.

Why is Mobile Conversion Rates Poor?

There are plenty of reasons for this:

  • The small screen size sometimes seems rather non-optimal to fill out personal or payment details (especially if there are long forms to be filled out before checkout)
  • Navigation can be a huge challenge if the site is not optimized for mobile
  • Never-ending notifications from other apps tend to distract buyers
  • Comparing products or stores over multiple tabs is quite difficult on mobile

To club all of these together, you could summarize and say that the user experience while shopping online is a lot cleaner and easier on the web than on mobile. While these challenges are faced predominantly across the board, there are a number of ways you can solve them and make the mobile experience one to go back to.

CC Ebook Banner

Mobile Conversions Rates for Your eCommerce Business - We’ve Cracked It

1. Design a mobile-first website

Yes, I know everyone pitches this idea. But you’ll be surprised that it’s still an ongoing problem. Since more of your visitors use mobile phones to browse your online store, optimizing your website for mobile shouldn’t come as an after-thought, instead, you must develop a mobile-first website. And no, this doesn’t mean just plugging in the same elements and making it work for mobile. You wish it were that simple. Before you even create your site wireframe, think about mobile shopping experiences and how they are different from those on a desktop so you can aptly design seamless user flows. Keep in mind their body language and their comfort in using one hand or both hands. Here are a few things you need to keep in mind to create a mobile-first website:

  • Rethink your content to make it succinct, clear, and actionable
  • Format your content to make it easier for people to read on a small screen. Keep in mind that older people might be part of your customer base and they might find it harder to read it
  • Reduce image sizes or make them responsive for easy viewing
  • Streamline the number of overall pages by combining related product categories to ease navigation

While this will help you set things in motion, don’t shy away from implementing as many best practices to create a mobile-first website as you can. These are just the most basic changes you need to make and might not guarantee that the site looks great.

2. Three Words -  progressive web apps (PWA)!

One of the most common reasons for low mobile conversion rates is the poor performance of mobile websites. PWA is a web app that allows you to develop a website that can be run on both - desktop and mobile browsers. The best part here is that it gives mobile users the look and feel of a native app. By ensuring that the mobile website behaves just like a native app, PWA drastically improves its performance - enabling them to run way faster that makes for a far superior user experience. In fact, it might interest you to know that PWAs have been proven to improve mobile conversion rates by as much as 36%. Alibaba built a PWA that improved its mobile conversions by 76% and the team observed a steep increase in the re-engagement rate as well as their iOS and Android monthly active users.

Mobile Conversion Rates - Alibaba increase cro with PWA

The good thing about this strategy is that it is easier now to build a progressive web app for your online store. There are a number of tools like Magento PWA Studio, ScandiPWA, PlobalApps, Tapcart and Shopgate that can help you get started in just a few days.

3. The Google Search Tactic

It’s not wrong to assume that mobile shoppers need a convenient shopping experience as they are more likely to be in a hurry. Therefore, when they actively search for something in your store, you don’t want to throw a disappointing comment like - “Couldn’t find what you were looking for”. That doesn’t simplify their shopping experience, it only makes it worse. Moreover, you risk losing your customer to a competitor who might have built their search to be a tad bit better.A few ways to ensure mobile shoppers don’t have such a hard time searching for products, ensure:

  • Typo tolerant search - People sometimes can make mistakes when they type in a search. Your engine needs to pick these up and still show accurate results
  • Auto-complete suggestions
  • Synonym search - jeans or denims, sweaters or pullovers etc.
  • Related products display on zero exact match searches - can’t identify the search, your site should still be able to display related options or a category and keep visitors hooked.
  • Personalize search suggestions based on previous interactions  - maybe based on their preferred colour or style

Here’s an example of an impressive ecommerce site search that not just offers suggestions, but allows visitors to select the category of the product they are looking for:

Mobile Conversion Rates - improving search

4. Optimize your product filters

To simplify browsing on the category page, reduce the number of filters and retain only the super relevant ones. Given the limited digital real estate, you cannot afford to fill up your screen with too many filters that end up confusing hasty mobile shoppers. Therefore, for your mobile store, zero in on the most commonly applied filters using your analytics data and stick to those. Some of these include the price range slider, size, type, brand checkboxes and colour.

Mobile Conversion Rates - -optimize your filters

You can even try using custom filters to enhance your mobile shopping experience. For example, if you are running a sale, you can add filters such as - “Under $5” or “Super Saver Combos” that you wouldn’t normally have.

5. Streamline your checkout flows

Since a majority of mobile drop-offs occur during the checkout stage, optimizing the checkout flow should be a priority. Some of the strategies that have time and again proved to work:

  • Reduce the number of steps in the checkout process
  • Decrease the number of form fields
  • Add a progress bar to checkout
  • Offer a single-click checkout
  • Reduce navigation and remove distractions from checkout

And last but not least, everything must be at lightning Speed!Here’s an example of a mobile checkout process that drives visitors away.

Mobile Conversion Rates - poor checkout page

On the other hand, here’s an example of a winning checkout flow.

Mobile Conversion Rates - great checkout page walmart
Want to learn more about optimizing your checkout flow? ‘Checkout’ these ideas, pun intended.

6. Optimize your mobile site images

To improve your mobile site’s performance, you need to reduce your page load time. The very first thing that factors into your load time are your images. And everyone HATES slow websites. Now, you can’t compromise on the quality of the images you use across your website. But you can optimize them for a better mobile experience. This can be done in a few ways:

  • Run mobile website speed tests to identify heavy pages and get actionables  
  • Streamline the number of images displayed on mobile
  • Enable lazy load to ensure your images don’t break
  • Consider resizing your images to suit mobile dimensions
  • Make your product images and other media files responsive
  • Compress your images to less than 2MB in size
  • Add ALT text to all your images so that incase they don’t load, the shopper can read what they were about
  • Consider converting static/ permanent feature images to WebP format

Seems like a lot? Don’t fret. Resizing and optimizing your site images is easy. You can use apps like TinyIMG, TinyJPG and iLoveIMG to do this easily. Some of these apps also offer bulk upload so that you can take care of multiple images in one go.

7. Simplify your site navigation

We discuss navigation briefly in the first point, but given how important it is to ensure a smooth mobile shopping experience, it deserves to be talked about in more detail. When it comes to your site navigation, the first thing to note is that never try to copy your desktop’s website flow. You will end up with a cluttered, confusing, and utterly complex site flow. Here’s what you need to keep in mind:

  • Redesign your navigation as per the mobile navbar dimensions
  • Identify and highlight the key pages you want to drive traffic to
  • Discard low-traffic and redundant pages
  • Move the not so essential links to the mobile site footer  
  • Use breadcrumbs to allow users to understand where they are in your site’s hierarchical structure
  • Make it easy for them to find their way back to the previous pages if need be

Here’s an example of the same:

Mobile Conversion Rates - site navigation

8. Design a mobile-first opt-in strategy for improved mobile conversion rates

Websites usually ask for numbers over email ids on their mobile website.

Since shoppers are sometimes hesitant to provide the same, they jump off without buying. Therefore, creating mobile first opt ins is usually a matter of building trust among visitors and how creative you can get with it.

 Instead of blatantly asking visitors to share their data, try gaining their trust by showing them the value you have to offer. Try being explicit by stating how exactly you intend to use their information or what you exactly need it forAdd a simple sentence along the lines of - “We promise not to spam you, your phone number will only be used to share your invoice”. Or you can get creative with your copy and add a little personality to your message. “Share your mobile number with us and we’ll share a secret code to our discount locker ”

Bottom line is to identify the  shopper’s motivation. Is it the ease of shopping on mobile devices? An exclusive discount? Another interesting strategy here is to make use of customer account pages. Think Amazon for a minute. Mobile shoppers are often looking for convenience. If you give them a way to keep track of their orders, wishlist products, save delivery and payment information and more, they’ll buy faster and buy more!

Mobile Conversion Rates - make cta intiuitive

The only thing you need to ensure in this case is that you’re offering easy sign-up options for mobile shoppers. Be it using sign up with a phone number, social login or email, remember to give them as many options as possible.

9. Make your primary call to action intuitive

Again, mobile devices give you limited screen space. Your CTA needs to be placed in such a manner that it is easily visible and usable. For example, your “Buy Now” button should be present and easily accessible on your category page, under items that feature on the homepage, on product pages, as well as other high-traffic pages. But how do you make this call to action button call-out to the mobile shopper and make them want to click on it? Here are a few tips:

  • Distinguish Buttons from Text with an Outline
  • Add Color to Progressive Actions
  • Vary the Font Weight of Text Labels
  • Put an Icon on the High Priority Button
  • Make your primary call to action button sticky
  • Place the call to action where it can be easily interacted with

Here’s an example of a mobile call to action button that follows all the above practices:

Mobile Conversion Rates - understanding how users use their smartphone

But more importantly, remember how you typically hold and touch your device. This will help you place the call to action buttons at places where they are more likely to be clicked on.

Mobile Conversion Rates - tracking scroll data

Here are some statistics to keep in mind for the above:

  • 75% of users touch the screen with one thumb
  • Less than 50% use only one hand
  • 10% hold their device with one hand and interact with the other
  • 36% cradle their phones using the second hand for better stability

And while you’re focusing on the position of the call-to-action button, we’ll give you another pro-tip. Be fat-finger friendly. No two thumb sizes are equal so you need to pay attention to those with big hands as well.

CC Fa Audit

10. Use product recommendations but not on steroids  

On-page product recommendations can go a long way in improving the average order value of your online store, especially on mobile sites where buying journeys are comparatively complicated.

In fact, as per Forbes, 92% of shoppers are influenced by product recommendations while making a purchase online.

But when on mobile, the space is limited. When a visitor is browsing through the product page, the last thing you want to do is bombard them with recommendations. Nor do you want to add too many of them, ending up overwhelming the shopper.

Here’s where you need to put data to work. Identify the pages that tend to see the most number of drop-offs. Based on the content of these pages, add product recommendation widgets to encourage the visitor to explore more instead of leaving the site. For instance, you can display trending products or best-selling items on these pages. Similarly, you also need to ensure that your product recommendations don’t interfere with the natural flow of an online shopper. If they’re trying to read the product description, your recommendations should not be interrupting them. That’s why the high-converting websites tend to place their recommendation widgets at the bottom of the page for mobile shoppers.

Mobile Conversion Rates - use product recommendations sensibly

11. Make your product visuals interactive with rich media for better mobile conversion rates

Typically an online store simply uploads product images from all perspectives to give the online shopper a look and feel of the item. While the strategy makes sense for desktop visitors, imagine having to scroll through an endless gallery of images on mobile. Instead, consider using rich media for your mobile shoppers. This includes experimenting with formats like product videos, 3D images, infographics and GIFs. This conversion strategy comes from the type of content we tend to interact with on social media, which is mostly used on mobile devices.

Mobile Conversion Rates - making visuals more interactive

Let’s take ASOS for example. They use product videos to help shoppers get a good look at the products in one go.

Mobile Conversion Rates - ASOS visuals example
Mobile Conversion Rates - ASOS design example with CTA

If there are a number of features that you’d like to highlight in your product visuals, you could consider using an infographic like HiCoup:

Mobile Conversion Rates - highlighting many features

But let’s say you have different variants of the same product available, you could consider 3D models like Apple:

Mobile conversion rate - apple example

The goal here should be making it easier for the online shopper to get all perspectives of the product. But make sure no matter which strategy you use, the rich media loads seamlessly for mobile shoppers.

12. Use psychological triggers - It actually works for better mobile conversion rates

With mobile users, you have limited screen space to persuade them to make a purchase. What you also have is an even shorter attention span. So you need to get them to take a desired action almost right away. That’s where using psychological triggers in your conversion strategy comes in. The two psychological triggers that seem to get online shoppers to act right away are:

  • Urgency
  • Scarcity

The fear of missing out on something good is what will get them to take action right away.  For instance, you can add ‘trending now’ or ‘fast-selling’ tags to popular products like Top Shop does:

mobile conversion rates- top shop

Alternatively, you can display live sales notifications or how many people are currently viewing the product. Here’s how Mango People does it:

mobile conversion rates- mango people

If you notice, both the strategies do not block a mobile visitor’s browsing experience.

13. Redesign and optimize your pop ups

Given the smaller screen size, you don’t want your pop ups to fill the entire area and block the users’ view and obstruct their experience. A few ways to ensure that your pop up strategy remains active yet does not hamper the overall shopping experience on mobile devices, is to:

  • Optimize the size and resolution of your mobile pop ups
  • Ensure the pop ups take minimum screen space
  • Make sure the load time is shorter keeping in mind mobile networks
  • Keep your copy succinct and clear
  • Make it easy to dismiss the popup
  • Use a contrasting color scheme
  • Ensure the call to action button is intuitively clickable
  • Pay attention to the timing of the popup

Here’s an example of a well-optimized mobile pop up:

mobile conversion - tom ford pop up

Summing up

It’s the era of mobile-first and it’s here to stay. One cannot simply aim for growth and scalability in an eCommerce business, without paying utmost attention to optimizing their mobile site. The strategies discussed in this post are a great place to start, but to really move the needle, don’t shy away from experimenting with these and other tactics to figure out what works best for your target audience.

You may also like

eCommerce Personalization Examples That (Actually) Boost Conversions
Get the guide
Sent to your inbox