client
Elemis
Services
FWRD : Progressive Web App
Digital Experience Strategy & Design
Multi-site
Partners
Adobe Commerce
Listrak
Signifyd
Klarna
system integrations
US: Microsoft Dynamics 365
EU : Epicor

PWA Technology
Meets Prestige Skin care

WHAT ARE PWA’S?
ACCOMMODATING A TIGHT TIMELINE

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.

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.

Elemis leveraged Corra’s PWA accelerator, FWRD. The solution includes everything merchants need to be able to kickstart their PWA  Implementation, including a full integration with PageBuilder, state-of-the-art PDP and PLP templates, a streamlined checkout experience .

with mobile-friendly payment methods, and much more. FWRD’s 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.

Learn More about FWRD

Background

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. Corra’s goal was to design and build a site to reflect this reputation. Our solution was undeniably a PWA (Progressive Web App) – a mobile-first, future-proof ecommerce site that can scale with consumer expectations.

Challenge

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.

Solution

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.

79.4%
US
MOBILE / TABLET
SESSIONS
ELEMIS
US Traffic
81.9%
UK
MOBILE / TABLET
SESSIONS
ELEMIS
UK Traffic

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 PageBuilder 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..

THE BEFORE AND AFTER TRANSFORMATION

This feature is included in FWRD, our PWA accelerator. With FWRD you gain access to a catalog of features which you can pick and choose to make the experience your own.

Another feature we leveraged from the FWRD 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.

Another feature we leveraged from the FWRD 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.

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..

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.
DAVID YATES
UX Lead & Omnichanel Strategist,  Corra
DESIGNING EMAIL MARKETING TEMPLATES

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 functionality that comes native in FWRD..

DESIGNING EMAIL MARKETING TEMPLATES

Corra recommended Klaviyo, a solution providing advanced email marketing capabilities, and we designed on-brand email templates for Anne Klein’s team to leverage for various campaigns. These include templates for best sellers, sale, innovative product lines such as  ‘Considered’, and welcome emails. Now, Anne Klein’s marketing team can drag-and-drop reusable content blocks and easily customize them  without the need for specialized resources, allowing their small team to scale their productivity..

Elemis customers can now enjoy a uniquely custom checkout experience. A mini cart slides out and the visitor can choose complimentary samples and enter a promotional code before beginning the checkout process. Samples change dynamically based on what the customer has in his or her cart. It’s as if they are checking out at a retail location with the ‘Superfood Glow Priming Moisturiser’ for example, and the sales associate slips samples of other items in that range into their bag that they may also like: the Superfood Vital Veggie Mask, Facial Cleanser and Night Cream.

Additionally, with the right coupon, a free gift is automatically added to the mini cart. There’s no need for the user to leave the checkout process to search for and add the item to their cart themselves. And customers who arrive on Elemis.com to claim their free gift don’t need to find it on site in order to add it to their cart. They can just enter the coupon code directly in the mini cart and choose their free item from there. These added incentives in the form of free samples, a potential discount or free gift persuade the shopper to enter the checkout flow. Corra leveraged the Amasty extension on the back end to facilitate this logic and built a custom front-end experience from scratch for Elemis.

A MODERN MINI CART

The new PWA for Elemis is a success on many fronts. One achievement thus far being site speed.

When people describe our new mobile experience, snappy is one of the first three words they use. It’s a snappy, beautiful site.
LUIGI RAFFO
Senior Director of Global Digital Experience, Elemis


SPEED EQUALS REVENUE

The increase in speed has a profound impact on revenue growth. In fact, according to Google research, the likelihood of a user bouncing from your site increases significantly every second it takes to load. Meaning, a faster experience with reduced load times directly correlates to a lift in conversions.

As for improvements in conversion rate, the Elemis team compared their holiday period last year (October 2019 - December 2019) with this year (October 2020 - December 2020) post PWA launch, and shared the following results:

+85%
INCREASE IN  
mobile conversions
+150%
Increase in
mobile transactions
+47%
INCREASE IN
Holiday sales yoy
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.
LUIGI RAFFO
Senior Director of Global Digital Experience, Elemis

Results