Clé de Peau Beauté WebAR Experience: Transforming a Printed Event Card into an Interactive Luxury Product Experience

Project Overview

Client	Clé de Peau Beauté
Industry	Luxury Beauty & Skincare
Location	Jakarta, Indonesia
Campaign	New Key Radiance Care Series Launch
Service	WebAR Development
Solution	Interactive Marker-Based AR Event Experience
Campaign Year	2025
Development Time	Approximately 1 Month
Digital Objects	33
Interactive Pathways	14+
Developed By	InReality Solutions

On This Page (16)

1. Creating an Interactive Product Experience for a Luxury Skincare Launch
2. The Challenge: Creating AR for a Luxury Brand Experience
3. The Concept: Turning a Printed Card into a Digital Product Experience
4. Stage One: Playing the Promotional Video Directly on the Card
5. Stage Two: Bringing the Products into the AR Experience
6. Stage Three: Interactive Product Discovery
7. More Than 14 Interactive Pathways Within a Single AR Experience
8. Extending the Experience Beyond Product Education
9. The Biggest Technical Challenge: Delivering a Complex Experience Without Excessive Loading Times
10. Managing Complex Interaction Logic and Smooth Transitions
11. Developing WebAR Within Strict Luxury Brand Guidelines
12. Testing Across Android and iOS Devices
13. The Results: 83 Seconds of Average Engagement
14. Creating an Experience Guests Wanted to Share
15. From Initial Concept to Final Deployment in Approximately One Month
16. What the Clé de Peau Beauté Project Demonstrates About AR for Luxury Brands

Creating an Interactive Product Experience for a Luxury Skincare Launch

In 2025, Clé de Peau Beauté prepared to introduce its New Key Radiance Care Series through an exclusive product launch event in Jakarta.

Approximately 400 invited guests, including VIPs, celebrities, influencers, socialites, and figures within Indonesia’s beauty community, attended the event.

Clé de Peau Beauté wanted to create something memorable for its guests: an experience that went beyond conventional product displays and presentations while remaining consistent with the refined visual identity of a global luxury skincare brand.

Several months earlier, InReality Solutions had approached the brand to discuss the possibilities of augmented reality.

When the opportunity arose to incorporate AR into the product launch, Clé de Peau Beauté approached InReality Solutions.

The objective was to transform the printed cards provided to guests into an interactive digital product experience.

InReality Solutions proposed and developed the complete creative concept.

Rather than simply displaying an animation when the card was scanned, we designed a multi-stage WebAR journey combining branded video content, interactive product discovery, detailed skincare information, e-commerce, and direct access to a beauty specialist.

The result was an interactive WebAR experience that generated 687 scans and an average engagement time of 83 seconds during the campaign measurement period.

The Challenge: Creating AR for a Luxury Brand Experience

Developing augmented reality for a luxury brand presents a different creative challenge from developing an experience purely around novelty.

The technology cannot become the entire experience.

Every visual element, animation, interaction, transition, font, and interface component must remain consistent with the brand itself.

For the Clé de Peau Beauté project, the AR experience needed to feel elegant, refined, and intentional.

It also needed to communicate a significant amount of product information without overwhelming the user.

The experience would introduce guests to a three-step skincare regimen:

Step 1: Serum

Step 2: Lotion

Step 3: Cream/Emulsion

Each step contained different product information, including key ingredients, key benefits, and instructions on how to use the product.

At the same time, the experience needed to incorporate a 40-second promotional video, custom animations, music, multiple product interactions, and direct calls to action.

All of this needed to run through a smartphone browser and remain performant across compatible Android and iOS devices.

The Concept: Turning a Printed Card into a Digital Product Experience

Every invited guest received a printed product card.

The card introduced the New Key Radiance Care Series and contained information about the three-step skincare regimen.

It also contained a QR code inviting guests to launch an immersive augmented reality experience.

The process was designed to be straightforward:

Scan the QR code.

Launch the WebAR experience.

Allow camera access.

Point the smartphone camera toward the printed card.

The card then became the foundation of the entire digital experience.

No dedicated mobile application was required.

Stage One: Playing the Promotional Video Directly on the Card

The experience began with a 40-second promotional video.

Once the AR experience recognized the printed card, the video appeared directly on its surface.

Rather than immediately allowing guests to explore the interactive elements, the experience was intentionally designed so that the promotional video played first.

This was a specific requirement of the experience.

The product interaction system remained inactive while the video was playing, allowing the branded content to be presented before guests moved into the interactive portion of the experience.

There was no skip button.

Once the video finished, the experience transitioned automatically into the interactive product journey.

Stage Two: Bringing the Products into the AR Experience

After the promotional video ended, the product visuals faded into view.

The Serum, Lotion, and Cream/Emulsion appeared on the card, accompanied by a custom animated lily visual.

The product assets were arranged and animated to create a sense of visual depth, giving guests the impression that the physical card had transformed into a multidimensional digital product display.

Behind the products, an elegant lily animation reinforced the visual language of the campaign.

The lily asset required custom development by InReality Solutions because the specific visual element required for the AR experience was not available as an independent brand asset.

The resulting animation was developed to remain consistent with the visual identity of the product campaign while complementing the movement and presentation of the interactive product elements.

Stage Three: Interactive Product Discovery

The experience then became fully interactive.

Guests could select any of the three product categories displayed within the AR scene.

When a product was selected, it moved forward within the composition.

The remaining elements adjusted to create visual focus around the selected product, and an interactive interface appeared.

Guests could then choose between three different categories of information:

• Key Ingredients
• Key Benefits
• How to Use

Selecting an option displayed information specifically related to that product.

Each of the three products contained its own unique content.

After exploring the information, guests could press the Back button.

The selected product returned to its original position, allowing the guest to choose another product and repeat the process.

This interaction model allowed a significant amount of product information to be presented without displaying everything simultaneously.

Instead, guests could independently explore the content that interested them.

More Than 14 Interactive Pathways Within a Single AR Experience

The Clé de Peau Beauté experience contained at least 14 different interactive pathways.

These included selecting each of the three products, exploring three categories of information for every product, navigating backward through the interface, and accessing the external calls to action.

The complete experience incorporated 33 digital objects, including:

• Promotional video content
• Product assets
• Custom animations
• Interactive buttons
• Information panels
• Navigation controls
• Calls to action
• Music and audio elements

Managing these different elements within a browser-based AR environment required careful development and optimization.

Every interaction needed to work correctly.

Every product needed to move to the appropriate position.

Every information panel needed to appear at the correct time.

Buttons needed to remain inactive during the promotional video and become available only when the interactive experience began.

Transitions needed to remain smooth and visually consistent.

And all of this needed to happen while maintaining reasonable loading times and performance.

Extending the Experience Beyond Product Education

The WebAR experience was designed to do more than introduce the skincare products.

Two additional calls to action were integrated into the interface.

Guests could:

Shop the Products

The shopping CTA directed users to Clé de Peau Beauté Indonesia’s online shopping experience.

Consult with a Specialist

Guests could connect directly with a Clé de Peau Beauté beauty specialist through WhatsApp.

This allowed the AR activation to connect experiential marketing with practical customer journeys.

A guest could discover the product, learn about its ingredients and benefits, understand how to use it, continue to the shopping platform, or speak directly with a beauty specialist—all through a single experience launched from a printed card.

The Biggest Technical Challenge: Delivering a Complex Experience Without Excessive Loading Times

The primary technical challenge was performance optimization.

The experience contained 33 digital objects, a 40-second promotional video, music, custom animations, numerous interactive buttons, information panels, and complex interaction logic.

Every additional asset increased the amount of data the smartphone needed to load and process.

For an event experience, long loading times could significantly affect the user experience.

Guests needed to be able to scan the card and access the AR content without an unreasonable wait.

The original promotional video alone was approximately 30 MB.

InReality Solutions optimized the video to approximately 6 MB while maintaining sufficient visual quality for the luxury brand experience.

Additional assets also needed to be optimized individually to reduce the overall size of the AR project.

The challenge was finding the appropriate balance.

Excessive compression could negatively affect image quality and undermine the visual standards expected of a luxury skincare brand.

Insufficient compression could result in excessive loading times.

The complete experience therefore required careful optimization across video, animation, imagery, and interface assets.

Managing Complex Interaction Logic and Smooth Transitions

Performance was only one part of the technical challenge.

The interaction logic also needed to be carefully developed.

During the first 40 seconds, none of the product interactions could be activated.

Once the promotional video finished, the interactive portion needed to begin automatically.

Selecting a product needed to move that specific product forward.

The correct information buttons needed to appear.

Selecting Key Ingredients, Key Benefits, or How to Use needed to display the appropriate content for the correct product.

Pressing Back needed to return the interface and product to their original states.

Selecting another product then needed to restart the interaction sequence correctly.

With numerous digital objects and potential interactions within the experience, careful development and testing were required to prevent interface elements from overlapping, appearing at the wrong time, or interfering with other interactions.

Smooth fades and transitions were incorporated throughout the experience to maintain visual consistency.

Developing WebAR Within Strict Luxury Brand Guidelines

Clé de Peau Beauté provided detailed brand guidelines for the project.

The WebAR experience needed to follow the brand’s established:

• Typography
• Colors
• Product presentation
• Visual identity
• Imagery
• Overall aesthetic

InReality Solutions designed the interface elements, buttons, information panels, and animations around these guidelines.

Some visual assets required additional development because the exact elements needed for the AR experience were not available independently.

The custom lily animation was one example.

Other product assets required extraction, cleaning, preparation, and optimization before they could be incorporated into the AR environment.

Approximately three rounds of revisions were completed.

The revisions were primarily visual and cosmetic, including adjustments to typography, text boxes, and the presentation of interface elements.

The core interaction concept and technical functionality remained largely unchanged from the initial proposal.

Testing Across Android and iOS Devices

The WebAR experience was tested across at least six devices.

Testing focused on modern Android and iOS smartphones consistent with the expected audience attending the luxury product launch.

The experience was tested for:

• AR tracking
• Loading performance
• Video playback
• Audio playback
• Interactive functionality
• Product selection
• Information display
• Interface transitions
• CTA functionality
• Android compatibility
• iOS compatibility

InReality Solutions’ previous experience developing commercial WebAR campaigns allowed the team to anticipate and address many common cross-device compatibility challenges during development.

This helped ensure that the experience performed consistently across the target devices used at the event.

The Results: 83 Seconds of Average Engagement

The Clé de Peau Beauté WebAR experience recorded:

687 scans.

The average time spent on the project page was:

83 seconds.

Device analytics recorded:

409 scans from Android devices.

And:

278 scans from iOS devices.

The majority of recorded interactions originated from Jakarta, with 666 scans.

Additional interactions were recorded from Tangerang, Depok, Bandung, Surabaya, and other locations.

Unlike a mass-market consumer campaign, this activation was developed for an exclusive event attended by approximately 400 invited guests.

For this reason, the engagement time provides particularly useful context.

The experience began with a mandatory 40-second promotional video before the interactive product journey became available.

The full experience could take more than two minutes to explore when a user read the available information for all three products.

The recorded average engagement time of 83 seconds indicates that, on average, users remained in the experience beyond the duration of the initial video and into the interactive portion of the activation.

Creating an Experience Guests Wanted to Share

The response to the experience extended beyond the analytics.

Guests, influencers, and members of the Clé de Peau Beauté team reacted positively to the activation.

The brand shared guest reaction content with InReality Solutions, including footage showing attendees experiencing the AR activation.

Indonesian actress and influencer Beby Tsabina also shared content featuring the AR experience on social media.

For an event activation designed to create excitement around a product launch, these reactions provided valuable qualitative feedback alongside the recorded engagement data.

The Clé de Peau Beauté Indonesia team also expressed positive feedback regarding the completed experience.

From Initial Concept to Final Deployment in Approximately One Month

InReality Solutions was responsible for the complete creative and technical development of the AR activation.

Our scope included:

• AR strategy
• Creative concept development
• Experience design
• Storyboarding
• Adaptation and optimization of supplied promotional video content
• Custom lily animation development
• After Effects animation
• Product asset preparation
• AR development
• Interactive product interface development
• Complex interaction logic
• UI/UX development
• Brand guideline implementation
• CTA design and integration
• Music integration
• Video optimization
• Asset optimization
• Performance optimization
• Cross-device testing
• Final deployment

The complete project was developed in approximately one month.

From the beginning, InReality Solutions proposed the complete experience journey:

Promotional video.

Product reveal.

Interactive product selection.

Product education.

Shopping.

Direct consultation.

Clé de Peau Beauté approved the concept, and the experience was subsequently refined through approximately three rounds of primarily visual revisions before final deployment.

What the Clé de Peau Beauté Project Demonstrates About AR for Luxury Brands

The Clé de Peau Beauté project demonstrates that augmented reality can provide more than a short visual effect or novelty.

A single printed card became a digital platform capable of delivering branded video content, product discovery, interactive education, e-commerce access, and direct communication with a beauty specialist.

The project also demonstrates the importance of designing AR around the brand rather than designing the brand experience around the technology.

For Clé de Peau Beauté, every element needed to reflect the positioning of a global luxury skincare brand.

That required careful attention to typography, animation, transitions, product presentation, interaction design, and visual quality.

At the same time, the project needed to address the practical limitations of browser-based augmented reality.

Thirty-three digital objects, complex interaction logic, a 40-second promotional video, and numerous animations and interface elements needed to load and perform reliably on consumer smartphones.

The final experience brought these requirements together in a single WebAR activation developed in approximately one month.

For the invited guests, the experience began with a simple action: scanning a QR code printed on a card.

What followed was an interactive digital journey designed to introduce, educate, engage, and connect consumers directly with the brand.