Mobile UINorthbound Transit
Four counties, six years of feature creep, and a home screen that answered every question except the one riders were actually asking.
01The problem
Northbound runs buses and light rail across four counties. Their app had grown one feature at a time for six years, and every new team had added its own tab. By the time we saw it, the home screen carried nine entry points and none of them was the one people needed.
The most common task in the product analytics was also the slowest: finding out whether the next bus was actually coming. It took four taps, a map that loaded after the bus had already left, and a live-status label that showed the timetable when the real feed dropped out.
Riders had worked around it. The support inbox was full of people asking staff to check departures for them, and the app store reviews had settled into a long complaint about a product that technically worked.
02Goals
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
Next departure, on screen, at launch, with no interaction required. Everything else on the home screen has to earn its place underneath that.
Every primary action reachable in the bottom third of the screen, with tap targets that survive a bus taking a corner.
When the real-time feed is stale or missing, the interface has to say so plainly rather than quietly showing the timetable.
Contrast, focus order, dynamic type up to 200 percent, and screen reader labels on all 34 screens, not just the ones in the demo.
03UI approach
Four moves that did most of the work. Everything else on the project followed from them.
We cut the home screen to a single live departure board for the stops you use, ordered by walking distance. Everything else moved behind a four-item tab bar. Nine entry points became one answer and four destinations.
We drew a reachability line across every screen and treated anything above it as read-only. Search, filters, and confirmations all sit below the line, which changed the layout of almost every view in the app.
Three states, drawn distinctly: live and moving, scheduled only, and no data. Each has its own chip, its own icon, and its own colour, and the timestamp of the last real update is always visible next to the time.
Departure times set at 34px with tabular figures so digits do not jump as they count down. Everything supporting drops to 15px, which put a clear two-step gap between what you read at a glance and what you read on purpose.
04Components and design system
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
The atom the whole app is built from. One route, one countdown, one status chip, one walking time. It appears on the home board, in search results, and inside the stop detail view without a single variant fork.
Four states with fixed colour and icon pairings, so status never depends on colour alone. The palette was tested at AA against both the card surface and the dark map overlay.
A 4pt spacing scale with a named reachability band. Any interactive component placed outside the band fails design review, which made the rule enforceable rather than aspirational.
05Outcomes
Measured by the client, on their own reporting, over the period noted against each figure.
The change riders mentioned most was not the redesign. It was the no-data state, because for the first time the app admitted when it did not know.
They deleted more of our app than they added, and it is the best thing anyone has done for it.
06Gallery
Layout diagrams of the interface as delivered, with a note on what each one is doing.
The home screen after launch: nearest stops, live countdowns, status chips, nothing above the fold that is not an answer.
Interface layout diagram from the Northbound Transit project.
Every route serving a stop, with the last real feed update timestamped next to each countdown.
Interface layout diagram from the Northbound Transit project.
Live, scheduled, delayed and no-data drawn as a set, each with its own icon so colour is never the only signal.
Interface layout diagram from the Northbound Transit project.
The thumb zone mapped across the four most-used screens, with the interactive band marked in pink.
Interface layout diagram from the Northbound Transit project.
07Take it with you
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-northbound-transit-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Northbound Transit
Project: Rebuilding a regional transit app around one thumb
Discipline: Mobile UI
Engagement: UI/UX design and prototyping
Platforms: iOS and Android
Duration: 11 weeks
Year: 2024
OVERVIEW
================================================================
Northbound Transit had a six-year-old app carrying nine home screen entry points, none of which answered the question riders opened it to ask.
We rebuilt the interface around a single live departure board, moved every primary action into a defined thumb-reachable band, and drew live status as four honest states including an explicit no-data case.
Delivered across 11 weeks: 34 redesigned screens at mobile and tablet widths, every state drawn, a component spec covering the departure card and status system, and a tested prototype used in eight moderated sessions.
Results: next departure visible at launch with no interaction, 41 percent fewer support contacts about live times, WCAG 2.2 AA verified across all 34 screens by external audit, and store rating up from 3.1 to 4.6.
OUTCOMES
================================================================
0 taps To reach the next departure
Down from four. It is now the first thing rendered at launch.
41% Fewer support contacts about live times
Measured across the first two quarters after release.
34 / 34 Screens at WCAG 2.2 AA
Verified with an external audit before launch.
4.6 Average store rating
Up from 3.1 in the six months following the rollout.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.