La organización de Marketing de Dispositivos y Servicios (DSM) de Google supervisa las estrategias de lanzamiento de una amplia variedad de productos: teléfonos inteligentes, relojes, auriculares, tablets, dispositivos de casa inteligente y suscripciones relevantes, todos los cuales están disponibles en Google Store y a través de proveedores externos globales. Las personas se enteran de estos productos en línea y en tiendas minoristas físicas.
Un desafío constante para este equipo es educar a los consumidores y minoristas sobre los casos de uso y los beneficios del ecosistema de hardware de Google y las experiencias avanzadas de IA. Para ayudar mejor a los consumidores a comprender los productos y la funcionalidad, el equipo de DSM creó un espacio virtual en 3D con tecnología web avanzada para abordar muchos de estos desafíos. En este caso de éxito, puedes descubrir cómo el equipo creó una experiencia más envolvente para los clientes, lanzando estas experiencias nuevas cuatro veces más rápido y con la mitad del costo de los recursos digitales tradicionales.
El desafío: educación sobre productos
Instruir a los asociados de ventas y a los clientes que son nuevos en los productos de hardware de Google sobre los beneficios de funciones como la interoperabilidad y la IA es costoso y difícil. Las estrategias tradicionales de educación sobre productos se basan en contenido digital que se produce con productos físicos y, luego, se aloja en plataformas de aprendizaje digital. Estas plataformas de aprendizaje proporcionan especificaciones técnicas, imágenes y videos de los productos, pero no acceso a productos físicos o conectados.
El contenido educativo, como los videos, es costoso de producir, complejo de localizar para los mercados globales y casi imposible de reutilizar entre productos. La creación de los recursos iniciales requiere presupuestos para el reparto, el vestuario, el reconocimiento de ubicaciones, las tarifas de las ubicaciones, las tarifas de los estudios, los equipos de filmación y el trabajo de postproducción. Los costos de producción y los entregables también deben tener en cuenta la localización. Modificar los recursos, las ubicaciones, los productos, el texto y el talento es un desafío para que el marketing tradicional lo administre a gran escala. Además, si consideras que la mayoría de los productos compatibles tienen lanzamientos de funciones cada dos meses, estos recursos ya están desactualizados cuando se terminan.
Explorar mejores formas de compartir la información de los productos
Para encontrar una mejor manera de compartir la información de los productos, el equipo de DSM experimentó con experiencias de RA/VR en una app. Los resultados fueron prometedores, ya que se fortaleció la participación y aumentaron los tamaños de los carritos en los puntos de venta. Sin embargo, las descargas de apps eran una barrera de entrada significativa para los asociados de ventas y los clientes, y limitar la experiencia a una app significaba que no se podía incorporar en otras propiedades propias o de terceros, como store.google.com.
Soluciones livianas con <model-viewer>
Después de ver el éxito de los modelos de productos en 3D para la educación sobre productos, el equipo decidió llevar este enfoque a la Web. Una forma de lograrlo es usar <model-viewer>
para crear experiencias 3D con productos individuales.
<model-viewer>
es un componente web que te permite agregar de forma declarativa un modelo 3D a una página web y, al mismo tiempo, alojarlo en tu propio sitio.
Puedes ver esto en acción en la página del Pixel Fold en Google Store, donde <model-viewer>
permite a los usuarios ver el Pixel Fold desde cualquier ángulo con varias posiciones de plegado. Fue fácil integrar el modelo 3D en el resto de la UX de HTML, con botones para contar una historia a través de ángulos de cámara y variantes de color interactivas. Con <model-viewer>
, puedes brindarles a los usuarios cualquier tipo de experiencia que puedas imaginar.
Creación de los modelos 3D
El primer paso para desarrollar una experiencia virtual en 3D es crear los modelos de producto en 3D. El equipo de DSM creó sus modelos 3D en CAD. Trabajando en estrecha colaboración con los diseñadores que producían productos CAD, el equipo de DSM pudo exportar renderizaciones de baja poligonización que se podían optimizar para la Web. Algunas de las prácticas recomendadas que usaron para lograrlo se encuentran en las siguientes áreas.
- Geometría:
- Enfócate en que la geometría (la forma y la escala) sea precisa desde todos los ángulos.
- Evita usar mapas normales para biselar bordes.
- Crea calcomanías como geometrías independientes.
- Colores y materiales:
- Objetivo: Representación visual coherente de las propiedades físicas.
- Ten en cuenta las dinámicas de iluminación en tiempo real.
- Usa conjuntos de texturas y materiales independientes para cada tipo de malla (opaco, transparente, calcomanía).
- Itera en los diseños con los diseñadores de CAD originales si se necesitan más ajustes.
- Tamaño del archivo:
- Exporta como un modelo de baja poligonización en formato GLB para que
<model-viewer>
pueda usarlo. - Un diseñador en 3D puede comprimir las mallas geométricas de forma manual, con un proveedor o a través de software de compresión, como DRACO (SO).
- Exporta como un modelo de baja poligonización en formato GLB para que
Debido a que estos modelos 3D se usarían con frecuencia en teléfonos celulares, se optimizaron configurando un tamaño de archivo máximo con texturas de 2 MB para admitir dispositivos de generaciones anteriores y conexiones a Internet débiles.
<model-viewer>
El equipo de DSM usa el componente web de código abierto <model-viewer>
de Google para incorporar los modelos 3D recién creados en sus páginas web. Para que los modelos creados en el paso uno sean compatibles con <model-viewer>
, los recursos deben estar en formato gITF o GLB (extensión .glb). Ambos formatos son compactos, comprimibles y se cargan rápidamente en la GPU. El componente <model-viewer>
es compatible con todos los navegadores principales de actualización continua.
Durante este paso, el mayor desafío que enfrentó el equipo de DSM fue que la paleta de colores del hardware de Google no se renderizaba con precisión. Con el tiempo, el equipo descubrió que la asignación de tonos ACES (un estándar de la industria cinematográfica) era responsable de los colores perdidos. Para resolver este problema, desarrollaron un nuevo asignador de tonos neutros de PBR de Khronos específicamente para abordar estas deficiencias y presentar los colores con precisión en la pantalla, a la vez que se evitan los reflejos exagerados y los cambios de tono asociados con la asignación de tonos lineal.
<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>
Para obtener más información sobre <model-viewer>
, visita modelviewer.dev. Para probar tus modelos 3D y descargar un sitio web de partida completo, prueba nuestro editor.
Soluciones pesadas con three.js
<model-viewer>
es una excelente manera de mostrar e interactuar con un modelo 3D con un buen rendimiento. Sin embargo, a veces, el equipo de DSM necesitaba una experiencia web más envolvente y
interconectada de lo que es posible con <model-viewer>
. Un ejemplo fue el lanzamiento del Nest Mini + C. <model-viewer>
podría permitir que los clientes potenciales experimenten un producto en 3D en la Web, pero no podría mostrar su utilidad cuando se combina con otros productos de hardware de Google y funciones de IA, como el asistente.
Para esta tarea, el equipo recurrió a la biblioteca que sustenta <model-viewer>
, three.js. Three.js es un motor de juego de JavaScript de código abierto, y el equipo pudo crear un framework de recursos reutilizables para un entorno de casa virtual que contiene cámaras, luces y bocinas para interiores de Nest. Esto le dio al equipo una base para proporcionar comentarios en tiempo real sobre cómo interactuaban los dispositivos entre sí.
Dialogflow
El último paso para crear la experiencia interconectada es agregar Asistente de Google. Esto significaba que los usuarios podían probar comandos y rutinas auténticos con la experiencia virtual interconectada. Sin embargo, insertar Asistente de Google desde la cuenta existente del usuario generaría una serie de problemas de privacidad. Para crear una solución centrada en la privacidad, el DSM trabajó con el servicio Dialogflow de Google Cloud para imitar a Asistente de Google en este espacio. En el siguiente diagrama de alto nivel, se muestra cómo la app web usó la API de Dialogflow (adaptada de los conceptos básicos de Dialogflow). Para cada turno de la conversación, la app web usó la clasificación de intents de Dialogflow, y la API mostró expresiones predeterminadas del usuario final que coincidían con el intent.
Para obtener más información sobre Dialogflow, consulta la documentación de Google Cloud.
Resultado final: un iFrame incorporable
El resultado final es una biblioteca de recursos que se puede incorporar en una página web con <model-viewer>
o usar en un entorno virtual completo para ayudar a los clientes a obtener más información sobre productos individuales y cómo se interconectan. La experiencia es auténtica, escalable y rentable. Esta primera experiencia virtual se lanzó en mayo de 2021 y, si bien ya no está disponible en el sitio web de Google Store, puedes probarla.
Los resultados
Desde el lanzamiento de Nest Mini +C, el DSM pudo reutilizar y expandir el framework de los lanzamientos de la cartera de Pixel de los últimos dos años con cada vez más éxito. A través de la operacionalización de la iteración de estos recursos y experiencias en 3D, el equipo hasta ahora pudo cuadruplicar la cantidad de experiencias educativas interactivas de productos y triplicar la cantidad de productos que se benefician de esta tecnología web.
El resultado final es una educación de productos auténtica y de marca para una permutación creciente de casos de uso a gran escala que es más sostenible, cohesiva e interactiva que las estrategias anteriores. En el futuro, el equipo de DSM ahora tiene una cartera sólida de componentes de una experiencia envolvente que pueden adaptar rápidamente a los objetivos comerciales dinámicos. Estas mejoras permiten al equipo de DSM lanzar contenido educativo de productos nuevos cuatro veces más rápido y con menos de la mitad del costo de sus procesos anteriores y más tradicionales.