Architecting a scalable multi brand design system serving 3 product verticals (Lottery, Sportsbook, Casino) across omni channel platforms.
Reducing UI inconsistency by 70% and accelerating feature delivery.
5 Developers
( + The iGaming Context )
Rapid expansion created a perfect storm of design chaos
WA Technology expanded rapidly without establishing Figma as the source of truth. Product Managers and stakeholders iterated directly on live products without proper UX process, data analysis, or user research. This created cascading chaos.
iframe Integration Chaos
Third-party iframes with no token control — customization was pure manual work.
Many products used third party iframe integrations. Only colors were customizable, templates didn't exist in Figma, and customization was manual dev/designer work without established tokens. These iframes were like grafts that didn't fit the platforms.
No shared contract between iframe and host — every customization was one-off and non-scalable.
iframesNo tokensManual work
Organizational Silos
3 verticals, 3 separate ecosystems — zero knowledge sharing between teams.
Each vertical (Casino, Sportsbook, Lottery) had its own dev teams, creating separate ecosystems with duplicate work and zero knowledge sharing. The same component was being built 3 times in parallel with no shared standards.
Duplicate effort was the symptom. No shared design language was the root cause.
Duplicate workNo standards3 verticals
Design System Journey
8 phases · 3 iterations
Tap each phase
Q1 2023Initiated
Discovery & Audit
Adobe XD audit — no IA, broken flows, zero token system. Design fully disconnected from code.
Mapped all existing screens in Adobe XD
Identified broken cashier, wallet and betslip flows
No component library or token system existed
Documented all inconsistencies with Jira tickets
OutcomeConfirmed: the problem was structural, not cosmetic. A full migration was the only path.
Q2 2023Led
Figma Migration
Migrated all design files from Adobe XD to Figma. Built the first component library from scratch.
Rebuilt all screens natively in Figma
Created first component library aligned with dev repo
Aligned 3 frontend developers on handoff standards
Established Figma as single source of truth
OutcomeTeam had a shared design foundation for the first time. Dev handoff went from screenshots to specs.
Q3 2023Led
Multi-theme Design System
Built Figma modes for multi-brand theming. Connected 10+ B2B clients via token system.
Created Figma variables with light/dark and brand modes
Built token layer connecting 10+ client brands
Standardized color, typography and spacing tokens
First Storybook integration for developer handoff
OutcomeNew brand onboarding went from weeks of manual work to hours of token customization.
Q4 2023Led
Core Flows Redesign
Redesigned cashier, wallet, betslips, lottery board and onboarding from the ground up.
Redesigned cashier and wallet with standardized UX patterns
Fixed betslip flow with clear step-by-step progression
Rebuilt lottery board with ball selection microinteractions
Added Lucky Star modal drawer separating extra picks
OutcomeUser paths went from ambiguous to guided. PM could map screens in Figma to detect bugs directly.
Q1 2024Led
Gamification Features
Built Cosmic Picks, Favorite Numbers 2.0, Quick Pick promos and onboarding microanimations.
Cosmic Picks: astrological number widget by zodiac sign
Favorite Numbers 2.0 connected with Cosmic Picks
Walkthrough microanimations for each lottery onboarding
Quick Pick promo badges and Popular category for faster play
OutcomePlatform gained differentiated features that drove trust and retention beyond basic play.
Q2 2024Led
Storybook & Handoff
Full component documentation in Storybook. 40% reduction in implementation bugs.
Documented all components with usage guidelines in Storybook
Devs stopped building from scratch — designs were pre-translated
Reduced implementation bugs by 40% tracked via Jira sprints
PMs used Figma as a live bug detection map
Outcome40% fewer bugs in implementation. Sprint capacity redirected to new features.
Q3 2024Initiated
LotteryPaw Brand Identity
Created LotteryPaw — mascot-driven brand identity to compete with national lotteries.
Named and designed the LotteryPaw vanilla brand
Mascot concept: friendly animals playing lottery
Competing against national lotteries on familiarity
Brand system applied across all B2B client templates
OutcomeThe vanilla template became a product clients wanted to make their own. A real B2B differentiator.
The iGaming Context
Rapid expansion created a perfect storm of design chaos
WA Technology expanded rapidly without establishing Figma as the source of truth. Product Managers and stakeholders iterated directly on live products—without proper UX process, data analysis, or user research. This created cascading chaos.
iframe Integration Chaos
Third-party iframes with no token control — customization was pure manual work.
Many products used third party iframe integrations. Only colors were customizable, templates didn't exist in Figma, and customization was manual dev/designer work without established tokens. These iframes were like grafts that didn't fit the platforms.
No shared contract between iframe and host — every customization was one-off and non-scalable.
iframesNo tokensManual work
Organizational Silos
3 verticals, 3 separate ecosystems — zero knowledge sharing between teams.
Each vertical (Casino, Sportsbook, Lottery) had its own dev teams, creating separate ecosystems with duplicate work and zero knowledge sharing. The same component was being built 3 times in parallel with no shared standards.
Duplicate effort was the symptom. No shared design language was the root cause.
Duplicate workNo standards3 verticals
8 phases · 3 iterations
Tap each phase
Q1 2023Initiated
Discovery & Audit
Adobe XD audit — no IA, broken flows, zero token system. Design fully disconnected from code.
Mapped all existing screens in Adobe XD
Identified broken cashier, wallet and betslip flows
No component library or token system existed
Documented all inconsistencies with Jira tickets
OutcomeConfirmed: the problem was structural, not cosmetic. A full migration was the only path.
Q2 2023Led
Figma Migration
Migrated all design files from Adobe XD to Figma. Built the first component library from scratch.
Rebuilt all screens natively in Figma
Created first component library aligned with dev repo
Aligned 3 frontend developers on handoff standards
Established Figma as single source of truth
OutcomeTeam had a shared design foundation for the first time. Dev handoff went from screenshots to specs.
Q3 2023Led
Multi-theme Design System
Built Figma modes for multi-brand theming. Connected 10+ B2B clients via token system.
Created Figma variables with light/dark and brand modes
Built token layer connecting 10+ client brands
Standardized color, typography and spacing tokens
First Storybook integration for developer handoff
OutcomeNew brand onboarding went from weeks of manual work to hours of token customization.
Q4 2023Led
Core Flows Redesign
Redesigned cashier, wallet, betslips, lottery board and onboarding from the ground up.
Redesigned cashier and wallet with standardized UX patterns
Fixed betslip flow with clear step-by-step progression
Rebuilt lottery board with ball selection microinteractions
Added Lucky Star modal drawer separating extra picks
OutcomeUser paths went from ambiguous to guided. PM could map screens in Figma to detect bugs directly.
Q1 2024Led
Gamification Features
Built Cosmic Picks, Favorite Numbers 2.0, Quick Pick promos and onboarding microanimations.
Cosmic Picks: astrological number widget by zodiac sign
Favorite Numbers 2.0 connected with Cosmic Picks
Walkthrough microanimations for each lottery onboarding
Quick Pick promo badges and Popular category for faster play
OutcomePlatform gained differentiated features that drove trust and retention beyond basic play.
Q2 2024Led
Storybook & Handoff
Full component documentation in Storybook. 40% reduction in implementation bugs.
Documented all components with usage guidelines in Storybook
Devs stopped building from scratch — designs were pre-translated
Reduced implementation bugs by 40% tracked via Jira sprints
PMs used Figma as a live bug detection map
Outcome40% fewer bugs in implementation. Sprint capacity redirected to new features.
Q3 2024Initiated
LotteryPaw Brand Identity
Created LotteryPaw — mascot-driven brand identity to compete with national lotteries.
Named and designed the LotteryPaw vanilla brand
Mascot concept: friendly animals playing lottery
Competing against national lotteries on familiarity
Brand system applied across all B2B client templates
OutcomeThe vanilla template became a product clients wanted to make their own. A real B2B differentiator.
( + Key Insight 01 )
Design debt was slowing velocity
Teams were spending 40% of sprint time rebuilding existing components, creating massive technical debt and inconsistent UX patterns across products.
( + Key Insight 02 )
No single source of truth
Tokens in Figma, code in fragmented repos, docs in Notion. This fragmentation made it impossible to maintain consistency or track changes across the ecosystem.
( + The Mission )
Unifying 10 brands, 100+ components, and 20+ developers into one scalable ecosystem.
Tokens Architecture Evolution
✗ Discarded
84
V1.0Component-basedSurface 16Text 11Icon 12Button 13Border 12Gradients 20
Arbitrary grouping by UI component. Violated DRY principle, same color intent duplicated across Surface, Icon, Button. Created friction during implementation.
✗ Discarded
68-19%
V2.0Role-basedBackground 30Foreground 19Border 19
Structural refactor inspired by eBay's token model. Abstraction layer was too shallow, grouping by bg/fg/border still didn't solve usability issues for the engineering team.
✓ Chosen
44-48%
V3.0Intent-basedSurface 6Content 6Action 4Border 8Status 6State 2
Semantic optimization. By decoupling intent from value, we reduced the payload by ~48%. Strictly typed by role, easy to maintain, and supports algorithmic theming for the B2B white-label pipeline.
84→
68→
44
The key question: What does this token do — not what does it look like? That shift cut 84 tokens to 44 and made algorithmic theming viable.
✗ Discarded
84
V1.0Component-basedSurface 16Text 11Icon 12Button 13Border 12Gradients 20
Arbitrary grouping by UI component. Violated DRY principle, same color intent duplicated across Surface, Icon, Button. Created friction during implementation.
✗ Discarded
68-19%
V2.0Role-basedBackground 30Foreground 19Border 19
Structural refactor inspired by eBay's token model. Abstraction layer was too shallow, grouping by bg/fg/border still didn't solve usability issues for the engineering team.
✓ Chosen
44-48%
V3.0Intent-basedSurface 6Content 6Action 4Border 8Status 6State 2
Semantic optimization. By decoupling intent from value, we reduced the payload by ~48%. Strictly typed by role, easy to maintain, and supports algorithmic theming for the B2B white-label pipeline.
84→
68→
44
The key question: What does this token do — not what does it look like? That shift cut 84 tokens to 44 and made algorithmic theming viable.
( + Solution )
Multi-brand token architecture with atomic component hierarchy
One system. Three layers. Every token, component, and handoff decision designed to serve 3 verticals and 20+ B2B clients without manual work.
48%token reduction
Token System
3-tier semantic token architecture
84 tokens → 44. ~48% reduction through 3 iterations. Intent-based model supports algorithmic theming, AI-assisted workflows, and white-label B2B.
70%fewer QA bugs
Component Library
500+ components unified
Single Storybook serving Casino, Sportsbook, and Lottery. Components aligned with dev repo. Radix → Shadcn for AI-ready 95% code generation accuracy.
20+clients
B2B Pipeline
Onboarding automated in 3 steps
Client picks template → edits only primitive tokens → internal preview auto-generates. Changing 1 primitive cascades to 100+ components.
48%token reduction
Token System
3-tier semantic token architecture
84 tokens → 44. ~48% reduction through 3 iterations. Intent-based model supports algorithmic theming, AI-assisted workflows, and white-label B2B.
70%fewer QA bugs
Component Library
500+ components unified
Single Storybook serving Casino, Sportsbook, and Lottery. Components aligned with dev repo. Radix → Shadcn for AI-ready 95% code generation accuracy.
20+clients
B2B Pipeline
Onboarding automated in 3 steps
Client picks template → edits only primitive tokens → internal preview auto-generates. Changing 1 primitive cascades to 100+ components.
From Figma variables to Storybook — the complete workflow
Centralized Storybook as single source of truth, integrating Figma tokens via Supernova JSON for governance and control across all verticals.
01Figma + Supernova — Token governance
Figma variablesSupernovaMulti-modeGovernance
10+
brands in one file
Variables · Modes · JSON export
Figma as single source of truth with variable modes (light/dark/brand). Supernova JSON export pipeline syncs tokens to the dev repo automatically — no manual copy-paste, no drift.
10+brands in one file
02Storybook — Living handoff layer
DocumentationHandoff70% adoption
70%
Storybook adoption
Component docs · Dev alignment
Centralized Storybook with usage guidelines per component. Devs build against documented specs instead of guessing from Figma. Adoption went from 20% to 70% over 18 months.
70%Storybook adoption
03Shadcn — AI-ready component base
ShadcnAI-ready95% accuracyDev alignment
95%
AI code accuracy
Radix → Shadcn migration
Migrated from Radix to Shadcn. Reduced Figma file weight, improved AI code generation accuracy to 95%, and aligned with modern dev toolchains. The system is now readable by AI out of the box.
95%AI code accuracy
B2B white-label — 70% of onboarding automated in 3 steps
WA Technology serves clients with white-label templates. Client picks a base template and customizes only primitive tokens — colors and border-radius — which cascade automatically to 100+ components.
01 — Figma
Figma as single source of truth
VariablesModesComponentsIA
( + Impact & Results )
70% fewer QA bugs. 40% sprint time recovered. One system, three verticals.
0%
Reduction in QA visual bugs
From strict semantic tokenization across all components and verticals. Tracked over 1.5 years.
Tracked via Jira · PM lead
0%
Sprint time recovered
Teams stopped rebuilding existing components, capacity redirected to new features.
Tracked via Jira · PM lead
0+
Components unified
Single scalable library serving Casino, Sportsbook, and Lottery verticals.
Storybook wa-ds-playbook.vercel.app
0+
B2B clients onboarded
Each brand customizes only primitive tokens. Onboarding reduced from weeks to hours.
B2B client records · WA Technology
All metrics tracked via Jira by the PM lead over the 1.5-year project timeline. Numbers reflect cumulative impact across the 3 product verticals.
0%
Reduction in QA visual bugs
From strict semantic tokenization across all components and verticals. Tracked over 1.5 years.
Tracked via Jira · PM lead
0%
Sprint time recovered
Teams stopped rebuilding existing components, capacity redirected to new features.
Tracked via Jira · PM lead
0+
Components unified
Single scalable library serving Casino, Sportsbook, and Lottery verticals.
Storybook wa-ds-playbook.vercel.app
0+
B2B clients onboarded
Each brand customizes only primitive tokens. Onboarding reduced from weeks to hours.
B2B client records · WA Technology
All metrics tracked via Jira by the PM lead over the 1.5-year project timeline. Numbers reflect cumulative impact across the 3 product verticals.
Key Learnings
This case study shows just the surface. Want to dive deeper into the token architecture, Storybook integration, or cross functional collaboration strategies?
This case study shows just the surface. Want to dive deeper into the token architecture, Storybook integration, or cross functional collaboration strategies?
Process01
Design systems are never done
Living products requiring continuous iteration and stakeholder alignment.
Design systems are never "done" — they're living products requiring continuous iteration, stakeholder alignment, and cross-functional collaboration to drive adoption.
IterationAdoptionCollaboration
Token discipline02
Tokenization is non-negotiable
Strict token governance drove a 70% reduction in QA visual bugs.
70%
fewer QA bugs
Strict tokenization and comprehensive documentation are non-negotiable. The 70% reduction in QA visual bugs came from token discipline, not just component quality.
70%fewer QA bugs
TokensDocumentationQAArchitecture03
1 year to perfect the token model
Patience on the semantic model unlocked white-label theming and AI workflows.
1yr
to perfection
It took 1 year to perfect the semantic token model, but it unlocked white-label theming and AI-assisted design workflows that understand our system's constraints.
1yrto perfection
Semantic tokensWhite-labelAI workflowsTechnology04
Radix → Shadcn was strategic, not cosmetic
Migration reduced Figma weight and hit 95% AI code generation accuracy.
95%
AI accuracy
Migrating from Radix to Shadcn wasn't just about developer preference — it reduced Figma file weight, improved AI code generation accuracy to 95%, and aligned with modern dev practices.
95%AI accuracy
ShadcnAI-readyDev alignmentImpact05
The infrastructure now supports itself
Storybook adoption 20%→70%, bugs −40%, advised 3+ designers.
3.5×
Storybook adoption
Storybook usage went from 20% to 70%, bugs dropped 40%, and the system enabled me to advise 3+ product designers on building their own design systems. The system became the product.
3.5×Storybook adoption
StorybookAdvisoryScale( + Next Project )
Next case of study
Got questions?
I’m always excited to collaborate on innovative and exciting projects!
Schedule a call
Got questions?
I’m always excited to collaborate on innovative and exciting projects!
Placeholder