Preisgekrönter 3D-Konfigurator
Thömus ist eine renommierte Schweizer Hightech-Velo-Marke, die sich der Exzellenz verschrieben hat. Im Bereich der Digitalisierung spiegelt sich dies in einer hervorragenden E-Commerce-Lösung mit einem 3D-Konfigurator wider. Für dieses Vorzeigeprojekt gewann Mindnow 2023 Bronze bei den Best of Swiss Web Awards in der Kategorie “Technology”.
Die Zeit für die digitale Transformation war gekommen
Die Mountainbikes, Rennräder und Citybikes von Thömus werden in der Schweiz entwickelt, entworfen und individuell hergestellt. 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 ist der persönliche Kundenservice in den Geschäften.
Mit dem Ausbau eines digitalen Geschäfts sollte die Erfolgsgeschichte fortgesetzt werden. Der Grund, warum es vorher keinen Thömus-Webshop gab, war die Komplexität des Produkts: Die Anpassungsmöglichkeiten eines Thömus Velos sind so umfangreich, dass im Prinzip jedes ein Unikat ist.
Der Gründer von Thömus, Thomas Binggeli, war bereit, einige mutige Schritte zu unternehmen und die digitale Transformation in Angriff zu nehmen. Als das Projekt begann, gab es im ganzen Web noch keinen ausgereiften 3D-Konfigurator in der Art, wie wir ihn bauen wollten. Unser Team war super motiviert für die neue Herausforderung.
Einblicke von Vadim Kravcenko
CTOErstklassige Headless E-Commerce-Technologie
Vor der digitalen Transformation von Thömus fand der Grossteil der Verkäufe offline statt. Der grösste Pain Point der früheren Online-Lösung war, dass die Kunden keine Velos mit personalisierten Komponenten konfigurieren konnten. Thömus verkauft keine Standard-Fahrräder, sondern solche, die individuell auf die Gewohnheiten, Erwartungen und Bedürfnisse einer Person zugeschnitten sind. Jedes Velo ist das beste für eine bestimmte Person. Daher wäre ein Standard-Webshop für Thömus auch nicht ausreichend.
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.
Ein Application Programming Interface (kurz API, deutsch: Anwendungsprogrammierschnittstelle) ist eine Möglichkeit für 2 oder mehr Programme oder Komponenten, miteinander zu kommunizieren. Es handelt sich um eine Art Software-Schnittstelle, die anderen Software-Komponenten einen Dienst anbietet.
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.
Saleor ist eine E-Commerce-Lösung, bei der das Frontend (Präsentations-Layer) eines E-Commerce-Systems vom Backend (Geschäftslogik-Layer) entkoppelt bzw. “headless” (“kopflos”) ist. Das Herzstück ist die Saleor GraphQL API, die die komplexe Logik eines Online-Shops verarbeitet. Weitere Informationen auf saleor.io.
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.
Einblicke von Vadim Kravcenko
CTOEinblicke von Bogdan Djukic
Senior Frontend DeveloperFrontend mit automatisierten Prozessen
Wir haben das Frontend des Thömus-Konfigurators mit dem React-Framework entwickelt, einer Bibliothek für Web- und native User-Interfaces. Diese ruft alle erforderlichen Daten, Preise, Links und Konfigurationsoptionen von der API ab.
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.
Einblicke von Bogdan Djukic
Senior Frontend DeveloperUnser Triumph bei den Best of Swiss Web Awards
Mit dem Thömus 3D-Konfigurator haben wir bei Mindnow einmal mehr bewiesen: “We don't just talk the talk, but walk the walk!” Bei den Best of Swiss Web Awards 2023 haben wir den Bronze-Award in der Kategorie “Technology” gewonnen.
Falls Sie die Best of Swiss Web Awards noch nicht kennen: Es ist die Crème de la Crème der internationalen Anerkennung für geniale Web- und Tech-Kreativität. Der 2001 gegründete Preis setzt die Messlatte für Qualität, fördert die Transparenz in der sich ständig weiterentwickelnden Tech-Industrie und feiert die Superstars der Web- und ICT-Branche.
Wir haben unsere Liebe zur Technologie, unser Talent zur Problemlösung und unseren Drang zur Innovation kombiniert, um diese bahnbrechende Lösung zu entwickeln. Unser Ehrgeiz und unser Mut, Risiken einzugehen und neue Wege zu gehen, haben uns diese Auszeichnung eingebracht.
Einblicke von Patrycja Habarta
Senior UX DesignerUpdate 2024: Konvertierung und Lead-Generierung
Unsere Zusammenarbeit mit Thömus begann mit einem innovativen und preisgekrönten Konfigurator und entwickelt sich ständig weiter, wobei der Schwerpunkt auf Konversionen und Lead-Generierung liegt. Selbst subtile Änderungen können einen grossen Einfluss auf die User Experience haben, was letztendlich zu mehr erfolgreichen Käufen führt.
Tieferes Engagement während des gesamten Kaufprozesses
Wir haben Ladebildschirme neu konzipiert und sie von rein technischen Elementen in Momente der Vorfreude verwandelt, die Neugierde und Engagement fördern. Während des gesamten Kaufprozesses haben wir den Endowment-Effekt konsequent umgesetzt. Durch den strategischen Einsatz von Formulierungen wie “Ihr Bike” und die Präsentation fesselnder Bilder des Traumvelos lenken wir die Aufmerksamkeit des Users auf das gewünschte Produkt und fördern so ein tieferes Gefühl von Besitz und Bindung.
Der Endowment-Effekt besagt, dass Menschen eher dazu neigen, einem bestimmten Gegenstand positive Eigenschaften zuzuweisen, wenn sie ihn besitzen. Wir neigen dazu, unsere eigenen Dinge vorzuziehen und messen ihnen auch einen höheren Wert bei.
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.
Einblicke von Patrycja Habarta
Senior UX DesignerEinblicke von Vadim Kravcenko
CTOVollkommen natives AR-Erlebnis
Die neueste Funktion, die wir dem Thömus-Konfigurator 2024 hinzugefügt haben, ist Augmented Reality (AR). User können ihr Traumvelo vollständig anpassen und es in voller, realistischer Grösse in der von ihnen gewählten Umgebung betrachten. Alle Details sind hochauflösend und können genau inspiziert werden, als würde das Bike wirklich vor einem stehen.
Die AR-Funktionalität wird durch die Flexibilität des Systems in Bezug auf die Granularität der an die Szene angehängten 3D-Modelle ermöglicht. Jedes Teil kann separat ausgetauscht und als Teil des Fahrrads in einer vollständig nativen AR Experience gerendert werden.
Die AR-Vorschau des konfigurierten Bikes kann auch geteilt werden, falls Kund*innen auch andere nach ihrer Meinung zu ihrem Velo fragen möchten.
Eine vollständig angepasste Konfiguration eines Thömus Bikes in voller, realistischer Grösse als Vorschau auf unserem Büro-Balkon
Einblicke von Vadim Kravcenko
CTOEin Wendepunkt für Velo-Fans innerhalb und ausserhalb der Schweiz
Der Thömus 3D-Konfigurator ist keine gewöhnliche E-Commerce-Lösung sondern ein absoluter Game-Changer für alle Velo-Fans. User haben demit die einzigartige Möglichkeit, ihr Bike bis ins kleinste Detail zu gestalten, vom Rahmen über die Reifen bis hin zum Sitz. Und das alles geschieht in Echtzeit, mit präzisen 3D-Visualisierungen direkt im Browser. Ein Geniestreich, wenn man so sagen darf.
Auch die Technologie hinter der Schnittstelle ist ein grosser Vorteil für Thömus. Das Schweizer Familienunternehmen baut sein Verkaufsstellennetz weiter aus und der umfassende 3D-Konfigurator mit seinen Schnittstellen zu internen Systemen ist dabei ein entscheidender Vorteil. Der E-Commerce-Stack ermöglicht eine Migration auf jeden Server und damit eine einfache horizontale Skalierung. So kann der Konfigurator jederzeit problemlos an neue Anforderungen von Franchisepartnern und Zielmärkten angepasst werden.
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.
