L'équipe chargée du marketing des appareils et des services (DSM) de Google supervise les stratégies de commercialisation d'une vaste gamme de produits: smartphones, montres, écouteurs, tablettes, appareils pour la maison connectée et abonnements associés. Ces produits sont disponibles à la fois sur le Google Store et auprès de fournisseurs tiers internationaux. Les consommateurs se renseignent sur ces produits en ligne et dans des magasins physiques.
Pour cette équipe, l'un des défis constants est d'informer les consommateurs et les marchands sur les cas d'utilisation et les avantages de l'écosystème matériel Google et des expériences d'IA avancées. Afin d'aider les consommateurs à mieux comprendre les produits et les fonctionnalités, l'équipe de DSM a créé un espace virtuel 3D doté d'une technologie Web avancée afin de répondre à bon nombre de ces problématiques. 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 pour un coût divisé par deux par rapport aux ressources numériques traditionnelles.
Le défi: informer sur les produits
La sensibilisation des vendeurs et des clients qui découvrent les appareils Google aux avantages de fonctionnalités telles que l'interopérabilité et l'IA est coûteuse et difficile. Les stratégies traditionnelles d'enseignement des produits reposent sur des contenus numériques produits à l'aide de produits physiques, puis hébergés sur des plates-formes d'apprentissage numériques. Ces plates-formes d'apprentissage fournissent des caractéristiques techniques de produits, des images et des vidéos, mais ne permettent pas d'accéder à des produits physiques ou connectés.
Les contenus pédagogiques tels que les vidéos sont coûteux à produire, complexes à localiser pour les marchés mondiaux et presque impossibles à réutiliser d'un produit à l'autre. La création des éléments initiaux nécessite des budgets pour le casting, l'armoire, la détection de lieux, les frais de localisation, 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. Modifier les ressources, les emplacements, les produits, le texte et les talents est particulièrement difficile à gérer à grande échelle pour le marketing traditionnel. Par ailleurs, si vous considérez que la plupart des produits compatibles proposent des mises à jour groupées tous les deux mois, ces assets sont déjà obsolètes au moment où ils sont terminés.
Explorer de meilleures façons de partager les informations sur les produits
Dans le but de trouver un meilleur moyen de partager les informations sur les produits, l'équipe de l'équipe de Cependant, les téléchargements d'applications représentaient un obstacle important à l'entrée pour les vendeurs comme pour les clients. En limitant l'expérience à une application, celle-ci ne pouvait pas être intégrée à d'autres propriétés propriétaires ou tierces telles que store.google.com.
Solutions légères avec <model-viewer>
Après avoir constaté le succès des modèles 3D pour l'enseignement des produits, l'équipe a décidé de transposer cette approche sur le 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 l'hébergant sur votre propre site.
Vous pouvez voir cela en action sur la page Pixel Fold du Google Store, où <model-viewer> permet aux utilisateurs de voir le Pixel Fold sous n'importe quel angle avec différentes positions pliées. Il a été facile d'intégrer le modèle 3D dans le reste de l'expérience utilisateur HTML, avec des boutons permettant de raconter une histoire sous l'angle de la caméra et des variantes de couleurs interactives. Avec <model-viewer>, vous pouvez offrir à vos utilisateurs toutes les expériences dont vous rêvez.
Création des modèles 3D
Pour développer une expérience virtuelle 3D, la première étape consiste à créer les modèles de produits 3D. Elle a créé ses modèles 3D en CAO. En travaillant en étroite collaboration avec les concepteurs de produits de CAO, elle a pu exporter des rendus à faible rendu polygraphique qui peuvent être optimisés pour le Web. Pour y parvenir, l'équipe a mis en place certaines des bonnes pratiques dans les domaines suivants.
- 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 arrondir les arêtes.
- Créez des autocollants sous forme de géométries distinctes.
- Couleurs et matériaux :
- Objectif: représentation visuelle cohérente des propriétés physiques.
- Prenez en compte la dynamique d'éclairage en temps réel.
- Utilisez des ensembles de texture et des matériaux distincts pour chaque type de maillage (opaque, transparent, autocollant).
- Modifier les conceptions avec les concepteurs CAO originaux si d'autres ajustements sont nécessaires.
- Taille du fichier :
- Exportez-les en tant que modèle low poly au format GLB afin que le modèle puisse être utilisé par
<model-viewer>. - Compressez les maillages géométriques manuellement par un concepteur 3D, avec un fournisseur ou via un logiciel de compression tel que DRACO (OS).
- Exportez-les en tant que modèle low poly au format GLB afin que le modèle puisse être utilisé par
Ces modèles 3D étant souvent utilisés sur les 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 d'ancienne génération et les connexions Internet faibles.
<model-viewer>
L'équipe DSM utilise le composant Web Open Source <model-viewer> de Google pour intégrer les nouveaux modèles 3D 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 permanents.
Au cours de cette étape, la plus grande difficulté rencontrée par l'équipe DSM était que la palette de couleurs matérielles Google ne s'affichait pas correctement. L'équipe a finalement découvert que la modélisation des tons ACES (une norme de l'industrie cinématographique) était à l'origine de la perte des couleurs. Pour résoudre ce problème, l'équipe a développé un nouveau Khronos PBR Neutral Tone Mapper spécialement conçu pour corriger ces lacunes et présenter les couleurs avec précision à l'écran, tout en évitant les tons clairs et les changements de teinte associés à la cartographie des tons linéaires.
<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>, accédez au site modelviewer.dev. Pour tester vos modèles 3D et télécharger l'intégralité d'un site Web de démarrage, essayez notre éditeur.
Solutions lourdes avec three.js
<model-viewer> est un excellent moyen efficace d'afficher un modèle 3D et d'interagir avec celui-ci. Cependant, l'équipe DSM a parfois besoin d'une expérience Web plus immersive et
interconnectée qu'avec <model-viewer>. C'est par exemple le cas avec le lancement du Nest Mini + C. <model-viewer> permettait aux clients potentiels de découvrir un produit en 3D sur le Web, mais il ne pouvait pas démontrer son utilité lorsqu'il était associé à d'autres produits Google et à des fonctionnalités d'IA telles que l'assistant.
Pour cette tâche, l'équipe s'est tournée vers la bibliothèque à la base 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 lumières et des enceintes Nest d'intérieur. L'équipe a ainsi pu fournir des informations en temps réel sur les interactions entre les appareils.
Dialogflow
La dernière étape de la création de l'expérience interconnectée consiste à ajouter l'Assistant Google. Les utilisateurs pouvaient ainsi tester des commandes et des routines authentiques grâce à une expérience virtuelle interconnectée. Toutefois, l'insertion de l'Assistant Google à partir du compte existant de l'utilisateur entraînerait un certain nombre de problèmes de confidentialité problématiques. Pour élaborer une solution centrée sur la confidentialité, le service DSM a collaboré avec le service Google Cloud Dialogflow pour imiter l'Assistant Google dans cet espace. Le schéma général suivant montre comment l'application Web a utilisé l'API Dialogflow (adaptée à partir de la page Basics 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: un iFrame intégrable
Le résultat final se traduit par une bibliothèque d'éléments qui peuvent être intégrés à une page Web avec <model-viewer> ou utilisées dans un environnement virtuel complet pour aider les clients à en savoir plus sur des produits individuels et 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 module 3D a pu réutiliser et étendre la structure au cours des deux dernières années de lancement de la gamme Pixel, avec un succès croissant. En opérationnalisant l'itération de ces éléments et expériences 3D, l'équipe a jusqu'à présent pu quadrupler le nombre d'expériences pédagogiques interactives sur les produits et tripler le nombre de produits bénéficiant de cette technologie Web.
Résultat : des formations authentiques et associées à une marque pour une permutation croissante de cas d'utilisation à grande échelle, de façon plus durable, cohérente et interactive que les stratégies précédentes. À l'avenir, l'équipe dispose désormais d'un solide portefeuille de composants d'une expérience immersive qu'elle peut rapidement adapter à des objectifs commerciaux dynamiques. Ces améliorations permettent à l'équipe DSM de lancer des contenus pédagogiques sur les nouveaux produits quatre fois plus rapidement et pour un coût divisé par deux par rapport à ses processus précédents, plus traditionnels.