For a few years now, ecommerce brands considering headless commerce have been getting excited about the site speed improvements that progressive web apps (PWAs) can offer.
Using PWAs to power a headless commerce frontend is a game-changer for blazing-fast site speed, especially on mobile. The fast load times can ultimately boost ecommerce conversion rates and revenue per user, but before embarking on building a headless PWA of your own, it’s likely you want to see some other brands’ incredible stores in action.
In this post, we’re looking at real PWA ecommerce examples in the wild, and how brands have been using this technology to improve shoppers’ overall experience.
We’ll share a look at the reasons behind each brand’s transition and each store’s competitive advantage:
First up is the British fashion, jewelry, and gifts outlet, Oliver Bonas. As well as having over 60 UK retail locations, the lifestyle brand has savvily used its online store to expand into the US and international markets.
Camilla Tress, Oliver Bonas’ ecommerce strategist, said the ambition was to give customers an online experience to match the individual care and attention they would receive in a physical store.
As she explained to the 2018 Retail Business Technology Expo, “People love coming into our stores, our store assistants are really knowledgeable about products and give good advice — and we want to recreate that online.”
What we love about this PWA:
Starbucks wanted to add an online ordering function to their site that didn’t require customers to download and install their native app. Considering the needs of their on-the-go customers, and with ambitions to establish themselves in emerging markets with often patchy internet coverage, they plumped for a PWA as the solution.
The offline functionality that PWAs provide means customers can browse the site and make their order and add it to their cart — selecting and customizing their coffee or cake as they go — even when not connected to the internet.
What makes this ecommerce PWA especially great?
Featuring a mix of lifestyle accessories and mobile gadgets, this site has a lot of products to showcase to its visitors.
In contrast to some of the other brands we feature, Nomad were already happy with how their pre-PWA site looked. They wanted to keep the unique aesthetic they’d worked hard to create while cutting the significant page-load times that hampered visitors' ability to browse the catalog.
They were also keen to reduce the lead times their internal teams needed to develop marketing campaigns and build custom pages.
After switching to a PWA with Shogun Frontend, Nomad have enjoyed a 25% increase in conversion rate. Reese Hammerstrom, Nomad’s Director Of Ecommerce, says “Early data shows that users are spending more time on the site and visiting more pages. Customers can instantly consume more content, explore more of our catalog, and discover more about the brand. As a result, conversion rate increases.”
This relatively new, online-only health and wellness brand provides supplement packages that can be tailored to customers’ needs. Visitors choose from three different “paths” when they land on the site, and can fill out a two-minute consultation (leaving their name and email) if they’re unsure which path to take.
Once customers have chosen their path on the landing page, the uncomplicated navigation brings up a further three product options. From there, it’s only one more click to cart and one more again to checkout.
As well as the signature speed and satisfying UX of PWA sites, the seamlessly integrated customization options are a perfect fit for a brand that wants to give customers a bespoke, holistic experience.
The French luxury cosmetics brand has long been pursuing a mobile-first strategy, with their mobile traffic volume overtaking desktop back in 2016. But their conversion rates didn’t keep up with their mobile traffic growth at first. The slower speeds on mobile meant customers were getting tired of waiting for pages to load and abandoning carts.
Lancôme considered building a native app for mobile to address the problem, but given only a small percentage of loyal customers would be prepared to adopt an app, they decided that their brand and sales needs would be better served by a solution that would improve the mobile experience right out of the browser, but also produce results across platforms.
The resulting PWA solution did not disappoint. Overall, Lancôme has enjoyed a 17% increase in conversion rates, with the improvements in speed and UX leading to a 53% increase in mobile sessions for visitors accessing their site via IOS (a key customer group for the brand).
Another French luxury brand to embrace PWAs is Zadig & Voltaire. Super-fast page loads are important to fashion brands, not only to make sure customers get the high-end shopping experience they deserve but, like the other examples we’ve talked about, to reduce cart abandonment and ensure a healthy conversion rate.
The brand decided to use the flexibility PWAs afford to implement the new shopping experience in stages. They started by redesigning their Italian site, and, suitably impressed with the resulting improvements in speed, moved on to other regions. Last year they launched their PWA-powered flagship French site.
The British clockmaker and purveyor of high-quality wall art is another brand to have seen dramatic increases in conversion rates after relaunching their site with a PWA beneath the bonnet.
Taking a mobile-first approach without leaving customers who prefer to shop on the desktop site behind is a cornerstone of what makes PWAs so attractive to ecommerce brands.
On the mobile site, an impressive variety of menu and filtering options slide seamlessly from the side of the screen without the need for further page loads, allowing for effortless product customization.
As well as the signature lightning-fast speeds (54% faster page-load time), this brand has seen a whopping 77% increase in conversion rates and an equally impressive 79% increase in revenue from organic traffic.
This womens’ resort-wear brand is another example of the clean, simple, and fast experience that PWA sites offer.
There’s an intuitive and straightforward journey from landing page to cart (or “tote” as Lilly Pulitzer likes to call it). An unobtrusive menu is toggled to the top of the screen, allowing repeat visitors to handily jump to where they want to go, while new customers are guided by uncluttered product images as they click through from home page to checkout in a few seconds.
You can quickly find a nearby store to pick up from or “connect with a stylist” as both these options appear right on the product page.
Mobile and desktop offer customers an impressively similar experience — another great advantage of having a flexible PWA site that supports both devices — and visitors will appreciate the consistently high quality that results.
While the Chinese ecommerce giant might not be a conventional DTC brand, with a presence in over 200 counties, it’s the worlds’ biggest B2B trading platform.
Frustrated at slow mobile internet speeds, Alibaba at first wanted to use their mobile site to encourage customers to download their native app. But despite their best efforts, take-up remained stubbornly below expectations. And so they had the idea to use a PWA site to re-create the app experience, but (as it uses the ordinary web like any other site) accessible to a much larger segment of its customer base.
Switching their site across to a PWA led to a 76% increase in conversions. And this was the overall increase, regardless of browser. So although the switch to PWA was driven by considerations over their mobile web presence, the speed and UX improvements have delivered results across platforms.
Hopefully, this brief look around the world of PWA ecommerce has given you some inspiration.
Forward-thinking brands have been switching to PWAs to power their storefronts because of the improvements in speed and consistent UX they offer. If your brand is mobile-first, or mobile-focused, then using a PWA to build your site — rather than a native app that may have limited take-up — will ultimately help you get the rich and engaging quality that apps bring, without losing the benefits of reach and accessibility that a website gives you.