My Tickets & Bookings Redesign
One of the biggest projects I’ve led at Trainline is a redesign and improved experience of the My Tickets tab. As this tab is one of the most complex areas of the app, it’s been an exciting opportunity to combine a variety of skills to create and implement a better design for our users.
The Problem
Built many years ago, Trainline’s My Tickets tab has grown organically with the app. As the company added more features, countries, and train operators, this tab has been inundated with increased functionality and demands.
The page needed a full redesign and prioritisation of key functionality to help it better serve our customers and scale for the future.
My involvement
I led the design efforts on this project from discovery through implementation. During that time, I’ve run workshops, multiple user testing sessions and championed design across the company.
In addition, I’ve worked alongside the Product Owner to break down my design into smaller items that could be delivered in Agile sprints over a quarter.
Information overload
The existing Tickets tab presents a lot of information at the first level. Although great for reducing clicks, this was creating a lot of visual and cognitive load for the majority of customers, most of whom were using this tab to view their tickets and upcoming trips.
A side effect of the amount of information were large ticket cards that prevented customers from viewing more than one trip at a time, even on a large device. For a user with 1 or 2 trips, this may be okay. However, for the key commuter market with dozens of tickets over the weeks or months, this makes the page bulky and painful to use.
Reduce and redefine
Despite the extended information and actions on this page, we quickly discovered that most users access this page to view their tickets and upcoming journeys. Although they occasionally needed to refund a trip, or get an expense receipt; the truth was that it was a small percentage of cases. This led us to redefine the page to one that only focused on current and upcoming trips. We felt this would give users the items they needed, and significantly reduce the clutter.
Redefining the page also allowed us to limit the tickets to what we felt was most necessary to users: the current and upcoming trips. We continued our deep dive into user behaviour with help from research and analytics to determine the most important elements for pending travel, and created collapsed ticket cards, allowing users to view a bird’s eye view of their trips.
Designing for the present and future
As designers, we tend to love the challenge of creating visionary pieces of work, and this project was no different. However, issues arise when there is only a quarter to deliver the work, and the page is a key experience for our users.
Although it is fun and necessary to explore the design of the future, we also had to keep one foot in the present and make sure we could add value to our users now while still working towards our shiny new redesign.
An MVP and reusable components
A quarter was not enough time to deliver and AB test the new Tickets experience. We had to determine the key pieces of functionality that would give the most benefit to users. We decided to focus on removing past and expired trips, which we felt offered a big improvement for our users, and set the stage for the full redesign at a later date.
We placed the past and expired trips into a new modal that could be easily accessed anywhere in the app. This modal was easy to use and scan, and featured the same concept of collapsed and expanded trip cards that we pushed for My Trips.
And since the modal and expanded cards were brand new, our focus was on designing and developing reusable elements that could be used by past, present and future trips once development started on those areas.