Eurostar · Seat maps
Making seat changes clear across a connected journey
A seat change should be simple, even when a journey involves several trains. I led the UX redesign of seat selection in the Eurostar app, helping passengers keep track of their train, their travelling companions and the changes they were making. I designed the flows and prototypes, ran usability testing and worked with product, UI design and engineering through delivery.
Scope
UX direction, experience review, user flows, wireframes, prototypes and usability testing for iOS and Android.
Delivery
Launched in the Eurostar app.
The experience
One journey. Each train and traveller in view.
01
More than fitting a website onto a phone
The existing app opened a web-based seat map. A large header, persistent app navigation and several scrolling areas competed with the part people needed most: the coach and its seats. The interface also offered a save action when someone had only come to look at their booking.
The work coincided with extending seat selection to continental routes following the Eurostar and Thalys merger. That brought different trains, coach layouts and journeys with connections into the same experience. A screen built around a direct journey needed to make sense when passengers had several trains to manage.
I approached the work as a mobile interaction problem, not just a visual refresh. The priorities were to make room for the map, keep the current train and passenger clear, and distinguish looking at a seat from changing it.
01
More than fitting a website onto a phone
The existing app opened a web-based seat map. A large header, persistent app navigation and several scrolling areas competed with the part people needed most: the coach and its seats. The interface also offered a save action when someone had only come to look at their booking.
The work coincided with extending seat selection to continental routes following the Eurostar and Thalys merger. That brought different trains, coach layouts and journeys with connections into the same experience. A screen built around a direct journey needed to make sense when passengers had several trains to manage.
I approached the work as a mobile interaction problem, not just a visual refresh. The priorities were to make room for the map, keep the current train and passenger clear, and distinguish looking at a seat from changing it.
From web view to a focused mobile task
Before
App navigation, controls and the map compete for space.
Redesigned
The seat map has its own focused space.
From web view to a focused mobile task
Before
App navigation, controls and the map compete for space.
Redesigned
The seat map has its own focused space.
02
Keep the train and the passenger in view
On a connected journey, a seat number is not enough. Passengers need to know which train it belongs to and whose seat they are editing.
I mapped the journey through outbound trains, connections and the return trip. Labels such as “Outbound train 1 of 2” sit alongside the route, with the passenger selector directly below. Moving from London to Brussels and then Brussels to Amsterdam changes the train context without changing the interaction pattern. Coach and seat details remain attached to each traveller.
This gives each decision a clear context. Someone can move through their journey without treating every train as a separate task or losing track of the person they are moving.
02
Keep the train and the passenger in view
On a connected journey, a seat number is not enough. Passengers need to know which train it belongs to and whose seat they are editing.
I mapped the journey through outbound trains, connections and the return trip. Labels such as “Outbound train 1 of 2” sit alongside the route, with the passenger selector directly below. Moving from London to Brussels and then Brussels to Amsterdam changes the train context without changing the interaction pattern. Coach and seat details remain attached to each traveller.
This gives each decision a clear context. Someone can move through their journey without treating every train as a separate task or losing track of the person they are moving.
A connected journey
01 / London → Brussels
The first train and its seat allocation.
02 / Brussels → Amsterdam
A different train, with the same way to navigate.
A connected journey
01 / London → Brussels
The first train and its seat allocation.
02 / Brussels → Amsterdam
A different train, with the same way to navigate.
03
Separate browsing from making a change
I designed two distinct states. While passengers are viewing their seats, they can move between trains. Selecting a different seat introduces Save changes and Discard changes. They resolve that choice before continuing.
That distinction matters because tapping a seat and saving it are different actions. The map shows the proposed selection while the passenger selector retains the existing allocation until it is saved. A confirmation message then acknowledges the update, and journey navigation returns.
I explored alternative save and navigation behaviours with the team, including confirmation on exit and saving later in the journey. Bringing the decision back to the current train kept an outstanding change close to the seat and passenger it affected.
03
Separate browsing from making a change
I designed two distinct states. While passengers are viewing their seats, they can move between trains. Selecting a different seat introduces Save changes and Discard changes. They resolve that choice before continuing.
That distinction matters because tapping a seat and saving it are different actions. The map shows the proposed selection while the passenger selector retains the existing allocation until it is saved. A confirmation message then acknowledges the update, and journey navigation returns.
I explored alternative save and navigation behaviours with the team, including confirmation on exit and saving later in the journey. Bringing the decision back to the current train kept an outstanding change close to the seat and passenger it affected.
Viewing, changing and saving
Design states shown separately
01 / Browse
Move between trains and inspect the current seat.
02 / Change
Choose another seat, then save or discard.
03 / Saved
Confirmation appears and journey navigation returns.
Viewing, changing and saving
Design states shown separately
01 / Browse
Move between trains and inspect the current seat.
02 / Change
Choose another seat, then save or discard.
03 / Saved
Confirmation appears and journey navigation returns.
04
Give the map room without hiding the essentials
The new seat map opens as an overlay, removing the app’s bottom navigation from this focused task. A numbered coach selector supports navigation through the train, while the main map gives seats, exits and facilities more room.
We explored different positions for the coach and passenger controls, including a horizontal coach selector. The challenge was not simply to reduce the number of controls, but to make their relationship understandable on a small screen.
Seat information sits in an expandable panel. Passengers can inspect details such as seat direction, power sockets and nearby facilities without giving that information permanent ownership of the screen.
The flow also makes room for practical questions beyond the seat itself. Luggage racks and the café open their own information panels. When a passenger selects a seat in another coach, a prompt asks them to keep their group together. These details support the decision within the map, rather than sending people away to find answers.
04
Give the map room without hiding the essentials
The new seat map opens as an overlay, removing the app’s bottom navigation from this focused task. A numbered coach selector supports navigation through the train, while the main map gives seats, exits and facilities more room.
We explored different positions for the coach and passenger controls, including a horizontal coach selector. The challenge was not simply to reduce the number of controls, but to make their relationship understandable on a small screen.
Seat information sits in an expandable panel. Passengers can inspect details such as seat direction, power sockets and nearby facilities without giving that information permanent ownership of the screen.
The flow also makes room for practical questions beyond the seat itself. Luggage racks and the café open their own information panels. When a passenger selects a seat in another coach, a prompt asks them to keep their group together. These details support the decision within the map, rather than sending people away to find answers.
Information at the point of choice
Seat details
See direction, window position and facilities.
Travelling together
Keep the group in the same coach.
Information at the point of choice
Seat details
See direction, window position and facilities.
Travelling together
Keep the group in the same coach.
The details around the seat
Café
Explore food, drinks and onboard facilities.
Luggage
Understand which storage space fits the bag.
The details around the seat
Café
Explore food, drinks and onboard facilities.
Luggage
Understand which storage space fits the bag.
05
One experience, different trains
Consistency did not mean drawing every train the same way. Continental fleets introduced different window positions, facilities and seating configurations. Some information depended on the coach; other information belonged to an individual seat.
I worked with the UI designer, engineers and web team to resolve those differences within a shared experience. The work included clarifying facility information, reviewing coach navigation and considering wheelchair users, companions and passengers with reduced mobility.
The prototypes and flows helped us discuss these details together while working to a compressed delivery timeline. They connected the overall journey to the individual states engineers needed to build.
05
One experience, different trains
Consistency did not mean drawing every train the same way. Continental fleets introduced different window positions, facilities and seating configurations. Some information depended on the coach; other information belonged to an individual seat.
I worked with the UI designer, engineers and web team to resolve those differences within a shared experience. The work included clarifying facility information, reviewing coach navigation and considering wheelchair users, companions and passengers with reduced mobility.
The prototypes and flows helped us discuss these details together while working to a compressed delivery timeline. They connected the overall journey to the individual states engineers needed to build.
06
Test the words as well as the layout
I ran two rounds of remote, unmoderated usability testing, focusing on connected journeys and seat changes. The findings highlighted uncertainty about which train was being edited and whether a change had been applied.
We refined the journey labels, instructions and feedback alongside the interface. Microcopy was central to the work: a prominent button could still be unclear if it did not explain what would happen to the current seat or where the passenger would go next.
06
Test the words as well as the layout
I ran two rounds of remote, unmoderated usability testing, focusing on connected journeys and seat changes. The findings highlighted uncertainty about which train was being edited and whether a change had been applied.
We refined the journey labels, instructions and feedback alongside the interface. Microcopy was central to the work: a prominent button could still be unclear if it did not explain what would happen to the current seat or where the passenger would go next.
The outcome
A clearer seat-selection experience, in passengers’ hands.
Fewer support queries
Customer support queries about seat selection fell following launch.
Positive passenger feedback
Reviews mentioned the improved seat picker.
The design brought clearer navigation and seat-change feedback to connected journeys, while accommodating different train configurations within the same experience.
My main lesson was that clarity comes from the relationship between the route, passenger, seat and action. Improving any one of them in isolation would not have resolved the whole journey.
The outcome
A clearer seat-selection experience, in passengers’ hands.
Fewer support queries
Customer support queries about seat selection fell following launch.
Positive passenger feedback
Reviews mentioned the improved seat picker.
The design brought clearer navigation and seat-change feedback to connected journeys, while accommodating different train configurations within the same experience.
My main lesson was that clarity comes from the relationship between the route, passenger, seat and action. Improving any one of them in isolation would not have resolved the whole journey.
The outcome
A clearer seat-selection experience, in passengers’ hands.
Fewer support queries
Customer support queries about seat selection fell following launch.
Positive passenger feedback
Reviews mentioned the improved seat picker.
The design brought clearer navigation and seat-change feedback to connected journeys, while accommodating different train configurations within the same experience.
My main lesson was that clarity comes from the relationship between the route, passenger, seat and action. Improving any one of them in isolation would not have resolved the whole journey.