TrackMTS: Plan, Log, & Share Metro-North Rides
A shipped PWA companion for the New Haven Line, designed in Figma & built with Claude Code. Live at: trackmts.vercel.app
Role
Product Designer & Developer (solo)
— research, product spec, UI design, front end build, and launch
Tools
Figma (design source of truth)
Claude Cowork (spec & concept)
Claude Code (build)
TypeScript/Vite/PWA
Vercel
MTA GTFS/GTFS-RT (for live-service alerts)
Personal project, shipped July 2026
Overview
The problem. MTA’s official TrainTime app lets you see rides and sells tickets... and that’s it.
The opportunity. The data is already available: MTA publishes free GTFS schedules for Metro North. What’s needed is a user-centered interface for habitual riders.
It doesn’t remember the past trips you take, you can’t sort trips by arrival time (what commuters actually care about: “When do I get there?”), and ways to share train information (for example, with someone meeting you) are limited. After a week of taking the train daily, my camera roll was full of screenshots of trips I sent through text.
The solution. TrackMTS, a progressive web app with three key features:
Grand CentralStamford ?
Plan.
Trains are sortable by arrival time. The app highlights your destination — no more moments of analyzing trains going in the wrong direction. Recurring routes and departure times can be saved to a user’s itinerary, and the app will suggest the next available train based on past user behavior.
Log.
Record rides taken and see an overview of ride history stats by month. Help decide whether that monthly pass is worth it, based on real, trackable behavior.
Share.
Turn any trip into a text-shareable link that opens a lightweight public page with live status. The recipient doesn’t need to download an app or open an account.
Research & Discovery
Personal experience & competitive audit. This project started from firsthand friction using the existing TrainTime app.
I repeatedly searched the same route, scanned trips ordered by departure time, trying to find the one arriving earliest and leaving latest, and screenshotting trains to friends and family meeting me at the train station. TrainTime allows users to purchase tickets but doesn’t track ride history, trains can only sorted by departure time, and its share feature requires recipients to download the app if they want to see updated arrival times or track numbers.
Feasibility research. Working in Claude Cowork, I first made sure the data infrastructure existed before continuing.
Metro-North’s real time feed doesn’t require an API key, making a self-funded web-based PWA feasible.
Decisions
Sort by arrival. The main differentiator and advantage over TrainTime.
TrainTime sorts by departure, which can be particularly annoying when local and express trains mix and a train that leaves later might actually arrive earlier. TrackMTS allows users to switch between departure and arrival-sorted search, highlighting the relevant times.
Share pages require nothing from the recipient.
Shared trips link to a lightweight public web page with live status, requiring no app install or account from the recipient. The person meeting you at the station or picking up shouldn’t have to install an app they’ll never use.
A predictive home screen. I designed the opening screen to open with a question — “Going to Grand Central?”
The app suggests your next likely trip from repeated past behavior or uses the next occurring saved route. A simple tap on the highlighted station flips the route direction. The most frequent action (repeating your usual train) requires no extra search.
Saved ≠ Logged. Iterating after launch, I realized trips should be split into two distinct concepts.
Saved routes are repeating routes (like the daily 11:28 train to Grand Central), and their details update to the next occurence. Logged trips are individual trips that you actually took on a specific date. I implemented additional interaction design following this model: holding down the Log button on a trip allows you to adjust which instance(s) of a route you want to log. From there, you can view all of your logged trips in the Log menu, and undo protects from accidental removals. From my actual build log, the prompt that made the change:
"Can we distinguish saving from logging by making saving a trip saving a repeating instance (e.g. every instance of the 11:28 train to Stamford is represented in the trips tab, and details update for the next occurring trip), while logging a specific trip indicates that you took that train on that date? Implement the ability to adjust which instance/date you want to log by holding down on the log button… and having an undo button in case a trip is accidentally removed from the log."
Defaults that change as the day progresses.
The app suggests your next likely trip from repeated past behavior or uses the next occurring saved route. A simple tap on the highlighted station flips the route direction. The most frequent action (repeating your usual train) requires no extra search.
Outcome & Reflections
Shipped & Live. TrackMTS is deployed at trackmts.vercel.app as a TypeScript PWA.
Live train status, share pages, and push notifications (for delays more than five minutes) are all supported by a GTFS-RT server. The full product spec, clickable prototypes, Figma screens, and the build-prompt history are documented in the public repo at github.com/ruiyune/trackmts.
Reflections.
The building process shaped the design. The saved/logged distinction emerged from using the shipped app and realizing limitations in the current version, not from mockups. Launching first allowed me to understand the app and user flow better than static screens could have.
I’ve since used the app several times myself and shared it with some family and friends. By saving the page on my iOS homescreen, I’m able to access it easily as well as enable delay alerts.
Next steps: expanding beyond the New Haven line, iOS widgets/Live Activities, making ticket purchase (through the TrainTime app) more seamless, and implementing onboarding features for new users.