How Lancome Benefitted From Progressive Web Application

About the brand

Lancome is a globally recognized and one of the strong growing cosmetic businesses that launched in the mid-1930s. From a small hometown business to one of the largest cosmetic businesses in France with thousands of boutiques, the brand has been flourishing over the years.

Challenges

In 2016 Lancome faced an issue that was very important to address. Lancome noticed that despite the escalating number of mobile visitors only a small fraction would convert into customers. The increasing number of the audience were either not interested or were facing any stumbling block when ordering from the mobile phone.

Upon analysis, they figured out that mobile traffic was less likely to convert into customers compared to desktop audience. The numbers were quite distressing for the business as only 15% of mobile customers continue purchasing. On the other side, 38% of shopping carts led to orders on the desktop.

The discrepancy between desktop and mobile visitors clearly indicates that there was some functionality or scalability complication. Therefore customers who were visiting from a mobile phone couldn’t end up placing an order.

Also Read: A Rock-Solid Custom Web Application Development Strategy

What needs to be done?

The increasing number of daily mobile visitors forced Lancome to invest in mobile web development to make a better conversion rate. The outdated native website wasn’t convenient enough for mobile users indicating compelling an urgent website transformation or optimization.

Alternative Solutions

Progressive web application wasn’t the first idea. Earlier they decided to develop an e-commerce app but the problem was that e-commerce would only be useful for customers who visit regularly. The marketing team knew that mobile customers who visit with a different aim would never download an e-commerce application. Or in case they will download it they wouldn’t return to an e-commerce app. All these issues stop them to develop e-commerce. Lancome was aiming for something swift, reliable, dependable, and integrated with the functions of both mobile applications and native apps.

Why Progressive Web Application (PWA)?

E-commerce application wasn’t an ultimate solution for mobile customers as the customer’s engagement may decrease. What Lancome was actually aiming for was a smooth and reliable user experience that has the features of both mobile applications and native apps. So it doesn’t affect customers’ engagement.

Malik Abu-Ghazaleh vice president, digital marketing and e-commerce at cosmetics retailer Lancôme, a brand of L’Oréal Paris meanwhile opted for a different technique which was committed to delivering the functions and appearance of the application but in a mobile website. The technique referred to as Progressive web application was a part of Google Inc.’s latest mobile website technology.

Progressive web app uses a scalable approach that alters the size of the web page depending on the size of the screen. It can be coded to have the same URL as the desktop and tablet site or it can operate on a separate URL, like a stand-alone mobile site. With the following objectives and goals, they switched to a progressive web app.

Offer a smooth and seamless user experience
Create a scalable website layout for mobile customers
Reengage to customers
Prompt page and products loading using Accelerated Mobile Page (AMP)

Solution

Lancome considers targeting a greater approach, so instead of updating their original site or building an e-commerce application, they went for a progressive web app. A fundamental part of PWA commonly known as Service workers offers optimal performance on an unstable connection and push notifications for re-engagement.

After moving to cutting-edge technology (PWA) Lancome observed significant changes among the top highlighted are listed below.

Page activation time decreases by 84%
15% decrease in bounce rate
mobile sessions rise by more than 50%
conversions increase by 17%

IOS Devices

Regardless of the phone type and size (iOS or Android) new approach deliver a smooth and better user experience. Lancome pays extra consideration to iOS since more than 65% of users visit from iPhones. After moving to PWA, Lancome noticed a 53% increase in session length and a 10% bounce rate decrease among iPhone users. Remember: iOS was unsupportive to multiple key PWA features such as “Add to homescreen” menu item, push notifications, and offline caching.

After upgrading to PWA, site download speed increases, and the user interface become more reliable and smoother resulting in high customer engagement.

53% rise in mobile sessions on iOS
10% fall in bounce rates on iOS

Android Devices (Push Notification)

Lancome took full advantage of supportive service workers on Android devices such as push notifications. Due to the outstanding user experience and ease to access feature over 18,000 shoppers joined the notification alert since the site launched in October 2016.

The notifications on native apps and PWA is almost the same and the customers will still receive them if they are not using the browser. Lancome exhausts the possibilities and sends at least one alert a week for a new product launch or discount offers. This strategy helps them to generate sales since 8% of customers who click the notification end up placing an order.

Lancome was bothered by the abandoned cart but after shifting to PWA push notification that helps them to reconnect with shoppers. The high-end approach successfully delivered an 18% open rate on mobile, and conversion rates on abandoned carts increased by 8%.