Design Systems
Unifying a fragmented sports product suite: a design library for Playtech Sports
Role
UX & UI Lead
Timeline
2024 - 2025
Tools
Figma, Sketch, Zeplin, Jira, UserTesting.com
Deliverables
Figma Design Pattern Library, Usage Guidelines, Responsive Lottery Product, Retail Mobile App (RMA) Designs
Overview
Playtech Sports operates a complex B2B ecosystem where every product deployment must be white-labelled and branded to a specific operator's identity on an aggressive timeline. As the business scaled and concurrent operator launches grew, the traditional design workflow started to become an operational bottleneck.
The problem
Technical fragmentation: platforms operated on different design and technology stacks with no unified design language or shared component systems.
Inconsistency: user experiences were inconsistent across product verticals and even within single product lines.
Redundancy: the core sportsbook was only semi-responsive, requiring redundant design and development effort to maintain separate desktop and mobile views.
Operational constraints: with a continuous release cycle, we could not "stop the clock" for a wholesale rebuild.
Tooling debt: legacy assets were scattered across Sketch and Adobe XD using outdated plugins, hindering a modern, collaborative workflow.
inconsistent visual language and ux
The solution
We used the launch of a new lottery product as a catalyst for change. I proposed designing the lottery platform from the ground up as a fully responsive, mobile-first product built on a brand-new, unified Figma design library. Once proven, this library was scaled to the retail mobile app (RMA) and then systematically integrated into the sportsbook during planned feature upgrades.
The approach
I led the strategy, design, and creation of the system, collaborating directly with design, product, and development teams.
performing an interface inventory
Interface inventory & architecture: I facilitated workshops to audit existing assets. using Atomic Design principles and benchmarking established frameworks (Material, Fluent, etc.), we identified where we needed bespoke sports components.
Cross-team alignment: I presented the library to development teams early. through iterative workshops, we established a shared vocabulary and aligned on component behaviour, documentation, and handoff protocols.
Execution & migration: we built the lottery product in Figma using reusable components and advanced properties. Concurrently, we migrated legacy sportsbook assets to Figma only as features were updated, ensuring minimal disruption to the release train.
Evangelism: I actively drove adoption of the new design language across products, demonstrating the velocity gains to stakeholders to secure long-term buy-in.
The Impact
Figma library, guides and annotations
Velocity: the reusable library significantly accelerated design-to-dev handoff. Standardised features could now be moved to development using library components, reducing the need for net-new wireframes.
Rapid testing: high-fidelity prototypes could now be built rapidly, allowing the team to run usability testing against realistic interactions rather than static wireframes.
Quality & consistency: standardised type and colour systems, alongside clear canvas annotations and design guides, reduced UI defects and minimised developer ‘translation’ issues.
Unified product suite: The sportsbook, lottery, and retail mobile application now share a common design and UX framework, creating a seamless multi-channel experience for the end-user.
Client Satisfaction: the unified experience received overwhelmingly positive feedback from internal stakeholders and B2B clients alike.
the updated product suite
Takeaways
Prioritise with phased rollouts: operating within a continuous release cycle forced strict prioritisation. I had to balance the desire for a perfect design system applied to the entire product line with the operational reality of ongoing product launches. Phasing the rollout through the lottery product first proved the value of the system, allowing it to be adopted smoothly onto sports.
Mirror design with development: close collaboration with development teams taught me to mirror our Figma component and design architecture with their technical frameworks. Agreeing on a common naming convention and shared structure drastically reduced translation errors.
Focus on actionable wins: due to technical or project limitations, not all products could be updated simultaneously. Strategically changing what we could control immediately and using those quick wins to drive momentum across other product verticals yielded the highest short-term impact.