Stepan Vedunov

ZVV-Billettautomat

In einem Hochschulmodul haben wir das Interface der Zürcher ZVV-Billettautomaten neu gestaltet. Über mehrere Design-Sprints haben wir komplexe Abläufe vereinfacht, das visuelle Design modernisiert und Funktionen für Personalisierung und Barrierefreiheit ergänzt.

Team
Jeanne Antonin, Ege Seçgin, Elia Salerno, Stepan Vedunov
Zeitraum
2023, Hochschulmodul
Rolle
UX Research, UI Design, ZHdK
Neu gestalteter Screen des ZVV-Billettautomaten

Meine Rolle

  • Heuristische Evaluation und eine Konkurrenzanalyse von Billettautomaten in mehreren Ländern.
  • Beobachtungen von Menschen geleitet, die die alten Automaten in echten Situationen nutzten.
  • Den gesamten Ablauf des Billettkaufs neu gestaltet, mit besserer Barrierefreiheit.
  • Iterative Nutzertests durchgeführt, zum Schluss Strassentests mit dem finalen Prototyp.

Recherche

Heuristische Evaluation der heutigen Automaten
Heuristische Evaluation der heutigen Automaten.
Analyse von Billettautomaten in verschiedenen Ländern
Billettautomaten in anderen Ländern.
Die fünf Teilnehmenden der Beobachtung
Fünf Teilnehmende nutzen die alte Software in ihrem Alltag.
Zusammenfassung der Beobachtungsergebnisse
Was die Beobachtungen gezeigt haben.
User Journey mit den heutigen ZVV-Billettautomaten
Die Journey mit den heutigen Automaten.

Iterationen

Übersicht der Prototyp-Iterationen
Jede Iteration wurde mit echten Nutzerinnen und Nutzern getestet.

Resultat

Neu gestalteter Startscreen mit Schnellaktionen
Startscreen mit Schnellaktionen.
Billettauswahl mit klarer Trennung der Optionen
Klare Trennung zwischen den Billetten.
Ein Billett für eine bestimmte Strecke anpassen
Ein Billett für eine Strecke anpassen.
Optionaler Schritt zur Anpassung der Zonen
Optionale Anpassung der Zonen.
Checkout mit ausgewählten Billetten und Zahlungsoptionen
Checkout.
Test des finalen Prototyps mit Menschen in der Stadt
Strassentests mit dem finalen Prototyp.

Ergebnis

In den Strassentests schnitt der finale Prototyp über alle Nutzergruppen hinweg deutlich besser ab als die heutigen Automaten. Die Leute empfanden ihn als barrierefreier und einfacher zu bedienen.

vedunov.com Setup-Programm

System
Nuxt 4, Vue 3 und Nuxt Content. Statische Seiten auf Netlify, kein Server, kein Tracking.
Sprachen
Englisch und Schweizer Hochdeutsch. Gleiche Seiten, zwei Inhaltsordner, /de vor jeder Adresse.
Tokens
Primitives → semantische Tokens → Komponenten, bei jedem Build kompiliert und auf Kontrast geprüft. Die gleiche Pipeline wie bei der Arbeit.
Schrift
Inter und Geist Mono, selbst gehostet, swap. Titel sind Inter mit engerem Abstand statt einer dritten Schrift.
Signal
#E8540C auf den Kacheln der Nebenprojekte und den Fokusrahmen. Der Lese-Schalter hat seine eigene rot-orange Taste, #E2421B.
Bewegung
Seiten verschwimmen beim Wechseln, Abschnitte werden beim Scrollen scharf, Nachbarn treten beim Hover zurück. Alles aus bei reduzierter Bewegung.
Barrierefreiheit
WCAG 2.2 AA. axe: 0 Probleme auf jeder Seite.
Performance
Lighthouse mobil, 24 Seiten: Performance 94, Barrierefreiheit 100, Best Practices 100, SEO 100 (jeweils der tiefste Wert).
Tasten
Entf öffnet diesen Bildschirm. Esc schliesst ihn.
letzte Prüfung 2026-11-09