Trip Pass
On Track
A mobile web app for Shanghai Metro Line 2. It checks that you are on the right platform, about to board the right train, and still going the right way.
Open the live prototypeBound for
Shanghai Metro Line 2
上海地铁 2 号线
Course
Project Design and Implementation, RIT
Term
Spring 2026
My part
Design and prototype. I built the code with Claude Code.
Try it hereTry the prototype
This is the deployed prototype, running inside the page. Pick a start and a destination, then tap Generate Trip Pass.The deployed prototype opens in a new tab. Pick a start and a destination, then tap Generate Trip Pass.
Station progress is simulated.
Open it in a new tabOpen the live prototypeWhere a visitor gets stuck
I already knew Shanghai Metro is hard on visitors from other countries. That is where this started.
On Line 2, both directions leave from platforms that look the same. Map apps tell a rider where to go. They do not say whether the train pulling in is going the right way.
Uncertainty across one trip
Mapped from desk research.
How I checked the idea
I walked the flow with three AI-drafted personas: a first-time tourist who reads no Chinese, an experienced rider who skips steps, and an exchange student who reads some characters.
What the walkthrough showed
What I changed
EASTBOUND left the first-time tourist guessing which way is east.
Changed:Every direction label is paired with the terminal station name.
The experienced rider scans instead of reading, and is likely to skip the second check.
Changed:The checks are locked in order.
Route planning is already settled before a rider reaches the platform.
Changed:Route planning was removed. The app starts at the platform.
First wireframes
Platform Check, three rounds
One trip, five screens
Each screen answers one question.
Trip Pass
What am I trying to verify?
Holds the line, the direction and the terminal station for the whole trip.
Platform Check
Am I on the correct platform?
Reads what stays still: station, line, direction. The terminal station name is the main cue.
If it does not match, hold and recheck.
Boarding Check
Should I board this train?
Reads the train when it arrives. The second check stays locked until the first is confirmed.
If it does not match, do not board.
Ride Mode
Am I still on the right train?
Starts on its own five seconds after boarding. Station names are in English and Chinese.
If something looks wrong, get off at the next stop.
Arrived
Trip complete.
The route is remembered for next time.
When it goes wrong
Four ways a check can fail. Each ends in a next action.
Wrong Platform
Stay, re-read the signs, recheck the direction.
Do Not Board
Wait for the correct train. Next step: handle short-turn trains that still stop at the rider's station.
Wrong Train, On Board
Get off at the next stop, then reroute or wait.
Missed Get-off
CONCEPTDefined in the flow but not yet built into the live prototype.
No button is ever green. Buttons are blue or gray, so green only means progress or verified, and coral only means an error.
The pass and the colors
The trip pass is drawn as a ticket stub. The idea came from the boarding passes in Apple Wallet.
Primary
#2563EB
Verified
#6AD168
Error
#FF6B6B
Amber
#FFAB5E
Background
#F2F2F7
Text
#1C1C1E
Right platform
Plus Jakarta Sans 800 for status names. Inter for the rest.
How it was built, and what comes next
I defined the problem, the interaction logic, the interface states, the failure paths and the design system, and built the prototype with Claude Code writing the code.
The prototype covers Line 2, with simulated station progress.
The recovery flow is the first thing to test under real time pressure.
The cognitive walkthrough produced hypotheses. The next step is validating them with real users.