Informationsarchitektur & UX Design

Wie die meisten unserer Projekte startete auch dieses mit einem Workshop: Gemeinsam mit hostettler moto haben wir Zielgruppen, Ziele, Erwartungen und die geplante Zusammenarbeit intensiv besprochen. Zusammen mit unseren vorgängigen Recherchen ergab sich ein klares Bild, und eine Erkenntnis stach heraus: Die bisherige Struktur der Website war überholt.

Auf der alten Website waren alle Inhalte und Seiten jeweils einem Standort untergeordnet. Ein Fahrzeug oder eine Marke existierte dadurch bis zu 8 Mal, einmal pro Standort. Statt sich zu ergänzen, konkurrenzierten sich diese Duplikate gegenseitig: um die Aufmerksamkeit der Besucher:innen, ebenso wie um die Sichtbarkeit in den Suchresultaten.

Die neue Informationsarchitektur musste deshalb drei Zielgruppen gleichzeitig überzeugen:

  • die Redaktion, die Inhalte effizient und ohne viel Aufwand pflegen will,
  • die Besucher:innen, die Inhalte und Ansprechpersonen ohne Umwege finden sollen,
  • und Suchmaschinen und KI-Assistenten (LLMs), welche die Inhalte analysieren und passend ausspielen.
Unterschiedliche Screenshots der neuen Webseite, auf welchen man Standortseiten sieht, Inhaltsseiten zu Services und auch Filtermöglichkeiten von Fahrzeugmodellen und eine Detailansicht eines Fahrzeugmodells
Unterschiedliche Screens der neuen Webseite.

Standorte: wichtig, aber nicht mehr das erste Ordnungsprinzip

Schnell war klar: Als oberstes Ordnungsprinzip haben die Standorte ausgedient, für die einzelnen Besucher:innen bleiben sie aber ein zentraler Faktor. Deshalb fragt die Website früh in der User-Journey nach dem Lieblingsstandort. Die Wahl bleibt über die aktuelle Session hinaus gespeichert und wird an diversen Stellen der Website wiederverwendet.

Bei der Standortauswahl werden die acht Filialen in einer Liste angezeigt und in einer zweiten Spalte die verschiedenen Marken.
Wenn die Besucher:innen über die Standorte fahren, werden die dort angebotenen Marken hervorgehoben. Dasselbe im umgekehrten Fall: Fährt jemand mit der Maus über Ducati, werden die passenden Standorte angezeigt.

Menüführung: fünf Punkte, klare Prioritäten

Die Hauptnavigation kommt mit fünf Punkten aus. «Fahrzeuge & Marken» steht an erster Stelle, weil dieser Bereich alle Anspruchsgruppen betrifft, direkt gefolgt von den Standorten. Die weiteren Angebote sind in «Services» und «Erlebnisse» gruppiert: Zu den Erlebnissen gehören etwa die Motorradmiete, Probefahrten, Events und Geschenkkarten. Der Kontakt rundet die Navigation ab.

Überall dort, wo Besucher:innen mit einem Standort oder der Zentrale in Kontakt treten, wählt die Website auf Basis des Lieblingsstandorts bereits vor, an welche Filiale die Anfrage geht. Das entlastet die Zentrale spürbar: Anfragen landen direkt am richtigen Ort, statt erst manuell zugeteilt werden zu müssen.

Mehrere Ansichten der Haupt-Navigation mit den Mega-Dropdowns

Bei der Probefahrt-Anfrage beispielsweise ist der Standort schon vorausgefüllt. So müssen sich auch die Besucher:innen keine Gedanken machen. Mit einer Ausnahme: Wenn die gewünschte Marke am Lieblingsstandort nicht verfügbar ist, bleibt die Vorauswahl leer, und es stehen die weiteren passenden Standorte zur Auswahl.

Navigationspfade: zwei Einstiege, ein Ziel

Aus der Recherche wussten wir: Beim Motorradkauf reagieren Menschen stark auf Marken. Die Marke ist deshalb einer von zwei Einstiegspunkten zu den Fahrzeugen und Modellen. Der zweite sind die Kategorien: Roller, sportliches Motorrad, Naked Bike und mehr. So müssen sich Besucher:innen nicht für einen Weg entscheiden, sondern wählen den Pfad, der sie am schnellsten ans Ziel bringt.

Content-Evaluation: genug für eine Entscheidung, nicht mehr

Vom Konzept bis in die Designphase haben wir uns immer wieder dieselbe Frage gestellt: Welche Inhalte brauchen Besucher:innen, um eine gute Entscheidung zu treffen, ohne von Informationen überfordert zu werden?

Ein Resultat davon sind die neu strukturierten Fahrzeugdaten: Spezifikationen erscheinen sinnvoll gruppiert statt als lange Liste roher Werte. Und jede Fahrzeugseite enthält Elemente, die Käufer:innen in ihrer Entscheidung unterstützen, etwa die positiven Google-Bewertungen des jeweiligen Standorts.

Ein Screenshot, auf welchem eine Liste von Daten- und Spezifikationen eines Motorradmodells zu sehen sind, und gleichzeitig auch ein emotionales Bild eines Motorrades.
Das Design liefert eine Mischung aus Emotionen und sauberer Darstellung wichtiger Daten und Spezifikationen.

Website

hostettler moto ag

Konzept, Informationsarchitektur, Design, Frontend, WordPress, Schnittstellen

2026 – Heute

Eine Website, die sich selbst aktuell hält

Aktuelle und korrekte Inhalte für die Besucher:innen, ohne Aufwand für die Redaktion: der Traum von vielen, hier die Realität.

Fahrzeug-Schnittstelle

Eine Übersicht der Schnittstellen-Anfragen im WordPress Backend inklusive visueller Darstellung der Abfragen.

Mittlerweile stehen über 400 Motorradmodelle auf der Website, jedes mit detaillierten Angaben zur Ausweiskategorie und zum Preis sowie mit Spezifikationen zu Motor, Grösse und Leistung. All diese technischen Daten für so viele Modelle von Hand zu pflegen, wäre für die Redaktion ein riesiger Aufwand.

Das Herzstück der Website ist deshalb die Anbindung einer Schnittstelle für genau diese Daten. Die Redaktion muss nichts mehr von Hand erfassen oder nachführen: Eigens entwickelte Funktionen sprechen die Schnittstelle an und führen regelmässige Imports durch, damit die Angaben stets aktuell sind. Wo es sich lohnt, greift die Redaktion trotzdem ein, hebt einzelne Modelle hervor oder ergänzt zusätzliche Informationen. Immer mit der Gewissheit: Auch ganz ohne redaktionelle Arbeit bleiben die Modelle aktuell.

Google-Schnittstelle für Öffnungszeiten & Maps

Auch die Öffnungszeiten verlangen keine Handarbeit. Sie kommen pro Filiale direkt aus dem Google-Unternehmensprofil, inklusive Feiertagen und Sonderöffnungszeiten. Niemand muss vor dem 1. August oder vor Weihnachten prüfen und hinterlegen, welche Öffnungszeiten gerade gelten: Was bei Google steht, steht auf der Website. Die aktuelle Öffnungszeit ist zudem bei jeder Filiale direkt im Intro sichtbar. Und natürlich zeigt jede Filialseite eine Karte, direkt mit Google Maps verlinkt, damit Besucher:innen ihre Fahrt zur Filiale gleich planen können.

Ein Screenshot einer Sektion auf hostettler-moto.ch, auf welcher die Kontaktdaten, Öffnungszeiten und Standort-Karte der Filiale in Zürich Nord sichtbar sind.
Die Öffnungszeiten kommen direkt von Google Maps.

Kurzer Tipp für Entwickler:innen, welche die Google-Schnittstelle anbinden wollen: regularOpeningHours vs. currentOpeningHours. Gern geschehen.

Standort-Kontaktdaten

Die Kern-Kontaktdaten pro Filiale, etwa E-Mail-Adresse und Telefonnummer, werden an einem zentralen Ort erfasst und aktualisieren sich bei Änderungen auf der ganzen Website. Die Frage «Habe ich das jetzt überall angepasst?» stellt sich nicht mehr, und niemand muss danach suchen: einmal ändern, überall korrekt, für alle Besucher:innen. Eigens entwickelte Elemente und Blöcke bringen die Kontaktdaten überall dorthin, wo sie relevant sind. Sie respektieren dabei den Lieblingsstandort und zeigen automatisch die Angaben der persönlichen Filiale, ganz ohne Suchen.

Übersetzungen

Die Website existiert zweisprachig, auf Deutsch und Französisch. Bei den Fahrzeugen liefert die Schnittstelle die französischen Inhalte gleich mit, wo vorhanden. Alle übrigen Inhalte müssen übersetzt werden, und aus anderen Projekten wissen wir, dass genau hier oft eine Hürde liegt. Deshalb lassen sich ganze Seiten und Inhalte mit einem Klick im Backend übersetzen, über die Schnittstellen von DeepL. So setzt die Redaktion die Mehrsprachigkeit mit minimalem Aufwand um.

AI-Support

Meta-Descriptions und kurze Zusammenfassungen muss niemand mehr von Hand schreiben. Ein Klick genügt, und eine passende Meta-Description ist hinterlegt, ohne dass sich die Redaktion den Kopf darüber zerbrechen muss, wie man knackig und auffordernd formuliert. Im Hintergrund arbeitet dafür eine Schnittstelle zu unserem eigenen Dienst «Skim», welcher seinerseits wiederum unterschiedliche LLMs integriert hat.

Details und mehr

Events

Auf der Website erfasst die Redaktion Events, die eine Anmeldung erfordern. Weil die Plätze teilweise limitiert sind, zählt ein Zähler nach jeder Anmeldung automatisch herunter, und ist ein Event ausgebucht, verschwindet die Anmeldemöglichkeit von selbst. Den Wert kann die Redaktion jederzeit anpassen, etwa wenn jemand telefonisch absagt oder sich direkt in der Filiale anmeldet.

Sogar für den Fall, dass sich zwei Personen in derselben Minute für den letzten Platz anmelden wollen, ist vorgesorgt: Die zweite Anmeldung geht nicht einfach durch, sondern die Besucher:innen werden freundlich darauf hingewiesen, dass ihnen in der Zwischenzeit jemand zuvorgekommen ist. Auch damit wird die Redaktion weiter entlastet, ganz ohne manuelles Nachzählen.

Filter via Interactivity API

Eine Ansicht von mehreren Filter-Möglichkeiten im WordPress-Backend

Die Filter bei den Fahrzeugmodellen basieren auf der relativ neuen Interactivity API von WordPress. Gleichzeitig werden gewisse Daten aber auch Live und direkt von der externen Schnittstelle geholt.

Um den Besucher:innen passende Landingpages bieten zu können, haben wir diverse Möglichkeiten entwickelt, mit welchen vordefinierte Filter und Einstellungen gesetzt werden können, um bspw. ein Datengrid mit 24 Modellen der Marke Ducati zu bieten, oder 6 zufällige Modelle einer speziellen Kategorie. Diese Möglichkeiten stehen direkt im WordPress-Block Editor in der Sidebar zur Verfügung, womit diese Flexibilität auch noch eine gute UX für die Redaktion bietet.

Auch ein guter Footer darf nicht fehlen

Der Footer begleitet die Besucher:innen auf jeder Seite ihrer Journey. Gleichzeitig ist er die letzte Chance, passende und weiterführende Links anzubieten, wenn sie das Ende einer Seite erreicht haben. Deshalb präsentiert er unter anderem:

  • den Newsletter,
  • die angebotenen Marken, ein weiteres Mal, für die Vertrauensbildung,
  • die beiden Navigationspfade über Fahrzeugkategorien und Marken,
  • und selbstverständlich nochmals die Standorte.
Der Footer von hostettler-moto.ch mit verschiedenen Schnell-Navigationen zu Fahrzeug-Kategorien oder Marken, und auch ein Newsletter-Formular

Dass die visuelle Balance am Ende so gut aufgeht, hätten wir zum Start selbst nicht gedacht. Freut uns aber natürlich ungemein.

Wie so oft fehlt es nicht an neuen und weiteren Ideen, und die Zusammenarbeit geht weiter. Wir freuen uns, das Team von hostettler moto ag langfristig zu begleiten, und sind gespannt, was die Zukunft bringt!