Cara Onyx Coffee Lab membuat 3D interaktif untuk e-commerce

Kopi adalah pengalaman indrawi. Tetapi belanja online tidak.

Bagi Onyx Coffee Lab, kehadiran online mereka bergantung pada bagaimana mereka bisa menjembatani kesenjangan itu.

Di kategori yang padat, tempat biji kopi terlihat sama dan perbedaan produk terletak pada aroma, rasa, dan tekstur, bercerita hanya dengan kata-kata punya batasnya.

Onyx membutuhkan pengalaman digital yang bisa membawa obsesi yang sama terhadap keahlian seperti yang terlihat dalam proses sangrai mereka, tanpa memperlambat performa atau konversi.

Jadi mereka mendorong batasnya: 3D interaktif di web, dibangun dengan Spline, dan dirilis oleh tim kecil.

Pengalaman 3D berbasis scroll untuk Advent 2025 Onyx Coffee Lab

Diferensiasi merek tanpa indra

Branding kopi terkenal sulit dilakukan secara online:

• Sebagian besar produk terlihat serupa. Light roast di samping dark roast tetap terlihat seperti biji kopi.

• Anda menjual makanan tanpa aroma atau rasa. Tidak ada umpan balik indrawi.

• Pasarnya sudah jenuh. “Kopi yang enak” bukan lagi pembeda.

Situs Onyx harus berbuat lebih dari sekadar tampil bagus. Situs itu harus berkomunikasi dengan cepat. Jika tidak, audiens sasaran mereka akan cepat kehilangan minat dan pergi.

Mengubah keahlian menjadi sinyal merek yang terlihat

Michael Mahler, CTO di Onyx Coffee Lab, menjelaskan dua pilar yang mendefinisikan merek ini:

1. Kopi sesegar mungkin Kopi disangrai sesuai pesanan dan dikirim dengan cepat. Sering kali hanya 24-48 jam dari mesin sangrai ke depan pintu.
2. Sumber pasokan etis yang mengubah insentif Onyx membayar produsen 4-6x harga pasar komoditas, membangun hubungan jangka panjang yang menciptakan siklus umpan balik penting: produsen ingin menjual hasil panen terbaik mereka kepada Onyx, dan komunitas ikut merasakan manfaatnya.

Pola pikir yang sama terbawa ke pengalaman web mereka.

Slogan kami adalah ‘Jangan pernah puas dengan yang cukup baik.’ Selalu: apa yang bisa kami lakukan untuk menjadi lebih baik, dan mentalitas itu tidak pernah berhenti.

Halaman produk Circadian milik Onyx Coffee Lab dengan scene 3D interaktif

Mendesain untuk para prosumer

Onyx tidak mendesain untuk semua orang. Mereka mendesain untuk orang-orang yang peduli pada detail.

Michael menyebut mereka prosumer. Pelanggan yang menyadari saat sebuah merek mengambil jalan pintas pada hal-hal kecil, dan yang mengharapkan pengalaman digital yang kohesif mencerminkan kualitas produk.

Ini membentuk pendekatan desain yang disengaja: situsnya harus langsung bisa dipahami, tetapi juga harus berada tepat di tepi batas apa yang “normal” untuk e-commerce.

Onyx menemukan keunggulan pembeda itu di satu tempat: desain 3D dengan Spline.

Kami ingin menemukan batas itu dan menyusurinya sedekat mungkin… batas itu adalah animasi 3D.

Situs Shopify yang memanfaatkan runtime Spline

Onyx berjalan di Shopify, tetapi pengalaman tokonya memakai frontend yang sepenuhnya kustom, mendorong Shopify hingga batasnya.

Alih-alih mengekspor model atau mengandalkan integrasi khusus, Onyx menyematkan Spline dengan Spline Viewer, dan memakai Code API Spline untuk mengontrol scene secara terprogram.

Ini memungkinkan mereka membangun momen interaktif yang berperilaku seperti fitur produk. Bukan sekadar visual statis.

Dari storyboard ke interaksi Spline

Alur produksi 3D Onyx dibangun untuk kecepatan, keselarasan, dan efisiensi:

1. Render produk berkualitas tinggi Sering kali diserahkan ke tim desain sebagai PNG potongan.
2. Storyboarding Tim desain menyusun “keyframe” gerakannya: apa yang bergerak, kapan, dan mengapa.
3. Menganimasikan di Spline Tim membuat ulang storyboard itu sebagai scene interaktif sungguhan.
4. Serah terima ke developer Embed Spline dipasang di situs, dikontrol melalui logika runtime.

Memakai 3D untuk menjelaskan hal yang tidak diduga pelanggan

Circadian bukan halaman produk kopi biasa.

Alih-alih deskripsi kopi standar seperti ‘light vs. dark roast’ atau ‘catatan rasa’, Circadian menghadirkan varian berdasarkan kadar kafein dan menyertakan kalkulator untuk membantu pelanggan mengatur asupan sepanjang hari.

Onyx memakai visual 3D sebagai sistem penjelas untuk membantu menyampaikan informasi ini dan membuatnya lebih menarik:

• Latar belakangnya memperkenalkan konsep secara visual
• Scene-nya merespons interaksi
• Mengklik varian yang berbeda memicu gerakan berbeda di scene Spline

“Bagi kami, varian yang berbeda secara harfiah adalah seberapa banyak kafein dalam produk. Aset di latar belakang akan bergerak tergantung pengalaman mana yang sedang mereka lihat.”

Dan yang terpenting, tim Onyx mengatur aset interaktif mereka agar menyingkir saat diperlukan, atau tampil interaktif di depan dan tengah saat diperlukan. Misalnya, saat teks penting melintasi halaman, pencahayaan pada aset 3D yang disematkan diredupkan.

Kemenangan terbesar: waktu hingga rilis

Bagi Onyx, keunggulan utamanya bukan hanya kualitas visual, tetapi kelayakan dan kecepatan bagi tim mereka.

Ada sekitar 10 orang yang menangani kode dan materi kreatif situs. Merekrut engineer dan desainer 3D khusus adalah komitmen dan biaya besar bagi sebuah perusahaan kopi.

Spline menurunkan risikonya dengan memangkas waktu pengerjaan dan membuat 3D bisa dijangkau semua orang.

Keunggulan terbesarnya adalah waktu hingga rilis… Spline menurunkan risiko untuk mulai mengerjakan hal-hal seperti ini dalam 3D.

Mulai dengan Spline

Onyx Coffee Lab tidak memakai 3D demi tampil mencolok. Mereka memakainya untuk memecahkan masalah e-commerce yang nyata:

Bagaimana membuat produk indrawi terasa nyata secara online tanpa mengorbankan kecepatan, kejelasan, atau konversi?

Dengan Spline, mereka menemukan alur kerja yang cocok untuk tim kecil, berjalan mulus di mobile, dan memungkinkan penceritaan interaktif dirilis dengan cepat, sehingga mereka bisa membedakan merek mereka di pasar yang padat.

Hubungi tim penjualan