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. And we don’t mean those selling apps, but physical goods. No wonder that m-commerce is one of the ecommerce trends in 2018.

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:

  1. Mobile homepage and header, that will warmly welcome your customers
  2. User-friendly mobile hamburger menu
  3. Category page that’s easy to navigate
  4. Mobile product page that encourages customers to buy
  5. Check out stage – the “king” step that sells
  6. Buttons, that your customers will tap with delight

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!

1. Mobile homepage and header, that will warmly welcome your customers

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 most hot 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 ecommerce homepage on mobile: it's old-fashioned, not user friendly, there's no hamburger menu in the left above corner.

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.

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.

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 AlexixBittar.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 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.

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 choice for mobile conversion rate optimization – 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.

Optimized shopping bag: when you press the icon, a top layer appears showing the shopping bag.

Another version of the optimized shopping experience on Amazon.com that can be easily adapted to shopping cart: when you press the

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).

Let’s sum up the best and worst practices of creating a mobile homepage and header:

Do’s:

  • Homepage that’s modern, welcoming and user friendly
  • Icons that are comfortable to tap
  • Shopping cart opening in a top layer or screen, hovering over your regular tab
  • Hottest and newest promos always at the top of homepage

Dont’s:

  • Old-fashioned, non-intuitive homepage
  • Menu and shopping cart that are hard to find
  • Icons, that are not captioned
  • No access to search bar

2. User-friendly mobile hamburger menu

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.

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?

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.

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.

Let’s sum up the best and worst practices of mobile hamburger menus:

Do’s:

  • Captioned hamburger menu
  • Icon big enough to be comfortable to tap
  • Menu with subcategories showing without the need for reload

Dont’s:

  • Icons too small to tap and lacking captions
  • Menu without subcategories

 

Find out more examples of how to build great menu on mobile devices in the episode of Bite-size Ecommerce Optimization!

3. Category page that’s easy to navigate

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.

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 on mobile device ecommerce website: 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

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.

Category page best and worst practices:

Do’s:

  • Showing main menu with link to shopping cart, heading informing in which category you are, filters, and products.
  • Gesture navigation
  • Displaying two or more products near each other

Dont’s:

  • No main menu, filters, or shopping bag icon
  • No intuitive, gesture navigation
  • Displaying too much products, or one product at one screen
  • Showing products that are not described and have no price.

4. Mobile product page that encourages customers to buy

Buying incentives are your best friends here. So use them generously. Some good examples are:

  • hurry up – only 3 pieces left
  • 2 days till the end of thesalet
  • 5 people are watching this product right now

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).

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 conversion rate: the buttons for ?Add to bag? and ?This piece is selling out? should be 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.

Mobile product page best and worst practices:

Do’s:

  • Use buying incentives
  • Show information on product availability
  • Use swiping motions in the product gallery
  • CTA’s in contrasting colours

Dont’s:

  • Not encouraging customers to buy by not using incentives
  • Keeping your customers in the dark by not saying if your product is available or not
  • Tapping instead of swiping in product gallery
  • CTA’s in dull colours

5. Check out stage – the “king” step that sells

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 checkout example: there is

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.

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.

Optimized Sephora.com checkout page: no additional info, that could stop your customer from buying, included.

Mobile checkout improvement best practices:

Do’s:

  • Introduce the signs of security
  • Remove all unnecessary info from checkout stage

Dont’s:

  • Provide any unnecessary info: social media icons, additional promos, store locator etc.

6. Buttons, that your customers will tap with delight

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.

Proper size buttons on Nordstrom.com website. However, it would be better if they were in contrasting colors.

Mobile buttons – best practices:

  • Buttons large enough to be easily tapped
  • Buttons in contrasting colours
  • Easy to use for left-handed and right-handed

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.

Hungry for more tips to boost your conversion rates?

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!


Growcode Ecommerce Blog / Ecommerce Optimization / Mobile Ecommerce / 6 Money-making Tactics to Grow Mobile Ecommerce Conversion Rate

Leave your comment