Highend 3D Auto Konfigurator
Als innovative Marke der Daimler AG steht smart für Urbanität, Agilität und Spaß. Für den neuen smart Konfigurator setzten wir uns als Produktvision, dies in der Usability unmittelbar spürbar zu machen. Ziel war es, den intuitivsten, visuell hochwertigsten und performantesten Autokonfigurator zu entwickeln und das Fahrzeug in 3D stets ins Zentrum der User Journey zu stellen.
Aufbau einer 3D Pipeline in einem modernen Framework
Der Konfigurationsprozess und alle eCommerce Services wurde in einem performanten Framework in die smart.com integriert. Innerhalb dieses Ecosystems wurde er zur Usability-Benchmark und sukzessive weltweit für alle Märkte ausgerollt. Zunächst entwickelten wir auf Basis der Asset Library des Daimler Visual Engineering Teams einen WebGL Prototypen, den unser Team aus Entwicklern und Art Direction cross-device auf Performanz und visuelle Qualität testete. Parallel wurde eine Produktionspipeline und ein dediziertes Dateiformat für die 3D-Modellintegration aufgebaut, um sicheren Datentransfer und volle Konfigurationslogik sicherzustellen.
Integriert als Progressive Web App
Um exzellente Usability und simple Lokalisierung zu ermöglichen, entwickelten wir eine Standalone Web-Applikation in React Redux, über eine Service Page in die smart.com integriert. Die fluide Anwendung liefert auf Mobile und Desktop 3D-Performance und ansprechendes Service Design. Durch die modulare Device-Strategie steht das Fahrzeug im Zentrum und wird in Full Screen-, Environment- und Drive-Modus interaktiv erlebbar.
Agiles Entwicklungsprojekt in Kanban
Die Entwicklung eines Fahrzeugkonfigurators und einer 3D Produktionspipeline erfordern fortwährende Integration vieler Stakeholder aus IT, Marketing, Visual Engineering und Produktmanagement. Hierzu teilten wir das Projekt in drei Epic-Teams auf, die parallel in Web-Anwendung, 3D-Komponente in WebGL sowie Produktmanagement-Infrastruktur arbeiteten. Für letzteres wurde eine sichere Plattform zur internen Iteration in Browser und 3D-Engine geschaffen. Im agilen Projektsetup arbeiteten die Teams über Kanban mit synchronen Reviews und Kickoffs - um früh zu prototypen, alle Komponenten zügig zu integrieren und von Beginn an stabile Software sicherzustellen.
Produktion mit fortwährendem Usability-Testing
Unser Produktmanagement und User Experience-Team übernahm in der Entwicklungsphase ein Proxy Product Ownership, um das visuelle Interaktionskonzept und Briefings der Lead Agentur von smart in User Stories und Akzeptanzkriterien zu übersetzen sowie dazugehörige Deliverables und Assets zu identifizieren. Hierbei war es zentrale Aufgabe, das Design durch Testen und Iterieren mit der neuen 3D Fahrzeugkomponente zu einer stimmigen User Experience weiterzuentwickeln.
Auf Webkonfiguration konzipiertes 3D Modeling und Engineering
Um einen exzellenten 3D Konfigurator umzusetzen, sind aus Sicht des Nutzers wie auch des Product Owners mehrere Qualitätsmerkmale zentral: Visuelle und technische Performanz, verlässliche Produkt- und eCommerce-Logik für alle Märkte sowie die zukunftsfähige Infrastruktur für Produktupdates und Features, die aus der 3D-Darstellung heraus entwickelt werden. Unser Fokus lag neben der Ausarbeitung der 3D-Modelle mit individuell optimierten Materialien und Shadern zugleich im Sicherstellen der Konfigurationslogik im Modell sowie einem technischen Konzept, das künftige Lösungen, Technologien und Marktadaptionen mitdenkt.
Ultrarealistische Produktdarstellung
Im Ergebnis erschufen wir eine ultrarealistische Produktdarstellung, die für den Automotive-Bereich eine Benchmark setzt. Alle Materialien und Anbauteile der Fahrzeuge wurden im Vergleich mit dem echten Produkt herausgearbeitet. Unser Ziel war es, einen Realismus zu erreichen, den die Nutzer unmittelbar spüren. Eigens angepasste Texturen und Shader für Fahrzeugkomponenten wie Felgen, Reifen, Scheinwerfer, Rücklichter, Kunststoffe- und Glas-Anbauteile sind dabei zentral - und vor allem überzeugende Darstellung der Lacke in Matt und Metallic-Farben. Um den realistischen Look herauszuarbeiten, wurde ein Environment modelliert, in dem das Fahrzeug in eine urbane Szenerie integriert ist. Diese Kombination aus 3D und pre-rendert CGI ist technisch einmalig und besticht durch unvergleichlichen Look and Feel.
Nahtlose Integration zentraler eCommerce-Systeme
Einen Web-Konfigurator aufzubauen, bedeutet neben Fokus auf Usability auch die tiefgreifende Integration von eCommerce Features, die durch diverse Business Partner eines Unternehmens gestellt werden. In diesem Prozess wurde digitale Transformation kontinuierlich gelebt: Durch Entwickler im Testen, Reverse Engineering von APIs sowie Refactoring von Komponenten und Frameworks - durch agiles Projektmanagement in der Kooperation mit IT, Vertrieb, Marketing, Financial Services und Data-Management aus verschiedensten Märkten. Sukzessive wurden bestehende sowie neue Features wie Angebotsanfrage, Finanzierungsrechner, Online-Code und Probefahrt integriert und optimiert.
Joy of Use stärkt Markenwahrnehmung
In jedem Detail des Konfigurationsprozesses ist der Markenkern von smart durch joy of use spürbar. Gerade hierfür bietet die Produktdarstellung in 3D die bestmögliche visuelle und interaktive Qualität - und ist die Basis für eine Device- und Touch Point-übergreifende Strategie, die in Web, Mobile wie auch in Retail Showroom die Consumer Journey auf ein neues Niveau hebt.
Zukunftsorientierte Produkt-Strategie
Mit dieser herausragenden WebGL-Anwendung haben wir eine Benchmark für innovative Konfiguratoren gesetzt. Die Consumer Journey besticht durch Joy of Use, exzellente Produktdarstellung und intuitive Usability. 3D im Web legt technologisch und visuell den Grundstein einer Premium Brand Experience, die den digitalen Commerce der Zukunft einleitet.
