We get it, a day at the office (or makeshift home office) can be hectic. Zoom call after Zoom call, squeezing in lunch, decision-making, and deliverables. So, we can see how you may have missed our Adobe Summit sessions. Don’t worry though, we put together a recap for you. In this session, PWA Technology Meets Prestige Skincare, we walk through the thought process behind the new Elemis.com experience, and discuss why they chose to build it as a PWA. You can also watch our second session: Designing a One-of-a-Kind PWA Experience With Melissa and Doug, featuring Corra’s SVP of digital strategy and the founders of the iconic toy empire, Melissa & Doug. They are onto their next venture with the help of Corra, and it’s just as extraordinary. 

ABOUT THIS SESSION

Acquired by L’Occitane International in 2019, Elemis is the No. 1 independent skincare brand in Britain. Its science-backed skincare products and cutting-edge patented technology are globally renowned, and the company wanted to design and build a site to reflect this reputation. The solution was a progressive web app (PWA) – a mobile-first, future-proof e-commerce site that can scale with consumer expectations. Join Luigi Raffo, senior director of global digital experience at Elemis, and Michael Harvey, chief strategy officer at Corra, to discuss the final product and future roadmap.

Watch the full video here

WE WILL COVER:

• What a PWA is and what the benefits are of implementing one
• Why Elemis chose Magento Commerce for its PWA build and why you might want to
• Ideas for unique customizations to engage and convert customers on mobile

FULL TRANSCRIPT

Luigi:

I’m the senior director of global digital experience here at ELEMIS. I’ve been with the brand for about four years, and came on as we were experiencing some tremendous growth. We’re the number one skincare brand in the UK, and we’re vastly growing in the US and globally. That’s actually why they brought me on board. Since I came on board, we’ve been seeing some skyrocketing growth in the last four years, and that growth also meant that we had to have systems that could support that growth. About six years ago, we started off with Magento 1, and since then we’ve basically grown so quickly that we’re looking for a more enterprise-level solution. We were looking at different systems, but PWA (Progressive Web App) was definitely one of our considerations.

Luigi:

In three to five years, we wanted to be at a place where we were looking to the future, and had a system that was ready to take on our increased growth at that point. I think the standard responsive site would have been a bit dated if we were to look back three or four years, so we definitely wanted something a bit more future-forward.

Michael:

Now, you were already on Magento 1. You’d been there for a while. So when you were making this move, did you consider other platforms?

Luigi:

Yeah, we were looking into Salesforce. We briefly looked into BigCommerce. We were coming from Magento 1. Our team had Magento 1 familiarity and even some Magento 2 familiarity, but it was that moving to Magento 2 Cloud that was a really straightforward next step for us. And if we could combine cloud with the PWA, I think that was going to be a real ideal solution.

Michael:

Yeah. One of the things that I know was important to you guys, in coming to work with Corra, was that we had figured out how to run a PWA in the Magento Cloud. Let’s think about when we started this journey with you guys. It was fairly new. There certainly weren’t a lot of beauty brands that were on PWA, so this was all really exciting. Before we move on to what PWAs are, anything else about, say, working with Corra? Shameless plug there.

Luigi:

Yeah. I think Corra was an exciting partner to work with here. Just the expertise and just the level of authority in terms of understanding how Magento works with PWA and how we could utilize Magento for all of its benefits, but also take advantage of the new technology of PWAs.

Michael:

Right. And early on, we were engaged with you guys in the design process, which is so important, obviously, when thinking about a brand like ELEMIS. We’ve been name-dropping PWAs a lot, so let’s just take a moment to actually say what they are, so that everyone in the audience is on the same page with us.

Michael:

We’re talking about it as if it’s this new thing, but probably a lot of people don’t know Steve Jobs was talking about web apps running on a smartphone all the way back in 2007, so 13, 14 years ago. I don’t even think we’d thought of the App Store back then. One of the most important concepts that many people miss about a PWA is that it’s simply a website. Front end is built with JavaScript, with HTML, with CSS, so standard web technologies, but they do have a lot of advantages over a traditional responsive site.

Michael:

And Lu was just talking about how, they didn’t want to look three years down the road and say, “Hey, we should have migrated away from that aging technology or that aging approach.” PWAs can behave like a native app on a mobile device, but they don’t have to. That said, let’s assume what is probably true for everyone in the audience, which is that being able to provide and then gauging mobile experience that modern shoppers are looking for is a major reason to be interested in PWA. And given that perspective, PWAs really do provide a lot of advantages, compared to a native mobile app.

Michael:

I’ll just call out a couple of the most important ones. They are discoverable. As I said, they’re a normal website with the capabilities of a native app, so the content that lives there is fully discoverable by search engines and you don’t have to create a native app. You don’t have to take on the expense of that version of App Store to deal with. So they’re very good for SEO since they show up in search results in just a normal way. There’s no need to get to the app store, like I said. Because of the way that they’re constructed, they use local caching in the client browser and so they’re very, very fast. Because they’re fast and searchable, PWAs do extremely well when Google is crawling the site and evaluating it with their algorithm. Because of that clever caching, they’re also able to really continue delivering a rich offline experience, as opposed to stopping working altogether like a traditional website that loses its internet connection.

Michael:

Magento 2, as Lu was saying, delivers on all of these benefits, but it does still require a fair bit of development. Still relatively early days there. So what we did at Corra is we spent, really, the better part of 18 months building a PWA accelerator. We call it FWRD. It’s spelled without the vowels. It helps merchants like ELEMIS get to market faster, cheaper, lower risk. It has everything that you’d expect in a modern e-commerce experience, including a bunch of pre-integrated services and lots of extra gravy that just reflect our best practices that we’ve mastered over the last 11 years.

Michael:

And as Lu mentioned, and this is important, at the current time, FWRD-based PWAs are becoming ones that are able to run in the Magento Cloud at this moment. So that brings us to ELEMIS and this journey. So Lu, as you were contemplating all of the benefits that I just listed out, what really stood out for you when you started on the journey?

Luigi:

Hands down, I would say speed was the first consideration. We noticed how fast PWA sites were, and we were really impressed.

Michael:

Yeah. Again, on mobile, that’s so important. I mentioned Google’s search algorithms—in May (edit: this date has since been updated to August) of this year, they’ve announced that they’re really going to prioritize the mobile user experience, and PWAs are crucial to delivering that. Just something to note for the audience out there. Really, you should be investigating what Google is going to be doing in May and considering, now, how you’re going to make sure that you’re adapting to that.

Michael:

What about the dreaded mobile conversion gap? I keep mentioning Google. They have this stat out there that says that 62% of all e-commerce traffic comes from mobile, but mobile only counts for 23% of conversions, which is obviously a huge gap, or at least a lot of revenue on the table. What’s the picture for ELEMIS as regards mobile?

Luigi:

Yeah. That’s what we were going after. We had to take all this wonderfully increasing mobile traffic and figure out what this experience is going to be that will convert an increased conversion rate for that experience. We’re great on desktop, but we really needed to focus on mobile [inaudible 00:08:29].

Michael:

Mobile first. We’re going to come back to that. Hopefully, enough in theory, we’ve convinced everyone that that [Forester 00:08:37] quote that I cited early really is correct. It is time to make every website a progressive web app. But as when embracing any technology, there’s also challenges as well. So before we move on, any particular challenges that you would call, as you went through this?

Luigi:

Yeah. I think one of the prime initial challenges was integrating into a GraphQL with some of our legacy extensions. We had to spend some time figuring out how to get those extensions to be compatible with GraphQL. Every month, there’s new improvements in the integrations with GraphQL, and different extensions are becoming GraphQL compatible. We were early movers in the beauty industry, so that was another challenge.

Michael:

And just some of the features still needed to be developed, to deliver the full experience that you wanted to … How about just pleasant surprises? You mentioned speed, and that has panned out. Anything else that maybe wasn’t obvious at the start?

Luigi:

Yeah. I would say definitely Page Builder and working with Corra and some of the designs in Page Builder, that really was a huge improvement for us. Going to Page Builder allowed us to make a lot of the pages without needing dev support, and that was exciting. We have a chance to really pump out a lot of great content very quickly.

Michael:

Yeah. We launched you guys back in September, right in front of the holidays. I think the holiday shop was something that you guys always pulled together, and I think probably required a lot of development in the past, and maybe was different this time around?

Luigi:

Sure. Launching a site in September, we had to really quickly focus on the holiday. And one of the biggest features for our holiday experience is our holiday shop. Previously, our holiday shop was heavily developed and a great, unique experience for the holiday time, but we now needed to figure out how to get this experience up very quickly for the holidays. And using Page Builder, we internally created a low dev support solution there, using Page Builder. And that was a great experience because it really came through for the holidays for us.

Michael:

Yeah. Yeah, we were able to create a bunch of templates for you guys and have Page Builder, which is Magento’s native CMS, able to interact with those, and just allow your business users to really create a great experience. Okay. Whew. That’s all the theory. Let’s actually get into practicalities here. There’s no better place to start then than on the homepage. Let’s walk through that and hear a little bit about just the considerations that you and your team really had to keep in mind as you started this.

Michael:

I should be remiss not to point out that this wasn’t just a shift and lift, lift and shift to a new technology or a new platform. It was also a complete redesign and a chance for you guys to really rethink your relationship with your customers and how you would express that through your new website. So let’s start on the homepage.

Luigi:

Yeah, absolutely. This was a reemerging of ELEMIS, and one of the big asks was how do we create a homepage experience that really tells the story? A lot of new eyeballs are seeing our site for the first time in the US, and we had to really think of what information and how we want to convey that experience on that homepage. The biggest focus was, also, they’re being introduced on mobile, so it’s a mobile-first introduction to the brand. What are the great ways to show that content on mobile? We wanted big calls to action. We wanted large content areas that really talk to the values of the brand, while maintaining of course the sellability of our products and our offers. That was definitely a big challenge, and we’re really pleased with how it came out.

Michael:

Yeah. It was a big ask, but it’s the kind of thing that teams get really excited about. You mentioned earlier mobile first, and that really drove this project, to the extent where the design work really focused on mobile first, hence the phrase, and then got backported to desktop. Storytelling, obviously a really key element for you guys, and part of the story of course is that your products are clinically tested and vetted, and really do what they say they’re going to do, so education was really key as we collectively thought about this design. What are some of the ways that that may have manifested, that people going to the homepage on mobile would see?

Luigi:

Yeah. I think the biggest piece there is our before and afters. When you’re a brand that is so closely tied to your clinical results, you need to show users what those results mean, and nothing like a before and after to really show the impact of the ingredients and the quality of products that we have. So how we did that with our mobile experience was really fantastic. And just having an easy-to-view interface, where you see the before and after with just a thumb swipe was really amazing.

Michael:

Yeah. It’s a really nice example of that app-like behavior that is now available because of the PWA approach. And for people who haven’t actually gone to the ELEMIS site already, I really encourage you to do that. And it’s just a simple, like Lu says, it’s a simple thumb swipe, back and forth, that allows you to see real before and after results. It was just very compelling and just fits very naturally into the flow, as opposed to a pop-up or something like that. The data that we have is that almost 40% of women will say that quality is their top consideration for brand loyalty, and so obviously being able to tell that story about quality and the real, proven efficacy of these products is super important.

Michael:

Let’s talk about the mini cart. It’s another key piece of functionality along the shopping journey and where the teams really, really dug in and spent a lot of time. Maybe we could spend a little bit of time talking about that.

Luigi:

Yeah. I think this was a very critical and important piece of our shopping experience. Previously, we had a very interruptive experience with a pop-up window that had users choose their free gift with their purchase. And of course when you’re on mobile, seeing a pop-up is the last thing you want in your experience, so we shifted that experience to be inside of our shopping bag, so it’s very easy, with your thumbs, to add those products, right within the shopping experience. You can add promo codes, you can add your samples, and you see the entire value proposition right next to the checkout button. That really was a huge win for us. Really loved how that came out, and now quick and just clean that is.

Michael:

You mentioned quick, I think you guys just did a funny experiment, to see who could get through the whole shopping journey fastest.

Luigi:

Yeah. That was fun. I think right when the experience came together, we all timed each other to see how quickly you can actually check out. And we got it down to like 10 seconds, and it was just so impressive to see how quick it could go. That was amazing.

“

Right when the experience came together, we all timed each other to see how quickly we could actually check out. And we got it down to like 10 seconds. It was just so impressive to see how quick it could go. 

LUIGI RAFFO, SENIOR DIRECTOR OF DIGITAL EXPERIENCE, LIFELINES

Michael:

Right. Right. And I imagine a lot of that streamlining becomes really important when you’re thinking about returning customers, too.

Luigi:

Oh, absolutely. For returning customers, you want to make it as easy as possible for them to come back to the site or get to a page that they’re familiar with. The ability for a user to save our site as an app on their phone is also really, really clever, a very unique way to revisit the site very quickly.

Michael:

Right. They don’t have to get into the browser URLs at all. Another really crucial piece of the shopping path, again, that the combined teams really spent a lot of time thinking about was the PLP, the product listing page. And you can now do a lot of stuff from the PLP without ever having to dive into a PDP, so I think it would be interesting for our audience to hear about that effort a little bit.

Luigi:

Absolutely. The product listing pages changed so that we went from showing one item with an “add to bag” to now, you can see all the different sizes of an item. You can see all the prices for those different sizes, all within the PLP. So really quick and easy for you to see the different products, the different sizes, and the prices. The product listing page just became that much more important. Now you can also do that on our products description page, going into our PDP, but to be able to do that from the product listing page is fantastic.

Michael:

Yeah. And also great for your team. Not just thinking about the customer experience, but now your own business users’ experience, because they can really focus on creating great content for that single thing, rather than really having to fragment their efforts, and wrapping all the way back up to SEO, that really helps from an SEO perspective as well.

Luigi:

Absolutely. Yeah.

Michael:

There were some designs that we spent a lot of time working on with you guys that, unfortunately, COVID impacted, let’s say, and really don’t want to spend time talking about totally, particularly now that there’s some light at the end of the tunnel up here, but store locator, that was something that we also really invested some brain power into thinking about. Maybe talk about that a little bit.

Luigi:

Yeah. Our store locator is a big part of the ELEMIS experience, since there’s so many retail locations in the UK, and now growing worldwide, and growing in the US as well, of course. To be able to choose what retailer you want to find our product in, and also choose … Let’s say you’re in London, and you want to ride your bike to a beauty spa. We can now give you biking directions from our store locator, which is just fantastic.

Michael:

Yeah. Very cool. Also another great example of the whole PWA story, because that type of experience really lends itself to that rich offline experience that we’re talking about. You can imagine somebody walking or taking their bike onto the Tube in London, let’s say, where they may not have that internet connection, but still be able to interact with those directions. Just, again, a really nice example of how PWA brings capabilities to the mix that just simply aren’t there when you develop in a different way. I think we’re getting close to the end. I’ve got to ask this question, Lu. Was it worth it?

Luigi:

Tremendous amount of work, but absolutely worth it. We hit it out of the park, and just really excited to see the results of all that great work, and to be on the other side of holiday, even, and to see how we’ve performed has been fantastic.

Michael:

Yeah. If we look at those stats over there on the right side of the screen, those are really eye-popping numbers. Again, when we focus on mobile and the importance of decreasing that mobile conversion gap, every single thing that we’ve been talking about in this conversation is part of the solution to getting there. PWA, okay, it allows you to deliver a great mobile experience. Within that mobile experience, what elements of app-like behavior can I take advantage of? The fact that it’s super fast., We know that if people hit a mobile site and it takes more than a second or two to load, they bail. All of these things compound together, and at the end, really deliver the types of results that we’re seeing.

Michael:

And as I mentioned, Corra has launched a number of these PWAs now, and these types of results that you’re seeing at ELEMIS are very, very typical. Everybody in the audience who’s contemplating this really needs to keep this in mind, because this really is how everyone should be developing their websites now. I think that pretty much takes us to the end. I got to ask, what’s what’s next for you guys?

Luigi:

Well, I think the big shift, at least in the skincare industry, is definitely focusing on bringing that in-store experience onto the site. In the past few months, we’ve been definitely focused on creating video chats and live streaming for broadcast. It’s that one-to-one video and one-to-many video, just to create the more store-like experience with our brand and with our skincare consultants. That’s been the main focus. But I would say definitely moving on for this next year, look for us to be a lot more personalized, and really unique experiences, created per person, from our site.

Michael:

Yeah. So you sort of had that live streaming idea, the one to many, and then a lot more personal interaction with stylists, and incorporating video, and all of those kinds of things into very natural experiences that then start to span really that online and offline experience. Anyway, Lu, we’re really continuing to look forward to working with you and the team, lots more to come. And congratulations on launching a really great site. 

To learn more about this project read our Elemis case study. Or reach out to Corra if you’d like to explore your options with PWA.

Elemis is Live on FWRD: The First PWA Accelerator for Magento Commerce Cloud