Highend 3D Car Configurator in WebGL
smart is the innovative Daimler AG automotive brand and stands for urbanity, agility and utmost joy. Implementing the new configurator, these values were our vision from the first prototype until the release version. We delivered a high-class experience, creating the product in 3D and placing it at the very centre of the user journey. The aim was to build the most intuitive, visual compelling and performant car configurator there is.
3D production pipeline and modern application framework
The configuration process and all commerce services were to be integrated into a stable framework, delivering premium usability in the smart.com ecosystem for any market roll-out. As a first step, a rapid prototype in WebGL, based on the asset library of Daimlers visual engineering, was implemented by our engineering and art direction team. Benchmarks were done cross-device and cross-browser to check web performance as well as visual quality. In parallel, we set up a production pipeline and developed dedicated file formats to ensure seamless, secure data-transfer and full-scale configurability throughout markets and product variations.
Integrated as a Progressive Web Application
For premium usability and localization, we developed a standalone application with React and Redux, integrated in a service page. Built as a responsive web app, adapting to screens and devices fluidly, our focus were 3D performance and service design. The WebGL is based on an adaptable canvas, ensuring performance by a modular device strategy. The canvas presents the car as a focal point during the user journey. Features such as full-screen, environment and drive mode are adapted for any viewport.
Agile, development driven Kanban project
The creation of a 3D configurator and a production pipeline requires ongoing integration of marketing, IT, visual engineering and product management stakeholders. Therefore, the project was sliced into three epics with focus on web app, 3D-component in WebGL and a product management infrastructure to securely preview, refine and approve features. An agile project set-up, biweekly reviews and a development driven approach were established - to prototype early, to deliver fast, test and debug throughout the whole process ensuring flawless software.
Iterative production and usability testing
Our producing and user experience team took over a proxy product ownership, translating the usability idea and visual concept from Daimlers lead marketing agency as well as briefings and acceptance criterias from marketing and IT into user stories, testing deliverables and assets. In doing so, it was key to challenge design as well as engineering to bring together web design and 3D into an intuitive user experience.
3D Modeling and engineering for web configuration
Implementing 3D in a configurator requires a strategy with three core pillars of usability for consumers as well as product owners: Product performance both visually and technically, product and business logics in any market. And last, but not least: Future-proof infrastructure for updates as well as upcoming user experiences that will emerge with 3D. So our focus was not only creating and refining geometries with custom materials and shaders, but to align these on the given product and configuration logics - in parallel, anticipating future market, technology and business opportunities.
Ultra-realistic product experience and environment
This resulted in an ultra-realistic product rendering, with all materials and hang-on parts of the car being refined compared to the real product. Our vision was to deliver a compelling realism that user instantly feel. Therefore, custom textures and shaders were created for all the key car parts such as rims, tires, head- and rear lights, plastics and glass materials - and above all, in supreme efforts: For all matt and metallic paints and varnishes. Finally, to bring this product realism to a new level, an environment mode with an urban sphere was created - showcasing the configured product magnificently. This feature is a combination of static design, 3D renderings and lighting that has no equal in contemporary creative engineering.
Seamless integration in core commerce systems
Crafting an online configurator that sells products does not stop at delivering premium usability - it means implementing eCommerce features that are deeply integrated in business units and logics of a brand. In doing so, digital transformation comes to live: Several product sprints were involved in the adaption of services and integration of APIs and frameworks that connect with sales and marketing, financial services as well as local market stakeholders and data management. Features such as requesting offers and test-drives, calculating financing options and storing the configuration with an online code were integrated.
Joy of use strengthens brand experience
In every detail of product exploration and configuration process, customers are to experience the joy of use and spirit of innovation that smart stands for as a car brand. Indeed, a 3D experience was not only carefully selected and concepted to deliver best visual and interactive quality - but also to enable next steps in a cross-device and cross-touch-point strategy for web, mobile as well as retail showrooms. The web application is set up to be maintained in a modern system architecture and infrastructure. Cloud-hosted and seamlessly connected to product configuration data, it is updated via continuous integration. Maintenance is ensured in feature and localization branches and via a headless CMS to provide simple and stable localization.
A future-proof product experience
An innovative configurator is a world of its own - with this outstanding WebGL application, we set a benchmark. Bringing joy into a configuration process, showcasing the product and intuitively explaining options results in a premium experience that seizes business opportunities. Up- and cross-selling are key in digital commerce. Even more is, to introduce 3D in web, creating a stellar, future-proof product experience.
