PWA Technology Meets Prestige Skincare
Progressive Web App
Digital Experience Strategy & Design
US: Microsoft Dynamics 365
Glossy Beauty Awards, 2021
Finalist - Best E-Commerce Experience
Web Excellence Awards, 2021
Website - Beauty & Cosmetics
Ava Digital Awards, 2021
Platinum, Web-Based Production, Creativity (Web Design)
IAC Awards, 2021
Best Beauty and Fashion
Mobile Excellence Badge
Horizon Interactive Awards, 2020
Websites - Consumer Information
Horizon Interactive Awards, 2020
Websites - Responsive, Mobile Design
W3 Awards - Silver, 2020
Website Features - Best Use of Emerging Technology for Websites
W3 Awards - Silver, 2020
Website Features - Best Visual Appeal - Aesthetics of Websites
Acquired by L’Occitane International in 2019, Elemis is the number one independent skincare brand in Britain. Their science-backed skincare products and cutting-edge patented technology are globally renowned. With the majority of Elemis’ customers accessing the site via mobile, creating a mobile-optimized experience was of paramount importance for the brand to thrive. Our solution was undeniably a PWA (Progressive Web App) – a mobile-first, future-proof ecommerce site that can scale with consumer expectations.
WHAT ARE PWAS?
PWAs combine the discoverability of the web with the capabilities of an app – without the investment and barrier to entry an app requires. They are searchable via Google so consumers don’t need to interrupt their shopping experience with a detour to the app store. And because PWAs pre-cache parts of the site, the result is a lightning-fast experience translating to engaged visitors, increased conversions, and better SEO rankings.
ACCOMMODATING A TIGHT TIMELINE
In early 2020, Elemis was in the process of kicking off their migration project with a different agency, when they realized that a PWA implementation would drastically improve their customer experience. Together with Corra, they were able to quickly define the deliverables included in the MVP and determine how to get to the finish line as soon as possible, while limiting project risks. Corra's PWA storefront solution includes everything merchants need to be able to kickstart their PWA Implementation, including a full CMS tool integration, state-of-the-art PDP and PLP templates, a streamlined checkout experience with mobile-friendly payment methods, and much more. Its features allowed us to significantly lower costs and push the project to production faster, leaving more time to curate the Elemis brand experience to perfection.
Together, Corra &
MEETING CONSUMERS ON MOBILE
A large majority of Elemis’ customers access the site via mobile. Yet, in spite of the high traffic, conversion rates on smartphones were under-performing. Creating a mobile-optimized experience was of paramount importance for the brand to thrive in years to come.
A mobile app would have checked all the boxes but Elemis, like many brands, simply couldn’t justify the investment of building an app for both iOs and Android, in addition to maintaining their responsive site. And on the consumer side, it’s often only brand loyalists who are willing to complete the process of downloading an app. Elemis needed an experience to appeal to both new and returning customers. Enter the perfect combination: PWAs.
AN EXPERIENCE OPTIMIZED FOR MOBILE
The mobile conversion gap (high mobile traffic with low mobile conversions) remains a predicament for many commerce brands and Elemis is no exception. According to Google, industry averages suggest that 62% of all ecommerce traffic comes from mobile but it accounts for only 23% of conversions. That’s a 39% gap. Which is serious revenue left on the table.
Elemis’ data shows an even greater split between devices. Around 80% of their sessions originate from a mobile or tablet device, so it was crucial that Corra’s designers and strategists took a mobile-first approach to design and strategy. Meaning, we designed the experience first for mobile user behavior, perfected the designs with the client, and later translated these designs to the desktop screen. This ensured that we were prioritizing converting the majority of Elemis’ traffic, which takes place on smartphones and tablets.
Corra built two sites for Elemis: the US site (us.elemis.com) and the UK site with an EU storefront (uk.elemis.com and eu.elemis.com). We integrated an extension to allow each store to list product pricing in their respective currencies.
THE BEFORE AND AFTER TRANSFORMATION
For a skincare brand, specifically one that produces clinically proven results like Elemis, being able to showcase before and after transformations is a must. To do this, Corra pushed the CMS tool to its limits to create a template that Elemis can use to communicate the effectiveness of their products, now and in the future. The shopper can drag the arrows to reveal a view of the skin prior to and after using Elemis skincare.
The experience provides an interactive way for consumers to see first hand what kind of results they can expect from using Elemis products. It’s a powerful way to influence conversions and retention. Especially since Corra data suggests that, for 38% of women, quality is the top consideration for being loyal to a specific beauty brand.
Another feature we leveraged from the proprietary component library was the advanced store locator. The rich experience allows shoppers to not only find the closest locations that sell Elemis products, but outlines a suggested route and step-by-step directions for travelling there by transit, car, foot, or bicycle.
Our goal with Elemis was to deliver a high-end online shopping experience that is as elevated as their brand and their products. Brand, collection and product storytelling take center stage as the customer proceeds through the shopping journey. However, usability is at the core of the experience as both returning shoppers and those new to the brand can quickly and easily find what they’re looking for based on their skincare needs.
STORYTELLING THROUGHOUT THE CUSTOMER JOURNEY
Elemis' beliefs are routed in Skin Wellness, Proven Results, Feel-Good Skincare, and Transparent Innovation – these are reinforced throughout the customer journey. Shoppers are able to learn about the background and ingredients of any chosen skincare formula and review clinical trial results on the PDPs.
Because education was key, step-by-step directions and video content communicate how to use any given product and the benefits and unique characteristics of each skincare formulation. The consumer can easily build out their regimen and shop additional products within the same collection (or by similar benefit) with shoppable product recommendations below.
Customers are invited to contribute their own product stories by leaving a review. Ratings and reviews powered by Bazaarvoice are featured at the bottom of the page. Reviews are important to Elemis’ business as a beauty brand in an industry where social proof is often crucial to driving purchasing. Consumers want to hear from real people about their experience with the product before buying.
EASE & EFFICIENCY FOR BRAND LOYALISTS
Through the new PWA experience, Elemis is able to better serve the many brand loyalists that periodically visit the site to restock on their favorite skincare products. These shoppers are now able to quickly save the site on their home screen and enjoy a fast, app-like experience.
The biggest change compared to Elemis’ previous PLP is that visitors no longer need to scroll through multiple options of the same products to find the right size they’re interested in. Corra set up product types so that the size variations (simple products) are associated with the main configurable product. Through this approach, the Elemis team doesn’t have to duplicate content and can focus on writing strong descriptions for core product pages only. In turn, these pages will benefit from better SEO rankings.
Additionally, the product tiles on the PLP make it quick and easy for recurring customers to choose a size and add it straight to their bag without having to visit the PDP. To make the experience more intuitive, the images change dynamically to give a visual representation of the size the customer has selected, and the multi-select filter can be toggled on and off to leave more breadth to the product list.
A MODERN MINI CART
Elemis customers can now enjoy a unique enhancement, a mini cart that slides out with the ability to add free samples or input a promotional code before checkout. (Samples change dynamically based on what the customer has in their cart.) For example, a guest buying ‘Superfood Glow Priming Moisturiser,’ a knowledgeable retail associate might suggest complementary items at the register like Superfood Vital Veggie Mask, Facial Cleanser, and Night Cream.
Another new feature automatically adds a gift to the mini cart with the right coupon—without leaving the checkout process to claim it. Users simply enter their code and choose a free item while still in the mini cart. Incentives like these, such as free samples, a potential discount, or a gift, lead shoppers further into the checkout flow. Corra leveraged the Amasty extension on the backend to facilitate this logic and built a custom frontend experience from scratch for Elemis.
ENTERPRISE GRADE SECURITY
In addition to a blazing fast PWA storefront, Elemis also needed an enterprise-grade security deployed on a React frontend with Magento Cloud backend. Corra recommended that Elemis deploy Webscale's CloudEDGE Security. CloudEDGE is a uniquely flexible solution as it can be deployed at the edge, alongside any CDN or WAF, in any cloud and on top of any ecommerce platform. It leverages automation and analytics, to proactively identify and protect web applications uses automation and analytics to proactively identify and protect web applications from SQL injections, cross-site scripting (XSS), server side request forgery (SSRF) and other sophisticated attacks.
SPEED EQUALS REVENUE
The increase in speed has a profound impact on revenue growth. As PWAs pre-cache parts of the site, the result is a super-fast experience translating to engaged visitors, increased conversions, and better SEO rankings.
As for improvements in conversion rate, the Elemis team compared their holiday period before launch (October 2019 - December 2019) to post PWA launch (October 2020 - December 2020) and shared the following dramatic results: +85% increase in mobile conversion rate, +47% increase in holiday sales YOY, and +150% increase in mobile transactions.
When people describe our new mobile experience, snappy is one of the first three words they use. It’s a snappy, beautiful site.
Senior Director of Global Digital Experience, Elemis
In these unprecedented times, it was impressive to see how our site’s creative refresh living within our PWA’s quick, mobile optimized site could come together to make our flagship global storefront a premium, elevated brand experience.
Senior Director of Global Digital Experience, Elemis