In the last 6 months, more and more online shoppers (79%) have purchased on mobile.
However, mobile users convert at a rate of 1.32% only whereas desktops convert at a rate of 3.82%.
Despite a higher inclination among people to buy online, mobile conversions still seem abysmal.
The problem lies in faulty UX on mobile product pages—it leads to annoyed visitors who would rather spend their time elsewhere. In fact, this is a major pain point eCommerce business owners face during product page optimization.
In this post, we'll be looking at 12 things you can learn from successful mobile product pages to improve your conversions.
12 ideas you can steal from successful mobile product pages
1. Essential info - always above the fold
Brands such as Project Juice, Kodak, and Whole Truth Foods are great examples of strategic placement of content above the fold.
Norman Nielsen Group’s study reveals that around 57% of customers spend their time viewing pages above the fold.
What to learn:
a) Showcase an immediate benefit to the visitor. This hooks them into lingering around for more time and engaging with what you have on offer.
Check out how Project Juice does it.
b) Offer a glimpse of the product and its features. This helps in creating anticipation for the customer.
Kodak’s example is crisp and attractive enough for anyone to pause and read.
c) Highlight the CTA and make it extremely relevant.
Whole Truth Foods showcases its CTA in an attractive color combination, enforcing it by mentioning the cart price and adding an offer as well.
2. Fewer scrolls
Check out how brands like Disguise Cosmetics, Himalaya, and Innocent Drinks present their content on their mobile product pages to improve readability and boost engagement.
Trying to consume too much content in the limited space of mobile devices can be difficult for customers. Hence, avoid giving them a content overload and keep your copy clean and crisp.
What to learn:
a) Create collapsible content blocks. This prevents endless scrolling on the visitor’s part to discover information that they might find helpful.
Disguise Cosmetics does this wonderfully by condensing a lot of useful facts about the product. The blocks are also easily expandable.
b) Experiment with tabbed content. This can easily help visitors access the content that’ll drive their purchase decisions.
Innocent Drinks does make tabbed content fun to read for their customers.
c) Add back to top links. This is ideal for longer mobile product pages.
d) Keep the product descriptions higher. This enables visitors to get a look and feel of the product along with relevant information, all at once.
Here’s how Himalaya’s product description placement ensures customers are engaged from an early stage.
3. Searchable reviews
These examples from Marks & Spencer and Yelp show how searchable reviews on mobile product pages improve the customer's buying journey a great deal.
Customer reviews can be difficult to view on a mobile product page since there may be a lot of them. Making reviews searchable is a great way to speed up the customer decision-making process.
What to learn:
a) Add specific filters for reviews. This reduces guesswork for the visitor by keeping the reviews super personalized.
Marks & Spencer does it rather effectively in a limited space.
b) Don’t hide negative reviews. As challenging as they sound to the brand’s image, they offer a more wholesome view and also create trust.
Here’s an example from Yelp.
4. Super prominent search bar
Brands like Nykaa, Home Depot, and Bite Toothpaste Bits use their search option innovatively.
While the search bar function can easily be overlooked as being simple, it holds enormous power to convert. A highly visible search bar can quickly help visitors find what they’re looking for from among multiple products and categories.
What to learn:
a) Opt for an icon instead of a search box. This takes up lesser space and doesn't look cluttered.
Nykaa Fashion features both icon and search box tied together in a seamless placement.
b) Avoid placing the search button behind a hamburger menu. Instead, keep it in and around the header.
c) Keep autocorrecting disabled. It can potentially frustrate visitors and make them quit the search and drop off.
d) Optimize autosuggest. This can make the customer’s journey smoother by reducing their effort.
Home Depot introduces the autosuggest function in a slick, non-intrusive way.
e) Use a relevant search call-to-action (CTA).
Bite Toothpaste Bits uses the CTA Shop Now to inspire people to check out their products, which opens out as a popup and displays the various categories.
f) Expand the search option out to a full screen. It’s a great way to grab the attention of visitors. This pronounces the search function especially in mobile devices while momentarily pushing all other elements into the background.
5. Item count on the add-to-cart button
In the case of Sephora, the moment you add a product to the cart the icon on the top right shows the count of items.
When the cart count instantly updates, the visitor’s buying journey becomes much more simplified.
What to learn:
a) A clear feedback in the form of a counter communicates to the customer that the step was completed. This encourages them more to continue with the checkout process.
b) Although the counter helps customer keep track of their order, however, sometimes it's not enough. You can experiment with subtle popup messages to drive home the point.
c) Avoid disappearing popups since it may act as a race against time for some customers to catch the message and not being able to find the message again can cause stress.
6. Minimal header
Gourmet Garden does this well.
It uses a clean header that increases the chance of discoverability of the other elements in a mobile product detail page. When the header is minimal, the chances are visitors will not get distracted.
What to learn:
a) Don't fixate too much on the header size. Fix the pixel size and height keeping in mind that it doesn't distract away from the content.
b) You can decide between sticky and fixed headers based on your design and ultimate goal. While sticky headers ensures that the customers always have the ability to take the next set of actions, fixed headers are less intrusive and offer more control to customers.
c) Which options to add to the header is again a choice you need to make with the customer journey in mind. With the intention to encourage them to make a purchase, keeping the header clean for better navigation makes more sense. Keep the categories and subcategories confined in the hamburger menu and other important pages such as deals and offers in the tab option.
7. Smart breadcrumbs
Successful eCommerce brands such as Toys4All, Argos, Books Wagon, and Paperchase keep their breadcrumbs short, clean, and uncluttered.
Breadcrumbs are even more important on a mobile product page because of the cramped space. It helps customers locate where they are on the site and simplifies navigation.
What to learn:
a) Stay away from long breadcrumbs. You can do this by avoiding overcategorization—this will reduce the hierarchy of categories and subcategories. Reducing the number of pages can also help.
Toys4All applies this principle in a simple, filtered way to avoid too many layers for potential distraction.
b) Avoid breadcrumb wrapping and elision. Wrapping breadcrumb links to a second line, given the size and space issue on mobile sites, can cause mistaps. On the other hand, some mobile product pages use elision to indicate there are mid-layers to the displayed hierarchy. They can be distracting and can demand extra actions from visitors.
Notice how Argos keeps their breadcrumbs clean.
c) Avoid clutter. Keep only the most necessary breadcrumb details at the top of the product page. This will ensure the breadcrumbs don’t get lost in the middle of other elements that may have been designed in a similar style.
This is how Books Wagon achieves clean and clutter-free breadcrumbs
d) Make site hierarchy easily understandable. Choose from location-based breadcrumbs, history-based breadcrumbs, and attribute-based breadcrumbs to see what will make your site hierarchy most conducive to the user’s attention.
Paperchase manages to do this well—despite several categories—thanks to easily understood up and down arrows that convey shrink-and-expand.
8. Easy product discovery
The chosen brands in this section show how they prioritize product discovery on their mobile product detail pages.
Your products are what the customers are after. In the limited mobile space, product viewability shouldn’t be affected since that affects conversions like nothing else.
What to learn:
a) Use product thumbnails. They offer important visual cues to your visitors about product features. If they get an all-rounded view on your product page, it’ll be easier to arrive at a buying decision
India Circus does it in a clean and informative way featuring photography that’s in line with the brand elements. Each thumbnail also proclaims a new tag if what a prospect is seeing has been newly launched.
b) Make use of swipe right navigation. This enables visitors to stay in touch with the presented content without having to go through too many steps.
Reebok makes this really easy by introducing side-to-side navigation featuring a 360° view of the product.
c) Add a zoom icon. It reduces the guesswork visitors have to do to figure out product features through presented images.
Hobbycraft ensures customers catch the zoom icon by using a black zoom icon against the contrasting white background.
d) Use clear and high-quality images. This makes sure your visitors have as close an experience to the real (brick-and-mortar) deal as possible.
Etsy ensures its images are realistic and high-definition.
e) Prioritize image display. It’s the only way visitors will not get distracted by content that might not inspire them to make a purchase.
Marks & Spencer uses their images as the highlight on their mobile product pages.
9. Subtle nudges
If you check out the mobile product pages of brands such as Burrow and Pantaloons, you'll discover how they keep the add-to-cart button on top of mind of their customers.
Since on mobile, a lot of different elements are jostling for space it’s important to highlight the add-to-cart button. This is to ensure that the customers don’t miss it and can begin their purchase journey easily.
What to learn:
a) Use a sticky add-to-cart button. It stays with the user’s activities and invariably contributes to a faster checkout, like in the example below.
As this case study proves, a sticky add-to-cart improves chances of conversion much more than a static one.
b) Fit the add-to-cart option into a single screen. This ensures that customers enjoy a more seamless checkout process without having to spend time scrolling.
Burrow does this in an attractive and neat way.
c) Use an easily recognizable icon. While designing, creating an icon similarity between cart and add to cart can be helpful.
This is how Pantaloons achieves a connection between its add-to-cart and cart icons.
d) Use badges instead of counters. Counters can take up space. They also don’t work for certain selling formats. One way of incorporating the functionality of the counter is to use an in-built one. However, to bring attention to the add-to-cart button, it might be a good idea to use badges.
10. UX is everything :-)
There are several easy-to-implement tactics to copy—on creating a smooth navigation—from the chosen brands in the section.
Mobile product page UX is one of the biggest pain points for customers. Fast and smooth are what they’re looking for. Your navigation should help them achieve that.
What to learn:
a) Use previous and next buttons. They don’t leave the next steps to the guesswork of visitors, adding to the overall ease and experience.
The Scholar Store mobile site is a great example of how to use this feature effectively.
b) Avoid native drop-down menus. They invariably lengthen the checkout process for the visitor and are the reason the latter wants to look through all options before selecting one. A custom UI drop-down menu is the best alternative, combining ease of use and experience.
Address Home’s mobile product page does this well with the help of a custom drop-down menu.
c) Use call-outs for errors. This saves customers the hassle of trying to find the mistakes and delay the checkout process.
Check out how Super Dry addresses this.
d) Keep the data saved. It reduces checkout time and also creates recall for visitors if they have accessed your mobile site before.
Here’s a look at how Ajio does this with their recently viewed section curated for every visitor.
e) Use more icons instead of text. This is the best-case scenario that makes any product page easier to process at an information level, without causing distraction.
This is how Free People does it.
f) Avoid wasting visitors’ time by showing out-of-stock products. An upfront indication prevents visitors from clicking on a product that’s unavailable and prolonging the checkout process.
Here’s an example from the Hobbycraft mobile site.
g) Use flexible CTAs. Apart from common CTAs such as add to cart or buy now, you can also experiment with others based on relevance.
For example, Nicobar uses a click to copy code CTA to help customers avail themselves of a discount if they’re first-time visitors on their mobile site.
h) Avoid hiding shipping costs. This keeps the checkout transaction transparent and increases the chances of a sale.
This is how Target communicates the shipping costs clearly during checkout.
11. Easy to browse through options
LeSportSac and Ajio show how simple personalization on mobile product pages can create a better checkout experience for customers.
A little personalization such as these go a long way in encouraging the customer to go ahead and purchase the product of their choice.
What to learn:
a) Avoid pre-selections for size and color. Instead make the options appear in as much detail as possible, like in this example by LeSportSac.
b) Open size chart as a popup. This can help the customer focus on this and make the right selection without getting distracted.
Here’s an example from Ajio’s mobile site.
12. Brilliant product recommendations
Major brands like the examples shown in this section use various innovative tactics to offer personalized product recommendations to their customers.
Navigating menu bars, product categories and subcategories can be a painful experience. Product recommendations help a lot in driving conversions faster and more effectively in this case.
What to learn:
a) Use upselling and cross-selling. Along with offering a faster checkout, this ensures an added personalized incentive to visitors.
Sephora uses the space below the fold rather well for this purpose, going a step ahead to introduce specialty badges for each product.
b) Experiment with a gallery, carousel, or collapse list. Test out which of these methods will best suit your product pages, taking into consideration the density of content as well as design.
Check out how Ferns n Petals uses the typical carousel style
Ashley Stewart, on the other hand, nails a gallery view.
c) Use 4 products in a 2x2 layout. Visually, this offers relief while packing in a number of options.
This is how LeSportSac displays product recommendations on its page.
d) Use a swipe indicator. This simple addition helps nudge customers in the right direction.
Check out how Yummus uses this feature in its blog section.
e) Add a non-intrusive chat widget. A sticky variation often works really well, especially when color-coded in alignment with the rest of the page.
Check out how Conscious Food does it.
That’s a kitty full of ideas to experiment with. Since it’s not a one-size-fits-all solution, you’ve got to keep A/B testing to see what works and what doesn’t. With software such as ConvertCart’s CRO360, you can easily optimize your mobile product pages and improve conversions.