Lancôme case study header

A customer success story

Lancôme’s Engaging Progressive Web App Drives 36% Lift in Mobile Revenue

Revenue icon

Mobile Revenue

+36%

Time icon

Time to Interactive

1.77 sec

Google logo

Lancôme is showing the world of beauty a new way of serving mobile shoppers by embracing Progressive Web Apps – the new disruptive mobile web technology pioneered by Google. By partnering with Mobify, the only platform for Progressive Web Apps (PWAs) for commerce, Lancôme is profiting from a brand-new approach to mobile commerce and engagement.

The move to deliver an app-like experience on the mobile web is a natural progression for a company obsessed with connecting richly and deeply with consumers. State-of-the-art customer engagement, individualized shopping experiences, and innovation based on diversity are all part of the DNA at Lancôme and its parent company, L’Oreal. So it made sense to create mobile shopping experiences with the same type of relentless focus on what the customer needs – according to his or her behavior, lifestyle, and preferences in that moment.

The Challenge:
Mobile Growing but Not Converting

Throughout 2016, Lancôme Vice President of Digital Marketing & Ecommerce Malik Abu-Ghazaleh was paying close attention as Lancôme mobile traffic steadily increased. Mobile had become the dominant source of traffic, a signal of a new opportunity to meet shoppers in their mobile moments of need. Yet, while traffic was growing, analytics showed mobile sessions were about one-fifth as likely to convert as desktop sessions.

“Initially, we were exploring an iOS app but when we saw Mobify’s Progressive Web approach we knew we wanted to deliver an app-like user experience that was reliable, fast, and engaging.”

The impediments to mobile success were many. The overall performance was too slow, as rich content – while captivating to customers on desktop – was increasing mobile page loads. On top of this, the mobile user experience was full of friction and didn’t allow shoppers to move quickly through the purchase process.

After hearing a Mobify customer speak at a conference on their success with native mobile apps, Abu-Ghazaleh tapped Mobify to investigate how Lancôme could capture the high-converting features available in downloaded native apps, and bring them to Lancôme’s much larger audience on the mobile web.

The Solution: Progressively Enhancing the Mobile Web

“Initially, we were exploring an iOS app,” says Abu-Ghazaleh, “But when we saw Mobify’s Progressive Web approach we knew we wanted to deliver an app-like user experience that was reliable, fast, and engaging.”

Creating a Fast and Intuitive User Experience

“Mobile shoppers are increasingly expecting the same type of quality and responsiveness that they get from popular apps like Facebook and Uber,” Abu-Ghazaleh says. “Mobify’s secret sauce is making the mobile experience fast and intuitive, ensuring that the shopper doesn’t run into friction and drop off.”

Progressive Web Apps are 2-4 times faster than responsive websites because the entire app is downloaded on the first page load, which allows the website to react immediately to user input throughout the journey. When information is missing, such as a high-resolution product image on a product display page, the web app will pull that image in from the server but display the product thumbnail from the product listing page in the meantime. This provides the perception of an instantaneous response and allows the shopper to stay engaged and interact with the page right away.

Native apps traditionally had higher conversion rates than mobile web because they provided a better, more intuitive user experience. Mobify used industry-proven mobile commerce best practices to bring those app-like designs and interactions to the web for Lancôme. The persistent header bar, the use of placeholder content, and the visual representation of product categories all give it the look and feel of a native app.

Pushing Up Web Engagement

The team also focused on the immediate return on investment that web push notifications could provide. Contextual web push notifications can engage Lancôme shoppers based on location and browsing behavior – even when browsers aren’t open. Compared to email, this offers a much less noisy channel and more personalized communication – a new opportunity for Lancôme to build stronger customer relationships and drive revenue.

AMPing Up Speed

Lancôme saw the potential for Accelerated Mobile Pages (AMP) to fulfill today’s customer expectations for immediacy and reduce customer drop-off. These lightweight landing pages are cached by search engines to load instantly from organic search.

The load time for Lancôme’s AMP product display page (PDP) is over 2X faster than the non-AMP version, and the AMP product listing page is 4.5X faster than the non-AMP version. The mean loading time for all of the site’s AMP pages is an astonishing 1.1 second.

Speed is crucial at this step in the customer journey as some shoppers will drop off before the first page even loads. Twelve percent of Lancôme’s traffic was dropping off between DOM content load and full page load, with the new AMP pages that number is down to 2%.

The Results: 36% Lift in Mobile Revenue

Overall engagement metrics are impressive, with pages per session up 50% year-over-year (YOY), and bounce rate down 35% YOY. “Year-over-year transactions are up 23% and average order value is up 11% ,” Abu-Ghazaleh reports. “As a result, we’ve seen a 36% lift in mobile revenue.”

Lancôme is also seeing a clear ROI on its use of web push notifications, which it sees as a key tool to engage, convert, and retain customers. The average click-through rate for web push notifications is 9.8%, and the click-through rate for push notifications triggered by cart abandonment is 18%. This translates to direct revenue, as the conversion rate for shoppers who arrive on the site via a cart abandonment push notification is an impressive 8%.

Google’s Stamp of Approval

Lancôme’s new mobile website was given Google’s stamp of approval and categorized as “exemplary” when evaluated against Google’s Progressive Web App checklist. Google uses an auditing tool that runs a barrage of tests and scores the performance, quality and correctness of a Progressive Web App on a scale from 1 to 100.  Lancôme’s Progressive Web App received a “Lighthouse” score of 94/100 – up from a score of 34.

“For our Progressive Web App to be scored as exemplary in the eyes of Google is a huge accomplishment and one we don’t take lightly.”

“Google is an influential force on the web and their new technologies are opening up countless engagement and revenue-driving opportunities for retailers,” says Abu-Ghazaleh. “For our Progressive Web App to be scored as exemplary in the eyes of Google is a huge accomplishment and one we don’t take lightly.”

The Lighthouse score takes a variety of factors into consideration, including speed. Since Progressive Web Apps only load once, page load alone doesn’t tell the whole story. The emphasis should be on measuring the customer task and journey, and Lancôme’s time to interactive is only 1.772 seconds – down from 11.195 seconds. Google defines “time to interactive” as “the point at which layout has stabilized, key webfonts are visible, and the main thread is available enough to handle user input.” In other words, it’s when the user can actually engage with the page and start shopping.

“We wanted our mobile site to be the best foundation for simple, immediate, and contextual customer engagement,” says Abu-Ghazaleh. “Working with Mobify, we are able to show our mobile face to customers in the best light.”