contactcareers
X close
Elemis

Two mobile-first PWAs catering to EU and US markets increased mobile conversion rates by 85%.

PWA Technology Meets Prestige Skincare

CLIENT

ELEMIS

SERVICES

Progressive Web App
Digital Experience Strategy & Design
Multi-site

PARTNERS

Listrak
Signifyd
Klarna

SYSTEM INTEGRATIONS

US: Microsoft Dynamics 365
EU: Epicor

AWARDS &
RECOGNITION

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

Awwwards, 2020
Mobile Excellence Badge

Awwwards, 2020
Honorable Mention

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

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.

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 &

Elemis

achieved:

+
-
85
%
INCREASE IN MOBILE CONVERSION RATE
+
-
150
%
INCREASE IN MOBILE TRANSACTIONS
+
-
47
%
INCREASE IN HOLIDAY SALES YOY
+
-
SEE HOW WE DID IT

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.

Introducing the new elemis.com

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.

Mobile-first approach to design and strategy.

Solution

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.

Interactive before and after feature.

Solution

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.

Advanced store locator.

Solution

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

The new Elemis homepage.

Solution

Storytelling content and product page.

Solution

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.

Users can now add the site to their homescreen.

Solution

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.

Mini cart with complimentary sample selection.

Solution

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.

Results

+
-
85
%
INCREASE IN MOBILE CONVERSION RATE
+
-
150
%
INCREASE IN MOBILE TRANSACTIONS
+
-
47
%
INCREASE IN HOLIDAY SALES YOY
+
-

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

LUIGI RAFFO

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.

LUIGI RAFFO

Senior Director of Global Digital Experience, Elemis

< PREV
NEXT >
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE
LET'S TALK COMMERCE