Home > Projects > Headless PWA Development for a Beauty Marketplace

Headless PWA Development for a Beauty Marketplace

Name: Benum
Item: Benum
Author: Elogic

Building a Salesforce PWA with SFCC backend and CRM, enhanced with AR try-on feature, for a Saudi-based B2C luxury marketplace

Industry

Health & Beauty

Country

Saudi Arabia

Delivering a truly personalized and engaging CX for young clientele with PWA headless commerce

Buying beauty and make-up products hasn’t always mirrored the in-store experiences, and our Saudi-based B2C Client has set out to change this.

As one of the top B2C marketplaces for luxury perfumery and cosmetics in the Middle East, the brand sees it as mission-critical to deliver outstanding customer experiences (CX) to their target audiences. And given the number of young people relying on mobile devices to make a purchase, a shopping app has become the main requirement for a brand.

At least that’s what they thought before an ecommerce consultation with Elogic experts.

After a deep discovery phase, we learned that the brand’s website runs on a legacy architecture which is nearing its limits in terms of scalability and performance. Adding new Android and iOS apps would be a suicide for the website loading speed and operational performance of the Client.

That’s when we suggested replatforming. Migrating to Salesforce Commerce Cloud would allow the Client to maintain seamless integration with a Salesforce CRM. A Salesforce PWA saved time and costs for a client since they wouldn’t need to develop, test, and update three different codes for the web, Android, and iOS.

Working on any device, a headless PWA would also allow the marketplace experiment and innovate adding AR try-on features: online shopping experience would become even better than that of in-store allowing consumers to try on makeup shades across a range of models and skin tones using their front-facing camera.

Once the Client approved the project requirements, budgets, and deadlines, the Elogic team started working on a multi-service ecommerce architecture with AR technology and a headless PWA storefront in mind.

Headless PWA: The perfect answer in the race for performance-driven, mobile-friendly ecommerce

Paving the way for headless PWA: Solutions delivered by Elogic

SFCC implementation

The first order of business for our Client was switching to headless commerce in Salesforce to decouple the brand’s multiple frontends from the backend. As a long-time Salesforce Commerce Cloud implementation partner, we have applied Composable Storefront Headless Salesforce Accelerator to separate the website back and front ends. The Client can now implement site changes with speed and agility and benefits from frictionless data exchange between the back-end and Salesforce CRM.

Salesforce PWA Kit

To build a headless PWA ecommerce storefront, we opted for the PWA Kit Salesforce that combines Salesforce Commerce APIs and React, consumes data in a mobile-friendly format, and generates the page experience on the fly. This way, the PWA storefront loads only the data it needs resulting in faster and more efficient requests. Two more features were added too: advanced AI-driven search and personalized product recommendations. The system matches a search query with a product even in case of misspellings, and consumers receive suggestions at checkout based on the products added to the cart.

AR in ecommerce integration

Besides implementing headless commerce with Salesforce Commerce PWA kit, our Client wanted to add the AR try-on feature to the marketplace. AlgoFace was chosen to enable it; the technology detects facial features in real time using 2D and 3D modeling and realistically renders makeup products. Now, users can see what their favorite lipstick or eyeshadow will look like by simply pointing a camera at their face. The system runs data quickly on local devices even with an unstable or unavailable internet connection and ensures the ethical treatment of customer data.

We helped the B2C beauty marketplace brand boost sales from mobile devices and increase conversion rates by 48%

The initial results from replatforming and launching a PWA headless storefront exceeded our Client’s expectations. The PWA Salesforce toolkit seamlessly communicates with the SFCC backend and CRM, taking the brand’s data-driven personalization efforts to a new level. In addition, its robust native-like performance on mobile devices led to increased sales via smartphones.

But that’s not all. The AR try-on feature was a hit among users, driving up conversion rates by 48%. And advanced AI-driven search and personalized product recommendations at checkout enhanced the brand’s personal approach to every customer at scale.

The marketplace has also seen Amazon Payment Services (formerly PayFort) integration into the storefront as well as frictionless shipping for Middle Eastern and global customers.

PWA headless commerce for a beauty marketplace

What’s next for the beauty marketplace?

While the project has already bore fruit, our partnership with the Client isn’t over yet. Having implemented PWA in headless commerce, our next goal is to drive deeper insights from customer data with the help of Salesforce Einstein Analytics. We also plan to integrate Tamara service, Gulf Arab region's largest BNPL provider, to eliminate the hassle of shopping and improve CX.

Need to build your own headless PWA storefront?

CONTACT US