Bagaimana Onyx Coffee Lab menghasilkan 3D interaktif untuk e-dagang

Kopi ialah pengalaman deria. Tetapi membeli-belah dalam talian tidak.

Bagi Onyx Coffee Lab, kehadiran dalam talian mereka bergantung pada cara mereka merapatkan jurang itu.

Dalam kategori yang sesak, tempat biji kopi kelihatan sama dan perbezaan produk terletak pada aroma, rasa dan tekstur, bercerita dengan kata-kata sahaja hanya boleh membawa anda sejauh itu.

Onyx memerlukan pengalaman digital yang boleh membawa obsesi yang sama terhadap ketukangan seperti yang terserlah dalam proses pemanggangan mereka, tanpa memperlahankan prestasi atau penukaran.

Jadi mereka melangkaui sempadan: 3D interaktif di web, dibina dengan Spline, dan dihantar oleh pasukan kecil.

Pengalaman 3D berasaskan tatal untuk Advent 2025 Onyx Coffee Lab

Pembezaan jenama tanpa deria

Penjenamaan kopi terkenal sukar dalam talian:

• Kebanyakan produk kelihatan serupa. Panggangan ringan di sebelah panggangan gelap tetap kelihatan seperti biji kopi.

• Anda menjual makanan tanpa bau atau rasa. Tiada gelung maklum balas deria.

• Pasaran sudah tepu. "Kopi yang hebat" bukan lagi pembeza.

Laman Onyx perlu melakukan lebih daripada sekadar kelihatan cantik. Ia perlu berkomunikasi dengan pantas. Jika tidak, khalayak sasaran mereka akan cepat hilang minat dan pergi.

Menjadikan ketukangan isyarat jenama yang kelihatan

Michael Mahler, CTO di Onyx Coffee Lab, menerangkan dua tonggak yang mentakrifkan jenama itu:

1. Kopi yang paling segar Kopi dipanggang mengikut pesanan dan dihantar dengan pantas. Selalunya, 24-48 jam dari pemanggang ke depan pintu.
2. Sumber beretika yang mengubah insentif Onyx membayar pengeluar 4-6 kali ganda harga pasaran komoditi, membina hubungan jangka panjang yang mewujudkan gelung maklum balas yang penting: pengeluar mahu menjual lot terbaik mereka kepada Onyx, dan komuniti mendapat manfaat dalam proses itu.

Pemikiran yang sama dibawa ke dalam pengalaman web mereka.

Slogan kami ialah 'Jangan sesekali berpuas hati dengan yang sekadar baik.' Sentiasa: apa yang boleh kami lakukan untuk menambah baik, dan mentaliti itu tidak pernah berhenti.

Halaman produk Circadian Onyx Coffee Lab dengan adegan 3D interaktif

Mereka bentuk untuk prosumer

Onyx tidak mereka bentuk untuk semua orang. Mereka mereka bentuk untuk orang yang mengambil berat tentang perincian.

Michael memanggil mereka prosumer. Pelanggan yang perasan apabila sesuatu jenama mengambil jalan pintas dalam perkara kecil, dan yang mengharapkan pengalaman digital yang padu mencerminkan kualiti produk.

Ini membentuk pendekatan reka bentuk yang disengajakan, tempat laman itu perlu mudah difahami dengan serta-merta tetapi juga perlu berada betul-betul di pinggir apa yang "biasa" bagi e-dagang.

Onyx menemui kelebihan pembeza itu di satu tempat: Reka Bentuk 3D dengan Spline.

Kami mahu mencari garisan itu dan menunggangnya sedekat yang mungkin… garisan itu ialah animasi 3D.

Laman Shopify yang memanfaatkan runtime Spline

Onyx berjalan di Shopify, tetapi pengalaman kedai dalam talian mereka ialah frontend tersuai sepenuhnya, yang menolak Shopify hingga ke hadnya.

Daripada mengeksport model atau bergantung pada integrasi khusus, Onyx membenamkan Spline menggunakan Spline Viewer, dan Code API Spline untuk mengawal adegan secara pengaturcaraan.

Ini membolehkan mereka membina detik interaktif yang berkelakuan seperti ciri produk. Bukan sekadar visual statik.

Daripada papan cerita kepada interaksi Spline

Aliran produksi 3D Onyx dibina untuk kepantasan, keselarasan dan kecekapan:

1. Render produk berkualiti tinggi Selalunya diserahkan kepada pasukan reka bentuk sebagai PNG yang dipotong.
2. Papan cerita Pasukan reka bentuk membuat "keyframe" bagi gerakan: apa yang bergerak, bila dan mengapa.
3. Animasi dalam Spline Pasukan mencipta semula papan cerita itu sebagai adegan interaktif sebenar.
4. Serahan kepada pembangun Benaman Spline dimasukkan ke laman, dikawal melalui logik runtime.

Menggunakan 3D untuk menerangkan perkara yang tidak dijangka oleh pelanggan

Circadian bukan halaman produk kopi yang biasa.

Daripada deskriptor kopi standard seperti 'panggangan ringan lwn. gelap' atau 'nota rasa', Circadian memperkenalkan varian berdasarkan tahap kafein dan menyertakan kalkulator untuk membantu pelanggan menyesuaikan pengambilan sepanjang hari.

Onyx menggunakan visual 3D sebagai sistem penerangan untuk membantu menyampaikan maklumat ini dan menjadikannya lebih menarik:

• Latar belakang memperkenalkan konsep secara visual
• Adegan bertindak balas terhadap interaksi
• Mengklik varian yang berbeza mencetuskan gerakan yang berbeza dalam adegan Spline

"Varian yang berbeza bagi kami benar-benar merujuk kepada jumlah kafein dalam produk. Aset di latar belakang akan bergerak bergantung pada pengalaman yang sedang mereka lihat."

Dan yang paling penting, pasukan Onyx merangka aset interaktif mereka supaya tidak mengganggu apabila perlu, atau menjadi interaktif di hadapan dan di tengah apabila perlu. Sebagai contoh, apabila teks penting melintasi halaman, pencahayaan pada aset 3D yang dibenamkan direndahkan.

Kemenangan terbesar: Masa untuk pelaksanaan

Bagi Onyx, kelebihan utama bukan sekadar kualiti visual – ia ialah kebolehlaksanaan dan kepantasan untuk pasukan mereka.

Terdapat kira-kira 10 orang yang mengendalikan kod laman dan kreatif. Mengupah jurutera dan pereka 3D khusus ialah komitmen dan perbelanjaan besar bagi sebuah syarikat kopi.

Spline mengurangkan risiko dengan memendekkan garis masa dan menjadikan 3D boleh dicapai oleh semua orang.

Kelebihan terbesar ialah masa untuk pelaksanaan… Spline mengurangkan risiko yang perlu diambil untuk mula melakukan sebahagian daripada perkara ini dalam 3D.

Mulakan dengan Spline

Onyx Coffee Lab tidak menggunakan 3D untuk bermegah. Mereka menggunakannya untuk menyelesaikan masalah e-dagang yang sebenar:

Bagaimana anda menjadikan produk yang dinikmati melalui deria terasa nyata dalam talian tanpa mengorbankan kepantasan, kejelasan atau penukaran?

Dengan Spline, mereka menemui aliran kerja yang sesuai untuk pasukan kecil, berjalan lancar pada mudah alih, dan membolehkan penceritaan interaktif dihantar dengan pantas, membolehkan mereka membezakan jenama mereka dalam pasaran yang sesak.

Hubungi pasukan jualan