Advertise with

Lancôme speeds its mobile site with Google’s progressive web apps
Lancôme speeds its mobile site with Google’s progressive web apps

Lancôme speeds its mobile site with Google’s progressive web apps


By April Berthene - Apr 4th 2017, 09:05

The L’Oréal Paris cosmetics brand launched a mobile website that operates like an app and powered a 16% increase in mobile sales. 

Lancôme’s mobile site needed a makeover.

The need for a fresh look was especially noticeable when smartphone traffic surpassed desktop traffic in early 2016 and showed no signs of slowing down, says Malik Abu-Ghazaleh, vice president, digital marketing and e-commerce at cosmetics retailer Lancôme, a brand of L’Oréal Paris.

“There is a lot of pressure when you see this traffic building,” Abu-Ghazaleh says.

Internally at Lancôme, there was a lot of talk about building an app, but Abu-Ghazaleh knows an app is expensive to build and shoppers need a strong hook to download it. “It’s easy for people one step removed from digital to say, we need to build an app, it’s the hot thing to do right now,” he says.

Abu-Ghazaleh heard about Google Inc.’s latest mobile website technology, progressive web apps, that promise to have the look and customer engagement of an app, but in a mobile website, and decided to go this route. A progressive web app uses responsive techniques that formats the web page to the size of the screen the consumer is viewing it on. 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. Lancôme worked with its mobile commerce vendor Mobify and Google in the summer of 2016 and launched the new site in October.

Mobile sales have increased 16% year over year, the site is about 50% faster and it’s a more engaging website, Abu-Ghazaleh says. “In a nutshell, it’s a lot more dynamic,” he says.

The mobile site “feels like an app” in several ways. For example, the icons, such as the “hamburger” menu of three horizontal lines, the shopping bag, the heart icons and the store-locator balloon, are typical app icons. The product detail page layout also is more “appy.” For example, if a consumer taps on “more information,” a box will slide out from the side of the screen and overlay the main screen, and shoppers can scroll through a carousel of product images horizontally.

Also, when a shopper goes from page to page on the website, the top header of the brand name and category pages doesn’t leave the screen. For example, if a shopper taps on a product from a category page, the product details will take a few seconds to load but the top header will stay in place the entire time. In a normal browser experience, even if the header is the same from page to page, the browser would have to “redraw” or reload it every time a consumer navigates to a new page. This static header feature also contributes to the website’s speed. The content that is saved page to page is stored in local browser storage, and the page does not need to request this information from a server, says Peter McLachlan, chief product officer at Mobify.

The site also uses code splitting when a consumer first visits This means Lancôme prioritises which elements on the home page it wants to load first, and which elements are secondary. This gives the shopper the perception that the site has loaded and is ready to interact with, even if content further down the page has not yet loaded.

Progressive web apps also load quickly because they use a browser “service worker.” Service workers fetch content in the background on a separate computer processing unit (CPU) than the CPU running the website and completing the tasks the consumer is requesting. Each smartphone has between two and four CPUs, McLachlan says.

On average across all of its mobile pages in February, the site loaded in 3.5 seconds, which is much faster than the 8-9 second average in February 2016. Plus, a faster site gives a huge SEO boost from Google, Abu-Ghazaleh says. Of the 26 brands L’Oréal Paris owns, Lancôme has the fastest site, he says.

Push notifications benefit progressive web apps too. Retailers can have a pop-up appear on the website and ask the consumer if she would like to receive smartphone alerts from Lancôme. This alert is programmed to appear only after a shopper has interacted in various ways on the site, such as visiting multiple product pages and putting products in her cart, so as not to ask her before she is ready. These alerts are only available to Android users because iPhones do not allow for this technology, McLachlan says.

Since the site launched in October, more than 20,000 shoppers have signed up for alerts, Abu-Ghazaleh says. The retailer sends four to five alerts a month about exclusive promotions and product releases. 9% of consumers who tap on a push notification make a purchase, which is much higher than its website conversion rate, Abu-Ghazaleh says.

Abu-Ghazaleh says there was minimal heavy lifting on Lancôme’s side and no major work for its internal tech team, only a few tags to add to its code.

Mobify charges customers a development fee that can range from the low tens of thousands of dollars to hundreds of thousands of dollars, and then an annual fee of $75,000-$200,000, McLachlan says.

Abu-Ghazaleh says the cost for Lancôme was about 20% less than the cost of developing an app.

Soon, Lancôme will launch its product pages with Google’s Accelerated Mobile Pages (AMP). The brand started the project with Mobify in February and is in the process of finishing the pages, Abu-Ghazaleh says. AMP allows businesses, including retailers, to build lightweight mobile pages that load as fast as possible on smartphones. The AMP pages are accessible only when a consumer taps on a link from Google search results on a smartphone.

The pages load super fast because the HTML code contains restrictions, such as not allowing custom Javascript coding. AMP also uses AMP Cache, which is Google’s content delivery network that validates every page works and doesn’t depend on external resources, such as suggested products powered by an e-commerce technology vendor. Instead, coders have to build in these features using Google-approved specifications. A content delivery network is a network of servers that delivers web content to consumers based on their location, the origin of the web page and the location of the server. 

Read more about: ecommerce | sales | digital | retail | lancome

Related News

Aldi opens a record number of stores in one day
07/12/2018 - 09:45
Aldi UK has opened a record eight stores on a single day as part of a tranche of 24 new outlets that are opening throughout November and December.

SA grocery retailers hoping for a merry festive season
06/12/2018 - 08:18
Grocery retailers have had a tough year, and like other retailers are hoping to see a boost in sales over the festive season.

New age consumerism and the consumer power-shift
05/12/2018 - 10:37
Advances in telecommunication technology have transformed the tools used for marketing and consumerism and ultimately, the way that businesses operate. The Statista 2017 Report indicated that the number of smartphone users in the United States is estimated to have reached 224.3 million, with smartphone users worldwide exceeding 2 billion. Undoubtedly, we are running headlong into the end of the industrial era of consumption and into a consumer power-shift.

Driving mobile and card acceptance among informal retailers holds the key to scaling cashless payments in SA
05/12/2018 - 09:57
Despite the majority (77 percent) of adult South Africans owning bank accounts, more than half of the total value of all consumer transactions in the country are still conducted in cash. This suggests that being formally banked may not be enough of an incentive for consumers to move away from cash. Accelerating the pace of migration from cash to digital and card payments must be a priority for catalysing economic growth.

UK Grocers 'under pressure' as Christmas approaches
04/12/2018 - 10:25
Weaker-than-expected growth in the month of October is putting retailers under pressure as Christmas approaches, according to Nielsen.