smart
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.
Visual and Motion Design
putting product first
A contemporary car configurator is all about product and services. The goal of our visual design was to deliver a meaningful, app-like experience guiding users throughout the whole configuration process and providing an intuitive, profound overview of all product features and highlights. The animation concept seeks to reflect that. Motion design, frontend development and creative engineering in WebGL worked iteratively with art direction and quality assurance.
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.
