Pengalaman WebAR Clé de Peau Beauté: Mengubah Kartu Acara Cetak Menjadi Pengalaman Produk Mewah Interaktif

Ringkasan Proyek

Klien	Clé de Peau Beauté
Industri	Beauty & Skincare Mewah
Lokasi	Jakarta, Indonesia
Kampanye	Peluncuran New Key Radiance Care Series
Layanan	Pengembangan WebAR
Solusi	Pengalaman AR Berbasis Marker untuk Acara Interaktif
Tahun Kampanye	2025
Waktu Pengembangan	Sekitar 1 Bulan
Objek Digital	33
Jalur Interaktif	14+
Dikembangkan Oleh	InReality Solutions

Daftar Isi (16)

1. Menciptakan Pengalaman Produk Interaktif untuk Peluncuran Skincare Mewah
2. Tantangannya: Menciptakan AR untuk Pengalaman Brand Mewah
3. Konsepnya: Mengubah Kartu Cetak Menjadi Pengalaman Produk Digital
4. Tahap Satu: Memutar Video Promosi Langsung di Atas Kartu
5. Tahap Dua: Menghadirkan Produk ke dalam Pengalaman AR
6. Tahap Tiga: Penemuan Produk secara Interaktif
7. Lebih dari 14 Jalur Interaktif dalam Satu Pengalaman AR
8. Memperluas Pengalaman Melampaui Edukasi Produk
9. Tantangan Teknis Terbesar: Menghadirkan Pengalaman Kompleks Tanpa Waktu Loading yang Berlebihan
10. Mengelola Logika Interaksi yang Kompleks dan Transisi yang Mulus
11. Mengembangkan WebAR dalam Panduan Brand Mewah yang Ketat
12. Pengujian di Perangkat Android dan iOS
13. Hasilnya: 83 Detik Rata-rata Keterlibatan
14. Menciptakan Pengalaman yang Ingin Dibagikan Tamu
15. Dari Konsep Awal hingga Peluncuran Akhir dalam Sekitar Satu Bulan
16. Apa yang Ditunjukkan Proyek Clé de Peau Beauté tentang AR untuk Brand Mewah

Menciptakan Pengalaman Produk Interaktif untuk Peluncuran Skincare Mewah

Pada 2025, Clé de Peau Beauté bersiap memperkenalkan New Key Radiance Care Series melalui acara peluncuran produk eksklusif di Jakarta.

Sekitar 400 tamu undangan, termasuk VIP, selebritas, influencer, sosialita, dan tokoh-tokoh dalam komunitas kecantikan Indonesia, hadir dalam acara tersebut.

Clé de Peau Beauté ingin menciptakan sesuatu yang berkesan bagi para tamunya: sebuah pengalaman yang melampaui display dan presentasi produk konvensional, sambil tetap konsisten dengan identitas visual yang elegan dari sebuah brand skincare mewah global.

Beberapa bulan sebelumnya, InReality Solutions telah mendekati brand ini untuk mendiskusikan berbagai kemungkinan augmented reality.

Ketika peluang untuk menghadirkan AR dalam peluncuran produk ini muncul, Clé de Peau Beauté mendekati InReality Solutions.

Tujuannya adalah mengubah kartu cetak yang diberikan kepada para tamu menjadi pengalaman produk digital yang interaktif.

InReality Solutions mengusulkan dan mengembangkan keseluruhan konsep kreatif tersebut.

Alih-alih hanya menampilkan animasi saat kartu dipindai, kami merancang perjalanan WebAR multi-tahap yang menggabungkan konten video bermerek, penemuan produk interaktif, informasi skincare yang detail, e-commerce, dan akses langsung ke beauty specialist.

Hasilnya adalah pengalaman WebAR interaktif yang menghasilkan 687 scan dan rata-rata waktu keterlibatan 83 detik selama periode pengukuran kampanye.

Tantangannya: Menciptakan AR untuk Pengalaman Brand Mewah

Mengembangkan augmented reality untuk brand mewah menghadirkan tantangan kreatif yang berbeda dibandingkan mengembangkan pengalaman yang murni berputar di sekitar sisi kebaruan (novelty).

Teknologinya tidak boleh menjadi keseluruhan pengalaman itu sendiri.

Setiap elemen visual, animasi, interaksi, transisi, font, dan komponen antarmuka harus tetap konsisten dengan brand itu sendiri.

Untuk proyek Clé de Peau Beauté, pengalaman AR ini perlu terasa elegan, halus, dan disengaja secara cermat.

Pengalaman ini juga perlu mengomunikasikan informasi produk dalam jumlah signifikan tanpa membuat pengguna kewalahan.

Pengalaman ini memperkenalkan tamu pada rangkaian perawatan kulit tiga langkah:

Langkah 1: Serum

Langkah 2: Lotion

Langkah 3: Cream/Emulsion

Setiap langkah berisi informasi produk yang berbeda, termasuk bahan utama, manfaat utama, dan petunjuk cara penggunaan produk.

Pada saat yang sama, pengalaman ini perlu menyertakan video promosi berdurasi 40 detik, animasi kustom, musik, berbagai interaksi produk, dan call-to-action langsung.

Semua ini perlu berjalan melalui browser smartphone dan tetap berperforma baik di perangkat Android dan iOS yang kompatibel.

Konsepnya: Mengubah Kartu Cetak Menjadi Pengalaman Produk Digital

Setiap tamu undangan menerima kartu produk cetak.

Kartu tersebut memperkenalkan New Key Radiance Care Series dan berisi informasi tentang rangkaian perawatan kulit tiga langkah.

Kartu itu juga berisi kode QR yang mengundang tamu untuk membuka pengalaman augmented reality yang imersif.

Prosesnya dirancang agar sederhana:

Pindai kode QR.

Buka pengalaman WebAR.

Izinkan akses kamera.

Arahkan kamera smartphone ke kartu cetak.

Kartu tersebut kemudian menjadi fondasi dari keseluruhan pengalaman digital.

Tidak ada aplikasi mobile khusus yang diperlukan.

Tahap Satu: Memutar Video Promosi Langsung di Atas Kartu

Pengalaman ini dimulai dengan video promosi berdurasi 40 detik.

Setelah pengalaman AR mengenali kartu cetak tersebut, video muncul langsung di permukaannya.

Alih-alih langsung membiarkan tamu menjelajahi elemen interaktif, pengalaman ini sengaja dirancang agar video promosi diputar terlebih dahulu.

Ini merupakan persyaratan khusus dari pengalaman tersebut.

Sistem interaksi produk tetap nonaktif selama video diputar, sehingga konten bermerek dapat ditampilkan terlebih dahulu sebelum tamu masuk ke bagian interaktif dari pengalaman ini.

Tidak ada tombol lewati (skip).

Setelah video selesai, pengalaman secara otomatis bertransisi ke perjalanan produk interaktif.

Tahap Dua: Menghadirkan Produk ke dalam Pengalaman AR

Setelah video promosi berakhir, visual produk muncul secara bertahap (fade in).

Serum, Lotion, dan Cream/Emulsion muncul di atas kartu, disertai visual bunga lily beranimasi yang dibuat khusus.

Aset produk disusun dan dianimasikan untuk menciptakan kesan kedalaman visual, memberi tamu kesan bahwa kartu fisik telah berubah menjadi display produk digital yang multidimensi.

Di belakang produk, animasi bunga lily yang elegan memperkuat bahasa visual kampanye tersebut.

Aset bunga lily ini membutuhkan pengembangan khusus oleh InReality Solutions karena elemen visual spesifik yang dibutuhkan untuk pengalaman AR tersebut tidak tersedia sebagai aset brand yang berdiri sendiri.

Animasi yang dihasilkan dikembangkan agar tetap konsisten dengan identitas visual kampanye produk, sekaligus melengkapi gerakan dan presentasi elemen produk interaktif.

Tahap Tiga: Penemuan Produk secara Interaktif

Pengalaman ini kemudian menjadi sepenuhnya interaktif.

Tamu dapat memilih salah satu dari tiga kategori produk yang ditampilkan dalam scene AR.

Saat sebuah produk dipilih, produk tersebut bergerak maju dalam komposisi.

Elemen lainnya menyesuaikan diri untuk menciptakan fokus visual di sekitar produk yang dipilih, dan sebuah antarmuka interaktif muncul.

Tamu kemudian dapat memilih di antara tiga kategori informasi yang berbeda:

• Bahan Utama
• Manfaat Utama
• Cara Penggunaan

Memilih salah satu opsi menampilkan informasi yang berkaitan khusus dengan produk tersebut.

Masing-masing dari ketiga produk memiliki kontennya sendiri yang unik.

Setelah menjelajahi informasi tersebut, tamu dapat menekan tombol Kembali (Back).

Produk yang dipilih kembali ke posisi awalnya, memungkinkan tamu memilih produk lain dan mengulangi proses tersebut.

Model interaksi ini memungkinkan sejumlah besar informasi produk disajikan tanpa menampilkan semuanya secara bersamaan.

Sebaliknya, tamu dapat secara mandiri menjelajahi konten yang menarik minat mereka.

Lebih dari 14 Jalur Interaktif dalam Satu Pengalaman AR

Pengalaman Clé de Peau Beauté ini berisi setidaknya 14 jalur interaktif yang berbeda.

Jalur ini mencakup pemilihan masing-masing dari ketiga produk, penjelajahan tiga kategori informasi untuk setiap produk, navigasi mundur melalui antarmuka, dan akses ke call-to-action eksternal.

Keseluruhan pengalaman ini menggabungkan 33 objek digital, termasuk:

• Konten video promosi
• Aset produk
• Animasi kustom
• Tombol interaktif
• Panel informasi
• Kontrol navigasi
• Call-to-action
• Elemen musik dan audio

Mengelola berbagai elemen berbeda ini di dalam lingkungan AR berbasis browser membutuhkan pengembangan dan optimasi yang cermat.

Setiap interaksi perlu bekerja dengan benar.

Setiap produk perlu bergerak ke posisi yang tepat.

Setiap panel informasi perlu muncul pada waktu yang tepat.

Tombol perlu tetap nonaktif selama video promosi diputar dan baru tersedia saat pengalaman interaktif dimulai.

Transisi perlu tetap halus dan konsisten secara visual.

Dan semua ini perlu terjadi sambil mempertahankan waktu loading dan performa yang wajar.

Memperluas Pengalaman Melampaui Edukasi Produk

Pengalaman WebAR ini dirancang untuk memberikan lebih dari sekadar perkenalan produk skincare.

Dua call-to-action tambahan diintegrasikan ke dalam antarmuka.

Tamu dapat:

Berbelanja Produk

CTA belanja ini mengarahkan pengguna ke pengalaman belanja daring Clé de Peau Beauté Indonesia.

Berkonsultasi dengan Spesialis

Tamu dapat terhubung langsung dengan beauty specialist Clé de Peau Beauté melalui WhatsApp.

Hal ini memungkinkan aktivasi AR menghubungkan pemasaran berbasis pengalaman dengan perjalanan pelanggan yang praktis.

Seorang tamu dapat menemukan produk, mempelajari bahan dan manfaatnya, memahami cara penggunaannya, melanjutkan ke platform belanja, atau berbicara langsung dengan beauty specialist—semuanya melalui satu pengalaman yang diluncurkan dari sebuah kartu cetak.

Tantangan Teknis Terbesar: Menghadirkan Pengalaman Kompleks Tanpa Waktu Loading yang Berlebihan

Tantangan teknis utama adalah optimasi performa.

Pengalaman ini berisi 33 objek digital, video promosi berdurasi 40 detik, musik, animasi kustom, banyak tombol interaktif, panel informasi, dan logika interaksi yang kompleks.

Setiap aset tambahan meningkatkan jumlah data yang perlu dimuat dan diproses oleh smartphone.

Untuk pengalaman di sebuah acara, waktu loading yang lama dapat secara signifikan memengaruhi pengalaman pengguna.

Tamu perlu dapat memindai kartu dan mengakses konten AR tanpa waktu tunggu yang tidak wajar.

Video promosi asli saja berukuran sekitar 30 MB.

InReality Solutions mengoptimalkan video tersebut menjadi sekitar 6 MB sambil tetap mempertahankan kualitas visual yang memadai untuk pengalaman brand mewah ini.

Aset tambahan juga perlu dioptimalkan satu per satu untuk mengurangi ukuran keseluruhan proyek AR ini.

Tantangannya adalah menemukan keseimbangan yang tepat.

Kompresi yang berlebihan dapat memengaruhi kualitas gambar secara negatif dan merusak standar visual yang diharapkan dari sebuah brand skincare mewah.

Kompresi yang kurang memadai dapat mengakibatkan waktu loading yang berlebihan.

Keseluruhan pengalaman ini karenanya membutuhkan optimasi yang cermat pada video, animasi, gambar, dan aset antarmuka.

Mengelola Logika Interaksi yang Kompleks dan Transisi yang Mulus

Performa hanyalah salah satu bagian dari tantangan teknis ini.

Logika interaksinya juga perlu dikembangkan secara cermat.

Selama 40 detik pertama, tidak satu pun interaksi produk dapat diaktifkan.

Setelah video promosi selesai, bagian interaktif perlu dimulai secara otomatis.

Memilih sebuah produk perlu menggerakkan produk tersebut ke depan.

Tombol informasi yang tepat perlu muncul.

Memilih Bahan Utama, Manfaat Utama, atau Cara Penggunaan perlu menampilkan konten yang sesuai untuk produk yang benar.

Menekan tombol Kembali perlu mengembalikan antarmuka dan produk ke keadaan awalnya.

Memilih produk lain kemudian perlu memulai ulang urutan interaksi dengan benar.

Dengan banyaknya objek digital dan kemungkinan interaksi di dalam pengalaman ini, pengembangan dan pengujian yang cermat diperlukan untuk mencegah elemen antarmuka saling tumpang tindih, muncul pada waktu yang salah, atau mengganggu interaksi lainnya.

Fade dan transisi yang halus disertakan di sepanjang pengalaman untuk menjaga konsistensi visual.

Mengembangkan WebAR dalam Panduan Brand Mewah yang Ketat

Clé de Peau Beauté memberikan panduan brand yang detail untuk proyek ini.

Pengalaman WebAR ini perlu mengikuti standar brand yang sudah ditetapkan, meliputi:

• Tipografi
• Warna
• Presentasi produk
• Identitas visual
• Citra visual (imagery)
• Estetika keseluruhan

InReality Solutions merancang elemen antarmuka, tombol, panel informasi, dan animasi berdasarkan panduan tersebut.

Beberapa aset visual membutuhkan pengembangan tambahan karena elemen persis yang dibutuhkan untuk pengalaman AR tersebut tidak tersedia secara independen.

Animasi bunga lily kustom adalah salah satu contohnya.

Aset produk lainnya membutuhkan proses ekstraksi, pembersihan, persiapan, dan optimasi sebelum dapat dimasukkan ke dalam lingkungan AR.

Sekitar tiga putaran revisi telah diselesaikan.

Revisi tersebut sebagian besar bersifat visual dan kosmetik, termasuk penyesuaian tipografi, kotak teks, dan presentasi elemen antarmuka.

Konsep interaksi inti dan fungsi teknisnya sebagian besar tetap tidak berubah dari proposal awal.

Pengujian di Perangkat Android dan iOS

Pengalaman WebAR ini diuji pada setidaknya enam perangkat.

Pengujian berfokus pada smartphone Android dan iOS modern yang sesuai dengan audiens yang diperkirakan akan menghadiri peluncuran produk mewah ini.

Pengalaman ini diuji untuk:

• Tracking AR
• Performa loading
• Pemutaran video
• Pemutaran audio
• Fungsi interaktif
• Pemilihan produk
• Tampilan informasi
• Transisi antarmuka
• Fungsi CTA
• Kompatibilitas Android
• Kompatibilitas iOS

Pengalaman InReality Solutions sebelumnya dalam mengembangkan kampanye WebAR komersial memungkinkan tim mengantisipasi dan menangani banyak tantangan kompatibilitas lintas perangkat yang umum selama pengembangan.

Hal ini membantu memastikan bahwa pengalaman tersebut berjalan secara konsisten di berbagai perangkat target yang digunakan pada acara tersebut.

Hasilnya: 83 Detik Rata-rata Keterlibatan

Pengalaman WebAR Clé de Peau Beauté mencatat:

687 scan.

Rata-rata waktu yang dihabiskan di halaman proyek adalah:

83 detik.

Data analitik perangkat mencatat:

409 scan dari perangkat Android.

Dan:

278 scan dari perangkat iOS.

Mayoritas interaksi yang tercatat berasal dari Jakarta, dengan 666 scan.

Interaksi tambahan tercatat dari Tangerang, Depok, Bandung, Surabaya, dan lokasi lainnya.

Berbeda dari kampanye konsumen pasar massal, aktivasi ini dikembangkan untuk sebuah acara eksklusif yang dihadiri sekitar 400 tamu undangan.

Karena itu, waktu keterlibatan ini memberikan konteks yang sangat berguna.

Pengalaman ini dimulai dengan video promosi wajib berdurasi 40 detik sebelum perjalanan produk interaktif tersedia.

Keseluruhan pengalaman ini bisa memakan waktu lebih dari dua menit untuk dijelajahi ketika seorang pengguna membaca seluruh informasi yang tersedia untuk ketiga produk.

Rata-rata waktu keterlibatan yang tercatat sebesar 83 detik menunjukkan bahwa, rata-rata, pengguna tetap berada dalam pengalaman ini melampaui durasi video awal dan masuk ke bagian interaktif dari aktivasi tersebut.

Menciptakan Pengalaman yang Ingin Dibagikan Tamu

Respons terhadap pengalaman ini melampaui data analitik semata.

Tamu, influencer, dan anggota tim Clé de Peau Beauté memberikan reaksi positif terhadap aktivasi tersebut.

Brand tersebut membagikan konten reaksi tamu kepada InReality Solutions, termasuk rekaman yang menunjukkan para tamu mengalami aktivasi AR ini.

Aktris dan influencer Indonesia, Beby Tsabina, juga membagikan konten yang menampilkan pengalaman AR ini di media sosial.

Untuk sebuah aktivasi acara yang dirancang untuk menciptakan antusiasme seputar peluncuran produk, reaksi-reaksi ini memberikan masukan kualitatif yang berharga di samping data keterlibatan yang tercatat.

Tim Clé de Peau Beauté Indonesia juga menyampaikan masukan positif mengenai pengalaman yang telah selesai ini.

Dari Konsep Awal hingga Peluncuran Akhir dalam Sekitar Satu Bulan

InReality Solutions bertanggung jawab atas keseluruhan pengembangan kreatif dan teknis dari aktivasi AR ini.

Cakupan pekerjaan kami meliputi:

• Strategi AR
• Pengembangan konsep kreatif
• Desain pengalaman
• Storyboarding
• Adaptasi dan optimasi konten video promosi yang diberikan klien
• Pengembangan animasi bunga lily kustom
• Animasi After Effects
• Persiapan aset produk
• Pengembangan AR
• Pengembangan antarmuka produk interaktif
• Logika interaksi yang kompleks
• Pengembangan UI/UX
• Implementasi panduan brand
• Desain dan integrasi CTA
• Integrasi musik
• Optimasi video
• Optimasi aset
• Optimasi performa
• Pengujian lintas perangkat
• Peluncuran akhir

Proyek lengkap ini dikembangkan dalam waktu sekitar satu bulan.

Sejak awal, InReality Solutions mengusulkan keseluruhan alur pengalaman ini:

Video promosi.

Reveal produk.

Pemilihan produk interaktif.

Edukasi produk.

Belanja.

Konsultasi langsung.

Clé de Peau Beauté menyetujui konsep tersebut, dan pengalaman ini kemudian disempurnakan melalui sekitar tiga putaran revisi yang sebagian besar bersifat visual sebelum peluncuran akhir.

Apa yang Ditunjukkan Proyek Clé de Peau Beauté tentang AR untuk Brand Mewah

Proyek Clé de Peau Beauté menunjukkan bahwa augmented reality dapat memberikan lebih dari sekadar efek visual singkat atau sisi kebaruan semata.

Satu kartu cetak berubah menjadi platform digital yang mampu menghadirkan konten video bermerek, penemuan produk, edukasi interaktif, akses e-commerce, dan komunikasi langsung dengan beauty specialist.

Proyek ini juga menunjukkan pentingnya merancang AR di sekitar brand, bukan merancang pengalaman brand di sekitar teknologi.

Bagi Clé de Peau Beauté, setiap elemen perlu mencerminkan positioning sebuah brand skincare mewah global.

Hal ini membutuhkan perhatian yang cermat terhadap tipografi, animasi, transisi, presentasi produk, desain interaksi, dan kualitas visual.

Pada saat yang sama, proyek ini perlu mengatasi keterbatasan praktis dari augmented reality berbasis browser.

Tiga puluh tiga objek digital, logika interaksi yang kompleks, video promosi berdurasi 40 detik, serta berbagai animasi dan elemen antarmuka perlu dimuat dan berjalan secara andal di smartphone konsumen.

Pengalaman akhir ini menyatukan seluruh persyaratan tersebut dalam satu aktivasi WebAR yang dikembangkan dalam waktu sekitar satu bulan.

Bagi para tamu undangan, pengalaman ini dimulai dengan tindakan sederhana: memindai kode QR yang tercetak pada sebuah kartu.

Yang mengikutinya adalah sebuah perjalanan digital interaktif yang dirancang untuk memperkenalkan, mengedukasi, melibatkan, dan menghubungkan konsumen langsung dengan brand tersebut.