Trainline
A 24-hour cross-discipline collaborative hackathon organised by BrainStation x Trainline
Project type
Group project
(2x UX designers, 2x software engineers)
My role
UX Research
UX/UI design
Prototyping
Duration
24 hours
Tools
Figma
Figma Slides
The Client
The one-stop shop for rail and coach travel
Trainline is a leading platform for booking train and bus travel across Europe, gathering routes, prices, real-time updates and personalised options. It simplifies travel while promoting eco-friendly choices.
Trainline in numbers
Europe's number 1 downloaded rail app
over £5.3 billion in annual ticket sales
collaborating with rail and coach companies in over 40 countries
The Challenge
The power of people
Trainline’s success is driven by its customers. With millions of users spanning 40 countries, the company demonstrates a deep appreciation for the power of its community, reflected in its four core values.
Think Big
Build the future of rail, and conceptualise bold ideas that contribute towards that.
Own It
Care about every customer, partner and journey. Focus on what really matters to deliver a customer-first solution.
Do Good
Make a positive impact by driving greener, more sustainable habits. Understand how customers can make even more impact when working together.
Travel Together
Collaborate as a unit to build a feature you can be proud of and celebrate, and have fun!
Collaborating with Trainline, our team of 4 was tasked to explore ways of connecting rail travellers with one another to improve their travel experience and/or find the best value. I collaborated with one UX designer and two software engineers during an intensive 24 hour hackathon, cross-collaborating to identify possibilities and come up with a fully functional, well-crafted solution answering the following question:
Ahead of the challenge, a few team members were new to UX Design and cross-disciplinary collaboration. I stressed the importance of fully understanding the problem space before proposing solutions and encouraged an open, inclusive environment where ideas could come from anyone, regardless of background. I urged the team to think critically and contribute actively throughout the process.
First things first
What does connection mean?
We began the design process by exploring the concept of "connection" - what it means, the forms it can take, and the personal references each team member brought to the table. This exploration helped us build a shared understanding and set the foundation for our creative direction. Recognising the importance of collaboration, we actively included the software engineers in these early discussions. Their insights not only enriched the ideation process but also ensured we were aligned from the start, enabling us to gather the best ideas and create a cohesive, innovative solution as a team.
Secondary research
Who is open to connection?
With SE involved, we got to think!
aged 18-24 - proportion using rail in the last 7 days
met someone on a trip, who gave them a new perspective
planning to travel believe they will be doing so with friends
The Crazy 8s
Sketching, brainstorming, sharing, discussing
Even with the informal setting, we maintained focus. I guided the team through various design exercises, such as the Crazy 8s technique, to ensure everyone actively contributed to brainstorming solutions. We also held a "Round-the-table" discussion, where we shared ideas for potential features and design improvements.
The chosen path
Connecting by exploring
In our collaborative session, we used coloured dots to vote on the importance of different design ideas and features, helping us decide on our direction. My idea for an "Explore" feature was ultimately chosen. Inspired by Airbnb, we envisioned Trainline offering more than just ticket purchases - it would foster connections, communities, and memories. The "Explore" section would allow users to share snippets of their trips, connecting them with others and enhancing the overall experience.
The constrains
Defining the limits
Defining constraints is a crucial part of the UX process, as it helps establish the boundaries within which the design must operate. This involves identifying factors such as technical limitations, business requirements, user needs, and time or budget restrictions. By clearly outlining these constraints early on, we ensured that the design remains focused, feasible, and aligned with project goals.
The User Persona
Say hello to James
After gathering insights from our research, we created a user persona by consolidating the common blockers and frustrations shared by users. This persona helped us better understand the target audience’s needs, behaviours, and pain points. By focusing on these key insights, we ensured that our design solutions were user-centric and effectively addressed the challenges users face.
The current experience
Room for opportunities
To better understand user needs, we created an experience map to outline the journey users take when seeking inspiration for new trip ideas, connecting with others, and planning their travel. This provided a comprehensive view of their expectations, behaviours, pain points, and challenges, helping our UX team uncover opportunities to enhance their experience.
The current experience map highlights key areas for improvement, including browsing travel recommendations and engaging with other travellers by exploring their stories and viewing their photos in a curated feed.
The focused task
Getting inspired from the snippets of others
To understand user goals, I created and grouped user stories into key themes, selecting the most valuable to develop into task flows. Inspired by platforms like Airbnb, we designed Trainline’s Explore feature to offer more than ticketing - fostering connections, communities, and memorable experiences.
For instance, a returning user seeking weekend trip ideas would navigate to the Explore section, where personalised content, based on analytics and past trips, showcases snippets of verified users’ journeys. Filters like Solo or Social Travel provide additional customisation, ensuring an intuitive and inspiring user experience.
Our final design
Introducting our solution
As each stage of the flow was completed, designs and assets were handed over to the developers. This enabled us to progressively build and deliver the coded version of the product, ensuring it was ready for the final presentation.
The final presentation
Introducing our solution to Trainline
Once our designs had been built in code, we prepared for our presentation to the Trainline panel of three judges. In a twelve-minute presentation, we detailed our journey from concept to final product, showcasing the digital solution we had developed.
Our focus was on promoting authenticity and encouraging users to explore new routes and destinations by viewing insights and visual stories shared by others. This approach not only enhances user engagement but also has the potential to drive increased ticket purchases through the app.
Presenting our final solution to Trainline
The winning solution
We secured the winning position after competing against two other teams, demonstrating our innovative approach and collaborative efforts throughout the challenge. Our solution stood out for its creativity, user-centred design, and alignment with the project goals.
A few words from Trainline
''From a UX perspective this one was the strongest. Especially around the explore tab. This is something we are looking at currently, so good work here.''
''It was easy to see that lots of collaboration went into the making of the project from the project presentation. Great teamwork!''
''Having the explore tab integrated within the home tab was a great choice for discoverability.''
''It was the most on brand, I felt. Something that one of our teams would genuinely come up with.''
''This team also seemed to really have enjoyed the experience. The presentation was very strong, covering a lof of ground around process and was visually impressive.''
''I thought the prototype demo was impressive, displaying a lot of UX functionality in something that looked like it could almost fit in the product as is.''
Key learnings from a hackathon!
Remember that hackathons are not meant to be pixel perfect - they foster innovation and collaboration under time constraints, pushing teams to rapidly ideate, prototype, and present solutions to a defined challenge in a collaborative environment.
Teamwork is a dream work - hackathons highlight the importance of teamwork, where diverse skills and perspectives come together to solve challenges efficiently through collaboration and open communication.
If we had more time we would…
Create back end using Node.js (Express Framework).
Build relational database (MySQL).
Conduct several rounds of user testing to gather insights and refine the design, prioritising feedback to iterate in the most time efficient way possible.
Enhance the motion design elements within the user flow to ensure seamless interactions and an intuitive user experience.