On Track
Shanghai Metro Verification App
Not a navigation app — a boarding verification app. On Track helps passengers confirm they're on the right train before it's too late, solving a real and frustrating pain point on Shanghai's sprawling metro network.
Problem & Process
From Frustration to Flow
Shanghai Metro Line 2 runs east-west across the city — two directions, identical platforms, easy to board the wrong train. The app addresses the moment of uncertainty between arriving at the platform and boarding, not navigation.
Metro apps tell you where to go — but not whether the train arriving right now is actually going the right direction. On a busy platform, this ambiguity causes missed trains, wrong boardings, and unnecessary anxiety.
User Flow
Five Steps to Confidence
The core flow guides users from station selection through platform verification, boarding confirmation, and ride mode — with clear recovery paths for wrong-train scenarios.
Design System
Tokens & Components
Dark green ticket stub (#1A3A2A) with barcode, tear-line, notch cutouts, and Valid badge — a physical transit metaphor in digital form.
Pass → Check → Ride progress indicator with animated connector lines, driven by useLocation() per route.
Edge Cases
Wrong Train Recovery
Designing for failure states is as important as the happy path. On Track includes dedicated recovery flows for two wrong-train scenarios — before boarding and after boarding — each with a clear exit path and 60-second countdown recovery.
No green CTAs — color is reserved for status meaning. Active buttons are blue (primary action) or gray (inactive). Green only appears in the verified state, coral only in error states, making status instantly readable.