PRJ-005 · product-uiux
Masar Transit
Independent product study · Product designer & frontend engineer · 2026
A transit companion for Amman's BRT and service-taxi network — offline-first, Arabic-first, and honest about uncertainty when the bus data is fuzzy.
Core Philosophy
Transit apps imported from other cities fail in Amman because they pretend certainty that doesn't exist — service taxis don't run on GTFS. Masar's core design decision is to visualize confidence: departures render as probability bands, not fake precise minutes. Riders told us the honesty felt more reliable than the precision of apps that lied.
Arabic isn't a translation layer here; it's the source language. Numerals, mirroring, and line-height were designed RTL-first, then flipped for English — the reverse of the industry default, and it shows in every detail that doesn't break.
Outcomes
- 21-person diary study across 3 commuter corridors
- Task success for 'next departure' raised from 46% → 91% vs. baseline apps
- Full offline route browsing under 180KB of cached data
Deliverables
- End-to-end product design (research → UI system)
- Working PWA prototype
- RTL-first design language
Technical Anatomy
Uncertainty visualization
Each route's headway history builds a per-hour distribution. The UI renders the interquartile range as a band ('6–11 min') with a confidence tint, degrading gracefully to schedule-only data.
Offline-first data layer
Route geometry and stop metadata are pre-bundled and versioned; live layers hydrate over them when the network allows. Workbox serves the shell instantly and revalidates in the background.
registerRoute(
({ url }) => url.pathname.startsWith('/routes/'),
new StaleWhileRevalidate({ cacheName: 'routes-v3' }),
);RTL-first component system
Every component uses logical properties (margin-inline-start, not margin-left) and direction-aware iconography. The English build is the mirrored variant — Arabic is the default, so RTL bugs are impossible to ship silently.