Google के डिवाइस और सेवाएं मार्केटिंग (डीएसएम) संगठन, कई तरह के प्रॉडक्ट के लिए मार्केट में उपलब्ध कराने की रणनीतियों को मैनेज करता है. जैसे, स्मार्ट फ़ोन, स्मार्टवॉच, ईयरबड, टैबलेट, स्मार्ट होम डिवाइस, और काम की सदस्यताएं. ये सभी प्रॉडक्ट, Google Store और ग्लोबल थर्ड पार्टी वेंडर, दोनों के ज़रिए उपलब्ध हैं. लोग इन प्रॉडक्ट के बारे में ऑनलाइन और रीटेल स्टोर में जाने पर जान पाते हैं.
इस टीम के लिए एक लगातार चुनौती यह है कि वह अपने उपभोक्ताओं और खुदरा दुकानदारों को, Google के हार्डवेयर नेटवर्क और बेहतर एआई अनुभवों के इस्तेमाल के उदाहरणों और फ़ायदों के बारे में बताए. उपभोक्ताओं को प्रॉडक्ट और उनके काम करने के तरीके को बेहतर तरीके से समझने में मदद करने के लिए, DSM टीम ने बेहतर वेब टेक्नोलॉजी की मदद से 3D वर्चुअल स्पेस बनाया है. इससे इनमें से कई समस्याओं को हल किया जा सकता है. इस केस स्टडी में, आपको यह जानने में मदद मिलेगी कि टीम ने ग्राहकों के लिए कैसे ज़्यादा बेहतर अनुभव बनाया. इसके लिए, उन्होंने इन नए अनुभवों को चार गुना तेज़ी से और पारंपरिक डिजिटल एसेट की लागत के आधे हिस्से में लॉन्च किया.
चुनौती: प्रॉडक्ट की जानकारी
Google के हार्डवेयर प्रॉडक्ट के बारे में जानकारी न रखने वाले सेल्स असोसिएट और ग्राहकों को, इंटरऑपरेबिलिटी और एआई जैसी सुविधाओं के फ़ायदों के बारे में बताना मुश्किल और महंगा होता है. प्रॉडक्ट के बारे में जानकारी देने की पारंपरिक रणनीतियां, डिजिटल कॉन्टेंट पर निर्भर करती हैं. इस कॉन्टेंट को फ़िज़िकल प्रॉडक्ट का इस्तेमाल करके बनाया जाता है और फिर डिजिटल लर्निंग प्लैटफ़ॉर्म पर होस्ट किया जाता है. ये लर्निंग प्लैटफ़ॉर्म, प्रॉडक्ट की तकनीकी जानकारी, इमेज, और वीडियो उपलब्ध कराते हैं. हालांकि, इनसे कनेक्ट किए गए या फ़िज़िकल प्रॉडक्ट का ऐक्सेस नहीं मिलता.
वीडियो जैसे लर्निंग कॉन्टेंट को तैयार करना महंगा होता है. साथ ही, दुनिया भर के बाज़ारों के हिसाब से उसे स्थानीय भाषा में उपलब्ध कराना मुश्किल होता है. इसके अलावा, एक प्रॉडक्ट के लिए तैयार किए गए कॉन्टेंट का इस्तेमाल दूसरे प्रॉडक्ट के लिए करना भी मुश्किल होता है. शुरुआती ऐसेट बनाने के लिए, कास्टिंग, वॉर्डरोब, लोकेशन के लिए जगह ढूंढने, लोकेशन शुल्क, स्टूडियो शुल्क, फ़िल्म क्रू, और पोस्ट प्रोडक्शन के काम के लिए बजट की ज़रूरत होती है. प्रोडक्शन की लागत और डिलीवर किए जाने वाले कॉन्टेंट में भी स्थानीय भाषा का ध्यान रखना ज़रूरी है. साथ ही, एसेट, जगहों, प्रॉडक्ट, कॉपी, और टैलेंट में बदलाव करना, बड़े पैमाने पर मैनेज करने के लिए, पारंपरिक मार्केटिंग के लिए खास तौर पर चुनौती भरा होता है. साथ ही, अगर इस बात को ध्यान में रखा जाए कि जिन प्रॉडक्ट के लिए यह सुविधा काम करती है उनमें हर दो महीने में नई सुविधाएं लॉन्च होती हैं, तो ऐसेट तैयार होने तक वे पहले ही पुरानी हो जाती हैं.
प्रॉडक्ट की जानकारी शेयर करने के बेहतर तरीके ढूंढना
प्रॉडक्ट की जानकारी शेयर करने का बेहतर तरीका ढूंढने के लिए, DSM टीम ने ऐप्लिकेशन में VR/AR की सुविधाओं का इस्तेमाल किया. इससे, बिक्री की जगहों पर खरीदारों की दिलचस्पी बढ़ी और उनके बास्केट में प्रॉडक्ट की संख्या भी बढ़ी. हालांकि, ऐप्लिकेशन डाउनलोड करना, सेल्स असोसिएट और ग्राहकों, दोनों के लिए एक बड़ी समस्या थी. साथ ही, ऐप्लिकेशन पर इस सुविधा को सीमित करने का मतलब था कि इसे store.google.com जैसी पहली या तीसरे पक्ष की अन्य प्रॉपर्टी में एम्बेड नहीं किया जा सकता.
<model-viewer> की मदद से, कम डेटा इस्तेमाल करने वाले समाधान
प्रॉडक्ट के बारे में जानकारी देने के लिए, 3D प्रॉडक्ट मॉडल की सफलता को देखते हुए, टीम ने इस तरीके को वेब पर उपलब्ध कराने का फ़ैसला लिया. ऐसा करने का एक तरीका यह है कि अलग-अलग प्रॉडक्ट के साथ 3D अनुभव बनाने के लिए, <model-viewer> का इस्तेमाल किया जाए.
<model-viewer> एक वेब कॉम्पोनेंट है. इसकी मदद से, अपनी साइट पर 3D मॉडल को होस्ट करते हुए, वेब पेज में 3D मॉडल को एलान के तौर पर जोड़ा जा सकता है.
Google Store पर Pixel Fold पेज पर, इस सुविधा को इस्तेमाल करते हुए देखा जा सकता है. यहां <model-viewer> की मदद से, उपयोगकर्ता Pixel Fold को किसी भी ऐंगल से और अलग-अलग फ़ोल्ड किए गए पोज़िशन में देख सकते हैं. 3D मॉडल को बाकी एचटीएमएल यूज़र एक्सपीरियंस (यूएक्स) में इंटिग्रेट करना आसान था. इसमें कैमरे के ऐंगल और इंटरैक्टिव कलर वैरिएंट की मदद से, बटन के ज़रिए कहानी बताने की सुविधा थी. <model-viewer> की मदद से, अपने उपयोगकर्ताओं को बेहतरीन अनुभव दिया जा सकता है.
3D मॉडल बनाना
3D वर्चुअल अनुभव बनाने के लिए, सबसे पहले 3D प्रॉडक्ट मॉडल बनाएं. डीएसएम टीम ने सीएडी में अपने 3D मॉडल बनाए. प्रॉडक्ट सीएडी बनाने वाले डिज़ाइनर के साथ मिलकर काम करके, डीएसएम टीम ने कम पॉली रेंडर एक्सपोर्ट किए, जिन्हें वेब के लिए ऑप्टिमाइज़ किया जा सकता था. इसे हासिल करने के लिए, उन्होंने इन क्षेत्रों में सबसे सही तरीकों का इस्तेमाल किया.
- ज्यामिति:
- हर ऐंगल से ज्यामिति (आकार और स्केल) को सटीक बनाने पर फ़ोकस करें.
- किनारों को बेवल करने के लिए, सामान्य मैप का इस्तेमाल न करें.
- अलग-अलग ज्यामिति के तौर पर डेकल बनाएं.
- रंग और सामग्री:
- मकसद: फ़िज़िकल प्रॉपर्टी को एक जैसा विज़ुअल तरीके से दिखाना.
- रीयल-टाइम लाइटिंग डाइनैमिक का इस्तेमाल करें.
- हर तरह के मेश (ओपेक, ट्रांसपेरेंट, डीकल) के लिए अलग-अलग टेक्स्चर सेट और मटीरियल का इस्तेमाल करें.
- अगर और बदलाव करने की ज़रूरत है, तो ओरिजनल सीएडी डिज़ाइनर के साथ डिज़ाइन पर काम करें.
- फ़ाइल का साइज़:
- GLB फ़ॉर्मैट में लो पॉली मॉडल के तौर पर एक्सपोर्ट करें, ताकि
<model-viewer>इसका इस्तेमाल कर सके. - किसी वेंडर की मदद से, 3D डिज़ाइनर के ज़रिए मैन्युअल तरीके से ज्यामितीय मेश को कंप्रेस करें या DRACO (ओएस) जैसे कंप्रेस करने वाले सॉफ़्टवेयर का इस्तेमाल करें.
- GLB फ़ॉर्मैट में लो पॉली मॉडल के तौर पर एक्सपोर्ट करें, ताकि
इन 3D मॉडल का इस्तेमाल अक्सर मोबाइल फ़ोन पर किया जाता है. इसलिए, इन्हें ऑप्टिमाइज़ किया गया है. इसके लिए, टेक्सचर के साथ फ़ाइल का ज़्यादा से ज़्यादा साइज़ 2 एमबी सेट किया गया है. इससे पुराने डिवाइसों और खराब इंटरनेट कनेक्शन पर भी इनका इस्तेमाल किया जा सकता है.
<model-viewer>
डीएसएम टीम, अपने वेबपेजों में नए बनाए गए 3D मॉडल को एम्बेड करने के लिए, Google के <model-viewer> ओपन सोर्स वेब कॉम्पोनेंट का इस्तेमाल करती है. पहले चरण में बनाए गए मॉडल, <model-viewer> के साथ काम कर सकें, इसके लिए ज़रूरी है कि एसेट, glTF या GLB फ़ॉर्मैट (.glb एक्सटेंशन) में हों. दोनों फ़ॉर्मैट छोटे और कंप्रेस किए जा सकने वाले होते हैं. साथ ही, ये जीपीयू में तेज़ी से लोड होते हैं. <model-viewer> कॉम्पोनेंट, सभी मुख्य ब्राउज़र पर काम करता है.
इस चरण के दौरान, DSM टीम को सबसे बड़ी चुनौती यह थी कि Google के हार्डवेयर का रंग पैलेट सही तरीके से रेंडर नहीं हो रहा था. आखिर में, टीम को पता चला कि रंगों के गायब होने की वजह, ACES टोन मैपिंग (फ़िल्म इंडस्ट्री का स्टैंडर्ड) थी. इस समस्या को हल करने के लिए, उन्होंने नया Khronos PBR न्यूट्रल टोन मैपर बनाया. इस टोन मैपर का मकसद, इन कमियों को ठीक करना और स्क्रीन पर रंगों को सटीक तरीके से दिखाना है. साथ ही, यह लीनियर टोन मैपिंग से जुड़े हाइलाइट और रंग में होने वाले बदलावों से भी बचाता है.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer> के बारे में ज़्यादा जानने के लिए, modelviewer.dev पर जाएं. अपने 3D मॉडल की जांच करने और पूरी स्टार्टर वेबसाइट डाउनलोड करने के लिए, हमारा एडिटर आज़माएं.
three.js की मदद से बेहतरीन सलूशन
<model-viewer>, किसी 3D मॉडल को दिखाने और उससे इंटरैक्ट करने का बेहतरीन और बेहतर परफ़ॉर्म करने वाला तरीका है. हालांकि, कभी-कभी DSM टीम को <model-viewer> के मुकाबले, ज़्यादा दिलचस्प और एक-दूसरे से जुड़े वेब अनुभव की ज़रूरत पड़ती थी. उदाहरण के लिए, Nest Mini + C लॉन्च करना. <model-viewer> की मदद से, संभावित ग्राहकों को वेब पर किसी प्रॉडक्ट को 3D में दिखाया जा सकता है. हालांकि, Google के अन्य हार्डवेयर प्रॉडक्ट और Assistant जैसी एआई सुविधाओं के साथ इस्तेमाल करने पर, यह अपनी उपयोगिता नहीं दिखा पाता.
इस टास्क के लिए, टीम ने <model-viewer> के साथ काम करने वाली लाइब्रेरी,
three.js का इस्तेमाल किया. Three.js एक ओपन सोर्स JavaScript गेम इंजन है. इसकी मदद से, टीम ने वर्चुअल होम एनवायरमेंट के लिए, फिर से इस्तेमाल की जा सकने वाली ऐसेट का फ़्रेमवर्क बनाया. इसमें Nest के इनडोर कैमरे, लाइटें, और स्पीकर शामिल हैं. इससे टीम को रीयल टाइम में यह फ़ीडबैक देने में मदद मिली कि डिवाइसों ने एक-दूसरे के साथ कैसे इंटरैक्ट किया.
Dialogflow
एक-दूसरे से जुड़े अनुभव बनाने के लिए, Google Assistant को जोड़ना ज़रूरी है. इसका मतलब है कि उपयोगकर्ता, इंटरकनेक्ट किए गए वर्चुअल अनुभव की मदद से, असली निर्देश और रूटीन आज़मा सकते थे. हालांकि, उपयोगकर्ता के मौजूदा खाते से Google Assistant को जोड़ने पर, निजता से जुड़ी कई समस्याएं हो सकती हैं. निजता को ध्यान में रखते हुए एक बेहतर सलूशन बनाने के लिए, डीएसएम ने Google Cloud Dialogflow सेवा के साथ मिलकर काम किया. इससे, इस स्पेस में Google Assistant की नकल की जा सकी. यहां दिए गए हाई लेवल डायग्राम में दिखाया गया है कि वेब ऐप्लिकेशन ने Dialogflow के एपीआई का इस्तेमाल कैसे किया. यह डायग्राम, Dialogflow के बुनियादी सिद्धांतों से लिया गया है. हर बातचीत के चरण के लिए, वेब ऐप्लिकेशन ने Dialogflow के इंटेंट क्लासिफ़िकेशन का इस्तेमाल किया. साथ ही, एपीआई ने पहले से तय किए गए ऐसे असली उपयोगकर्ता एक्सप्रेशन दिखाए जो इंटेंट से मेल खाते थे.
Dialogflow के बारे में ज़्यादा जानने के लिए, Google Cloud के दस्तावेज़ पर जाएं.
आखिरी नतीजा: एम्बेड किया जा सकने वाला iFrame
इसका नतीजा ऐसेट की एक लाइब्रेरी होती है, जिसे <model-viewer> की मदद से किसी वेब पेज में एम्बेड किया जा सकता है या पूरे वर्चुअल एनवायरमेंट में इस्तेमाल किया जा सकता है. इससे खरीदारों को अलग-अलग प्रॉडक्ट के बारे में ज़्यादा जानने में मदद मिलती है. साथ ही, यह भी पता चलता है कि प्रॉडक्ट आपस में कैसे जुड़े हैं. यह अनुभव, भरोसेमंद, स्केलेबल, और किफ़ायती है. यह पहला वर्चुअल अनुभव, मई 2021 में लॉन्च किया गया था. हालांकि, यह अब Google Store की वेबसाइट पर उपलब्ध नहीं है, लेकिन आपके पास अब भी इसे आज़माने का विकल्प है.
नतीजे
Nest Mini +C के लॉन्च के बाद से, DSM ने पिछले दो सालों में Pixel के पोर्टफ़ोलियो के लॉन्च के लिए, फ़्रेमवर्क का फिर से इस्तेमाल किया है और उसे बड़ा किया है. इससे DSM की सफलता में भी बढ़ोतरी हुई है. इन 3D ऐसेट और अनुभवों को ऑपरेशनल करने की वजह से, टीम अब तक प्रॉडक्ट के बारे में जानकारी देने वाले इंटरैक्टिव अनुभवों की संख्या को चार गुना बढ़ाने में कामयाब हुई है. साथ ही, इस वेब टेक्नोलॉजी का फ़ायदा पाने वाले प्रॉडक्ट की संख्या को तीन गुना बढ़ाने में भी कामयाब हुई है.
इसका नतीजा, बड़े पैमाने पर इस्तेमाल के उदाहरणों के बढ़ते हुए क्रम के लिए, ब्रैंडेड और भरोसेमंद प्रॉडक्ट की जानकारी है. यह जानकारी, पिछली रणनीतियों की तुलना में ज़्यादा बेहतर, एक साथ काम करने वाली, और इंटरैक्टिव है. आने वाले समय में, डीएसएम टीम के पास अब बेहतर अनुभव देने वाले कॉम्पोनेंट का एक बेहतर पोर्टफ़ोलियो होगा. इससे वे कारोबार के डाइनैमिक टारगेट के हिसाब से, तेज़ी से बदलाव कर पाएंगे. इन सुधारों की मदद से, डीएसएम टीम, प्रॉडक्ट के बारे में जानकारी देने वाला नया कॉन्टेंट चार गुना तेज़ी से लॉन्च कर पाती है. साथ ही, इसकी लागत भी पहले की तुलना में आधी से भी कम होती है.