Configurador 3D de gama alta en WebGL
smart es la innovadora marca automovilística de Daimler AG y representa urbanidad, agilidad y máxima satisfacción. Implementando el nuevo configurador, estos valores fueron nuestra visión desde el primer prototipo hasta la versión de lanzamiento. Proporcionamos una experiencia de alto nivel, creando el producto en 3D y situándolo en el centro del viaje del usuario. El objetivo era construir el configurador de coches más intuitivo, visualmente convincente y eficaz que existe.
Canal de producción en 3D y un marco de aplicación moderno
El proceso de configuración y todos los servicios de comercio debían integrarse en un framework estable, ofreciendo una usabilidad de primera calidad en el ecosistema de smart.com para cualquier lanzamiento al mercado. Como primer paso, nuestro equipo de ingeniería y dirección de arte implementó un prototipo rápido en WebGL, basado en la biblioteca de activos de ingeniería visual de Daimlers. Se realizaron pruebas comparativas entre dispositivos y navegadores para comprobar el rendimiento en web y la calidad visual. Paralelamente, establecimos un proceso de producción y desarrollamos formatos de archivo dedicados a garantizar una transferencia de datos segura y sin fisuras, así como una configuración a gran escala en todos los mercados y en todas las variaciones del producto.
Integrado como una aplicación Web progresiva
Para lograr una mayor usabilidad y localización, desarrollamos una aplicación independiente con React y Redux, integrada en una página de servicio. Construida como una aplicación web responsiva que se adapta con fluidez a diferentes dispositivos, nuestro enfoque era el rendimiento en 3D y el diseño de servicios. El WebGL se basa en un canvas adaptable, garantizando el rendimiento mediante una estrategia de dispositivos modulares. El lienzo presenta el coche como un punto focal durante el viaje del usuario. Características como la pantalla completa, el entorno y el modo de manejo se adaptan a cualquier vista.
Agile Kanban, enfocado en programación
La creación de un configurador 3D y un pipeline de producción requiere la integración continua de las partes interesadas en marketing, IT, ingeniería visual y gestión de productos. Por lo tanto, el proyecto fue dividido en tres epics con enfoque en aplicación web, el componente 3D en WebGL y una infraestructura bien organizada para previsualizar, refinar y aprobar cada elemento de forma segura. Se planeó un proyecto en Agile, con revisiones quincenales enfocado en programación- para prototipar con anticipación, entregar rápido, probar y depurar a lo largo de todo el proceso, asegurando un software impecable.
Pruebas iterativas de producción y usabilidad
Nuestro equipo de producción y diseño UX tradujo el concepto de usabilidad y el lenguaje visual de la agencia de marketing de Daimlers, así como toda la comunicación y criterios de aceptación de marketing y TI en historias de usuarios, prototipos testeables y de más elementos. Hacerlo, fue clave para llevar al diseño como a la ingeniería a un siguiente nivel en una experiencia 3D de usuario intuitiva.
Modelado 3D e ingeniería para configuración web
La implementación 3D en un configurador requiere una estrategia que considere tres puntos importantes de usabilidad tanto para los consumidores como para los propietarios de producto: Buen performance tanto visual como técnico, estrategia de negocio en cualquier mercado; y por último, infraestructura preparada para futuras actualizaciones y otras experiencias de usuario que surjan con 3D. Por lo tanto, nuestro objetivo no era sólo crear y refinar geometrías con materiales y shaders personalizados, sino alinearlos con las lógicas de configuración y producto dadas, anticipándonos al mercado futuro, la tecnología y las oportunidades de negocio.
Experiencia y entorno de productos ultrarrealistas
Obtuvimos como resultado un renderizado ultrarrealista del producto, comparando todos los materiales y partes extras del coche con el producto real. Nuestra visión era ofrecer un realismo convincente que el usuario identificara al instante. Se crearon texturas y shaders personalizados para todas las piezas clave del automóvil, como llantas, neumáticos, faros delanteros y traseros, plásticos y materiales de vidrio, y sobre todo, en un esfuerzo supremo: Para todas las pinturas y barnices mate y metálicos. Finalmente, para llevar el realismo a un nuevo nivel, se creó un escenario esférico urbano, mostrando el producto configurado de forma magnífica. La composición es una combinación de diseño estático, representaciones en 3D e iluminación que no tiene parangón en la ingeniería creativa contemporánea.
Integración perfecta en los principales sistemas de comercio
Crear un configurador en línea con venta de productos no solo comprende una usabilidad de primera calidad, significa también implementar funciones de comercio electrónico que están profundamente integradas en las unidades de negocio y en las lógicas de una marca. Al hacerlo, la transformación digital cobra vida: Varios sprints del producto comprendieron la adaptación de servicios e integración de APIs y frameworks que conectan con ventas y marketing, servicios financieros, partes interesadas del mercado local y la gestión de datos. Se integraron funciones como la solicitud de ofertas y pruebas de manejo, el cálculo de las opciones de financiación y el almacenamiento de la configuración con un código en línea.
Una gran usabilidad refuerza la experiencia de marca
En cada detalle del proceso de exploración y configuración del producto, los clientes deben experimentar la alegría del uso y el espíritu de innovación que smart representa como marca de automóviles. Una experiencia 3D no sólo fue cuidadosamente seleccionada y concebida para ofrecer la mejor calidad visual e interactiva, sino también para permitir una adaptación a diversos dispositivos y configuraciones de datos para la web, los móviles y las salas de exposición minoristas. La aplicación web está configurada para ser mantenida en una arquitectura de sistema e infraestructura modernas. Alojado en la nube y perfectamente conectado a los datos de configuración del producto, se actualiza mediante una integración continua. El mantenimiento está garantizado en sucursales y a través de un CMS headless para proporcionar una localización simple y estable.
Una experiencia de producto preparada para el futuro
Un configurador innovador es un mundo en sí mismo - con esta excelente aplicación WebGL establecimos un punto de referencia. Hacer disfrutable un proceso de configuración, mostrar el producto y explicar intuitivamente las opciones da como resultado una experiencia premium que asegura mejores oportunidades de negocio. La venta cruzada es fundamental en el comercio digital. Además, introducir 3D en la web, crea una experiencia de producto estelar y preparada para el futuro.
