6 Money-making Tactics to Grow Mobile Ecommerce Conversion Rate
Estimates say that in 2018, 50% of ecommerce revenue will come from mobile users.
That’s why it is crucial for online store owners to focus on how to optimize mobile versions of their websites and how to boost mobile conversion rate.
Some of our clients obtain up to 80% of traffic from mobile commerce. And we don’t mean those selling apps, but physical goods. No wonder that m-commerce is one of the ecommerce trends.
Here we gathered 5 main errors that you can fix to improve the conversion rate of your ecommerce mobile website during mobile CRO optimization process:
Pssst… are you looking for more knowledge about mobile CRO? Look no further but click here: Dos and Don’ts of Mobile Shopping Cart Design, 9 Simple Ways to Improve Ecommerce Mobile Checkout Forms, 10 Elements of Your Mobile Checkout That Need Improvement, How to Design the Best Mobile Product Detail Page!
Your homepage is your business card. You have only 7 seconds to attract the customer’s attention. Or even less. And from our experience – homepages are so easy to ruin. One of the most common mistakes that ecommerce sites make: the homepage is not user friendly, nor visually welcoming. Let’s compare two e-shops.
Here, the design is, simply said, old-fashioned. You can’t see what the hottest or newest offer is right now. The hamburger menu should be placed in the upper left-hand corner. But, as you can see, it isn’t there!
An unoptimized mobile ecommerce homepage on mobile device: it’s old-fashioned, not user friendly, there’s no hamburger menu in the left above corner.
When you press the “Order” button, it opens up in a new window. It’s not user friendly, nor friendly for your internet connection. It shouldn’t open in an additional tab.
Unoptimized, non-user friendly mobile checkout example: it opens in a new tab, while it should open in to player.
Now, let’s look at how an optimized homepage looks: Zalando.com. The hamburger menu is captioned. There is a visible search bar – which is essential for big eshops with a lot of SKUs.
Optimized mobile homepage: the elements of the menu are shown, there is easy access to the search, hamburger menu is visible and it’s placed in the left corner. This is a great example of how to grow mobile conversion rate.
Another example can be found at AlexisBittar.com. Look at the checkout icon in the main menu: you can clearly see how many items there are in the mobile shopping bag. And, as a bonus, you can also see the hottest promos right now.
However, there are also some aspects that could be improved: the icons are pretty small – it may be hard for bigger hands to tap. And there should be descriptions beneath the icons (just as it was on Zalando).
Optimized mobile ecommerce homepage with elements to improve: you can see the shopping bag, how many items there are, and main menu. But what could be improved includes the size of the elements and the icons should be labeled.
When you tap on the “checkout” icon, there is a toplayer which shows you what’s in your shopping bag and how many items there are. You can easily go to your shopping bag or to the checkout. Here’s even a better conversion rate optimization tip for mobile – there is a separate screen showing over your regular screen (without reloading your regular page) – just like on Amazon, when you try to add a product to your wishlist.
Optimized shopping bag: when you press the icon, a top layer appears showing the shopping bag.
Another version of the improved mobile shopping experience on Amazon.com that can be easily adapted to shopping cart optimization: when you press the “Add to list” link on the product page, there is a separate screen hovering over your regular screen (without reloading the page).
Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.
Do’s:
Dont’s:
Growcode also recommends this eBook:
Ecommerce Optimization Checklist of a 7+ Figure Online Store
Now let’s imagine the following situation: when you enter an online shoe store, you never look for shoes, in a general sense. You always look for a certain type of shoe: flats, heels, snow boots etc. With a poor menu, you will not be able to easily find what you are looking for. If you open a menu, you should be able to easily find subcategories (they should open immediately).
First, let’s look at a bad example. What happens after you tap on “furniture” in the main menu:
An example of a hard to use menu – when you click on one of the above categories, you get a reload and a new page instead of a quick view of the list of available subcategories.
The new menu opens into a new tab instead of showing you subcategories straight away. It’s not user friendly. Here, in the upper part of the screen you have types of furniture, and below, photos of furniture. You have no idea how the two relate to each other.
Not optimized menu: in the upper part of the screen there are names of furniture and the photos below. The user has no idea which one is which. Are these already products or what?
Now, let’s look at AlexisBittar.com. When you tap on jewelry , you have all kinds of subcategories. You can also explore all products in the category. It’s all in the same tab, it’s all easy to find. You can always see the shopping bag and main menu icon, too.
Good example of main menu in ecommerce websites: you have categories and subcategories. All easy to browse. At the same time you can see the main menu icon and shopping cart icon. It will help you to grow conversion rate of mobile ecommerce and reduce shopping cart abandonment rate.
Do’s:
Dont’s:
Find out more examples of how to build great menu on mobile devices in the episode of Bite-size Ecommerce Optimization!
When a customer enters a category page, they should always see the following: a main menu with a shopping cart, a heading informing the shopper which category they’re browsing , filters, and products.
Let’s look at a poor example first:
Poor example of a category page in ecommerce websites: there is no main menu, no filters, the photos are not described or captioned. The user sees no price. And it’s not easy to go back to the main menu.
There is no price, no info on the product, and you can’t go back to the main menu.
For a good example, look below at Macys.com: there is main menu icon, shopping bag, the ability to view items in your shopping bag, category names, and filters that let you easily narrow your selection. Remember: on category pages show at least two products next to each other at once. Imagine you have 2738 coats in your online shop. With only one viewable product at a time, the customer would have to swipe forever to see all of them.
Example of optimized category page UX on mobile ecommerce website affecting positively your ecommerce CRO: you can easily find main menu and shopping cart, heading informs you in which category you are, filters and products. What we also recommend is the use of gesture navigation – where you can swipe the “Style” to the left or right to find the right product.
Do’s:
Dont’s:
Buying incentives are your best friends here. So use them generously. Some good examples are:
In the product gallery, it’s essential to use natural swiping motions that people are used to (they swipe Facebook and Instagram constantly). So let them “swipe” the gallery, instead of “tapping” it.
Here is a good example of a product page that could easily be optimized. There are no incentives. You have to tap the photos, instead of swiping the gallery.
4F.com product page that could be easily optimized: no buying incentives, no information on the availability, the gallery must be tapped (instead of swiped).
Now let’s look at the better example. You have the incentive, you can easily swipe the gallery, and there is, from the point of view of the customer, very important information easily viewable: the product is available. You need to communicate that whenever possible.
However, there’s still room for more mobile cro optimization. The colors of the call to action (“Add to bag” and “This piece is selling out”) infoboxes. It would improve the mobile conversion rate if buttons and infoboxes were in bright, contrasting colors.
Product page with buying incentives and proper product gallery. However there are pieces to be improved on for a boosted mobile conversion rate: the buttons for “Add to bag” and “This piece is selling out” should be in bright contrasting colors. But good job for implementing urgency on product page.
Do’s:
Dont’s:
There are a few vital steps, that you should use to optimize your check out process. First, make sure that the checkout stage inspires the trust of your customers. Let them know how secure they are when buying in your online shop. Build trust on mobile ecommerce checkout and use information on secure checkout, locks, green font.
Abercrombie.com optimized mobile checkout example: there is “secure checkout” information, as well as a well-known payment method that takes you to Paypal checkout. Don’t forgent about local payment methods. This was one of the topics of tjis years Shoptalk.
Make sure that there is nothing on the checkout page that could distract or deter your customers from buying. There should be no additional information on other promotions, no other products. Just let your customers focus on finishing the purchase.
Optimized Sephora.com checkout page: no additional info, that could stop your customer from buying, included.
Do’s:
Dont’s:
To optimize your mobile ecommerce website, make sure that all buttons are big enough to be easily tapped by small, medium, and large hands. Buttons should be easily tapped by both right-handed, as well as left-handed users. Look at the examples below: the buttons are almost the width of the screen – they are easily tapped from left and from right. And visible.
Proper size buttons on Nordstrom.com website. However, it would be better if they were in contrasting colors.
No matter what you sell online, remember that your final revenue is what matters the most. Read Case Study of European apparel giant Reserved.com to see how they boosted their revenue without involving their IT department, or check out 51 Trends of eCommerce for 2018 to learn what roads for ecommerce growth are possible in 2018.
Also, check out our video on YouTube about How To Get 3X More Revenue From Mobile Devices.
Download our 115-point ecommerce optimization checklist for 7+ figure online stores. Use it to enhance every part of your store, from the home page to the checkout forms.
Oh, and don’t worry, we’ve broken it down into manageable chunks!
💡 At Growcode, we develop and maintain online shops and B2B ecommerce on Magento!
