website-bike-configurator

Webseite & Bike-Konfigurator

Kommunikationsplattform und Bikekonfigurator für Thömus

  • innovation workshops
  • research, analysis & product strategy
  • ideation
  • digital transformation
  • digital content strategy
  • interaction & interface design
  • design system
  • technology & software engineering

Thömus, der Berner Bike-Produzent, erlaubte uns ihren Webauftritt gemeinsam mit ihnen zu überdenken und sowohl konzeptionell wie auch visuell zu überarbeiten.

herausforderung der inhaltsbreite

Für die Konzeption stellte uns die speziell breite und zugleich tiefe Angebotspalette von Thömus vor folgende Herausforderungen:

  • klare Kommunikation
  • einfache Benutzerführung
  • eine Vereinfachung der Inhaltsarchitektur

Die Bikes von Thömus werden nicht nur selber entwickelt und produziert, sondern auch spezifisch für jeden Kunden aufgebaut. Nebst der individuellen Konfigurationsmöglichkeit gibt es passend zum Bike Bekleidung, Kurse, Rennen und eine Vielzahl an Events.

Services oder allfällige Reparaturen können direkt auf dem Bauernhof in Oberried oder im urbanen Shop in Bern in Auftrag gegeben werden.

Und mit Thömus Racing Team, werden sogar Weltcup-Rennen gefahren, Weltmeistertitel geholt und internationale Erfolge gefeiert. Dies alles und noch einiges mehr sollte natürlich auch via Website erzählt werden können.

konzept- & designlösung

Das erarbeitete Bedienkonzept erlaubt dem Nutzer, die einzelnen Rahmen in den entsprechenden Kategorien zu finden und zu seinem individuellen Bike zusammenzubauen. Zu den einzelnen Modellen bzw. Rahmen findet der Kunde die detaillierten Informationen sowie passende Kurse, Events, Accessoires und Bekleidung.

Mit dem Konfigurator wurde eine Lösung entwickelt, welche dem Kunden einerseits eine Auswahl an vorgefertigten Bikes anbieten kann und andererseits die vollumfänglichen Anpassung aller Komponenten erlaubt.

visuelle & technische herausforderung

Das Ziel war aber nicht nur für die Kunden von Thömus einen schönen und benutzerfreundlichen Webauftritt zu schaffen, sondern auch den Redakteuren der Seite eine möglichst effiziente und individuell anpassbare Lösung bereitzustellen.

Dies stellte sowohl das Design, wie auch die technische Umsetzung vor folgende Herausforderung: ein frei editierbares Layout zu erlauben, sowie Inhalte von «Fremdanbietern» korrekt einzubinden und darzustellen.

welche komponenten können auf welchem bike verbaut werden?

Thömus baut eine Vielzahl an unterschiedliche Bike-Modelle für verschiedene Einsatzgebiete mit mehreren Rahmengrössen pro Modell. Der Kunde kann aus über 50 verschiedenen Rahmen wählen und die zu verbauten Komponenten bestimmen. Er kann sich so ein Bike zusammenstellen, das genau seine Bedürfnisse abdeckt. Allerdings können nicht alle Komponenten bei jedem Rahmentyp verbaut werden und es kann auch sein, dass eine Komponente je nach Rahmen einen anderen Endpreis hat (z.B. weil zusätzliche Teile zur Montage am Rahmen gebraucht werden).

Um zu verhindern, dass (wie bisher) Offertenanfragen mit nicht möglichen Kombinationen von Komponenten und Rahmen bei Thömus eintreffen, haben wir dem Konfigurator beigebracht, welche Kombinationen möglich sind. Dadurch bringt der neue Konfigurator nicht nur dem interessierten Besucher der Webseite einen Mehrwert, sondern kann auch von Thömus’ Verkäufern, die noch nicht jede Kombinationsmöglichkeit auswendig kennen, im Verkaufsgespräch genutzt werden.


Um den Redakteuren bei Thömus die Arbeit zu erleichtern, haben wir uns entschieden nicht bei jeder Komponente anzugeben, wo sie verbaut werden kann. Wir haben entschieden, die logischen Zusammenhänge, die ein Zusammenspiel mehrerer Komponenten ermöglichen, respektive verhindern, in den Konfigurator einfliessen zu lassen. Das Herausarbeiten dieser logischen Zusammenhänge war aufgrund der grossen Anzahl an Rahmen, Komponenten und möglichen Kombinationen eine der Hauptherausforderungen dieses Projekts.

Für die technische Umsetzung haben wir die WordPress REST API so angepasst, dass alle nötigen Informationen dort zur Verfügung stehen, wo sie gebraucht werden. Das Frontend des Konfigurator wurde mit React realisiert, zusammen mit unseren Nachbarn von Zeilenwerk.

termine für veranstaltungen und kurse zentral verwalten

Thömus organisiert schon länger Events und Bikekurse und verfügt über ein online Eventtool, auf dem die Events und Kurse gebucht werden können. Auf diesem Tool werden die Durchführungsdaten, Kursleiter, Veranstaltungsort und viele weitere Informationen bereits erfasst. Auf der Webseite sollen die Kurse und Events verlinkt und mit zusätzlichen Informationen und Bildern ergänzt werden.
Um ein doppeltes Eingeben von Daten zu umgehen und gleichzeitig Fehler durch unterschiedliche Eingaben zu verhindern, haben wir die Eventtool API angezapft. Im WordPress Backend haben wir die Möglichkeit integriert, beim Erfassen eines Events aus einer Liste den korrespondierenden Event vom Eventtool auszuwählen. Dies ermöglicht es uns z.B. auf den Kursseiten alle geplanten Kurse derselben Stufe mit Datum, Kursleiter, Kursort und sogar der Anzahl freier Plätze anzuzeigen.

eine simple lösung für kleine shops

Thömus bietet nebst Bikes, Kursen und Events weitere Produkte an, die zum Biken verwendet werden. Diese werden in den Ladengeschäften, aber auch über die Webseite verkauft. Um das Budget für den nicht allzu komplexen Shop nicht zu strapazieren, haben wir uns entschieden, anstatt einer komplexen eCommerce Lösung, Snipcart zu verwenden. Snipcart braucht grob gesagt nur einen Button, der je nach Produkt Daten-Attribute enthält. Mit Hilfe von JavaScript verändern wir diese Attribute, wenn die Grösse oder Farbe des Produkts verändert wird. Im Backend haben wir Custom Post Types für Shopprodukte erstellt und mit  Advanced Custom Fields eine Maske gebaut, in der alle relevanten Informationen über die Produkte eingegeben werden können.

das zukünftige wordpress-editor-erlebnis schon heute

Das WordPress-Team arbeitet momentan an einem neuen Editor mit Namen Gutenberg, er wird mit WordPress 5.0 als Standard eingeführt werden. Der neue Editor bietet dem Redakteur durch den Einsatz von unterschiedlichen Inhaltsblöcken erweiterte Gestaltungsmöglichkeiten der Seiten. Da sich Thömus grössere Freiheiten für das Erstellen von Inhalten gewünscht hat, haben wir uns entschieden, Gutenberg schon heute einzusetzen. Natürlich ist Gutenberg momentan noch nicht perfekt und erforderte noch einiges an Arbeit unseres Entwicklungsteams. Das grosse Potential des neuen Konzepts mit Inhaltsblöcken lässt sich aber bereits heute erkennen.

Kunde: Thömus

Website besuchen
Projekttyp
  • E-Commerce
  • Web Application
  • Responsive Website
Prototyping & Testing
  • Clickable Prototype
Prozesse
  • KanBan
  • Design Thinking
Technologie
  • Wordpress
  • Atomic Theme
  • jQuery
  • SASS
  • MySQL
  • PHP
  • REST API
  • React
  • Gutenberg
  • Snipcart