sbb.ch gewann den Master of Swiss Web 2018. Florian Stürzinger, Designer-Urgestein bei Unic, erzählt im Interview über die Herausforderungen beim Design-Prozess für den Relaunch von sbb.ch. Und er erklärt, warum der Fokus des Designs ganz auf den Menschen und ihren Bedürfnissen lag.
Reduzierung aufs Wichtigste, Responsiveness und Human Centred Design
Florian, beim Design-Konzept für den Relaunch von sbb.ch seid ihr neue Wege gegangen. Was waren für dich die grössten Herausforderungen?
sbb.ch gehört zu einer der meistbesuchten Websites in der Schweiz. Die Reduzierung auf die wesentlichen Nutzerbedürfnisse auf der Startseite war eine zentrale Herausforderung. Und es brauchte Durchhaltewillen, um dieses Prinzip während der langen Projektzeit immer wieder aufs Neue zu verteidigen.
Eine weitere Herausforderung war die Thematik Responsiveness. Responsive Websites sind zwar schon lange etabliert und werden heutzutage von den Benutzern als selbstverständlich erachtet. Neu bei sbb.ch war aber die Erweiterung der Breakpoints auf 4/5k-Bildschirme, was wir mit einer Faktor-Rechnung eigenständig und neuartig gelöst haben. Natürlich standen diese Viewports nicht im Vordergrund, aber es gibt noch nicht viele Websites, welche auch in diesen Auflösungen derart ausgewogen und benutzerfreundlich daherkommen. Viel Herzblut haben wir natürlich auch in die Darstellung auf Smartphones gesteckt. Die seit dem Relaunch massiv in die Höhe gestiegenen mobilen Zugriffe zeigen, dass wir hier den Fokus richtig gesetzt haben.
Das neue Design fokussiert sich auf den Brand SBB. Wie habt ihr die Markenwelt der SBB auch online wieder gestärkt?
Mit dem Relaunch von sbb.ch wurden zum ersten Mal die neuen Markenwerte in die digitale Welt transportiert. Entlang des Human-Centered-Design-Prozesses standen die Services aber im Vordergrund, da die vielen unterschiedlichen Bedürfnisse einer gesamtschweizerischen Zielgruppe abgedeckt werden sollten. Wir haben von Beginn weg den Menschen und seine Bedürfnisse ins Zentrum der Website gestellt. Darin spiegeln sich letztendlich auch die Markenwerte wieder.
Zum Stichwort Services: Auf der neuen Seite finden sich immer wieder überraschende Details. Zum Beispiel die klassische SBB-Uhr. Wie seid ihr auf solche Ideen gekommen?
Aufgrund von Zugriffszahlen wussten wir, dass die bisherige SBB-Uhr ein häufig besuchtes Feature war. Demnach wollten wir dieses zeitgemäss ins Szene setzen. Für das Benutzererlebnis relevante Features wie der Next-Best-Click oder das Storytelling bei inspirativen Bereichen wie Freizeit & Ferien standen aber im Vordergrund.
Wie habt ihr diese Service Features umgesetzt?
Die Idee zum Next-Best-Click ist im Design entstanden. Wir wussten, dass sich die Inhalte im Umfang massiv unterscheiden und wir dies auch nicht in der Hand haben würden. Dabei entstand die Idee, den Call-to-Action immer im sichtbaren Bereich zu platzieren, egal ob man sich am Anfang oder am Ende des Inhalts befindet, und egal, mit welchem Ausgabegerät man gerade unterwegs ist. Daraus ist der Next-Best-Click entstanden.
Der Fahrplan selber beschreibt das Herzstück der SBB-Website. Wir haben gestalterisch natürlich von der bestehenden SBB-App profitiert. Aber die Adaption auf unterschiedlich grosse Bildschirme war, unter Berücksichtigung der Eigenheiten von einzelnen Ausgabegeräten, eine sehr anspruchsvolle Aufgabe. Mit der vereinfachten, initialen Darstellung der Fahrplan-Maske auf der Startseite sind wir schon in die Projekt-Ausschreibung gegangen und haben so auch für andere Einstiegs-Inhalte Raum geschaffen.
Mit der verstärkten Wahrnehmung des Bereiches Freizeit & Ferien wollten wir den primären Fokus auf den Fahrplan durchbrechen. Wenn man an sbb.ch dachte, hatte man immer nur den Fahrplan im Kopf. Mit dem Relaunch wollten wir sbb.ch auch als Reiseportal etablieren. Also haben wir eine individuelle visuelle Sprache für die vielen Reiseangebote entwickelt. So lässt sich dieser inspirative Bereich herrlich inszenieren, gleichzeitig aber auch mit den informativen Inhalten kombinieren.
Manche Ideen sind auch erst viel später dazugekommen und wurden kurzerhand integriert, wie z.B. den Touch-Fahrplan, den man bereits aus der SBB-App kennt.
Ein modulares Design-System und die Herausforderungen der Barrierefreiheit
Was war für dich persönlich das Besondere an diesem Projekt? Was war anders als bei deinen bisherigen Design-Konzepten?
Der Start des Projektes war eine Mischung aus Vertrauen gewinnen und möglichst alle Stakeholder abholen. Die ersten zwei Monate haben wir uns mit der Startseite und der Navigation im Kreis gedreht. Und am Ende sind wir doch wieder bei der Ursprungsidee gelandet. Enorm hilfreich dabei waren die HTML-Prototypen, welche in dieser Zeit erstellt wurden. So hatten wir bereits einen Eindruck, wie sich die interaktiven Elemente wie der Fahrplan oder der Header verhalten, und konnten damit A/B-Testings durchführen.
Ausserdem haben wir den Tools «Sketch» und «Invision» damals alles abverlangt, insbesondere in Sachen Quantität. Eine Aufteilung der Sketch-Files wurde für ein effizientes Arbeiten unausweichlich. Dabei den Überblick über alle Styles und Breakpoints zu behalten, war nicht immer einfach. Heute ist Sketch viel weiter als noch vor 2.5 Jahren, um zum Beispiel ein übergreifendes Design-System aufzubauen.
Wie habt ihr den Spagat zwischen konsistentem Design und den unterschiedlichen Nutzerbedürfnissen gemeistert?
Wir haben frühzeitig ein Design-System erarbeitet, das sich modular anwenden lässt. Das hat uns bei vielen Entscheidungen geholfen. Allerdings mussten wir auch höllisch aufpassen, dass die Konsistenz nicht zur Antwort auf alle möglichen Anforderungen und Bedürfnisse wurde. So haben wir das Design-System sukzessive weiterentwickelt, aber immer auf der Basis der Grundwerte.
Gab es technische Besonderheiten, die ihr beim Design-Prozess habt berücksichtigen müssen?
Die visuelle und die technische Gewährleitung der Barrierefreiheit einer so umfangreichen Website waren für uns eine echte Herausforderung. Umso entscheidender war es, die Richtlinien zur Barrierefreiheit von Anfang an konzeptionell einzubeziehen.
Wie hast du die Zusammenarbeit mit den SBB und den beteiligten Partnern empfunden?
Die enge und tolle Zusammenarbeit mit heimoto, mit unseren Frontend Engineers und dem SBB-Team hat enorm zur hohen Qualität des Ergebnisses beigetragen. Auch der Austausch mit der Stiftung «Zugang für alle», die sich für die Barrierefreiheit von Websites einsetzt, hat uns alle weitergebracht.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
