L'organizzazione di marketing di dispositivi e servizi (DSM) di Google supervisiona le strategie di lancio sul mercato 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 sia tramite fornitori di terze parti a livello globale. 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 di AI avanzata. Per aiutare meglio i consumatori a comprendere i prodotti e le funzionalità, il team DSM ha creato uno spazio virtuale 3D con tecnologia web avanzata per risolvere molte di queste sfide. In questo caso studio puoi scoprire come il team ha creato un'esperienza più coinvolgente per i clienti, lanciando queste nuove esperienze quattro volte più velocemente e a metà del costo degli asset digitali tradizionali.
La sfida: formazione sui prodotti
È costoso e difficile informare 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. Le strategie di istruzione sui prodotti tradizionali si basano su contenuti digitali che vengono prodotti utilizzando prodotti fisici e poi ospitati su piattaforme di apprendimento digitale. Queste piattaforme di apprendimento forniscono specifiche tecniche, immagini e video dei prodotti, ma non l'accesso a prodotti fisici o connessi.
I contenuti didattici come i video sono costosi da produrre, complessi da localizzare per i mercati globali e quasi impossibili da riutilizzare tra i prodotti. La creazione delle risorse iniziali richiede budget per il casting, il guardaroba, la ricerca di location, le tariffe per le location, le tariffe per gli studi, le troupe cinematografiche e il lavoro di post-produzione. I costi di produzione e i risultati devono tenere conto anche della localizzazione. La modifica di asset, località, prodotti, testi e talenti è particolarmente difficile da gestire su larga scala per il marketing tradizionale. Se poi consideri che la maggior parte dei prodotti supportati prevede rilasci di funzionalità ogni due mesi, questi asset sono già obsoleti al momento del completamento.
Esplorazione di modi migliori per condividere le informazioni sui prodotti
Nel tentativo di trovare un modo migliore per condividere le informazioni sui prodotti, il team DSM ha sperimentato esperienze VR/AR in un'app. I risultati sono stati promettenti, con un aumento del coinvolgimento e delle dimensioni dei carrelli nei punti di vendita. Tuttavia, i download di app rappresentavano una barriera di accesso significativa sia per gli agenti di vendita sia per i clienti e, limitando l'esperienza a un'app, non era possibile incorporarla in altre proprietà proprietarie o di terze parti come store.google.com.
Soluzioni leggere con <model-viewer>
Dopo aver visto il successo dei modelli di prodotti 3D per la formazione sui prodotti, il team ha deciso di applicare questo approccio al web. Un modo per farlo è utilizzare
<model-viewer>
per creare esperienze 3D
con singoli prodotti.
<model-viewer>
è un componente web che consente di aggiungere in modo dichiarativo un modello 3D a una pagina web, ospitando al contempo il modello sul tuo sito.
Puoi vedere come funziona nella pagina di Pixel Fold sul Google Store, dove <model-viewer>
consente agli utenti di vedere Pixel Fold da qualsiasi angolazione e in varie posizioni piegate. È stato facile integrare il
modello 3D nel resto dell'esperienza utente HTML, con pulsanti per raccontare una storia tramite
angoli di ripresa e varianti di colore interattive. Con <model-viewer>
, puoi offrire ai tuoi utenti qualsiasi tipo di esperienza che puoi immaginare.
Creazione dei modelli 3D
Il primo passaggio per sviluppare un'esperienza virtuale 3D è creare i modelli di prodotto 3D. Il team DSM ha creato i modelli 3D in CAD. Collaborando strettamente con i designer che producono il CAD del prodotto, il team DSM è stato in grado di esportare rendering low poly che potevano essere ottimizzati per il web. Alcune delle best practice utilizzate per raggiungere questo obiettivo si trovano nelle seguenti aree.
- Geometria:
- Cerca di rendere la geometria (la forma e la scala) accurata da ogni angolazione.
- Evita di utilizzare le mappe normali per smussare i bordi.
- Creare decalcomanie come geometrie separate.
- Colori e materiali:
- Obiettivo: rappresentazione visiva coerente delle proprietà fisiche.
- Prendi in considerazione le dinamiche di illuminazione in tempo reale.
- Utilizza set di texture e materiali separati per ogni tipo di mesh (opaco, trasparente, decalcomania).
- Esegui l'iterazione dei progetti con i progettisti CAD originali se sono necessarie ulteriori aggiustamenti.
- Dimensioni file:
- Esporta come modello low poly in formato GLB in modo che possa essere utilizzato da
<model-viewer>
. - Comprimi manualmente le mesh geometriche da un designer 3D, con un fornitore o tramite un software di compressione come DRACO (OS).
- Esporta come modello low poly in formato GLB in modo che possa essere utilizzato da
Poiché questi modelli 3D vengono utilizzati spesso su telefoni cellulari, sono stati ottimizzati impostando una dimensione massima del file con texture di 2 MB per supportare i dispositivi di generazioni precedenti e le connessioni a internet deboli.
<model-viewer>
Il team DSM utilizza il componente web open source <model-viewer>
di Google per incorporare
i modelli 3D appena creati nelle pagine web. Affinché i modelli creati
nel passaggio 1 siano compatibili con <model-viewer>
, gli asset devono essere in un
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 questo passaggio, la sfida più grande che il team DSM ha riscontrato è stata che la tavolozza dei colori dell'hardware Google non veniva visualizzata con precisione. Alla fine il team ha scoperto che la mappatura tonale ACES (uno standard dell'industria cinematografica) era responsabile della perdita di colori. Per risolvere il problema, è stato sviluppato un nuovo mappatore di tonalità neutro PBR di Khronos specificamente per risolvere queste carenze e presentare i colori con precisione sullo schermo, evitando al contempo gli evidenti punti salienti e i cambiamenti di tonalità associati alla mappatura tonale lineare.
<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
modelviewer.dev. Per testare i tuoi modelli 3D e scaricare
un intero sito web di partenza, prova il nostro editor.
Soluzioni pesanti con three.js
<model-viewer>
è un ottimo modo per visualizzare e interagire con un modello 3D. Tuttavia, a volte il team 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>
poteva consentire ai potenziali clienti di provare un prodotto in 3D sul web, ma non poteva mostrare la sua utilità se combinato con altri prodotti hardware Google e funzionalità di IA come l'assistente.
Per questa attività, il team ha utilizzato la libreria alla base di <model-viewer>
,
three.js. Three.js è un motore grafico JavaScript open source e il team è stato in grado di creare un framework di asset riutilizzabili per un ambiente domestico virtuale contenente videocamere, luci e speaker Nest per interni. In questo modo, il team ha avuto una base per fornire feedback in tempo reale su come i dispositivi interagivano tra loro.
Dialogflow
L'ultimo passaggio per creare l'esperienza interconnessa consiste nell'aggiungere l'Assistente Google. In questo modo, gli utenti potevano provare comandi e routine autentici con l'esperienza virtuale interconnessa. Tuttavia, l'inserimento dell'Assistente Google dall'account esistente dell'utente potrebbe comportare una serie di problemi relativi alla privacy. Per creare una soluzione incentrata sulla privacy, il DSM ha collaborato con il servizio Dialogflow di Google Cloud per imitare l'Assistente Google in questo spazio. Il seguente diagramma di alto livello mostra in che modo l'app web ha utilizzato l'API di Dialogflow (adattata da Elementi di base di Dialogflow). Per ogni turno di conversazione, l'app web utilizzava la classificazione degli intent di Dialogflow e l' API restituiva espressioni predeterminate dell'utente finale corrispondenti all'intent.
Per saperne di più su Dialogflow, consulta la documentazione di Google Cloud.
Risultato finale: un iframe embeddabile
Il risultato finale è una raccolta di asset che può essere incorporata in una pagina web con
<model-viewer>
o utilizzata in un ambiente virtuale completo per aiutare i clienti a scoprire
di più sui singoli prodotti e sulla loro interconnessione. 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, il DSM è stato in grado di riutilizzare ed espandere il framework per i lanci del portafoglio Pixel degli ultimi due anni con crescente successo. Grazie all'implementazione dell'iterazione di questi asset e di queste esperienze 3D, il team è finora riuscito a quadruplicare il numero di esperienze di istruzione interattiva sui prodotti e a triplicare il numero di prodotti che beneficiano di questa tecnologia web.
Il risultato finale è una formazione sul prodotto autentica e basata sul brand per una crescente combinazione di casi d'uso su larga scala, più sostenibile, coerente e interattiva rispetto alle strategie precedenti. In futuro, il team DSM disporrà di un portafoglio solido di componenti di un'esperienza immersiva che potrà adattare rapidamente ai target aziendali dinamici. Questi miglioramenti consentono al team DSM di lanciare nuovi contenuti didattici sui prodotti quattro volte più velocemente e a meno della metà del costo rispetto ai processi precedenti e più tradizionali.