Case Study

WA Belloa Design System

Unifying a fragmented iGaming ecosystem under one centralized source of truth.

Project Overview

WA Technology is a B2B iGaming provider offering white-label templates across multiple verticals, including sportsbook, casino, lottery, affiliate systems, and fantasy games. Following a massive series of company mergers, our product ecosystem was highly fragmented. This case study outlines the journey of establishing the WA Belloa Design System—a centralized source of truth designed to unify disparate products, align isolated development teams, and scale our design operations.

The Challenge: The "Front-End Conundrum"

Before the design system existed, our team of three UX designers operated in a highly reactive environment. Because WA Technology was the result of multiple smaller companies merging, we inherited a chaotic product landscape:

• Siloed Development: Each product vertical had its own dedicated back office, team of developers, distinct tech stack, and varying levels of front-end quality.
• The "Front-End Conundrum": Developers were working in isolated boxes, relying on their own legacy libraries (built prior to the mergers) or injecting third-party solutions without centralized oversight.
• Missing Source Files: We didn't have the original Figma project files for many of the acquired platforms. To survive, our design team had to aggressively use the "HTML to Design" Figma plugin just to scrape and edit existing screens.

The friction between design intent and fragmented code implementation: isolated development teams, incompatible tech stacks, and the challenge of retrofactively merging components across verticals.

The Turning Point & My Role

As the company scaled, I was promoted to Product Design Manager, growing and leading a team of up to 8 designers. My immediate priority was shifting our team from a reactive, scrappy workflow to a proactive, scalable operation. To do this, we had to fix the front-end conundrum and bridge the gap between our growing design team and the fragmented engineering pods.

Reverse-Engineering & Foundation

Because our front-end was essentially a mosaic of different companies' legacy codes, we couldn't just start designing a new system from scratch. We had to understand what already existed.

• The Great Audit: We conducted a massive, system-wide audit of every front-end product under the WA umbrella to identify inconsistencies and overlapping patterns.
• Retroactive Componentization: Since we lacked original design files, we retroactively converted the live, audited front-end products into a foundational set of Figma components.
• Navigating Technical Constraints: We mapped out exactly how different verticals interacted—researching how our upcoming fantasy games were embedded via iFrames inside the existing sportsbook and casino platforms to ensure component compatibility.

The comprehensive audit: mapping every UI component, header, footer, and interaction pattern across the entire WA product ecosystem to identify duplication and establish our baseline.

Standardization & The Pickem Catalyst

With an understanding of the fragmented front-end landscape, we needed a rapid way to establish a unified baseline. Instead of reinventing the wheel, we made the strategic decision to adopt Radix UI.

• The Radix Foundation: We implemented Radix colors and base components as the bedrock of the WA Belloa Design System. From there, we layered on the custom, specialized components we had built to service our unique iGaming needs.
• The Pickem Proving Ground: In parallel to our system audit, my team was leading the design of a massive new Fantasy sports product. Because Pickem was a greenfield project built entirely from scratch, it served as the perfect testing ground for our new component library. It was so successful that Pickem inherently became the gold standard for all other verticals.

Radix Influence

We made the strategic decision to adopt Radix UI as the foundational layer of the WA Belloa Design System. Radix provides unstyled, accessible React primitives—built following ARIA best practices—allowing us to layer iGaming-specific styling and components on top without reinventing accessibility.

This decision eliminated reinvention, accelerated our component coverage, and ensured our system scaled with accessibility as a first principle. All WA products and white-label clients now inherit Radix's robust a11y foundation.

Building the Plane While Flying It

A design system is rarely built in a vacuum. While we were auditing and establishing our initial semantic tokens, the business still needed to move forward. We had to actively design and deliver new white-label projects concurrently with building the WA Belloa library. This dual-track agile approach tested our system in real-time, proving that our token architecture could handle the rapid generation of distinct client brands.

Multiple white-label templates built.

Decoupling Era & True Component Freedom

Historically, our design team had been heavily bottlenecked. We were rarely allowed to make significant UX or UI improvements due to rigid legacy CSS constraints and a fundamentally poor front-end architecture. That changed when the Belloa platform underwent a massive engineering initiative known as Decoupling. All interface modules were ripped out of the legacy architecture and properly rebuilt in React.

• The Great Rebuild: We systematically went through and properly rebuilt every single component in Figma from the ground up, ensuring they mirrored the new React architecture 1:1.
• Expanding the Arsenal: Working closely with Product Owners, we finally had the technical capacity to introduce highly requested component variants for complex modules like headers, footers, and navigation blocks.

The Evolution of Our Token Architecture

As the WA Belloa library matured and engineering transitioned to React, we had to optimize the very DNA of how components were themed. Our token architecture went through three distinct phases:

Token architecture evolution: From 84 tokens (V1.0) to 68 tokens (V2.0) to a semantic 44-token system (V3.0).

Radix Colour Flow

Our refined architecture leverages a tiered flow: Radix UI Primitives map directly into Semantic Tokens, which then drive our themed Components. This structure ensures that brand-specific logic is decoupled from core functional logic, allowing for seamless white-labeling across global markets.

The tiered colour flow: Radix UI primitives providing the unstyled foundation, semantic tokens enabling theme flexibility, and components delivering the visual implementation.

Impact & Business Value

Building the WA Belloa Design System was a fundamental shift in how WA Technology operates as a product company:

• A Unified Vision: We transformed a disjointed landscape into a cohesive ecosystem, aligning a fully remote company under one product vision.
• Accelerated Time-to-Market: The reliable token architecture drastically sped up the onboarding process for new B2B clients and white-label prototypes.
• Eliminated Developer Friction: Because our Figma components perfectly mirror the React architecture, developers replicate designs with precision, reducing QA errors.
• Reclaiming Ownership: We moved from a reactive team hacking together screens without source files to a proactive, empowered design organization.

Continuous iteration: Architecture and component work is still in progress.

Key Takeaways & Learnings

Leading a project of this scale pushed me beyond interface design and into deep structural problem-solving:

• Identifying Systemic Problems: I learned to look past surface-level UI inconsistencies to identify root business problems and advocate for resources to fix them.
• Technical Design Mastery: I gained a profound understanding of design system engineering, primitive values vs. semantic meaning, and Figma's advanced variables.
• Cross-Functional Leadership: Navigating legacy code constraints and aligning engineers, PMs, and stakeholders required constant communication, documentation, and demonstrating ROI.
• Next Steps: Currently initiating comprehensive documentation workflows using Storybook and Supernova to bridge the gap between design tokens and production code.