01 — Problem & Context
The app was designed
for the normal journey.
The NS app works well when trains run on time. But disruptions — cancellations, delays, replacement buses — happen in about 1 in 10 journeys. When they do, the app provides no dedicated disruption layer, no clear guidance, and no decision support. Users are abandoned at the exact moment they need help most.
"The NS app was designed for the normal journey. It has no disruption-specific UX layer, no stress-aware communication, no decision support."
NS disruption data — 1.1M daily passengers, 88.9% punctuality in 2024
02 — Research & UI Audit
Real journeys,
real failure.
Research began with a live UI audit — capturing screenshots from real NS journeys across three different routes on the same afternoon. This was combined with analysis of app store reviews from Google Play, App Store, Trustpilot, and Reddit. Six failure patterns emerged across all three routes.
Live app captures across three routes — April 4, 2026
6 pain point clusters sourced from App Store, Google Play, Trustpilot, Reddit
Critical · P1
Notification failure
No push alert when train is cancelled. Users find out by manually refreshing, or at the platform.
Critical · P2
Vague delay information
Shows only "+X minutes late", no revised arrival time. Users cannot make decisions without this.
Critical · P3
No alternative routing
After cancellation, no rerouting offered. Users must manually search while stressed and time pressured.
Friction · P4
Out-of-sync information
App, station boards, and PA show different delay times. Users don't know which source to trust.
Friction · P5
Hidden faster alternatives
App doesn't surface the fastest route. Alternatives at transfer stations are not shown proactively.
Friction · P6
No compensation signal
Delays over 30 min qualify for compensation. App gives no signal of this at the moment it matters.
03 — Personas
Two users,
two failures.
Two personas were defined based on real NS user behaviour from the research — not assumed profiles. Both represent different ways the app fails people in the same disruption scenario.
Layla: daily commuter · Hendrik: occasional traveller — both failed by the same app
04 — Emotional Journey Map
Calm → Alert →
Anxious → Resigned.
The journey map follows one clear scenario: a saved morning trip is cancelled during the commute. It traces Layla's experience across 6 stages, from departure to resolution — mapping not just what happened, but how she felt at each moment.
Emotional curve: Calm → Alert → Anxious → Stressed → Frustrated → Resigned
Three stages drove the design: Stage 03 (delay grows), Stage 04 (no guidance), Stage 05 (breakdown point). Each missed moment has a direct design response.
05 — Design Principles
4 principles.
All from research.
Before touching Figma, four design principles were defined — each derived from a specific breakdown moment in the journey map, not from general UX rules. Every design decision is traceable back to these four.
Principle 01
Show one clear answer, not a list
During disruptions, users are already under time pressure and mental load. The app should handle the complexity and present one clear recommended action — not dump options on a stressed user.
Principle 02
Show what it means, not just the numbers
"+7 minutes" is data. "You will arrive at 09:14, which is 7 minutes late" is information. The app should explain what the delay means for the user's specific journey.
Principle 03
Notify the user before they ask
Users should not have to refresh to discover a cancellation. Even early, imperfect updates build more trust than accurate information that arrives too late to act on.
Principle 04
Use plain language, not transport jargon
"NS Snelbus instead of train" is unclear under stress. Messages should read like something you'd say to a friend — a clear subject, verb, and action.
06 — Design Scope & Information Architecture
Add a layer.
Don't change the map.
The redesign adds a disruption layer on top of the existing planner. It does not introduce new navigation, a new tab, or a new app section. It appears only when a saved journey is affected and stays completely hidden during normal use.
Left: scope definition · Right: IA showing new screens vs modified states
Step 01
Push notification
Sent the moment a saved journey is affected. Includes reason, status, and one suggested action.
Step 02
Disruption alert
Replaces the normal journey view. Shows what happened, updated arrival time, and one main action.
Step 03
Alternative route
One recommended train with departure, platform, and new arrival. Other options collapsed below.
Step 04
Confirmed
User saves the alternative. Full flow completed in under three taps.
07 — Wireframes
Structure first.
Style second.
Low-fidelity wireframes were created before any visual design. Each screen focused on a single task: what the user needs to do at that moment, and the minimum information needed to do it. Wireframes were used directly in usability testing before any visual refinement.
Four wireframe screens with design rationale annotations
08 — Usability Testing
3 participants.
4 screens.
6 findings.
Testing was done at wireframe stage — before moving to detailed design. Three participants from my network were selected to match the personas. Each session was task-based, lasted 15–20 minutes, and I observed without intervening.
3 participants · 4 screens · 20 min per session · 1 scenario
6 findings: 2 critical, 2 friction, 2 positive — each mapped to design changes
Every change in the final design comes from a specific observation. Nothing was changed just for visual reasons.
09 — High-Fidelity UI
NS visual language.
New disruption states.
The high-fidelity screens follow the NS visual style — yellow headers, deep blue text, clear status colours. At the same time, they introduce new disruption states that don't exist in the current app. Each design decision is linked to a specific principle and a usability testing insight.
4 screens: Push notification · Disruption alert · Recommended alternative · Journey list
10 — Outcome & Reflection
From data to
guidance.
The current NS app treats disruption as a data problem — it shows delay numbers, labels, and status codes. This redesign treats it as a communication problem. The same information is rewritten as clear sentences organised around what the user needs to do next.
The most important insight wasn't about UI patterns — it was about how stress affects how people understand information. More options and more visual complexity made people more anxious. The design became less about adding and more about removing.
3 taps · 4 new screens · 5/6 pain points addressed · Full reflection & next steps
"Disruption is not a rare case for NS users. It happens regularly, and the app should reflect that. The goal is not to prevent disruption — but to help users move through it."