L'organizzazione SMB (Device and Services Marketing) di Google supervisiona le strategie di go-to-market per un'ampia gamma di prodotti: smartphone, orologi, auricolari, tablet, dispositivi per la smart home e abbonamenti pertinenti, tutti disponibili sia tramite il Google Store che tramite fornitori di terze parti globali. Le persone vengono a conoscenza di questi prodotti online e nei negozi fisici.
Una sfida costante per questo team è informare consumatori e rivenditori sui casi d'uso e sui vantaggi dell'ecosistema hardware di Google e delle esperienze AI avanzate. Per aiutare i consumatori a comprendere meglio i prodotti e la funzionalità, il team di motori ha creato uno spazio virtuale 3D con tecnologia web avanzata per affrontare molte di queste sfide. In questo case study puoi scoprire in che modo il team ha creato un'esperienza più immersiva per i clienti, lanciando queste nuove esperienze quattro volte più velocemente e alla metà del costo degli asset digitali tradizionali.
La sfida: formazione sui prodotti
Educare gli addetti alle vendite e i clienti che non hanno mai utilizzato i prodotti hardware di Google sui vantaggi di funzionalità come l'interoperabilità e l'IA è costoso e difficile. Le strategie tradizionali di formazione dei prodotti si basano su contenuti digitali che vengono prodotti con prodotti fisici e poi ospitati su piattaforme di apprendimento digitali. Queste learning platform forniscono specifiche tecniche, immagini e video dei prodotti, ma non consentono l'accesso a prodotti fisici o collegati.
I contenuti didattici come i video sono costosi da produrre, complessi da localizzare per i mercati globali e quasi impossibili da riutilizzare tra prodotti. La creazione degli asset iniziali richiede budget per il cast, il guardaroba, l'individuazione della location, i costi per la location, i canoni, le troupe cinematografiche e i lavori di post-produzione. Anche i costi di produzione e i risultati finali devono tenere conto della localizzazione; la modifica di asset, località, prodotti, testo e talenti è particolarmente impegnativa per la gestione su larga scala del marketing tradizionale. Se si considera che la maggior parte dei prodotti supportati presenta rilasci di funzionalità ogni due mesi, questi asset sono già obsoleti quando vengono completati.
Esplorare modi migliori per condividere le informazioni sui prodotti
Cercando di trovare un modo migliore per condividere le informazioni sui prodotti, il team di... Tuttavia, i download dell'app costituivano un ostacolo significativo all'accesso sia per i responsabili delle vendite che per i clienti e limitare l'esperienza a un'app significava che non era incorporabile in altre proprietà proprietarie o di terze parti come store.google.com.
Soluzioni leggere con <model-viewer>
Avendo visto il successo dei modelli 3D per la formazione dei prodotti, il team ha deciso di portare questo approccio sul web. Un modo per farlo è utilizzare <model-viewer> per creare esperienze 3D con i singoli prodotti.
<model-viewer> è un componente web che ti consente di aggiungere in modo dichiarativo un modello 3D a una pagina web ospitando il modello sul tuo sito.
Puoi vederla in azione nella pagina di Pixel Fold sul Google Store, dove <model-viewer> consente agli utenti di vedere Pixel Fold da qualsiasi angolazione e varie posizioni di piegatura. È stato facile integrare il modello 3D nel resto dell'esperienza utente HTML, con pulsanti per raccontare una storia attraverso angolazioni della videocamera e varianti di colore interattive. Con <model-viewer> puoi
offrire agli utenti qualsiasi tipo di esperienza che tu possa immaginare.
Creazione dei modelli 3D
Il primo passo per sviluppare un'esperienza virtuale 3D è creare i modelli di prodotto 3D. Il team di... Alcune delle best practice utilizzate per raggiungere questo obiettivo sono state le seguenti.
- Geometria:
- Cerca di rendere la geometria (la forma e la scala) precisa da ogni angolo.
- Evita di utilizzare mappe normali per avere i bordi smussati.
- Crea le decalcomanie come geometria separata.
- Colori e materiali:
- Obiettivo: rappresentazione visiva coerente delle proprietà fisiche.
- Considera le dinamiche di illuminazione in tempo reale.
- Utilizza set di texture e materiali distinti per ogni tipo di mesh (Opaco, Trasparente, Decal).
- Esegui l'iterazione sui progetti con i progettisti CAD originali se sono necessari ulteriori aggiustamenti.
- Dimensioni del file:
- Esporta come modello low poly in formato GLB in modo che il modello possa essere utilizzato
da
<model-viewer>. - Comprimi le maglie geometriche manualmente da un designer 3D, con un fornitore o tramite software di compressione come DRACO (OS).
- Esporta come modello low poly in formato GLB in modo che il modello possa essere utilizzato
da
Poiché questi modelli 3D venivano utilizzati spesso sui cellulari, sono stati ottimizzati impostando una dimensione massima dei file con texture di 2 MB, in modo da supportare dispositivi di generazione meno recenti e connessioni a internet debole.
<model-viewer>
Il team di DSM utilizza il componente web open source <model-viewer> di Google per incorporare
i modelli 3D appena creati nelle sue pagine web. Affinché i modelli creati nel passaggio 1 siano compatibili con <model-viewer>, gli asset devono essere in formato gITF o GLB (estensione .glb). Entrambi i formati sono compatti,
comprimibili e si caricano rapidamente nella GPU. Il componente <model-viewer> è supportato da tutti
i principali browser evergreen.
Durante questa fase, il problema più grande riscontrato dal team di database è stato un rendering non accurato della tavolozza dei colori dell'hardware di Google. Il team ha scoperto che la mappatura tonale di ACES (uno standard del settore cinematografico) era responsabile della perdita dei colori. Per risolvere questo problema, ha sviluppato un nuovo Khronos PBR Neutral Tone Mapper per affrontare queste carenze e presentare i colori con precisione sullo schermo, evitando al contempo le alte luci sbiadite e le variazioni di tonalità associate alla mappatura lineare dei toni.
<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>
Per scoprire di più su <model-viewer>, visita il sito modelviewer.dev. Per testare i tuoi modelli 3D e scaricare un intero sito web iniziale, prova il nostro editor.
Soluzioni di massa con tre.js
<model-viewer> è un ottimo strumento ad alte prestazioni per visualizzare e interagire con un
modello 3D. Tuttavia, a volte il team di DSM aveva bisogno di un'esperienza web più immersiva e interconnessa di quella possibile con <model-viewer>. Un esempio è stato il lancio di Nest Mini + C. <model-viewer> potrebbe consentire ai potenziali clienti di sperimentare un prodotto in 3D sul web, ma non potrebbe mostrarne l'utilità se combinato con altri prodotti hardware e funzionalità di IA Google come l'assistente.
Per questa attività, il team si è rivolto alla raccolta alla base di <model-viewer>,
3.js. Three.js è un motore grafico JavaScript open source e il team è riuscito a creare un framework di asset riutilizzabili per un ambiente domestico virtuale contenente videocamere, luci e altoparlanti Nest per interni. Ciò ha fornito al team le basi per fornire feedback in tempo reale sulle interazioni tra i dispositivi.
Dialogflow
L'ultimo aspetto della creazione di un'esperienza interconnessa è l'aggiunta dell'Assistente Google. Ciò significava che gli utenti potevano provare routine e comandi autentici con l'esperienza virtuale interconnessa. Tuttavia, l'inserimento dell'Assistente Google dall'account esistente dell'utente potrebbe comportare una serie di problemi di privacy. Per creare una soluzione con priorità alla privacy, DCM ha collaborato con il servizio Google Cloud Dialogflow per riprodurre l'Assistente Google in questo ambito. Il seguente diagramma di alto livello mostra in che modo l'app web ha utilizzato l'API di Dialogflow (adattata da Dialogflow Nozioni di base). Per ogni svolta di conversazione, l'app web ha utilizzato la classificazione degli intent di Dialogflow e l'API ha restituito espressioni dell'utente finale predeterminate in base all'intent.
Per saperne di più su Dialogflow, consulta la documentazione di Google Cloud.
Risultato finale: un iframe incorporabile
Il risultato finale è una raccolta di asset che possono essere incorporati in una pagina web con <model-viewer> o utilizzati in un ambiente virtuale completo per aiutare i clienti a saperne di più sui singoli prodotti e sull'interconnessione dei prodotti. L'esperienza è autentica, scalabile ed economica. Questa prima esperienza virtuale è stata lanciata a maggio 2021 e, anche se non è più disponibile sul sito web del Google Store, puoi comunque provarla.
I risultati
Dal lancio di Nest Mini +C, negli ultimi due anni la gamma di prodotti Pixel è riuscita a riutilizzare ed espandere il quadro con un successo crescente. Attraverso l'operatività dell'iterazione di questi asset ed esperienze 3D, il team è stato finora in grado di quadruplicare il numero di esperienze didattiche interattive sui prodotti e triplicare il numero di prodotti che beneficiano di questa tecnologia web.
Il risultato finale è una formazione autentica e personalizzata sui prodotti per una crescente permutazione di casi d'uso su larga scala, che è più sostenibile, coesa e interattiva rispetto alle strategie precedenti. Guardando al futuro, il team di DSM dispone ora di un solido portafoglio di componenti per un'esperienza immersiva che può adattarsi rapidamente agli obiettivi dinamici aziendali. Questi miglioramenti consentono al team di DSM di lanciare nuovi contenuti formativi sui prodotti quattro volte più velocemente e a meno della metà del costo rispetto ai processi precedenti e più tradizionali.