Betfred.com moved onto its own independent platform in 2020, bringing Sportsbook, Lotto and Casino together into a single product. While this created a shared technical platform, the customer experience still felt like three separate products.
Teams had worked independently for years, resulting in duplicated components, different interaction patterns and separate approaches to design and development. Even when products were trying to solve the same problem, the experience could look and behave differently.
As part of the senior product design team responsible for harmonising Betfred's online platform, I helped establish the foundations for a new design system while exploring how we could create a stronger connection between design intent and engineering implementation.
Years of teams working independently had resulted in significant duplication across the platform. In one audit we found 37 variations of the same button, often solving the same problem in slightly different ways.
Sportsbook, Casino and Lotto had developed their own visual and interaction patterns. Even the bet placement experience differed between products, creating an inconsistent experience for customers and repeated design and engineering effort.
The business was simultaneously modernising large parts of the platform. This gave us an opportunity to establish shared foundations through real product work, rather than designing a system separately and trying to retrofit it afterwards.
Previous attempts to establish a design system hadn't gained enough traction. The challenge wasn't simply creating another component library, it was demonstrating enough value for teams to change how they worked.
There was also a gap between design intent and engineering implementation. Figma could communicate static states well, but interaction, motion and behaviour still relied heavily on conversations and interpretation during development.
I worked within the senior design squad to establish the foundations of the new design system, defining primitive and semantic tokens across colour, typography, spacing, motion and other core properties.
Rather than creating the system in isolation, we used the modernisation work across Sportsbook, Casino and Lotto to stress test the foundations against real product requirements.
We began consolidating repeated patterns into shared components, reducing duplication while establishing a more consistent visual and interaction language across the products.
I worked with the wider design team to establish how designers could use and contribute to the system. This helped move ownership beyond the original senior squad and made adoption part of the team's normal product workflow.
As the foundations developed, I focused on another problem. We were creating consistency in Figma, but there was still a gap between what designers intended and what engineers ultimately built.
I began experimenting with AI-assisted coding to turn our components and tokens into working prototypes. This allowed us to explore interaction, motion and behaviour in code before the production component was built.
This developed into the Component Playground, giving engineers a working reference for component states, interaction rules, motion and the tokens behind them rather than relying solely on static design documentation.
I worked with engineering to connect this through GitHub and Storybook, creating a clearer pipeline from Figma, to coded design intent, to production components.
The aim wasn't to introduce AI for the sake of it. It was to remove some of the interpretation between design and engineering while still fitting into the tools and processes both teams already used.
As a senior squad, we set the foundations for the design system, assigning primitive and semantic tokens for colour, type, spacing, motion, etc. We stress tested them in the designs from the modernisation project.
The Component Playground provided the design system engineers with the context to build not only the static component states, but the interaction rules required to elevate the user experience.
The new foundations are now being adopted across Betfred's modernisation work, giving Sportsbook, Casino and Lotto a shared visual and component language.
Components developed through the new workflow are being implemented in Storybook, moving the system from design documentation into reusable production components.
Engineering began using the Component Playground as a reference for interaction and behaviour, giving them greater context around design intent before implementation.
The team's new onboarding experience is being built using Storybook components, providing an early example of the system being used to deliver new product work rather than only retrospectively replacing existing UI.
Junior and midweight designers are now contributing components and foundations, helping move ownership beyond the original senior squad and making the system part of the wider team's workflow.
The workflow from Figma, through the Component Playground and Storybook, has created a repeatable model that can now be applied as further components are designed and built.
The foundations are also creating a route towards progressively consolidating existing experiences, including Casino and the different bet placement patterns across the platform.
This project changed how I think about design systems. Getting the foundations right is one thing, getting designers and engineers to actually use and contribute to them is the harder part.
AI has allowed me to get much closer to engineering, turning design intent into something tangible and making conversations around interaction and motion much easier.
I've learnt that a successful design system isn't really about how complete the library is. It's about creating a shared way of working that teams trust, use and continue to build on.
Made in the North West, UK