Onyx Coffee Lab ई-कॉमर्स के लिए इंटरैक्टिव 3D कैसे गढ़ता है

कॉफ़ी एक संवेदी अनुभव है। लेकिन ऑनलाइन शॉपिंग नहीं।

Onyx Coffee Lab के लिए उनकी ऑनलाइन मौजूदगी इस पर टिकी थी कि वे यह फ़ासला कैसे पाटते हैं।

एक भीड़ भरी श्रेणी में, जहाँ कॉफ़ी बीन्स एक जैसी दिखती हैं और प्रोडक्ट का फ़र्क़ ख़ुशबू, स्वाद और बनावट में होता है, सिर्फ़ शब्दों से कहानी कहना एक हद तक ही काम आता है।

Onyx को एक ऐसा डिजिटल अनुभव चाहिए था जो कारीगरी के लिए वही जुनून दिखाए जो उनकी रोस्टिंग में दिखता है, वह भी परफ़ॉर्मेंस या कन्वर्ज़न धीमा किए बिना।

इसलिए उन्होंने सीमा को आगे बढ़ाया: वेब पर इंटरैक्टिव 3D, Spline से बना, और एक छोटी टीम द्वारा शिप किया गया।

Onyx Coffee Lab के 2025 Advent के लिए स्क्रॉल पर आधारित 3D अनुभव

इंद्रियों के बिना ब्रांड को अलग दिखाना

ऑनलाइन कॉफ़ी ब्रांडिंग बेहद मुश्किल मानी जाती है:

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

• आप बिना गंध या स्वाद के खाने की चीज़ बेच रहे होते हैं। इंद्रियों से कोई फ़ीडबैक नहीं मिलता।

• बाज़ार भरा हुआ है। "बढ़िया कॉफ़ी" अब कोई अलग पहचान नहीं रही।

Onyx की साइट को सिर्फ़ अच्छा दिखने से ज़्यादा करना था। उसे तेज़ी से बात पहुँचानी थी। वरना उनके लक्षित दर्शक जल्दी ही दिलचस्पी खोकर चले जाते।

कारीगरी को ब्रांड का एक दिखने वाला संकेत बनाना

Onyx Coffee Lab के CTO, Michael Mahler ने ब्रांड को परिभाषित करने वाले दो स्तंभ बताए:

1. जितनी हो सके उतनी ताज़ा कॉफ़ी कॉफ़ी ऑर्डर पर रोस्ट होती है और जल्दी भेजी जाती है। अक्सर रोस्टर से दरवाज़े तक 24-48 घंटे में।
2. नैतिक सोर्सिंग जो प्रोत्साहन बदल देती है Onyx उत्पादकों को कमोडिटी बाज़ार की कीमत से 4-6 गुना भुगतान करता है, और ऐसे लंबे रिश्ते बनाता है जो एक ज़रूरी फ़ीडबैक लूप रचते हैं: उत्पादक अपनी सबसे अच्छी फ़सल Onyx को बेचना चाहते हैं, और इस प्रक्रिया में समुदायों को फ़ायदा होता है।

यही सोच उनके वेब अनुभव में भी दिखती है।

हमारा नारा है ‘काफ़ी अच्छे पर कभी मत रुको।’ हमेशा यही सवाल रहता है: हम और बेहतर क्या कर सकते हैं, और यह सोच कभी नहीं रुकती।

इंटरैक्टिव 3D सीन के साथ Onyx Coffee Lab का Circadian प्रोडक्ट पेज

प्रोज़्यूमर्स के लिए डिज़ाइन

Onyx हर किसी के लिए डिज़ाइन नहीं कर रहा। वे उन लोगों के लिए डिज़ाइन कर रहे हैं जिन्हें बारीकियों की परवाह है।

Michael उन्हें प्रोज़्यूमर कहते हैं। ऐसे ग्राहक जो ध्यान देते हैं जब कोई ब्रांड छोटी चीज़ों में कोताही करता है, और जो उम्मीद करते हैं कि एकसार डिजिटल अनुभव प्रोडक्ट की क्वालिटी दिखाएँ।

इसने एक सोचा-समझा डिज़ाइन तरीका तय किया, जिसमें साइट को तुरंत समझ में आना था, लेकिन साथ ही ई-कॉमर्स के लिए "सामान्य" की सीमा के बिल्कुल किनारे पर भी रहना था।

Onyx ने वह अलग पहचान देने वाला किनारा एक जगह पाया: Spline से 3D डिज़ाइन।

हम वह रेखा खोजना चाहते थे और जितना हो सके उसके क़रीब चलना चाहते थे… वह रेखा थी 3D एनिमेशन।

Spline के रनटाइम का इस्तेमाल करती Shopify साइट

Onyx, Shopify पर चलता है, लेकिन उनका स्टोरफ़्रंट अनुभव पूरी तरह कस्टम फ़्रंटएंड है, जो Shopify को उसकी हद तक ले जाता है।

मॉडल एक्सपोर्ट करने या किसी ख़ास इंटीग्रेशन पर निर्भर रहने के बजाय, Onyx, Spline Viewer से Spline को एम्बेड करता है, और सीन को प्रोग्राम से कंट्रोल करने के लिए Spline के Code API का इस्तेमाल करता है।

इससे वे ऐसे इंटरैक्टिव पल बना पाते हैं जो सिर्फ़ स्टैटिक विज़ुअल नहीं, बल्कि प्रोडक्ट फ़ीचर की तरह काम करते हैं।

स्टोरीबोर्ड से Spline इंटरैक्शन तक

Onyx का 3D प्रोडक्शन फ़्लो रफ़्तार, तालमेल और कुशलता के लिए बना है:

1. हाई-क्वालिटी प्रोडक्ट रेंडरिंग अक्सर डिज़ाइन टीम को कट-आउट PNG के रूप में दी जाती हैं।
2. स्टोरीबोर्डिंग डिज़ाइन टीम मोशन के "कीफ़्रेम" तय करती है: क्या हिलेगा, कब और क्यों।
3. Spline में एनिमेट करना टीम उन स्टोरीबोर्ड को असली इंटरैक्टिव सीन के रूप में दोबारा बनाती है।
4. डेवलपर्स को हैंडऑफ़ Spline एम्बेड साइट पर लगते हैं, और रनटाइम लॉजिक से कंट्रोल होते हैं।

वह समझाने के लिए 3D, जिसकी ग्राहक उम्मीद नहीं करते

Circadian कॉफ़ी का कोई आम प्रोडक्ट पेज नहीं है।

'लाइट बनाम डार्क रोस्ट' या 'टेस्टिंग नोट्स' जैसे कॉफ़ी के आम विवरणों के बजाय, Circadian कैफ़ीन की मात्रा पर आधारित वेरिएंट पेश करता है, और इसमें एक कैलकुलेटर है जो ग्राहकों को दिन भर में अपनी मात्रा तय करने में मदद करता है।

Onyx इस जानकारी को फैलाने और ज़्यादा दिलचस्प बनाने के लिए 3D विज़ुअल को समझाने वाले सिस्टम की तरह इस्तेमाल करता है:

• बैकग्राउंड कॉन्सेप्ट को विज़ुअली पेश करता है
• सीन इंटरैक्शन पर रिस्पॉन्ड करता है
• अलग-अलग वेरिएंट पर क्लिक करने से Spline सीन में अलग-अलग हरकतें ट्रिगर होती हैं

"हमारे लिए अलग-अलग वेरिएंट का मतलब सीधे यह है कि प्रोडक्ट में कितना कैफ़ीन है। बैकग्राउंड का एसेट इस पर निर्भर करते हुए हिलेगा कि वे कौन-सा अनुभव देख रहे हैं।"

और सबसे अहम बात, Onyx टीम ने अपने इंटरैक्टिव एसेट्स को इस तरह रखा कि ज़रूरत पड़ने पर वे रास्ते से हट जाएँ, या ज़रूरत पड़ने पर सामने आकर इंटरैक्टिव बन जाएँ। उदाहरण के लिए, जब कोई ज़रूरी टेक्स्ट पेज पर से गुज़रता है, तो एम्बेड किए गए 3D एसेट्स की लाइटिंग धीमी कर दी जाती है।

सबसे बड़ी जीत: डिप्लॉयमेंट तक का समय

Onyx के लिए सबसे बड़ा फ़ायदा सिर्फ़ विज़ुअल क्वालिटी नहीं है – उनकी टीम के लिए यह व्यवहार्यता और रफ़्तार की बात है।

साइट के कोड और क्रिएटिव पर लगभग 10 लोग काम करते हैं। ख़ास 3D इंजीनियर और डिज़ाइनर रखना किसी कॉफ़ी कंपनी के लिए एक बड़ी प्रतिबद्धता और ख़र्च है।

Spline समय-सीमाएँ घटाकर और 3D को हर किसी की पहुँच में लाकर जोखिम कम करता है।

सबसे बड़ा फ़ायदा डिप्लॉयमेंट तक का समय है… Spline 3D में इनमें से कुछ चीज़ें शुरू करने का जोखिम कम कर देता है।

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

Onyx Coffee Lab ने दिखावे के लिए 3D नहीं अपनाया। उन्होंने इसे ई-कॉमर्स की एक असली समस्या सुलझाने के लिए इस्तेमाल किया:

रफ़्तार, स्पष्टता या कन्वर्ज़न से समझौता किए बिना स्वाद और ख़ुशबू वाले किसी प्रोडक्ट को ऑनलाइन असली कैसे महसूस कराएँ?

Spline के साथ उन्हें एक ऐसा वर्कफ़्लो मिला जो एक छोटी टीम के लिए सही बैठता है, मोबाइल पर स्मूद चलता है, और इंटरैक्टिव स्टोरीटेलिंग को तेज़ी से शिप करने देता है, जिससे वे भीड़ भरे बाज़ार में अपने ब्रांड को अलग दिखा पाते हैं।

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