Organisasi Pemasaran Perangkat dan Layanan (DSM) Google mengawasi strategi go-to-market untuk berbagai produk: smartphone, smartwatch, earbud, tablet, perangkat smart home, dan langganan yang relevan, semuanya tersedia melalui Google Store dan vendor pihak ketiga global. Orang-orang mempelajari produk tersebut secara online dan di toko retail fisik.
Salah satu tantangan yang selalu dihadapi tim ini adalah mengedukasi konsumen dan retailer tentang kasus penggunaan dan manfaat ekosistem hardware Google serta pengalaman AI tingkat lanjut. Untuk membantu konsumen memahami produk dan fungsionalitas dengan lebih baik, tim DSM menciptakan ruang virtual 3D dengan teknologi web canggih untuk mengatasi berbagai tantangan ini. Dalam studi kasus ini, Anda dapat mempelajari cara tim menciptakan pengalaman yang lebih imersif bagi pelanggan, dengan meluncurkan pengalaman baru ini empat kali lebih cepat dan dengan biaya setengah dari aset digital tradisional.
Tantangan: edukasi produk
Mengedukasi staf penjualan dan pelanggan yang baru menggunakan produk hardware Google tentang manfaat fitur seperti interoperabilitas dan AI adalah hal yang mahal dan sulit. Strategi edukasi produk tradisional mengandalkan konten digital yang diproduksi menggunakan produk fisik, yang kemudian dihosting di platform pembelajaran digital. Platform pembelajaran ini menyediakan spesifikasi teknis, gambar, dan video produk, tetapi tidak menyediakan akses ke produk fisik atau yang terhubung.
Konten pembelajaran seperti video mahal untuk diproduksi, sulit dilokalkan untuk pasar global, dan nyaris tidak mungkin digunakan kembali antar-produk. Pembuatan aset awal memerlukan anggaran untuk melakukan transmisi, lemari pakaian, pencarian lokasi, biaya lokasi, biaya studio, kru film, dan pekerjaan pascaproduksi. Biaya produksi dan hasil kerja juga harus memperhitungkan pelokalan; memodifikasi aset, lokasi, produk, teks, dan tenaga kerja sangat menantang bagi pemasaran tradisional dalam skala besar. Dan jika Anda menganggap bahwa sebagian besar produk yang didukung memiliki update fitur baru setiap beberapa bulan, aset ini sudah usang pada saat proses pembuatannya selesai.
Mencari cara yang lebih baik untuk membagikan informasi produk
Dalam upaya menemukan cara yang lebih baik untuk membagikan informasi produk, tim DSM bereksperimen dengan pengalaman VR/AR di aplikasi. Hasilnya sangat menjanjikan dengan engagement yang lebih kuat dan peningkatan ukuran keranjang di tempat penjualan. Namun, download aplikasi merupakan penghalang yang signifikan bagi sales rep dan pelanggan. Selain itu, pembatasan pengalaman pada aplikasi membuat aplikasi tersebut tidak dapat disematkan di properti pihak pertama atau ketiga lainnya, seperti store.google.com.
Solusi ringan dengan <model-viewer>
Setelah melihat keberhasilan model produk 3D untuk edukasi produk, tim
memutuskan untuk menghadirkan pendekatan ini ke web. Salah satu cara untuk melakukannya adalah menggunakan
<model-viewer> untuk menciptakan pengalaman 3D
dengan setiap produk.
<model-viewer> adalah komponen web,
yang memungkinkan Anda menambahkan model 3D ke halaman web secara deklaratif, sekaligus menghosting
model di situs Anda sendiri.
Anda dapat melihat cara kerjanya di
halaman Pixel Fold
di Google Store, tempat <model-viewer> memungkinkan pengguna melihat Pixel
Fold dari setiap sudut dengan berbagai posisi lipatan. Sangat mudah untuk mengintegrasikan
model 3D ke dalam UX HTML lainnya, dengan tombol untuk menceritakan sebuah kisah melalui
sudut kamera dan varian warna interaktif. Dengan <model-viewer>, Anda dapat
memberi pengguna pengalaman apa pun yang Anda inginkan.
Membuat model 3D
Langkah pertama untuk mengembangkan pengalaman virtual 3D adalah membuat model produk 3D. Tim DSM membuat model 3D dalam CAD. Dengan bekerja sama dengan desainer yang memproduksi CAD produk, tim DSM mampu mengekspor render poli rendah yang dapat dioptimalkan untuk web. Beberapa praktik terbaik yang mereka gunakan untuk mencapainya adalah dalam area berikut.
- Geometri:
- Fokus untuk membuat geometri (bentuk dan skala) akurat dari setiap sudut.
- Hindari penggunaan peta normal untuk tepi yang miring.
- Buat decal sebagai geometri terpisah.
- Warna dan bahan:
- Tujuan: representasi visual yang konsisten dari sifat fisik.
- Pertimbangkan dinamika pencahayaan real-time.
- Gunakan kumpulan tekstur dan bahan terpisah untuk setiap jenis mesh (Buram, Transparan, Stiker).
- Melakukan iterasi pada desain dengan desainer CAD asli jika penyesuaian lebih lanjut diperlukan.
- Ukuran file:
- Ekspor sebagai model poli rendah dalam format GLB agar model tersebut dapat digunakan
oleh
<model-viewer>. - Kompresi mesh geometris secara manual oleh desainer 3D, dengan vendor, atau melalui software kompresi seperti DRACO (OS).
- Ekspor sebagai model poli rendah dalam format GLB agar model tersebut dapat digunakan
oleh
Karena akan sering digunakan di ponsel, model 3D ini dioptimalkan dengan menetapkan ukuran file maksimum dengan tekstur 2 MB, untuk mendukung perangkat generasi lama dan koneksi internet yang lemah.
<model-viewer>
Tim DSM menggunakan komponen web open source <model-viewer> Google untuk menyematkan
model 3D yang baru dibuat ke halaman web mereka. Agar model yang dibuat
di langkah pertama kompatibel dengan <model-viewer>, aset harus dalam
format gITF atau GLB (ekstensi .glb). Kedua format ini ringkas, dapat dikompresi, dan
dimuat dengan cepat ke GPU. Komponen <model-viewer> didukung oleh semua
browser evergreen utama.
Pada langkah ini, tantangan terbesar yang dihadapi tim DSM adalah palet warna hardware Google tidak dirender secara akurat. Tim akhirnya menemukan bahwa pemetaan warna ACES (standar industri film) menyebabkan hilangnya warna. Untuk mengatasi hal ini, mereka mengembangkan Petaper Nada Netral Khronos PBR baru secara khusus untuk mengatasi kekurangan ini dan menampilkan warna secara tepat ke layar, sekaligus menghindari sorotan yang meledak dan pergeseran hue yang terkait dengan pemetaan nada linear.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
Untuk mempelajari <model-viewer> lebih lanjut, kunjungi modelviewer.dev. Untuk menguji model 3D dan mendownload seluruh situs awal, coba editor kami.
Solusi berat dengan Three.js
<model-viewer> adalah cara yang efektif dan berperforma tinggi untuk menampilkan dan berinteraksi dengan satu model
3D. Namun, terkadang tim DSM membutuhkan pengalaman web yang lebih imersif dan
saling terhubung daripada yang mungkin dilakukan dengan <model-viewer>. Salah satu
contohnya adalah peluncuran Nest Mini + C. <model-viewer> dapat memungkinkan
calon pelanggan menikmati produk dalam 3D di web, tetapi tidak dapat menunjukkan
manfaatnya saat dikombinasikan dengan produk Hardware Google dan fitur AI
lainnya seperti asisten.
Untuk tugas ini, tim beralih ke library yang mendasari <model-viewer>,
three.js. Three.js adalah game engine JavaScript open source, dan tim ini
mampu membuat framework aset yang dapat digunakan kembali untuk lingkungan rumah virtual
yang berisi kamera, lampu, dan speaker dalam ruangan Nest. Hal ini memberi tim landasan untuk memberikan masukan secara real-time tentang cara perangkat berinteraksi satu sama lain.
Dialogflow
Bagian terakhir dalam membuat pengalaman yang saling terhubung adalah menambahkan Asisten Google. Artinya, pengguna dapat mencoba perintah dan rutinitas autentik dengan pengalaman virtual yang saling terhubung. Namun, menyisipkan Asisten Google dari akun pengguna yang ada akan membuka sejumlah masalah privasi yang bermasalah. Untuk membuat solusi yang fokus pada privasi, DSM bekerja sama dengan layanan Google Cloud Dialogflow untuk meniru Asisten Google di ruang ini. Diagram tingkat tinggi berikut menunjukkan cara aplikasi web menggunakan API Dialogflow (diadaptasi dari Basics Dialogflow). Untuk setiap putaran percakapan, aplikasi web menggunakan klasifikasi intent Dialogflow dan API menampilkan ekspresi pengguna akhir yang telah ditentukan yang cocok dengan intent tersebut.
Untuk mempelajari Dialogflow lebih lanjut, baca dokumentasi Google Cloud.
Hasil akhir: iFrame yang dapat disematkan
Hasil akhirnya adalah library aset yang dapat disematkan ke halaman web dengan <model-viewer> atau digunakan dalam lingkungan virtual lengkap untuk membantu pelanggan mempelajari lebih lanjut setiap produk dan cara produk saling terhubung. Pengalaman
yang otentik, skalabel, dan hemat biaya. Pengalaman virtual pertama ini
diluncurkan pada Mei 2021. Meskipun tidak lagi tersedia di situs Google Store, Anda
masih dapat
mencobanya.
Hasil
Sejak peluncuran Nest Mini +C, DSM dapat menggunakan kembali dan memperluas framework peluncuran portofolio Pixel dalam dua tahun terakhir dengan makin sukses. Melalui operasional iterasi aset dan pengalaman 3D ini, tim sejauh ini telah mampu meningkatkan jumlah pengalaman edukasi produk interaktif sebanyak empat kali lipat dan melipatgandakan jumlah produk yang mendapatkan manfaat dari teknologi web ini.
Hasil akhirnya adalah edukasi produk yang autentik dan bermerek untuk permutasi kasus penggunaan yang terus berkembang dalam skala besar yang lebih berkelanjutan, kohesif, dan interaktif dibandingkan strategi sebelumnya. Dan ke depannya, tim DSM kini memiliki portofolio komponen pengalaman imersif yang andal dan dapat dengan cepat beradaptasi dengan target bisnis yang dinamis. Dengan peningkatan ini, tim DSM dapat meluncurkan konten edukasi produk baru empat kali lebih cepat dan dengan biaya kurang dari separuh dibandingkan proses sebelumnya yang lebih tradisional.