Mobile App
ÖPNV
Designsystem

Eticket · Case Study

Ein Tippen am Drehkreuz, die nächste Straßenbahn direkt auf dem Startbildschirm.

Die elektronische Fahrkarte von Charkiw für Metro, Straßenbahn, O-Bus und Bus. 2020 habe ich die erste App mit zwei Entwicklern gestaltet; 2026 habe ich sie rund um die zwei Momente neu gestaltet, auf die es ankommt – das Bezahlen am Drehkreuz und zu wissen, wann die nächste Straßenbahn kommt – und mit KI als funktionierenden Prototyp gebaut.

Rolle: Product Designer
Zeitraum: 2020 · überarbeitet 2026
Unternehmen: Eticket
Standort: Charkiw, Ukraine
Team: Product Designer in einem Team von 3, mit 2 Entwicklern

Ergebnisse

UX-Research
UX-Audit
User Flows
Mobiler Prototyp
Designsystem

Live-Demo Designsystem

Startseite: die nächste Metro-Station und Haltestellen in der Nähe, jeweils mit Live-Abfahrten — Home: Abfahrten statt nur Haltestellen

Ergebnis nach dem Tippen: Bezahlt, Fahrpreis, neues Guthaben und ein kostenloses Umsteigefenster — Ein Tipp: bezahlt, mit Umsteigefenster

Live-Fahrt auf dem Metro-Plan mit nächster Station und Umsteigehinweis — Live-Fahrt auf dem Metro-Plan

Schritte zum Bezahlen am Drehkreuz, jetzt ein einziger Tipp mit dem Handy: 5 → 1
der 2020 befragten Fahrgäste fuhren mit einer Plastikkarte: 68,8 %
der Charkiwer Metro, mit den aktuellen Namen nach der Umbenennung 2022–2024: 3 Linien, 30 Stationen
Szenarien, durchgängig klickbar, von der abgelehnten Zahlung bis zur verlorenen Karte: 14

Überblick

2020 haben wir die Fahrkarte von Charkiw ins Handy gebracht. 2026 habe ich das Bezahlen auf einen Tipp reduziert.

Eticket ist die elektronische Fahrkarte von Charkiw für Metro, Straßenbahn, O-Bus und Bus. Man lädt sie auf, und jede Fahrt wird am Drehkreuz oder am Entwerter abgebucht.

2020 war ich Product Designer in einem Team aus drei Personen, mit zwei Entwicklern. Wir haben die erste Eticket-App veröffentlicht: die Karte im Handy, Aufladen, Haltestellen in der Nähe, Routensuche und Fahrtenverlauf.

2026 habe ich unsere eigene App geprüft und rund um die zwei Momente neu gestaltet, die Fahrgäste wirklich beschäftigen: durchs Drehkreuz kommen und wissen, wann die nächste Straßenbahn fährt. Die Neugestaltung habe ich mit KI als funktionierenden Prototyp gebaut, das Designsystem liegt in Storybook.

Drei Fahrgäste, drei sehr unterschiedliche Morgen.

Täglicher Pendler
Jeden Tag dieselben zwei oder drei Strecken.
Schnell durchs Drehkreuz und die Straßenbahn nicht verpassen.
Student mit ermäßigtem Tarif
Preisbewusst, fährt täglich.
Dass der ermäßigte Tarif einfach funktioniert und er weiß, wann er abläuft.
Besucher
Keine Karte, liest vielleicht kein Ukrainisch.
Ein Ticket in zwei Minuten und eine einfache Wegbeschreibung.

Das Problem

Fahrgäste hatten vier Probleme. Unsere App hat sie auf dem Papier gelöst, nicht am Drehkreuz.

Was uns Fahrgäste in Interviews sagten, 2020

01Bargeld und SchlangenEine Plastikkarte aufzuladen hieß, am Terminal anzustehen.
02Papier und PlastikPapiertickets und Karten, einmal benutzt und weggeworfen.
03BesucherWer nicht von hier ist, hat Mühe, ein Ticket zu kaufen.
04WartenLange, unberechenbare Wartezeiten an den Haltestellen.

Was ich in unserer eigenen App gefunden habe (Audit, 2026)

01Bezahlen dauerte fünf SchritteUnter „Fahrt bezahlen“: Verkehrsmittel wählen, Fahrgäste, Gepäck, Summe prüfen, bestätigen und erst dann das Handy ans Terminal halten. Und das am Drehkreuz, im Moment mit der geringsten Geduld.
02Haltestellen ohne AbfahrtenDie Startseite listete Haltestellen in der Nähe, aber nicht, wann das nächste Fahrzeug kommt, obwohl Warten eines der vier Probleme war.
03Besucher kamen nicht reinDas Onboarding verlangte die Nummer einer Plastikkarte, die sie gar nicht haben.
04Kein Apple Pay oder Google PayBeim Aufladen gab es eine verknüpfte Bankkarte und eine eigene Zahlentastatur, obwohl unsere Research zeigte, dass Fahrgäste längst mit dem Handy zahlen.
05Zwei Orte für die RoutensucheStartseite und „A nach B“; Tabs namens „Karten“ und „Zahlungen“ für dieselbe Sache.

Research

Wir haben bei den Fahrgästen angefangen, nicht bei den Screens.

2020, vor dem Design der ersten App, haben wir Fahrgäste in Charkiw interviewt und einen Morgen auf dem Weg von zu Hause zur Arbeit nachgezeichnet. Die vier Probleme oben stammen aus diesen Gesprächen.

Zentrale Zitate aus den Interviews

Ich kann mein Kartenguthaben nicht einsehen, meistens muss ich raten.
Fahrgast aus Charkiw, Interview 2020
Ich hasse die riesige Schlange am Ticketterminal am Morgen!
Fahrgast aus Charkiw, Interview 2020
Ich komme ständig zu spät zur Arbeit, weil ich mit Karte und Bargeld herumfummle und dann viel Zeit am Ticketterminal verliere!
Fahrgast aus Charkiw, Interview 2020
Ich vergesse immer, meine Eticket-Karte aufzuladen.
Fahrgast aus Charkiw, Interview 2020

Customer Journey: der Weg zur Arbeit

01 · Ziel
Tut
Oft spät dran, hetzt zum Verkehrsmittel
Schmerz
Straßenbahnen und O-Busse fallen aus; Fußweg zur Metro
Fühlt
Den ganzen Tag spät dran und gereizt
02 · Route
Tut
Entscheidet, wie er zur Arbeit kommt, schaut in Google Maps
Schmerz
Kein Fahrplan und keine Routen auf der Eticket-Website
Fühlt
Kennt die Route nicht
03 · Verkehrsmittel
Tut
Wartet an der O-Bus-Haltestelle, steigt in die Metro um
Schmerz
Kann das Kartenguthaben an der Haltestelle nicht prüfen; Gedränge an der Tür
Fühlt
Kommt kaum hinein
04 · Bezahlung
Tut
Bezahlt im O-Bus und in der Metro
Schmerz
Aufladen nur am Terminal
Fühlt
Kann nicht oder nur mühsam bezahlen
05 · Service
Tut
Kauft einen Einzelfahrschein oder lädt am Terminal auf
Schmerz
Langsame, umständliche Abläufe
Fühlt
Verliert Zeit beim Kaufen und Aufladen

	Ziel	Route	Verkehrsmittel	Bezahlung	Service
Tut	Oft spät dran, hetzt zum Verkehrsmittel	Entscheidet, wie er zur Arbeit kommt, schaut in Google Maps	Wartet an der O-Bus-Haltestelle, steigt in die Metro um	Bezahlt im O-Bus und in der Metro	Kauft einen Einzelfahrschein oder lädt am Terminal auf
Schmerz	Straßenbahnen und O-Busse fallen aus; Fußweg zur Metro	Kein Fahrplan und keine Routen auf der Eticket-Website	Kann das Kartenguthaben an der Haltestelle nicht prüfen; Gedränge an der Tür	Aufladen nur am Terminal	Langsame, umständliche Abläufe
Fühlt	Den ganzen Tag spät dran und gereizt	Kennt die Route nicht	Kommt kaum hinein	Kann nicht oder nur mühsam bezahlen	Verliert Zeit beim Kaufen und Aufladen

Für wen wir gestaltet haben

•Fahrgäste, die täglich öffentliche Verkehrsmittel und ein Smartphone nutzen, überwiegend Studierende und Büroangestellte.
•68,8 % von ihnen fuhren mit einer Plastikkarte: der grünen Eticket-Karte oder dem Studierendenticket.
•Karten- und Handyzahlung waren neben Bargeld verbreitet; am häufigsten genutzt wurden Metro und Busse.

68,8 %

der befragten Fahrgäste fuhren mit einer Plastikkarte

Die Priorität, die wir 2020 gesetzt haben: einfaches Bezahlen und Aufladen, ohne Bargeld und Papiertickets; das Fahrguthaben sehen; mit dem Smartphone bezahlen; eine Bankkarte verknüpfen; Geld auf eine andere Eticket-Karte übertragen; Verkehrsmittel verfolgen, Fahrpläne sehen, die nächsten Haltestellen finden und eine Route von A nach B planen.

Die originalen Research-Folien von 2020

Originale Folie von 2020 mit den zentralen Interview-Zitaten von Fahrgästen aus Charkiw — Zentrale Interview-Zitate, 2020

Originale Folie von 2020, die die vier Probleme der Fahrgäste definiert: Bargeld und Schlangen, Papier und Plastik, Besucher, Warten — Die Probleme definieren, 2020

Originale Customer Journey Map von 2020 für den Weg zur Arbeit am Morgen — Customer Journey Map, 2020

2026 bin ich zu diesen Erkenntnissen zurückgekehrt und habe unsere veröffentlichte App Screen für Screen daran gemessen.

Ziele

Was die Neugestaltung leisten muss, für Fahrgäste und für die Stadt.

Für Fahrgäste

01Mit einem Tipp bezahlen, auch offline, ohne das Handy zu entsperren.
02Auf der Startseite sehen, wann die nächste Metro, Straßenbahn oder der nächste Bus kommt.
03Nie ohne Guthaben am Drehkreuz stehen bleiben.
04Als Besucher fahren, ohne Konto und ohne Plastikkarte.

Für die Stadt und den Betreiber

01Weniger Papiertickets und kürzere Schlangen an den Aufladeterminals.
02Mehr Fahrten, die digital bezahlt werden.
03Höhere Zufriedenheit durch verlässliche Abfahrtszeiten.

Ziele zum Start, mit dem Betreiber festzulegen

Anteil der per Handy bezahlten Fahrten: Ziel: 60 % im ersten Jahr
Abgelehnte Zahlungen pro 1.000 Fahrten: Ziel: halbieren
Aufladungen in der App vs. am Terminal: Ziel: 70 % in der App
Zeit eines Besuchers von der Installation bis zur ersten Fahrt: Ziel: unter 2 Minuten

Vier Regeln, die jeden Screen bestimmt haben.

01
Der Moment am Drehkreuz ist heilig
Nichts zwischen Mensch und Schranke.
02
Abfahrten statt Haltestellen
Eine Haltestelle hilft nur mit der Zeit des nächsten Fahrzeugs.
03
Geld ist sichtbar
Guthaben, Fahrpreis und verbleibende Fahrten auf einen Blick.
04
Funktioniert für Neuankömmlinge
Auf Englisch, ohne Konto, ohne Karte.

Flows

Acht Flows, gezeichnet, bevor ein Screen entstand.

Onboarding, Fahrt bezahlen, Karten und Aufladen, Haltestellen in der Nähe und Live-Abfahrten, Route von A nach B, der Besucher, Fahrten und Konto sowie Probleme und Sonderfälle. Gelb ist ein Schritt, Blau eine Entscheidung, Grün ein Start oder ein Ende.

Miro-Board öffnen

Onboarding-Flow: Sprache, Anmeldung, Karte oder virtuelle Karte, Prüfung des ermäßigten Tarifs, Wallet, Standortfreigabe und Heimathaltestelle, dann die Startseite — 1. OnboardingMiro

Bezahl-Flow: Handy an den Entwerter halten, Guthabenprüfung mit abgelehnter Zahlung und Aufladen mit einem Tipp, Umsteigefenster, Erfolg, weitere Fahrgäste — 2. Fahrt bezahlenMiro

Karten-Flow: zwischen Karten wischen, mit Betragsauswahl und Apple oder Google Pay aufladen, Auto-Aufladung, Übertragung auf eine andere Karte mit Face ID — 3. Karten, Aufladen, Auto-Aufladung und ÜbertragungMiro

Flow „In der Nähe“: Startseite mit Live-Abfahrten, Liste oder Karte, Haltestellendetails, Live-Daten oder planmäßige Zeiten, Liniendetails, Fahrplan, Erinnerung, Favoriten — 4. In der Nähe, Live-Abfahrten, Karte und FahrplanMiro

Routen-Flow: Wohin, Start und Ziel, Filter, Optionen mit Gesamtpreis, Routendetails, Guthabenprüfung und Aufladen, Live-Fahrt, Hinweis auf Fahrplanänderung, Route speichern — 5. Route von A nach BMiro

Besucher-Flow: Anmeldung überspringen, Ticket wählen, mit Apple oder Google Pay bezahlen, Ticket im Wallet, an den Entwerter halten, Zweig „abgelaufen“ — 6. Besucher: ohne Karte fahrenMiro

Konto-Flow ab dem Profil: Fahrten und monatliche Ausgaben, Belege, meine Karten mit Wiederherstellung bei Kartenverlust, Status des ermäßigten Tarifs, Zahlungsmethoden, Benachrichtigungen, Sprache, Konto löschen — 7. Fahrten, Belege und KontoMiro

Sonderfall-Flow: falsche Abbuchung mit automatischer Erstattung, neues Handy, Verlängerung des ermäßigten Tarifs, Plastikkarte aufs Handy, Fahrplanänderung — 8. Probleme und SonderfälleMiro

Vorher und nachher

Jede Erkenntnis, neben dem, was sie ersetzt hat.

Erkenntnis 01

Fünf Schritte zum Bezahlen

Das Handy ans Lesegerät halten, fertig. Der Ergebnis-Screen zeigt Bezahlt oder Abgelehnt, und bei einer Ablehnung steht das Aufladen gleich daneben.

Unser Screen „Fahrt bezahlen“ von 2020: Verkehrsmittel, Fahrgäste, Gepäck und eine Schaltfläche „Bestätigen“, markiert — ① Verkehrsmittel wählen ② Fahrgäste und Gepäck ③ bestätigen, dann tippen

Das Ergebnis nach dem Tippen 2026: Bezahlt, Fahrpreis, neues Guthaben und ein kostenloses Umsteigefenster — Bezahlt, mit Umsteigefenster

Die abgelehnte Zahlung 2026: Guthaben zu niedrig, mit Aufladen per Apple Pay in einem Tipp — Abgelehnt: das Aufladen steht gleich daneben

Erkenntnis 02

Haltestellen ohne Abfahrten

Die Startseite beginnt mit der nächsten Station und einem Live-Chip für jede Haltestelle in der Nähe: das nächste Fahrzeug, nicht nur der Name.

Unsere Startseite von 2020: eine Karte und eine Liste von Haltestellen in der Nähe ohne Abfahrtszeiten, markiert — ① Haltestellen, aber keine Zeit des nächsten Fahrzeugs

Die Startseite 2026: nächste Station und Haltestellen mit Live-Abfahrts-Chips — Nächste Station und Live-Chips

Die Haltestellendetails 2026 mit allen Linien und ihren nächsten Abfahrten — Haltestellendetails: jede Linie, nächste Abfahrten

Erkenntnis 03

Onboarding braucht eine Plastikkarte

Der Willkommens-Screen bietet „Nur zu Besuch? Ticket kaufen“, und das Besucherticket landet direkt im Wallet, ohne Konto und ohne Karte.

Unser erster Screen von 2020, der eine Karten-ID und eine Stadt abfragt, markiert — ① eine Kartennummer, die ein Besucher nicht hat

Der Willkommens-Screen 2026 mit der Option „Nur zu Besuch“ zum Ticketkauf — „Nur zu Besuch? Ticket kaufen“

Die Besuchertickets 2026: Einzelfahrt, 1 Tag und 3 Tage — Einzelfahrt, 1 Tag, 3 Tage

Erkenntnis 04

Aufladen mit eigener Zahlentastatur

Betragsauswahl und Apple Pay ersetzen das Tippen auf einer eigenen Zahlentastatur, sodass Aufladen eine Auswahl und ein Tipp ist.

Unser Aufladen-Screen von 2020 mit Betragsfeld und eigener Zahlentastatur, markiert — ① einen Betrag auf einer Tastatur eintippen

Das Aufladen 2026 mit Betragsauswahl und Apple Pay — Betragsauswahl und Apple Pay

Erkenntnis 05

Zwei Orte für die Routensuche

Ein „Wohin?“ auf der Startseite öffnet die Routen, und die Optionen zeigen den Gesamtpreis, sodass die Suche an einem Ort stattfindet.

Unser Screen „Route planen“ von 2020, eine zweite Suche neben der Startseite, mit einem Tab namens Zahlungen, markiert — ① eine zweite Suche ② „Zahlungen“ für das, was die Startseite „Karten“ nennt

Die Routenoptionen 2026 mit Zeit, Umstiegen, Fußweg und Gesamtpreis — Eine Suche, Optionen mit Preis

Der Weg am Morgen

Der Weg am Morgen, durchgängig geklickt.

6 ₴ auf der Karte. Route zur Arbeit: Metro-Linie 2, ein Umstieg, Linie 1, 24 Minuten, 8 ₴ und ein Hinweis, dass das Guthaben für die Fahrt nicht reicht. Tippen an der Saltiwska: abgelehnt. 100 ₴ per Apple Pay aufladen und erneut tippen: bezahlt, 98 ₴, kostenloses Umsteigen bis 09:14. Die Live-Fahrt folgt auf dem Metro-Plan: „Umsteigen an der Istorytschnyj Musej zur Linie 1“ ohne erneutes Tippen, dann „Als Nächstes: Wokzalna“. Beim Ausstieg schlägt die Startseite „Straßenbahn 7 · 4 Min.“ vor.

Startseite mit niedrigem Guthaben und der nächsten Station — Startseite, 6 ₴ auf der Karte

Routenoptionen zur Arbeit mit Fahrpreis und Guthabenwarnung — Routen: 24 Min., 8 ₴, Guthaben zu niedrig

Abgelehnte Zahlung mit Aufladen in einem Tipp — Tippen: abgelehnt, 100 ₴ aufladen

Bezahlt, 98 ₴ übrig, kostenloses Umsteigen bis 09:14 — Erneut tippen: bezahlt, 98 ₴

Live-Fahrt auf dem Metro-Plan mit Umsteigehinweis — Live-Fahrt, kein erneutes Tippen

Acht Entscheidungen, die die App geprägt haben.

01Tippen und Bezahlen über den Express-Modus des WalletsKeine App öffnen, nicht entsperren, funktioniert offline. Voraussetzung: Die Entwerter in allen Verkehrsmitteln akzeptieren NFC.
02Eine abgelehnte Zahlung ist zugleich die Lösung„6 ₴ übrig, Fahrpreis 8 ₴“ mit „100 ₴ per Apple Pay aufladen“ direkt daneben, dann erneut tippen.
03Live-Abfahrten auf der StartseiteZuerst die nächste Metro-Station, dann „Straßenbahn 27 · 3 Min.“ für jede Haltestelle in der Nähe, mit „5 Min. vorher erinnern“.
04Das Umsteigefenster nach dem Bezahlen„Kostenlos umsteigen bis 09:14“ nimmt eine häufige Sorge ab.
05Routen zeigen den GesamtpreisDas Guthaben wird geprüft, bevor man losfährt: „Ihr Guthaben reicht für diese Fahrt nicht“.
06Besuchertickets ohne KontoDirekt ins Wallet: Einzelfahrt, 1 Tag, 3 Tage.
07Auto-Aufladung und Wiederherstellung bei KartenverlustDamit das Guthaben nie zum Problem wird.
08Vier klare TabsStart, Routen, Karte, Profil. Ein Ort für die Routensuche.

Schwierige Zustände

Die Screens, nach denen niemand fragt, schaffen Vertrauen.

Abgelehnte Zahlung mit Fahrpreis, Guthaben und Aufladen in einem Tipp — Abgelehnte Zahlung

Hinweis auf Fahrplanänderung der Route mit einer alternativen Route — Fahrplanänderung, mit Alternative

Doppelt abgebucht: die doppelte Abbuchung wird sofort erstattet — Doppelt abgebucht, sofort erstattet

Karte verloren: das Guthaben wird auf eine virtuelle Karte übertragen — Karte verloren, Guthaben auf virtuelle Karte übertragen

Ermäßigter Tarif läuft ab, mit Aufforderung zur Verlängerung — Ermäßigter Tarif läuft ab

Besucherticket im Wallet mit Gültigkeit und Fahrten — Besucherticket im Wallet

Designsystem

Leise Oberfläche, laute Verkehrsmittel.

Fast Schwarz und Weiß mit einem blauen Akzent. Der Verkehrscode ist die einzige weitere Farbe, und er kommt immer mit Icon und Nummer.

•Metro-Linien: 1 rot, 2 blau, 3 grün; Straßenbahnen, O-Busse und Busse nach Farbe
•Ein echtes Schwarz im Dark Mode mit den leuchtenden iOS-Systemfarben
•iOS-Muster: große Titel, eine schwebende Tab-Leiste aus Glas, Sheets mit Rastpunkten, eingerückte gruppierte Listen
•Onest für Latein und Kyrillisch; jede Komponente in Storybook, in beiden Themes und beiden Sprachen

Startseite im Dark Mode mit der nächsten Station und Live-Abfahrten — Start, dunkel

Karten-Tab im Dark Mode mit niedrigem Guthaben und Schnellaktionen — Karte, dunkel

Routenoptionen im Dark Mode mit dem Fahrpreis — Routen, dunkel

Ergebnis nach dem Tippen im Dark Mode: Bezahlt, neues Guthaben, Umsteigefenster — Zahlungsergebnis, dunkel

Metro-Plan im Dark Mode mit den drei farbigen Linien — Metro-Plan, dunkel

Designsystem öffnen

Ergebnis

Was die Neugestaltung liefert.

5 → 1

Schritte zum Bezahlen am Drehkreuz, jetzt ein einziger Tipp mit dem Handy

68,8 %

der 2020 befragten Fahrgäste fuhren mit einer Plastikkarte

3 Linien, 30 Stationen

der Charkiwer Metro, mit den aktuellen Namen

Szenarien, durchgängig klickbar

2 × 2

zwei Themes, hell und dunkel, und zwei Sprachen, Ukrainisch und Englisch

zentrale Screens

Wichtigste Erkenntnisse

Drei Dinge, die mir dieses Projekt beigebracht hat.

01
Für den Moment am Drehkreuz gestalten
Nichts zwischen Mensch und Schranke. Das Bezahlen wurde von fünf Schritten auf einen Tipp verkürzt, weil das der Moment mit der geringsten Geduld ist.
02
Abfahrten statt Haltestellen
Eine Liste von Haltestellen beantwortet das Wo. Fahrgäste fragten nach dem Wann. Die Startseite beginnt jetzt mit der Zeit des nächsten Fahrzeugs.
03
Eine Ablehnung sollte die Lösung sein
Eine abgelehnte Zahlung, die nur Nein sagt, lässt jemanden an der Schranke stehen. Zeigt derselbe Screen Fahrpreis, Guthaben und Aufladen, wird daraus ein weiterer Tipp.

Probieren Sie es selbst aus

Tippen Sie am Drehkreuz, planen Sie eine Route und fahren Sie als Besucher im Live-Prototyp, oder lesen Sie das Designsystem.

Live-Demo Designsystem

← Zurück zu den Case Studies