10 Tips for a Successful Mobile First Product Paper


The majority of traffic goes through mobile, but retailers still struggle to convert on this device. Advice from Asos, Contentsquare and Etam to get this right.

58% of global internet traffic is via mobile according to Contentsquare’s Digital Experience Standard 2022 report while the conversion rate is 1.64%, nearly half that of desktop (3%). “Browsing is frequent but remains mostly casual on mobile, while it is more analytical on the computer,” said Judge Jeffrey Fillon, Vice President of Marketing for EMEA at Contentsquare. Internet users spend an average of 2.39 minutes per session on mobile compared to 5.55 on desktop. Therefore, mobile product sheets have an interest in being particularly effective in capturing consumers’ attention when we know it will be one of the central entry points to a brand’s website.

At Etam, the numbers speak for themselves: The company has seen mobile traffic increase 10% since the beginning of the year, and convert 30% over the same period, after redesigning its website last year. For a brand that applies a mobile-first strategy, 77% of their traffic is mobile, which is 50% of their online business. So what are the best practices that can be learned from e-merchants to convert more customers on mobile?

#1 – Mobile First Strategy

The image is essential to make you want to stay on the product sheet, even if it takes up the vast majority of the screen. © ASOS

An e-commerce merchant setting up a mobile-friendly commerce site has two solutions when developing their strategy. It either uses a Progressive Web Application (PWA), which is a site accessible from a URL similar to an application and is highly optimized for mobile, or a responsive site, which is a mobile version of the site accessible on the desktop that adjusts according to the size of the screen. Etam initially had a desktop site and PWA, but for Martin Sorio, the brand’s e-commerce manager, “the two sites up front were difficult to manage and led to maintenance problems.” So Etam changed the tune last year to go back to a responsive site that was first designed for mobile and then adapted to the desktop. Same scenario in Asos. “Mobile-first is a no-brainer when many of our customers are browsing on mobile,” says Chris Hart, chief technology officer and webmaster at Asos. “Whatever new feature we’re testing, we look at the mobile experience first.” Asos has a responsive site but is interested in the features that PWAs offer to improve the customer experience.

#2 – Captivating Head

When your scroll rate does not exceed 54% on average, it is important to grab your customers’ attention quickly and encourage them to stay on the product page. Logically, the most important information should appear at the top of the page and the customer should be able to get a quick idea of ​​the product without having to scroll. The information provided should be hierarchical, and the content simple, effective and intuitive. Due to the small screen size of smartphones, the image will be necessary to make the customer want to stay on the product sheet they just joined, even if it occupies the vast majority of the screen. A quick and clear description of the product and its price should then appear.

#3 – Enhanced Visuals & Featured Videos

A mobile screen does not allow you to see the product or its material in the best possible way, so you will have to quickly provide customers with answers, and zoom in on the product so that they can get an idea of ​​the material and videos of the worn product. Etam has chosen to integrate videos into almost all of its product sheets, as well as snippets of live shopping content to guide the shopping experience of its customers.

#4 – Well-watched burger menu and notable CTAs

The burger menu (the three-line icon) allows the user to easily return to the menu if needed. © ASOS

Contents Square notes that mobile users are accustomed to certain criteria when browsing a merchant’s site and expect to find them. “Brands, by providing the right experiences, educate their customers,” says Jeffrey Fionn. The burger menu, the small three-line icon that leads to the main menu, should appear at the top left or right of the page and stay connected to the page when the visitor scrolls down. In Etam, the Add to cart button is installed at the bottom of the screen, at the level of the visitor’s thumb. The goal is to facilitate the Internet user’s browsing on the respective website as much as possible. Don’t forget to play with the contrast, the burger menu should be able to change color if the contrast with the scrolling colored backgrounds is no longer strong enough.

#5 – Lighter gear

To make sure their customers see the best photos and videos possible, “it all starts in Photo Studio, with our API, our network and the combined work of our partners and our engineering teams,” explains Chris Hart, at Asos. To do this, we use technologies like native lazy loading in the browser. * and Source Collections ** and Modern Formats”. At Etam, videos have left category pages to better enrich the brand’s product pages, the goal behind this is to make browsing as smooth as possible: every millisecond counts when 53% of visitors leave if the page takes more than 3 seconds to load (average Loading time is 1.61 seconds on desktop compared to 1.52 seconds on mobile, according to Contentsquare). Reducing loading time leads to instant customer satisfaction and improved site performance and thus return. Contentsquare recommends reducing the weight of images, using caching to make browsing smoother and preferring hosts that have no time and day restrictions to carry out marketing campaigns. At Asos, the teams say they work hand-in-hand to ensure customers see high-quality photos and videos while using the lowest possible bandwidth.

#6 – Visual Reinsurance Items

Etam reassures its customers by indicating the terms of free delivery and returns, in addition to paying 3 times for free. © Etam

Delivery, free returns in store … Customers should quickly find information that will reassure them before buying. Making this information visible, by making it appear high enough on the page, will improve your conversion rates. To go in this direction, Etam has chosen to improve its customers’ ratings: “We’ve noticed that product sheets that include reviews turn out better, and that justifies Martin Souriau, so we put it on the page.” The brand also offers a panel that opens with a size guide and tips on choosing a bra, for example. “Our goal is to keep returns as low as possible, and as Etam’s e-commerce manager explains, the customer should have the tools to choose the right size.”

#7 – Optimum Thrust Brick

Jeffrey Fionn appreciates: “On mobile, the buying process is crucial and it’s not normal to lose customers at this time.” The Vice President of Marketing for EMEA, Contentsquare explains that it is necessary to double the reinsurance items at the time of payment with the logos of security partners and banks. We also need to make life easier for customers with smart, pre-filled forms or a large number of payment solutions, which will lead to higher conversion rates. Etam promotes one-click payment to customers who have filled in their information in their customer account. The brand has also implemented solutions such as Apple Pay, Lydia and Pay in three free installments with Alma and Klarna depending on the target markets.

#8 – Transparency and sustainability on the agenda

Etam plays the transparency card and shows in video the factories of its manufacturers. © Etam

Consumers aspire to more responsible consumption and illustrative items should appear on the product sheet. Etam highlights the wecare program, an environmentally responsible program that allows it to display product formulations and labels. The brand demonstrates transparency by referring to the garment manufacturer on the product sheet with a dedicated tab describing the activity of the manufacturer or showing it on video. These items are now points of customer reassurance. Don’t forget that the product sheet is also accessible from the store, a feature that Etam uses by placing QR codes on the offered products. By scanning the code, the customer can access the transparency and sustainability information they are looking for. Etam is also betting on the customization brick by showing a loyalty program that indicates in real time the accumulation of points and the benefits offered.

#9 – Respond

The product sheet is constantly changing and retailers must react quickly when a problem is discovered. If a large number of returns are observed on the garment, it will be necessary for example to show the size guide, direct the customer to the correct size or provide new photos to better describe the material of the product. “We are constantly learning from our research on our users and the multivariate tests we run,” says Chris Hart of Asos.

#10 – Don’t neglect what leads to the product sheet

If product sheets are one of the core elements of your funnel, the rest of the site shouldn’t be neglected. The search bar is a key element: If the results don’t match up with a customer’s search, in 20% of cases they leave the site, Contentsquare notes. So traders should revise the proposals as much as possible. Etam navigates its category pages, because the customer does not always intend to click and enter the product sheet. So showing him scrolling or seeing product images without page loading is interesting, offering him to change the color of the product in the same way.

* slow original loading: consists of indicating which page components are loaded first

** Source groups: allow you to select the image that is adapted to the consulting station

Leave a Comment