Development

Der Aufstieg der 3D-Konfiguratoren für individuelle Einkaufserlebnisse

Bogdan Djukic

VP of Developer Experience

09.08.2024

Foto von Steve Johnson

3D-Konfiguratoren – ein Wendepunkt für Unternehmen

3D-Konfiguratoren ermöglichen die Interaktion mit virtuellen Produktdarstellungen und bieten so ein Mass Personalisierung, das die Grenzen herkömmlicher Online-Shopping-Erfahrungen überschreitet.

Was ist ein 3D-Konfigurator?

Ein 3D-Konfigurator ermöglicht es den Nutzenden, 3-dimensionale Produktmodelle in einem Webbrowser oder einer Anwendungsschnittstelle dynamisch zu verändern und in Echtzeit zu visualisieren. Diese Konfiguratoren nutzen fortschrittliche Rendering-Techniken und interaktive Steuerelemente, damit verschiedene Aspekte des Produks, wie Farben, Materialien und Funktionen anpassbar sind.

Im Wesentlichen verwenden 3D-Konfiguratoren ein Basismodell des Produkts, das als Leinwand für die Anpassung dient. Die User können dann bestimmte Parameter oder Attribute des Modells verändern, wodurch die Konfiguration sofort am Produkt sichtbar ist. Dieser dynamische Prozess in Echtzeit ermöglicht es den Usern, mit verschiedenen Designoptionen zu experimentieren – die Grundlage für ein intensives und fesselndes Einkaufserlebnis.

Sie könnten zum Beispiel ein bestimmtes Fahrradmodell als Vorlage verwenden. Ihre User können dann Parameter wie Grösse, Farbe oder sogar ganze Teile wie Reifen ändern. Dank des Echtzeit-3D-Modells können sie sofort sehen, wie sich ihre Änderung auf das Produkt auswirkt. Na wenn das nicht zum Experimentieren anregt!

Erfahren Sie mehr über 3D-Konfiguration.

Wie 3D-Konfiguratoren das Online-Shopping für die Nutzenden verbessern

3D-Konfiguratoren sind eine spannende Technologie, die eine Vielzahl von Vorteilen bietet. Sie revolutionieren die Art und Weise, wie wir online einkaufen – von der unvergleichlichen Produktanpassung bis hin zu immersiven Visualisierungserlebnissen.

Wie wir einen 3D-Konfigurator für Velos entwickelt haben

Ein Beispiel für die bahnbrechende Arbeit unserer Teams im Bereich der 3D-Konfiguration ist die Zusammenarbeit von Mindnow mit Thömus, einem renommierten Velo-Händler mit Sitz in der Schweiz. Mit dem Auftrag, die Online-Präsenz von Thömus zu verbessern, entwickelte unser Team einen Bike-Konfigurator, der einen neuen Standard für die Branche gesetzt hat.

Umstellung von 2D auf 3D für Live-Rendering

Zu Beginn des Projekts war ein 2D-Konfigurator geplant. Er sollte Bilder auf der Benutzeroberfläche basierend auf den ausgewählten Komponenten einblenden. Die Herausforderung bei der dynamischen Bilderstellung war die Tatsache, dass einige Velos andere Rahmen als andere haben und auch die Kabel im Inneren unterschiedliche Positionen haben können. Das bedeutet, dass Komponenten, die dem Velo hinzugefügt werden sollen, wie Pedale oder Lenker, unterschiedliche Positionen der Komponenten erfordern würden.

Unsere Schlussfolgerung: Mit 2D hätte das Velo nicht von allen Seiten betrachtet werden können und das dynamische Rendering wäre sehr begrenzt gewesen. Wir mussten auf 3D umsteigen. Nach reiflicher Überlegung beschlossen wir, 3D-Modelle mit WebGL unter Verwendung von ThreeJS zu rendern und eine Logik für 3D-Interaktion zu entwickeln.

Trotz des zusätzlichen Aufwands war unser Entwicklungsteam überzeugt, dass dieser radikale Wechsel entscheidend war. Nur so konnten wir einen Konfigurator entwickeln, der sich von der Konkurrenz abhebt und gleichzeitig die hohen Anforderungen unseres Kunden Thömus erfüllt.

Jedes Teil ist ein eigenes Objekt

Im Thömus-Konfigurator-Webshop ist jedes Teil eines Velos ein separates 3D-Objekt. Diese Objekte werden dann zu einem ganzen Velo zusammengesetzt. Dies zu programmieren war wahrscheinlich die grösste Herausforderung des gesamten Projekts. Damit alle Teile zusammen ein ganzheitliches Bild des Velos – noch dazu in einer 360°-Ansicht – ergaben, mussten sie perfekt aufeinander abgestimmt sein. Dies erforderte Matrixbeziehungen zwischen den Objekten und zahlreiche Berechnungen.

Obligatorische Produkttypen für fahrbereite Velos

Um sicherzustellen, dass nur fahrbereite Velos konfiguriert werden, sind einige Produkttypen als obligatorisch festgelegt. Wesentliche Teile wie Reifen oder Lenker können geändert, aber nicht entfernt werden. Nur zuvor hinzugefügte Extras wie Lichter oder Schutzbleche können entfernt werden.

Die User können zwar keine wesentlichen Teile entfernen, aber sie können jedes einzelne Merkmal an ihre individuellen Vorlieben anpassen und ihre Fahrradkreation aus jedem Blickwinkel betrachten.

Erfahren Sie mehr über den preisgekrönten Konfigurator von Thömus.

3D als leistungsstarkes Werkzeug für Unternehmen

Warum Saleor die perfekte Wahl für den 3D-Bike-Konfigurator von Thömus war

Die Wahl der richtigen technologischen Plattform war ausschlaggebend für die Entwicklung eines hochmodernen 3D-Bike-Konfigurators. Wir entschieden uns für Saleor, eine robuste und vielseitige Lösung, die die Architektur und Funktionalität der Thömus-Verkaufsplattform veränderte.

So war es vor dem Umstieg auf Saleor

Zuvor hatte sich Thömus beim Velo-Verkauf auf eine Kombination aus WordPress und Offline-Verkaufsmethoden veralssen. Dieses Setup brachte einige Herausforderungen mit sich, insbesondere die Tatsache, dass die Nutzer ihre Fahrräder nicht online mit personalisierten Komponenten anpassen konnten. Angesichts der Tatsache, dass Thömus auf massgeschneiderte Velos spezialisiert ist, die auf individuelle Vorlieben und Bedürfnisse zugeschnitten sind, war diese Einschränkung ein erheblicher Nachteil. Die meisten Verkäufe erforderten umfangreiche Offline-Beratungen, bei denen das Verkaufsteam manuell Konfigurationen auf der Grundlage des Fahrstils, der Erwartungen und der Bedürfnisse der Kundschaft vorschlagen musste. Dieser Prozess war zeitaufwändig und ineffizient und führte oft dazu, dass Kunden und Kundinnen keine klare Vorstellung von ihrem individuellen Velo hatten, bis das endgültige Produkt fertig war.

Identifizierung von Pain Points und Zielen

Die Hauptprobleme waren das Fehlen eines digitalen Konfigurators, mit dem die Kundschaft ihre Velos online personalisieren konnte. Thömus benötigte eine Lösung, die den ausführlichen, persönlichen Beratungsprozess in ein interaktives, benutzerfreundliches Online-Erlebnis umsetzen würde. Das Ziel war es, der Kundschaft die Möglichkeit zu geben, ihre Velos einfach selbst zu konfigurieren. Sie sollten genau sehen können, was sie bekommen würden.

Die Umstellung auf Saleor hatte mehrere Ziele:

  • Steigerung von Leads und Verkäufen: Durch die Bereitstellung eines ansprechenderen und interaktiven Online-Konfigurators hoffte Thömus, mehr potenzielle Kunden zu gewinnen und diese in Verkäufe umzuwandeln.

  • Unterstützung des Offline-Verkaufs: Das Vertriebsteam benötigte ein Tool, mit dem Konfigurationen bei persönlichen Beratungsgesprächen präsentiert werden konnten, um das Verkaufserlebnis insgesamt zu verbessern und die Effizienz zu steigern.

  • Steigerung des Unternehmensumsatzes: Es wurde erwartet, dass ein strafferer und ansprechenderer Verkaufsprozess zu einem höheren Verkaufsvolumen und folglich zu höheren Einnahmen führen würde.

Umstellung auf API-first, modular und headless

Mindnow entschied sich für Saleor aufgrund seiner API-first, modularen und headless Architektur, die eine unvergleichliche Flexibilität und Skalierbarkeit bietet. Dieser Ansatz ermöglichte es uns, komplexe Verhaltensweisen zu modellieren und komplizierte Datenstrukturen einzurichten, die auf die spezifischen Anforderungen von Thömus zugeschnitten sind. Im Gegensatz zu herkömmlichen monolithischen Plattformen konnten wir dank Saleors Headless-Charakter verschiedene Komponenten und Funktionalitäten nahtlos integrieren.

Kunden und Kundinnen können nun ihre Velos online konfigurieren und ihre Auswahl visuell klar dargestellt sehen. Gleichzeitig kann das Thömus-Verkaufsteam die speziell entwickelte AR-Funktionalität nutzen, um konfigurierte Velos in Echtzeit zu visualisieren, sowohl online als auch im Verkaufsraum. Dies reduziert den Bedarf an langwierigen Erklärungen und bietet einen ansprechenderen und effizienteren Verkaufsprozess.

Darüber hinaus umfassten unsere Bemühungen um eine neue Plattform die Integration mehrerer Schlüsselsysteme:

  • Proprietäres ERP-System: Zur effektiven Verwaltung von Beständen, Bestellungen und Kundendaten.

  • Marketing-Automatisierungsplattform: Zur Rationalisierung und Verbesserung von Marketingmassnahmen, um personalisierte und gezielte Kampagnen zu gewährleisten.

  • E-Mail-Anbieter: Zur Erleichterung der Kommunikation und des Engagements mit Kunden und Kundinnen.

Erfahren Sie mehr über Saleor, dem Pionier der Headless E-Commerce-Plattformen.

Fazit: Atemberaubende Details sorgen für ein grossartiges Erlebnis

Anpassbare 3D-Konfiguratoren verändern die Online-Shopping-Landschaft und bieten eine Fülle von Vorteilen, die das Kundenerlebnis verbessern und das Geschäftswachstum fördern. Der Bike-Konfigurator von Thömus ist ein gutes Beispiel dafür. Dank der Bemühungen unseres Teams können an einem Velo Interessierte mit dem 3D-Konfigurator von Thömus eine breite Palette von Produkten in beeindruckenden Details erkunden.

Ich denke, was dieses Projekt besonders auszeichnet, ist der umfassende Service unseres Teams, der von der ersten 3D-Modellierung bis zur vollständigen Integration reicht. Unsere Stärke liegt in unserem umfassenden Wissen und unserer Erfahrung mit Konfiguratoren. Um die Vision Wirklichkeit werden zu lassen, waren wir bereit, über uns hinauszuwachsen. Der Übergang von 2D zu 3D lieferte wieder einmal den Beweis, dass wir bei Mindnow Dinge ganz oder gar nicht machen.

Die Integration von Saleor war ein entscheidender Schritt für Thömus: Es war der entscheidende Schritt für eine hervorragende User Experience. Die Expertise unseres Teams in Kombination mit der flexiblen und leistungsstarken Plattform von Saleor hat einen neuen Standard für E-Commerce im Fahrradhandel gesetzt.

Ich bin stolz darauf, dass Mindnow den Wandel in diesem spannenden Bereich anführt, und ich freue mich darauf, anderen Unternehmen dabei zu helfen, das volle Potenzial der 3D-Technologie auszuschöpfen.

Mindnow's involved minds:

Carina Felsberger

Senior UX Writer & Researcher

Vadim Kravcenko

CTO