Koji Studio, Spline ile 3D bir ürün vitrinini nasıl hayata geçirdi

Bir medikal teknoloji şirketi olan Ori, yeni 3D diş tarayıcısı ürünü için bir web sitesi yayınlamaya giriştiğinde zorluk netti: fiziksel bir cihazın hassasiyetini ve yenilikçiliğini, internette de aynı ölçüde yenilikçi hissettiren bir şekilde nasıl anlatırsın?

Şirket yeni Ori Intraoral Scanner cihazını piyasaya sürmek istiyordu: diş hekimlerinin hastaların dişlerinin son derece doğru, gerçek zamanlı dijital modellerini almasına yardımcı olmak için tasarlanmış bir 3D diş tarama cihazı.

Bu ürünün teknik üstünlüğünü müşterilerine göstermek için statik görsellerin ve videoların ötesine geçmek isteyen şirket, ürün lansmanının yaratıcı ekibi olarak KOJI Agency’ye başvurdu.

KOJI ekibi de tarama cihazını web’de bir diş hekiminin elindeki kadar somut hissettiren etkileşimli bir 3D dijital deneyim oluşturmak için Spline’ın Webflow entegrasyonundan yararlanmaya karar verdi.

Yeni araçları benimseyen full-stack bir tasarım ekibi

Ori Scan’in web varlığının arkasındaki KOJI Agency ekibinde, her biri pek çok müşteri projesine imza atmış deneyimli tasarımcılar olan Pavel, Slava, Nikita ve Liza vardı.

Markalama, kimlik ve dijital deneyimlerde 20 yılı aşkın birikimleriyle modüler reklam sistemlerinden sürükleyici anlatı sitelerine kadar her şeyi inşa ettiler.

Güçlü yanları “full-stack tasarımcı” olmaları: ürün düşüncesini, görsel tasarımı, etkileşimi ve kodu harmanlıyorlar.

Sürekli araştırıyor, sürekli yeni araçlar bulmaya çalışıyoruz. Spline’a da böyle ulaştık.

Etkileşimin kilidini açmak için Spline’dan yararlanmak

Ori Scan’in yönetimi sıradan bir medikal ürün web sitesi daha istemiyordu. Diş hekimleri ve sağlık profesyonellerinden oluşan kitlelerinin gözünde öne çıkacak bir deneyim istiyorlardı.

KOJI ekibi tarama cihazının yenilikçiliğini öne çıkarmak için en iyi mecranın etkileşimli 3D olduğunu düşündü; Spline’ı seçmeleri de aynı ölçüde bilinçliydi.

Ekip; hızla yineleme yapmak, performansı optimize etmek ve tarama cihazının ürün tasarımlarını tüm cihazlarda etkileşimli olarak sunmak için esnekliğe ihtiyaç duyduklarını biliyordu.

Spline tasarım topluluğunda her yerdeydi. Bu proje nihayet onu kullanmak için mükemmel bir fırsattı ve Webflow ile kusursuz entegrasyonu kararı daha da kolaylaştırdı.

Tasarım süreci: CAD ve poligon optimizasyonundan cilalı bir web deneyimine

Süreç, ajansın Spline’a aktarmadan önce iyileştirip optimize ettiği Ori Scan’in teknik CAD dosyalarıyla başladı.

İş akışı yinelemeliydi: görsel açıdan çekici bir sonuç ile web’de akıcı performans arasında denge sağlamak için poligon sayısını, malzemeleri ve ışıklandırmayı dengelemek.

Spline, sürecin teknik ve yaratıcı yanlarını bir araya getirdi. Performans araçları ekibe model optimizasyonu konusunda net bilgiler vererek tüm cihazlarda akıcı bir entegrasyon sağladı. Olay sistemi etkileşimli hareketi kurmayı kolaylaştırırken çok yönlü malzeme ve ışıklandırma araçları ürünün görünümünü web’de cilalı ve gerçekçi hissettirecek şekilde iyileştirmeye yardımcı oldu.

Öne çıkan ayrıntılardan biri mi? Dişlerin 3D modeli. Tarayıcıyı iş başında göstermek için ekip Spline’da doğal görünümlü dişler modelledi; bu da demoyu gerçekçi hissettiren vazgeçilmez bir dokunuş oldu.

Ayrıntılara gösterilen bu özen, demoyu teknik bir vitrinin ötesine taşıdı. Gerçekçiliği etkileşimle birleştiren ekip, gerçekçi, ilgi çekici ve diş hekimlerinin tarama cihazını gerçekte nasıl kullanacağıyla doğrudan bağlantılı hissettiren bir ürün hikâyesi yarattı.

Eğlenceliydi ama aynı zamanda kritikti. Tarayıcının amacı dişleri taramak olduğu için 3D modelin doğal görünmesi ve hissettirmesi gerekiyordu.

Webflow ile entegrasyon

KOJI ekibi Ori Scan ürününe hayat vermek için Spline’a, 3D varlıkları web sitesine kusursuzca yerleştirmek için de Spline’ın yerel Webflow entegrasyonuna güvendi.

Bu sayede kaydırmaya bağlı animasyonları etkileşimli 3D ile eşleştirmek mümkün oldu; ziyaretçiler sayfada ilerlerken tarama cihazını döndürüp keşfedebildi.

Çok basit ve hızlı. Öğrenmesi kolay; junior tasarımcılar bile işin içine girip 3D’yi Webflow’a entegre edebiliyor.

Etkileşim neden önemli

Ori Scan için etkileşimli bir 3D ürün vitrini yalnızca estetikle ilgili değildi. Mesele netlik ve etkiydi. Müşterilerin ürün boyunca kaydırmasına, onu döndürmesine ve özelliklerini bağlamı içinde keşfetmesine izin vererek statik fotoğrafçılığın ya da videonun ulaşabileceğinin çok ötesine geçen bir deneyim yarattılar.

Etkileşim her şeyi değiştiriyor. Ürünü gerçek hissettiriyor. Daha da önemlisi, müşterinin hikâyesini yenilikçi hissettiren bir şekilde anlatmasına yardımcı oluyor.

Spline’a başla

KOJI ekibi Spline ile denemeler yapmaya devam ediyor. Onlar için bu proje, 3D ve etkileşimli tasarımın “olsa iyi olur” değil, ürün hikâyeleri anlatmada vazgeçilmez olduğu yeni bir dönemin başlangıcıydı.

Etkileşimin dijital ürün tasarımını gerçek hissettiren bir deneyime nasıl dönüştürebileceğinin görsel açıdan çarpıcı bir örneği.

Satış ekibiyle görüş