Ontra is a YC-backed platform helping cities build multimodal transit systems. The public trip planner lets riders plan journeys across bus, rail, and bike using live transit data.
I joined with an existing product. The brief was to redesign the side panel. But redesigning how information is shown in the panel meant redesigning how it's reflected on the map. One component became a connected system.
Client
Ontra (YC)
Role
Product Designer
Scope
Trip planner · Map view · Iconography
Year
2024
Context & Research
Ontra is a YC-backed platform helping cities build multimodal transit systems. The public trip planner lets riders plan journeys across bus, rail, and bike using live transit data.
I joined with an existing product. The brief was to redesign the side panel. But redesigning how information is shown in the panel meant redesigning how it's reflected on the map. One component became a connected system.
Problem
Every stop looked the same. Every route line had the same treatment. The map didn't react when you selected something in the panel.
Two things needed fixing: the side panel had no progressive disclosure, and the map was static with no visual connection to user actions.
Solution
The panel needed progressive disclosure; the map needed to be reactive. Both needed a shared visual language.
Decision · 01
A full journey timeline breaking every trip into readable segments. Summary at the top: mode icons, total time, visual progress bar. Below that, each segment is collapsible.
"6 mins, 5 stops" has a Show Stops toggle. Walking directions collapse to "Walk 2 mins" until you need turn-by-turn. A daily commuter never expands. A tourist expands everything. Same interface, different depth.
Trip Plan · Collapsed
Trip Plan · Expanded with stops
Decision · 02
Past stops are faded. Current stop is highlighted. Future stops are full opacity.
No legend needed. Riders instinctively understand their position. The hierarchy comes from the rider's perspective, not the data's.
Route detail · past / current / future stops
Decision · 03
Bus stops as dark square icons. Current bus position in green, instantly scannable. Each route in its own colour. Icons adapt across zoom levels.
The hardest part: multiple routes passing through shared stops. Tested outlines, colour blocks, and split indicators. Final solution: individual coloured lines maintaining identity through shared stops. You can trace any route with your finger across the entire map.
Map · Route lines and stops
Decision · 04
A completely new layer. The badge answers one question at map level: is it worth walking here? Two numbers side by side: 12 manual, 2 electric. One glance, no tap required.
Tapping opens a compact detail: name, distance, counts, free spaces, and a direct deep link to unlock in the Lyft app. Two interactions from "should I bike?" to unlocking one.
Bike station badges · map view
Bike station · detail panel
Decision · 05
Before: selecting a route changed nothing on the map. Panel and map were disconnected.
Now: select a route in the panel, the map highlights it. Active route becomes prominent, others fade. Current bus position appears as a live marker. Walking segments trace in grey. Panel and map are one system.
Trip plan · highlighted route on map
Impact
Live trip planner serving Boston and expanding to new cities. Trusted by DC Department of Transportation, City of Fresno, and others. Selected for the 2026 Transit Tech Lab with MTA NYCT and LIRR.
Live
Boston trip planner
DC · Fresno
City partners
MTA · LIRR
2026 Transit Tech Lab
Reflection & Results
The route line treatment at shared stops.
Multiple routes through one stop is surprisingly hard to show clearly. The final solution lets you trace any single route across the map without losing it, even through intersections with four overlapping routes.
The kind of detail transit planners notice and daily commuters feel without knowing why.
