L'équipe chargée du marketing des appareils et services (DSM) de Google supervise les stratégies de lancement sur le marché d'une large gamme de produits: smartphones, montres, écouteurs, tablettes, appareils pour la maison connectée et abonnements pertinents, tous disponibles à la fois sur le Google Store et auprès de fournisseurs tiers internationaux. Les utilisateurs découvrent ces produits en ligne et dans les magasins physiques.
L'équipe doit constamment sensibiliser les consommateurs et les marchands aux cas d'utilisation et aux avantages de l'écosystème matériel Google et des expériences d'IA avancées. Pour aider les consommateurs à mieux comprendre les produits et les fonctionnalités, l'équipe DSM a créé un espace virtuel en 3D avec une technologie Web avancée pour relever de nombreux défis. Dans cette étude de cas, vous découvrirez comment l'équipe a créé une expérience plus immersive pour les clients, en lançant ces nouvelles expériences quatre fois plus rapidement et à moitié prix par rapport aux assets numériques traditionnels.
Le défi: formation sur les produits
Il est coûteux et difficile de sensibiliser les vendeurs et les clients qui ne connaissent pas les produits Google Hardware aux avantages de fonctionnalités telles que l'interopérabilité et l'IA. Les stratégies d'éducation produit traditionnelles reposent sur des contenus numériques produits à l'aide de produits physiques, puis hébergés sur des plates-formes d'apprentissage numérique. Ces plates-formes d'apprentissage fournissent des spécifications techniques, des images et des vidéos sur les produits, mais pas d'accès aux produits physiques ou connectés.
Les contenus d'apprentissage tels que les vidéos sont coûteux à produire, complexes à localiser pour les marchés mondiaux et presque impossibles à réutiliser entre les produits. La création des éléments initiaux nécessite des budgets pour le casting, la garde-robe, la recherche de lieux, les frais de location, les frais de studio, les équipes de tournage et le travail de postproduction. Les coûts de production et les livrables doivent également tenir compte de la localisation. La modification des composants, des lieux, des produits, du texte et des talents est particulièrement difficile à gérer à grande échelle pour le marketing traditionnel. Et si vous considérez que la plupart des produits compatibles proposent des nouveautés tous les deux mois, ces composants sont déjà obsolètes au moment où ils sont terminés.
Explorer de meilleures façons de partager des informations produit
Dans le but de trouver un meilleur moyen de partager des informations sur les produits, l'équipe DSM a testé des expériences de VR/RA dans une application. Les résultats étaient prometteurs, avec un engagement renforcé et une augmentation de la taille du panier aux points de vente. Toutefois, les téléchargements d'applications constituaient un obstacle important à l'entrée, tant pour les collaborateurs commerciaux que pour les clients. Limiter l'expérience à une application signifiait qu'elle ne pouvait pas être intégrée à d'autres propriétés first party ou tierces telles que store.google.com.
Solutions légères avec <model-viewer>
Après avoir constaté le succès des modèles de produits 3D pour l'information sur les produits, l'équipe a décidé d'appliquer cette approche au Web. Pour ce faire, vous pouvez utiliser <model-viewer>
pour créer des expériences 3D avec des produits individuels.
<model-viewer>
est un composant Web qui vous permet d'ajouter de manière déclarative un modèle 3D à une page Web, tout en hébergeant le modèle sur votre propre site.
Vous pouvez le voir en action sur la page du Pixel Fold sur le Google Store, où <model-viewer>
permet aux utilisateurs de voir le Pixel Fold sous tous les angles et dans différentes positions pliées. Il a été facile d'intégrer le modèle 3D au reste de l'expérience UX HTML, avec des boutons pour raconter une histoire à travers des angles de vue et des variantes de couleur interactives. Avec <model-viewer>
, vous pouvez offrir à vos utilisateurs tous les types d'expériences que vous pouvez imaginer.
Créer les modèles 3D
La première étape du développement d'une expérience virtuelle 3D consiste à créer les modèles de produits 3D. L'équipe DSM a créé ses modèles 3D en CAO. En travaillant en étroite collaboration avec les concepteurs qui produisent des conceptions CAO de produits, l'équipe DSM a pu exporter des rendus basse polyvalence pouvant être optimisés pour le Web. Voici quelques-unes des bonnes pratiques qu'ils ont appliquées pour y parvenir.
- Géométrie :
- Concentrez-vous sur la précision de la géométrie (la forme et l'échelle) sous tous les angles.
- Évitez d'utiliser des cartes de normales pour biseauter les bords.
- Créez des décalcomanies en tant que géométrie distincte.
- Couleurs et matériaux :
- Objectif: représentation visuelle cohérente des propriétés physiques.
- Tenez compte de la dynamique de l'éclairage en temps réel.
- Utilisez des ensembles de textures et des matériaux distincts pour chaque type de maillage (Opaque, Transparent, Décalque).
- Itérez sur les conceptions avec les concepteurs CAD d'origine si des ajustements supplémentaires sont nécessaires.
- Taille du fichier :
- Exportez le modèle au format GLB en tant que modèle basse polyvalence afin qu'il puisse être utilisé par
<model-viewer>
. - Compression manuelle des maillages géométriques par un concepteur 3D, par un fournisseur ou via un logiciel de compression tel que DRACO (OS).
- Exportez le modèle au format GLB en tant que modèle basse polyvalence afin qu'il puisse être utilisé par
Étant donné que ces modèles 3D étaient souvent utilisés sur des téléphones mobiles, ils ont été optimisés en définissant une taille de fichier maximale avec des textures de 2 Mo, afin de prendre en charge les appareils plus anciens et les connexions Internet faibles.
<model-viewer>
L'équipe DSM utilise le composant Web open source <model-viewer>
de Google pour intégrer les modèles 3D nouvellement créés dans ses pages Web. Pour que les modèles créés à l'étape 1 soient compatibles avec <model-viewer>
, les éléments doivent être au format glTF ou GLB (extension .glb). Les deux formats sont compacts, compressibles et se chargent rapidement dans le GPU. Le composant <model-viewer>
est compatible avec tous les principaux navigateurs evergreen.
Au cours de cette étape, le plus grand défi auquel l'équipe DSM a été confrontée était que la palette de couleurs du matériel Google ne s'affichait pas de manière précise. L'équipe a finalement découvert que le mappage des tons ACES (une norme de l'industrie cinématographique) était responsable de la perte de couleurs. Pour résoudre ce problème, Khronos a développé un nouveau mappeur de tons neutres PBR spécifiquement pour remédier à ces lacunes et présenter les couleurs avec précision à l'écran, tout en évitant les reflets trop forts et les changements de teinte associés au mappage des tons linéaire.
<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>
Pour en savoir plus sur <model-viewer>
, consultez modelviewer.dev. Pour tester vos modèles 3D et télécharger un site Web de démarrage complet, essayez notre éditeur.
Solutions lourdes avec three.js
<model-viewer>
est un excellent moyen performant d'afficher et d'interagir avec un modèle 3D. Cependant, l'équipe DSM avait parfois besoin d'une expérience Web plus immersive et interconnectée que celle proposée par <model-viewer>
. C'est le cas, par exemple, du lancement de Nest Mini + C. <model-viewer>
pouvait permettre aux clients potentiels de découvrir un produit en 3D sur le Web, mais ne pouvait pas montrer son utilité lorsqu'il était combiné à d'autres produits Google Hardware et fonctionnalités d'IA, comme l'Assistant.
Pour cette tâche, l'équipe s'est tournée vers la bibliothèque sous-jacente de <model-viewer>
, three.js. Three.js est un moteur de jeu JavaScript Open Source. L'équipe a pu créer un framework d'éléments réutilisables pour un environnement de maison virtuelle contenant des caméras, des ampoules et des enceintes Nest pour intérieur. Cela a permis à l'équipe de fournir des commentaires en temps réel sur la façon dont les appareils interagissent les uns avec les autres.
Dialogflow
La dernière étape de la création de l'expérience interconnectée consiste à ajouter l'Assistant Google. Cela signifie que les utilisateurs peuvent essayer des commandes et des routines authentiques avec l'expérience virtuelle interconnectée. Toutefois, l'insertion de l'Assistant Google à partir du compte existant de l'utilisateur poserait un certain nombre de problèmes de confidentialité. Pour créer une solution axée sur la confidentialité, DSM a travaillé avec le service Google Cloud Dialogflow pour imiter l'Assistant Google dans cet espace. Le diagramme d'ensemble suivant montre comment l'application Web a utilisé l'API de Dialogflow (adapté des principes de base de Dialogflow). Pour chaque tour de conversation, l'application Web a utilisé la classification des intents de Dialogflow, et l'API a renvoyé des expressions d'utilisateur final prédéterminées correspondant à l'intent.
Pour en savoir plus sur Dialogflow, consultez la documentation Google Cloud.
Résultat final: un iFrame intégré
Le résultat final est une bibliothèque d'assets pouvant être intégrés à une page Web avec <model-viewer>
ou utilisés dans un environnement virtuel complet pour aider les clients à en savoir plus sur les produits individuels et sur leur interconnexion. L'expérience est à la fois authentique, évolutive et économique. Cette première expérience virtuelle a été lancée en mai 2021. Bien qu'elle ne soit plus disponible sur le site Web du Google Store, vous pouvez toujours l'essayer.
Les résultats
Depuis le lancement de Nest Mini +C, le DSM a pu réutiliser et développer le framework pour les lancements du portefeuille Pixel au cours des deux dernières années, avec un succès croissant. En implémentant l'itération de ces éléments et expériences 3D, l'équipe a pu quadrupler le nombre d'expériences interactives d'éducation sur les produits et tripler le nombre de produits bénéficiant de cette technologie Web.
Le résultat final est une formation sur le produit authentique et associée à la marque pour une permutation croissante de cas d'utilisation à grande échelle, plus durable, cohérente et interactive que les stratégies précédentes. À l'avenir, l'équipe DSM disposera d'un portefeuille robuste de composants d'une expérience immersive qu'elle pourra adapter rapidement aux cibles commerciales dynamiques. Ces améliorations permettent à l'équipe DSM de lancer de nouveaux contenus pédagogiques sur les produits quatre fois plus rapidement et à moins de la moitié du coût de ses processus précédents, plus traditionnels.