· ग्राहक की कहानी · KOJI

Koji Studio ने Spline से एक 3D प्रोडक्ट शोकेस कैसे तैयार किया

Koji Studio ने Spline की मदद से स्टैटिक प्रोडक्ट विज़ुअल को स्क्रॉल पर आधारित 3D प्रोडक्ट शोकेस में बदला, जिससे एक ज़्यादा दिलचस्प और यादगार अनुभव बना, जो उनके क्लाइंट के इनोवेशन और कारीगरी को उभारता है।

जब मेडिकल टेक्नोलॉजी कंपनी Ori अपने नए 3D डेंटल स्कैनर प्रोडक्ट के लिए वेबसाइट लॉन्च करने निकली, तो चुनौती साफ़ थी: किसी भौतिक डिवाइस की सटीकता और इनोवेशन को ऑनलाइन ऐसे कैसे दिखाया जाए कि वह भी उतना ही नया लगे?

कंपनी अपना नया Ori Intraoral Scanner डिवाइस बाज़ार में लाना चाहती थी। यह एक 3D डेंटल स्कैनिंग डिवाइस है, जो डेंटिस्ट को मरीज़ों के दाँतों के बेहद सटीक, रियल-टाइम डिजिटल मॉडल कैप्चर करने में मदद करने के लिए बना है।

अपने ग्राहकों को इस प्रोडक्ट की तकनीकी प्रगति दिखाने के लिए स्टैटिक इमेज और वीडियो से आगे जाने की चाह में उन्होंने प्रोडक्ट लॉन्च के लिए क्रिएटिव टीम के रूप में KOJI Agency को चुना।

इसके बाद KOJI टीम ने Webflow में Spline इंटीग्रेशन का इस्तेमाल करके एक इंटरैक्टिव 3D डिजिटल अनुभव गढ़ने का फ़ैसला किया, जिससे स्कैनर वेब पर भी उतना ही असली लगे जितना किसी डेंटिस्ट के हाथ में।

Ori Scan की स्क्रॉल पर आधारित इंटरैक्टिव 3D वेबसाइट

नए टूल अपनाती एक फ़ुल-स्टैक डिज़ाइन टीम

Ori Scan की वेब मौजूदगी के पीछे KOJI Agency की टीम में Pavel, Slava, Nikita और Liza थे, जिनमें से हर एक कई क्लाइंट प्रोजेक्ट कर चुका अनुभवी डिज़ाइनर है।

ब्रांडिंग, आइडेंटिटी और डिजिटल अनुभवों में 20 से ज़्यादा सालों के अनुभव के साथ उन्होंने मॉड्यूलर विज्ञापन सिस्टम से लेकर इमर्सिव कहानी कहने वाली साइटों तक सब कुछ बनाया है।

उनकी ताक़त "फ़ुल-स्टैक डिज़ाइनर" होने में है — प्रोडक्ट की सोच, विज़ुअल डिज़ाइन, इंटरैक्शन और कोड को एक साथ मिलाना।

हम हमेशा रिसर्च करते रहते हैं, हमेशा नए टूल खोजने की कोशिश करते हैं। इसी तरह हम Spline तक पहुँचे।

Slava Sheykin, फ़ुल-स्टैक डिज़ाइनर, KOJI

इंटरैक्टिविटी के लिए Spline का इस्तेमाल

Ori Scan का नेतृत्व सिर्फ़ एक और मेडिकल प्रोडक्ट वेबसाइट नहीं चाहता था। वे एक ऐसा अनुभव चाहते थे जो डेंटिस्ट और हेल्थकेयर प्रोफ़ेशनल वाले उनके दर्शकों के बीच अलग नज़र आए।

KOJI टीम ने स्कैनर के इनोवेशन को उभारने के लिए इंटरैक्टिव 3D को सबसे अच्छा माध्यम माना, और Spline का चुनाव भी उतना ही सोच-समझकर किया गया।

वेबसाइट पर आने वाले लोग पेज पर आगे बढ़ते हुए स्कैनर को घुमाते और एक्सप्लोर करते हैं

टीम जानती थी कि उन्हें जल्दी बदलाव करने, परफ़ॉर्मेंस ऑप्टिमाइज़ करने और स्कैनर के प्रोडक्ट डिज़ाइन को हर डिवाइस पर इंटरैक्टिव रूप से दिखाने का लचीलापन चाहिए।

डिज़ाइन कम्युनिटी में Spline हर जगह था। आख़िरकार इसे इस्तेमाल करने का यह बिल्कुल सही मौक़ा था, और Webflow के साथ सहज इंटीग्रेशन ने फ़ैसला और भी आसान कर दिया।

Pavel Dergachev, फ़ाउंडर और क्रिएटिव डायरेक्टर, KOJI

डिज़ाइन प्रक्रिया: CAD और पॉलीगॉन ऑप्टिमाइज़ेशन से एक निखरे वेब अनुभव तक

प्रक्रिया Ori Scan की तकनीकी CAD फ़ाइलों से शुरू हुई, जिन्हें एजेंसी ने Spline में लाने से पहले निखारा और ऑप्टिमाइज़ किया।

वर्कफ़्लो बार-बार सुधार वाला था — पॉलीगॉन की संख्या, मटीरियल और लाइटिंग में ऐसा संतुलन बनाना कि नतीजा देखने में आकर्षक हो और वेब पर स्मूद परफ़ॉर्मेंस भी दे।

Spline ने प्रक्रिया के तकनीकी और रचनात्मक पहलुओं को एक साथ जोड़ा। इसके परफ़ॉर्मेंस टूल ने टीम को मॉडल ऑप्टिमाइज़ेशन की साफ़ समझ दी, जिससे हर डिवाइस पर स्मूद इंटीग्रेशन पक्का हुआ। इवेंट सिस्टम से इंटरैक्टिव मोशन सेट करना आसान हो गया, और बहुमुखी मटीरियल और लाइटिंग टूल ने प्रोडक्ट के लुक को सँवारने में मदद की, ताकि वह वेब पर निखरा और असली लगे।

3D मॉडल और मोबाइल पर अंतिम इम्प्लीमेंटेशन

सबसे ख़ास बारीकियों में से एक? दाँतों का 3D मॉडल। स्कैनर को काम करते हुए दिखाने के लिए टीम ने Spline में असली जैसे दिखने वाले दाँत मॉडल किए, जिससे वह ज़रूरी टच आया जिसने डेमो को प्रामाणिक बना दिया।

बारीकियों पर इस ध्यान ने डेमो को सिर्फ़ एक तकनीकी शोकेस से कहीं ऊपर उठा दिया। असलियत और इंटरैक्टिविटी को मिलाकर टीम ने एक ऐसी प्रोडक्ट कहानी रची जो प्रामाणिक, दिलचस्प और सीधे इस बात से जुड़ी थी कि डेंटिस्ट असल में स्कैनर का इस्तेमाल कैसे करेंगे।

यह मज़ेदार था, लेकिन बेहद अहम भी। क्योंकि स्कैनर का काम दाँत स्कैन करना है, इसलिए 3D मॉडल को देखने और महसूस होने में स्वाभाविक होना ज़रूरी था।

Liza Grin, डिजिटल प्रोड्यूसर, KOJI
ऊपर से नीचे: अंतिम इम्प्लीमेंटेशन, मूल 3D मॉडल और शुरुआती ड्राफ़्ट

Webflow के साथ इंटीग्रेशन

KOJI टीम ने Ori Scan प्रोडक्ट को जीवंत बनाने के लिए Spline पर, और 3D एसेट्स को वेबसाइट में सहजता से लगाने के लिए Spline के नेटिव Webflow इंटीग्रेशन पर भरोसा किया।

इससे स्क्रॉल पर आधारित एनिमेशन को इंटरैक्टिव 3D के साथ जोड़ना संभव हुआ, जिससे विज़िटर्स पेज पर आगे बढ़ते हुए स्कैनर को घुमा और एक्सप्लोर कर सकते थे।

यह बहुत आसान और तेज़ है। लर्निंग कर्व कम है, जूनियर डिज़ाइनर भी आकर Webflow में 3D इंटीग्रेट कर सकते हैं।

Pavel Dergachev, फ़ाउंडर और क्रिएटिव डायरेक्टर, KOJI
Spline का नेटिव Webflow इंटीग्रेशन

इंटरैक्टिविटी क्यों मायने रखती है

Ori Scan के लिए इंटरैक्टिव 3D प्रोडक्ट शोकेस सिर्फ़ ख़ूबसूरती की बात नहीं था। यह स्पष्टता और असर की बात थी। ग्राहकों को प्रोडक्ट को स्क्रॉल करने, घुमाने और उसके फ़ीचर संदर्भ में एक्सप्लोर करने देकर उन्होंने ऐसा अनुभव बनाया जो स्टैटिक फ़ोटोग्राफ़ी या वीडियो की पहुँच से कहीं आगे था।

इंटरैक्टिविटी सब कुछ बदल देती है। इससे प्रोडक्ट असली लगता है। और इससे भी ज़रूरी, यह क्लाइंट को अपनी कहानी ऐसे तरीके से कहने में मदद करती है जो नया लगे।

Pavel Dergachev, फ़ाउंडर और क्रिएटिव डायरेक्टर, KOJI

Spline के साथ शुरुआत करें

KOJI टीम Spline के साथ प्रयोग करती जा रही है। उनके लिए यह प्रोजेक्ट एक नए अध्याय की शुरुआत था, जहाँ 3D और इंटरैक्टिव डिज़ाइन सिर्फ़ "हो तो अच्छा" नहीं, बल्कि प्रोडक्ट की कहानी कहने के लिए ज़रूरी हैं।

यह इस बात का एक शानदार उदाहरण है कि इंटरैक्टिविटी डिजिटल प्रोडक्ट डिज़ाइन को एक ऐसे अनुभव में कैसे बदल सकती है जो असली लगे।

सेल्स टीम से बात करें

ग्राहकों की और कहानियाँ