Entain Group
Unifying global design teams with a common language and a single source of truth.
UI | UX | Prototyping | User Research | Testing
Project overview
Entain is one of the world's largest sports-betting and gaming groups, housing an extensive portfolio of brands including Ladbrokes, Bwin, Coral, Gala and BetMGM.
Due to the sheer size of the Entain business, their design and development teams are widespread across multiple countries, including the UK, Gibraltar and Vienna. This disconnect of teams naturally causes issues with communication and visibility.
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.
Desirable
Viable
Feasible
Human
Technology
Business
Organisational
challenges
Technical
specifications
+ limitations
Onboarding
designers
Inconsistent,
lengthy
processes
Stifled
creativity
Developers
Designers
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.
Project Managers
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.
Guidelines
ThemePark would also be the home of all of the brand guidelines making it a one-stop-shop for all information designers might need.
Not only did this improve consistency across product teams but also ensured nobody accidentally changed any of the guidelines as we included administrators who have to approve all changes put forward.
Live embed
By utilising Figma’s Live Embed feature, we were able to preview Figma frames directly in ThemePark, meaning any updates made to designs in the master 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.