CrossCountry Trains
Breathing new life into CrossCountry’s brand and creating consistency across digital and offline.
UI | UX | Prototyping | User Research | Testing
Project overview
CrossCountry Trains are one of the UK’s biggest train operators with the widest reach across the country. Spending several years working on their website, social and marketing collateral, CrossCountry are my longest standing client to date.
The Challenge
The product teams work in silos across 30+ brands and themes. The online tool used to manage their UI components, 'ThemePark', is a hard-coded, front end design system that becomes more restrictive as more brands/themes are added.
Entain's ambition is to deliver a best-in-class design experience for their customers and in return improve their internal workflows and boost creativity, speeding up the component approval process.
Their current toolkit and creative process stands in the way of this. They needed to revisit their approach to the system to minimise back and forth, ensure consistency and understanding of the platform within their team.
Users and audience
ThemeParks’ primary users are the design and development teams, but also extends to the wider team, including project managers and stakeholders. We had to ensure that ThemePark was both easily accessible and intuitive for all potential users, not just the primary users.
Our approach
This project required an agile mindset from both the Absurd and Entain teams. As we began research into the organisation, the needs of the customer and requirements for the design system grew. Each new task was validated and prioitised within the overall content framework.
Understand frictions blocking UI component updates and the disconnect between Designer-Engineering teams through interviews with the Entain internal teams
Troubleshoot the reasons behind component 'hacking' and the barriers ThemePark presents to the business
Take an experiment led approach to research, working in the open to align as 'one team' and regularly involving internal teams at each stage of the journey through workshops, weekly ‘Show & Tells’ and regular User Testing.
Audit current organisational structure and end-to-end processes and create a service map to identify the pain points and areas of opportunity
The output
Through our research and interviews, we discovered that there were three main areas to focus on:
01. Naming convention
02. Whitelabel component library
03. Themepark 2.0
Naming convention
In order to combat the lack of consistency of language across teams we established a new naming convention which aligned with code for a frictionless handoff between Designers and Developers.
This new naming convention was all contained within a detailed spreadsheet which also acts as a database for the Whitelabel components, Figma Live Embed URLs and documentation details.
Component name
Brand identifier
Variant number
Whitelabel component library
We created a whitelabel design system which was an amalgamation of all the existing components used across the multiple design teams. By consolidating these libraries we ensured that the whitelabel accommodated everything Entain would need when distributing this system across their teams.
In addition to this, we included inline documentation to support design rationale and help global teams maintain consistency.
ThemePark 2.0
ThemePark 2.0
A new ThemePark platform with an improved list of features to support smoother internal processes within Entain was essential. Some of these features include a more intuitive login process and increased governance and visibility of changes made by team members.
ThemePark 2.0
ThemePark would also be the home of all of the brand guidelines making it a one-stop-shop for all information designers might need.
ThemePark 2.0
By utilising Figma’s Live Embed feature, we were able to preview Figma frames directly onto ThemePark, meaning any updates made to designs in the component library were automatically reflected on ThemePark. The Figma Live Embed frame is linked to the component and page url through a component ID on the content spreadsheet.