Embedded Files
The Trainline
Role and scope
As part of the core team at Trainline, I led design across both the desktop and mobile web platforms, driving a full end-to-end redesign of the booking experience. One of my key goals was to unify the product into a single responsive website, replacing the separate desktop and mobile versions that existed when I joined.
Approach
Using customer research and data insights, I identified a set of critical problem statements within the booking flow. These were tackled one by one, each forming part of a phased approach that contributed to a broader redesign of the entire experience.
Example Problem Statement
Customers don’t feel confident about the journey they’ve selected before they enter what they perceive as the checkout. They feel pressured to commit too early.
Key questions I explored
At what point do customers stop customising their journey?
When does data entry start to feel like a commitment?
Do customers have the information they need before reaching checkout?
Areas where clarity was often lacking
Journey details
Seat reservations
Added extras
Payment options
Price breakdown and transparency
Process
Each new feature followed a Double Diamond design process, supported by:
User research
Problem-framing workshops
Multi-variant testing
Collaborative iteration with Product and Engineering
Insights from testing shaped both the user experience and final implementation decisions.
Outcomes
Below is a summary of two features launched during my time at Trainline. Both directly addressed user pain points and contributed to a more confident, seamless booking experience.
Clarity on selected trip
Problem
Customer does not understand which trip is preselected on the search results page or where to find full journey summary
Desktop web version is disjointed when journey has multiple legs
No overview of entire journey that is easy to scan
Selection points for the customer are scattered throughout the flow
Mobile version has no detailed feedback once selected, user has to rely on memory to know the journey details
Objective
Increase visual of selected journey and full journey summary
Increase affordability to find out more about selected journey, and where to find full journey summary
Decrease exit rate / back and forth reselection
Design solution and results
Increased clarity on what trip is selected
Increased clarity on how many changes there are for more complex trips
Increase in confidence that customers are proceeding with the right trip for them
Less step conversion from low intent customers trying to find this information (often only finding full information on payment screen)
Journey summary and running total
Problem
Customer does not understand at the point of selecting their trip for purchase, which trip they have in fact selected, or what the running total is for said trip. Causing drop off, customers clicking back and forth to “re-select” or just choosing to exit at payment screen
Information is overwhelming the user with too much text
not enough information on the mobile screen before payment screen is presented
Objective
Repeat familiar patterns as customers have experienced before
Increase affordability and usability of full journey summary access point
Design solution and results
A much more visual approach to how the journey is presented, in a similar format to how the user is familiar with on other websites and apps
Improved clarity on the price information
Improved clarity on selected journey providing top level information to user, using progressive disclosure reveal more information when user requires
Decrease in step conversion
Decrease in back journeys
Increase in high intent step conversion
Increase in overall purchase conversion
Combined with the seat confidence messaging, there was a 300% click increase of the journey summary component. We know for a fact from data that those interacting with the previous “journey details” modal made customers more likely to convert.
Google Sites
Report abuse