Preisgekrönter 3D-Konfigurator

Die Zeit für die digitale Transformation war gekommen

Thömus Mountain-, Renn- und Citybikes werden in der Schweiz entwickelt, designt und individuell produziert. Unter dem Motto «Swiss made to fascinate» steht das Unternehmen seit über 30 Jahren für Hightech. Ein weiterer Grund für das gute Image von Thömus war der persönliche Kundenservice in den Filialen.

Die Expansion des digitalen Geschäfts sollte die Erfolgsgeschichte fortsetzen. Der Grund, warum es zuvor keinen Thömus-Webshop gab, war die Komplexität des Produkts: Die Konfigurationsmöglichkeiten eines Thömus-Velos sind so umfangreich, dass im Grunde jedes einzelne ein Unikat ist.

Thömus-Gründer Thomas Binggeli war bereit, mutige Schritte zu gehen und die digitale Transformation anzupacken. Zum Zeitpunkt des Projektstarts gab es noch keinen ausgereiften 3D-Konfigurator im Internet in der Form, wie wir ihn bauen wollten. Unser Team war hochmotiviert für die neue Herausforderung.

Erstklassige Headless-E-Commerce-Technologie

Vor der digitalen Transformation von Thömus fand der Grossteil des Verkaufs offline statt. Das Hauptproblem der bisherigen Online-Lösung war, dass Kunden keine Velos mit personalisierten Komponenten konfigurieren konnten. Thömus verkauft keine Standardvelos — die meisten werden auf die Gewohnheiten, Erwartungen und Bedürfnisse einer Person zugeschnitten.

API-Entwicklung

Die grösste Herausforderung war die grosse Menge an unstrukturierten Produktdaten. Wir mussten zunächst eine API-Integration entwickeln, die alle Daten sowohl mit dem ERP-System als auch mit der Thömus-Website synchronisiert. Dafür erstellten wir eine separate AirTable-Umgebung zur Speicherung aller 3D-Modelle, Positionsdaten und visuellen Verknüpfungen.

Architektur mit Saleor

Wir wechselten von WordPress auf die Saleor-Plattform, um die Anzahl der Leads und Verkäufe für unseren Partner Thömus zu steigern. Saleor ist eine E-Commerce-Lösung, bei der das Frontend vom Backend entkoppelt ist — ein sogenannter Headless-Ansatz. Dank des API-first-Ansatzes können wir jedes gewünschte Verhalten modellieren und komplexe Datenstrukturen aufbauen.

API-Entwicklung

Das grösste Problem bei der Entwicklung des Konfigurators war die grosse Menge an unstrukturierten Produktdaten, die die Velos mit sich brachten. Wir mussten zunächst eine API-Integration entwickeln, die alle Daten sowohl mit dem Enterprise Resource Planning (ERP) als auch mit einer Schnittstelle auf der Thömus-Website synchronisiert. Also erstellten wir eine separate AirTable-Umgebung, um alle 3D-Modelle, Positionsdaten und visuellen Verknüpfungen zu speichern. Die geeignete Umgebung ermöglichte es uns, den Entwicklungsprozess des 3D-Designs zu beschleunigen.

Architektur mit Saleor

Wir wechselten von WordPress zur Saleor Plattform, um die Anzahl der Leads und Verkäufe für unseren Partner Thömus zu erhöhen. Neben einem ausgefeilten Webshop sollte das Verkaufsteam in der Lage sein, den Bike-Konfigurator bei der Beratung von Kunden zu verwenden.

Wir haben uns für Saleor entschieden, weil es einen modularen und Headless API-Ansatz verfolgt. Dadurch können wir jedes beliebige Verhalten modellieren und komplexe Datenstrukturen einrichten, die den Anforderungen von Thömus entsprechen. Wir haben Integrationen mit einem proprietären ERP-System, mit einer Marketing-Automatisierungs-Plattform und mit E-Mail-Anbietern erstellt.

Dieses Headless E-Commerce-Framework dient nun als Herzstück der digitalen Experience von Thömus. Es ermöglicht den Usern, ihr Traumvelo nach ihren individuellen Bedürfnissen zu konfigurieren und wird vom Verkaufsteam genutzt, um den Unternehmensumsatz zu steigern, online und offline.

Frontend mit automatisierten Prozessen

Wir entwickelten das Frontend des Thömus-Konfigurators mit dem React-Framework. Dieses ruft alle notwendigen Daten, Preise, Links und Konfigurationsoptionen über die API ab.

Die API und die vorhandenen Daten ermöglichten es uns, viele Prozesse im Content-Management zu automatisieren. Zum Beispiel wird das 3D-Bild des konfigurierten Velos automatisch erstellt und im nachfolgenden Bestellprozess angezeigt — auch in der Bestätigungs-E-Mail.

Durch die Verwendung der API und vorhandener Daten konnten wir viele Prozesse im Content Management automatisieren. Zum Beispiel wird das 3D-Bild des konfigurierten Bikes automatisch erstellt. Es wird dann im anschliessenden Bestellvorgang angezeigt. Das bedeutet, dass die Kunden in der Bestätigungs-E-Mail nicht nur den Produktnamen des bestellten Produkts sehen, sondern auch ein detailliertes Bild ihres personalisierten Bikes.

Um dies zu ermöglichen, haben wir im Frontend eine Funktion hinzugefügt, die ein statisches 3D-Bild mit den individuell ausgewählten Teilen rendert. Dann haben wir das CMS so konfiguriert, dass es automatisch ein hochwertiges PNG-Bild erstellt und in der Datenbank speichert. In den Bildern sind die dunklen Farben der Bikes so eingestellt, dass sie aufgehellt werden und sich visuell von dem teilweise dunklen Hintergrund abheben.

Unser Triumph am Best of Swiss Web Award

Mit dem Thömus 3D-Konfigurator haben wir bei Mindnow einmal mehr bewiesen: Wir reden nicht nur, wir liefern! Am Best of Swiss Web Award 2023 gewannen wir den Bronze Award in der Kategorie «Technology».

Der Best of Swiss Web Award ist die höchste Auszeichnung für Web- und Tech-Kreativität in der Schweiz. Seit 2001 setzt der Award Massstäbe für Qualität und Innovation. Wir kombinierten unsere Technologie-Leidenschaft, Problemlösungskompetenz und Innovationsdrang, um diese bahnbrechende Lösung zu entwickeln.

Update 2024: Conversion und Lead-Generierung

Unsere Zusammenarbeit mit Thömus begann mit einem innovativen, preisgekrönten Konfigurator und entwickelt sich stetig weiter — mit Fokus auf Conversions und Lead-Generierung. Selbst subtile Änderungen können einen grossen Einfluss haben.

Wir haben Ladebildschirme neu gedacht: Von reinen technischen Elementen zu Momenten der Vorfreude. Entlang der gesamten Customer Journey setzen wir konsequent auf Personalisierung und nutzen den Endowment-Effekt.

Zudem integrierten wir eine Ratenzahlungsoption. Durch die Hervorhebung des Monatspreises — der als erschwinglicher wahrgenommen wird — bei gleichzeitiger Transparenz über die Gesamtkosten, konnten wir die Conversion Rate signifikant steigern.

Einfachere Erschwinglichkeit durch Ratenzahlungen

Der Preis ist für Kunden oft ein wichtiger Faktor bei der Kaufentscheidung. Die Bikes von Thömus, die für ihre aussergewöhnliche Qualität bekannt sind, haben oft einen höheren Preis, was potenzielle Käufer zögern lassen kann. Um diese Herausforderung zu meistern, schlugen wir die Einführung von Ratenzahlungen vor. Daraufhin arbeitete Thömus mit bob Finance zusammen, um den Kunden die Möglichkeit zu geben, ihre Einkäufe in Raten zu bezahlen.

Durch die Hervorhebung des monatlichen Preises, der als erschwinglicher wahrgenommen wird, und die gleichzeitige Transparenz der Gesamtkosten, haben wir die Konversionsraten deutlich erhöht. Ausserdem bieten wir direkt unter dem Gesamtpreis, einem Punkt, dem User laut Eye-Tracking-Tests die meiste Aufmerksamkeit schenken, eine weitere Option für diejenigen, die noch nicht zum Kauf bereit sind. Indem wir sie dazu bringen, ein Angebot anzufordern, erfassen wir ihre Kontaktinformationen, so dass Thömus ihnen später persönliche Unterstützung bieten kann.

Unser Ansatz beruht in diesem Fall, wie auch bei anderen Projekten, auf einer kontinuierlichen Reise der Verbesserung und Innovation, die mit dem Wachstum und den technologischen Fortschritten unserer Partner einhergeht. Indem wir auf die unterschiedlichen Bedürfnisse und Vorlieben der User eingehen, wollen wir sicherstellen, dass jede Interaktion mit der Marke einen bleibenden und positiven Eindruck hinterlässt und letztlich zu effektiven Konversionen führt.

Vollständig natives AR-Erlebnis

Das neueste Feature, das wir 2024 zum Thömus-Konfigurator hinzugefügt haben, ist Augmented Reality (AR). Nutzer können ihr Traumvelo vollständig konfigurieren und in realistischer Grösse in ihrer gewählten Umgebung betrachten — alles direkt im Browser.

Die AR-Funktionalität ist möglich dank der Systemflexibilität bei der Granularität der 3D-Modelle. Jedes Teil kann separat ausgetauscht und als Teil der Szene gerendert werden. Die AR-Vorschau kann auch geteilt werden.

Ein Game-Changer für Velo-Enthusiasten

Der Thömus 3D-Konfigurator ist keine gewöhnliche E-Commerce-Lösung — er ist ein absoluter Game-Changer für alle Velo-Enthusiasten. Er gibt Nutzern die einzigartige Möglichkeit, ihr Velo bis ins kleinste Detail zu gestalten.

Die Technologie hinter dem Interface ist auch ein enormer Vorteil für Thömus als Unternehmen. Das Schweizer Familienunternehmen erweitert stetig sein Netzwerk an Verkaufsstellen, und der umfassende 3D-Konfigurator ermöglicht es Franchise-Partnern im Ausland, das gleiche persönliche Kauferlebnis wie in der Schweiz anzubieten.

Der persönliche Service von Thömus für jeden Markt

Der Bike-Konfigurator macht es viel einfacher, Partner im Ausland zu gewinnen, die ihren Kundinnen und Kunden das individuelle Kauferlebnis von Thömus bieten wollen. Die detaillierte 360°-Produktansicht eröffnet auch die Möglichkeit, Schweizer Hightech-Velos in Ländern zu verkaufen, in denen ein physisches Geschäft nicht rentabel wäre.

So können Franchisepartner im Ausland denselben persönlichen Service bieten, den Kunden und Kundinnen in der Schweiz erhalten. Es ist immer eine nahtlose Erfahrung – egal auf welchem Markt.