Leading the design as part of the core team at The Trainline, working on the desktop web and mobile web team on a full end to end redesign, while also unifying the design to move towards a responsive solution, as opposed to two websites as it was when I joined.
Through customer research and data points, I identified various problem statements with the website and flows, and looked to tackle each problem statement one at a time, which would level up to a complete redesign.
Example of one problem statement:
Customers don’t feel confident with the journey they have selected before they enter what they perceive as the checkout, they feel pressured into committing too early.
At what point does the customer stop customising their journey? At what point does the data input and commitment begin.
Do customers have all the relevant information they need before they enter “checkout”
Journey details? Payment options? Seat reserved? Added extras? Transparency for price breakdown. Not enough clarity about what they have chosen.
Below you will find a summary of two features that were launched during my time at The Trainline. Each and every new feature went through a typical double design process, with research and multi variant testing providing valuable insights and directive on how to solve the problems identified.
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.