A UX redesign of the NS app's disruption experience. When trains are delayed or cancelled, the current app leaves users without clear guidance at a critical moment, this project introduces a disruption layer with four screens, completed in three taps, with one clear answer at each step.
The NS app works well for normal journeys. But disruptions such as cancellations, delays, and replacement buses are not rare, they happen in about one out of ten journeys. When they happen, the app does not provide a clear experience. Users are left without support at the moment they need it most.
"Unfortunately, in many places, the infrastructure has exceeded its lifespan, leading to too many disruptions this year. This autumn, our passengers experienced some particularly bad days."
Before starting the design, I wanted to understand how the app works during disruption. I looked at reviews from the App Store, Google Play, Trustpilot, and Reddit, and also captured screenshots from my own NS journeys across three different routes on the same afternoon.
The highlighted, selected journey is already delayed (+1). The app recommends it with no explanation.
Two routes show this warning but no reason is given. The user doesn't know if it's temporary or permanent.
A mixed list of possible, impossible, and delayed options with identical visual weight.
The user sees a red "+15" but cannot calculate the updated arrival or connection risk without doing the mental math themselves.
A heavily delayed ICE is highlighted first with an extra cost, with no warning that it isn't the best option. Stress plus speed equals a costly mistake.
After 3 delayed trains, the list returns to normal options with no acknowledgement that something is wrong on this corridor.
"Shorter train, extra busy" tells the user something is wrong. It doesn't say to take the next one instead.
A replacement bus appears as one row among many, with no prominence and no explanation of which segment is affected.
The screen opens with a bare warning and two words. No subject, no verb. What is disrupted? Since when? What should I do? Nothing.
The same pattern appeared across all three routes. Disruption information was shown as scattered pieces like "+7 minutes," "journey not possible," or "alternative transport," without explanation or clear priority. The app was not broken, it just wasn't designed for this situation.
Sourced from App Store, Google Play, Trustpilot, and Reddit reviews.
Critical: failure at the moment of highest stress
No push alert when a train is cancelled. Users find out by manually refreshing, or at the platform.
Shows only "X minutes late," no revised arrival time. Users cannot make decisions without this.
After cancellation, no rerouting is offered. Users must manually search while stressed and time-pressured.
The app, station boards, and PA show different delay times. Users don't know which source to trust.
The app doesn't surface the fastest route. Alternatives at transfer stations are not shown proactively.
After cancellation, no rerouting is offered. Users must manually search while stressed and time-pressured.
The NS app was designed for the normal journey. It has no disruption-specific UX layer, no dedicated screen state, no stress-aware communication, no decision support. When disruption happens, users are abandoned at the moment they need guidance most.
Both are based on real NS user behaviour from the research, not just assumed profiles.
Layla has taken the same bus-to-train connection from Nieuwegein to Utrecht Centraal every workday for three years. She knows the timetable by heart. She opens the NS app only when something feels off, a delayed departure board, an unusual crowd at the stop.
The app shows "+7 minutes" in red but doesn't tell her whether she'll still make her connection at Utrecht. She has to calculate it herself while standing at a cold bus stop, already running late.
Experienced commuters don't browse, they scan for one signal. When disruption happens, they need a single trusted answer, not more data to process.
Hendrik travels by train to visit his daughter in Den Haag and his son in Amsterdam a few times a month. He plans his journey carefully in advance, prints or screenshots his itinerary. He is not familiar with alternative routes and relies entirely on what the app tells him.
"NS Snelbus instead of train" appears in his journey list with no explanation of where to board, how to recognise it, or whether his OV-chipkaart still works. He doesn't know if he should wait, walk, or ask someone.
Occasional users with low tech confidence don't explore the app under stress, they freeze. If the first screen doesn't give them a clear, actionable instruction, they disengage from the app entirely and look for a human to help instead.
A saved morning trip is cancelled during the commute. It follows Layla, the daily commuter, because her situation is the most time-sensitive and stressful. The main design focus is on stages 03, 04, and 05.
Checks journey as usual. Everything looks normal.
Bus is 1 minute late. Checks app again, sees "+1" in red on her selected journey.
Delay counter jumps, no explanation, no revised arrival shown. She does the mental math herself.
Manually opens planner, types route again, scans list. Sees "Journey not possible" on two options.
No notification received. She sees it only when manually refreshing at the platform. No next step offered.
Takes next available train after manually searching. Arrives 22 minutes late. Texts her manager.
No updated arrival time shown. The user is forced to calculate the delay's impact herself, under stress.
Show the updated arrival and flag connection risk automatically: "You may miss your connection."
No proactive alternative suggestion. The user must manually research while time-pressured.
Surface one clear recommended alternative, not a list. One tap to switch.
No cancellation notification sent. The user discovered it herself at the platform, too late to act.
An instant push notification with the cancellation reason plus the next best option, already loaded.
Each missed moment has a direct design response. These three stages became the focus of the entire redesign.
Defined before starting in Figma. Each one came from a breakdown moment in the journey map, and guides every design decision that followed.
During disruptions, users are already under time pressure and mental load. Showing multiple options can increase stress instead of helping. The app should handle the complexity and present one clear recommended action.
A delay like "+7 minutes" is just data. Saying "You will arrive at 09:14, which is 7 minutes late" gives the user something they can understand and act on.
Users should not have to refresh the app to discover a cancellation. Even early, imperfect updates build more trust than accurate information that arrives too late.
Terms like "NS Snelbus" or "alternative transport" are unclear, especially when users are stressed. Messages should be written in simple language, like something you'd say to a friend.
These principles create a real tension. Showing less can conflict with showing more. The solution is to adapt to the situation: during disruption, show one clear action, in the detail view, show the full information. The behaviour changes based on urgency, not the screen.
The redesign adds a disruption layer on top of the existing planner. It does not add new navigation or a new tab. It only appears when a saved journey is affected, and stays hidden when everything is normal.
Sent as soon as a saved journey is affected, with the reason, status, and one suggested action.
Replaces the normal journey view during disruption, showing what happened, the impact, and one recommended action.
Shows one clear alternative with departure time, platform, and updated arrival, with other options collapsed and a single tap to switch.
Adds a disruption banner at the top when the route is affected, showing updated arrival times instead of just delays.
Shows the delay as a full sentence, flags connection risk, and highlights any platform change.
Disrupted saved journeys are flagged with an amber indicator. Tapping leads to the disruption alert screen.
User receives a push notification such as, "Your 08:22 to Utrecht is cancelled. Take the 08:31 instead" and taps it.
The disruption alert screen opens, showing what happened, the updated arrival time, and the impact on the journey, with one clear main action: "See alternative."
The alternative route screen shows one recommended train with departure time, platform, and new arrival, with a secondary option to see other routes.
User confirms the new route. The alternative is saved to the journey, the user heads to the platform, and the flow is completed in under three taps.
The full flow, from notification to confirming an alternative, takes less than three taps. This was an intentional decision.
Created before any visual design. Each screen focused on one task: what the user needs to do at that moment, and the minimum information needed to do it.
Screen 1, push notification on the lock screen. Screen 2, disruption alert replaces the journey view. Screen 3, one recommended alternative with other options collapsed. Screen 4, the journey list in its modified disruption state.
Three participants from my network were selected to match the personas. Each session was task-based, lasted about 15 to 20 minutes, and I observed without intervening.
32, marketing coordinator, daily commuter between Utrecht and Amsterdam, uses the NS app every day.
Matches Persona 1, Layla28, graduate student, irregular NS user, generally familiar with mobile apps.
Mixed, additional perspective67, retired, travels by train two to three times a month to visit family, moderate confidence with apps.
Matches Persona 2, Hendrik2 of 3 participants were confused when the same journey appeared in both the recommended option and the "Other options" list, making it unclear which one to choose.
Participant 2, who matched Persona 2, didn't immediately understand that the recommended card was the main suggestion. They looked through other options first, then returned, still unsure.
Participants 1 and 2 had to read the impact card more than once to understand the before and after times. The contrast between old and new arrival needed to be stronger.
Participant 2 scrolled past the banner without noticing it. The amber colour didn't stand out enough from the white background to catch attention before the journey list.
All three participants responded positively to the plain-language reason card. Participant 2 said it made him feel less anxious, which strongly supports Principle 04.
All three participants understood the notification immediately without needing to read it again, including the train time in the title.
Two findings were critical and required immediate changes. Two showed smaller issues that needed refinement. Two confirmed that the design direction was working. Every change in the final design comes from a specific observation, nothing was changed just for visual reasons.
The high-fidelity screens follow the NS visual style: yellow headers, deep blue text, and clear status colours, while introducing new disruption states that aren't part of the current app. Each decision is linked to a specific principle and a testing insight that informs it.
Screen 1, push notification. Screen 2, disruption alert. Screen 3, recommended alternative. Screen 4, journey list disruption state. Each decision on these screens ties back to one of the four design principles and a specific usability-testing insight.
Exploring how NS could guide passengers through real-time train disruptions, from push notification to alternative journey selection. Designed in Figma and implemented as an interactive coded prototype.
From notification to confirming an alternative, the full disruption flow takes less than three taps.
Two new screens and two updated states, with no new navigation or tabs added.
Five of the six research pain points are directly addressed. P6, about compensation, is made visible but not fully designed, as a deliberate scope choice.
The current NS app treats disruption as a data problem, showing delay numbers, labels, and status codes. The redesign treats it as a communication problem. The same information is written as clear sentences and organised around what the user needs to do next. This reduces mental effort at the moment it matters most, instead of trying to understand "+7 minutes" under pressure, users see "Arrives 7:56, 16 minutes later" and one clear action. This shift, from raw data to clear guidance, is the core idea of this project.
The most important insight was not about UI patterns, but about how stress affects how people understand information. At first, I thought giving more information would help users feel in control during disruption, testing showed the opposite: more options and more visual complexity made people more anxious. The design became less about adding and more about removing. Principle 01, one clear answer instead of a list, came directly from this. I watched a participant scan a long list of delayed trains while stressed, then relax as soon as she found the one she needed. That moment shaped the whole direction of the project.
This project was developed with support from AI in research synthesis and documentation, alongside my own design work, Figma execution, and personal observations from real NS use. AI was used as a thinking partner to structure findings, test ideas against defined principles, and speed up documentation. All design decisions, visuals, and the overall direction of the case study are my own.