7
Rebuilding a B2B lottery vertical from zero — sole designer with full ownership over UX, design system, and brand identity.
Reducing implementation bugs by 40% and enabling multi-brand scalability for 10+ B2B clients.
2 Product Managers · 1 QA
( + The Lottery Context )
A technically solid platform with a UX that never existed
The Lottery vertical had real backend infrastructure — but zero UX layer on top. No information architecture, no end-to-end user flows, no competitive metrics to validate decisions. Design was being done in Adobe XD, fully disconnected from code. Every new B2B client meant manually re-skinning with unlinked hex colors and broken tokens.
Zero Information Architecture
No IA, no end-to-end flows, no competitive data — design decisions made in a vacuum.
The platform had solid infrastructure but the UX was non-existent. Cashier, wallet, betslips and lottery widget flows were incomplete, never validated against user behavior or competitor benchmarks. Every screen was built to fill space, not guide users.
Good infrastructure + broken UX = a product no client wanted to buy twice.
No IANo flowsNo metrics
Adobe XD & Disconnected Tokens
Design in Adobe XD — no Figma, no token system, no multi-theme support.
All design files lived in Adobe XD with zero codebase connection. Every new brand required manual work: unlinked tokens, hardcoded hex values, no multi-theme infrastructure. Adding a client meant starting from scratch every single time.
Every new brand was a manual re-skin. The system was never built to scale.
Adobe XDNo tokensManual branding
Project Journey
7 phases · 1 designer
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.
Led
Outcome
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 2023Led
Discovery & Audit
Identified the root cause — no token roles, no naming convention, no single source of truth.
Ran a full Figma audit across 3 product verticals
Mapped 84 existing color variables
Attended the Memorisely Design Systems bootcamp
Documented inconsistencies with Jira tickets
OutcomeConfirmed: the problem was structural, not cosmetic.
Q2 2023Led
V1.0 — Component Tokens
First attempt: grouped tokens by UI component. Solved naming but not scalability.
Created 84 semantic tokens grouped by component type
Established first token naming convention
Aligned 3 product designers on the new structure
Discovered DRY violations across Surface, Icon, Button
OutcomeStep forward on naming, but multi-brand theming still impossible.
Q3 2023Led
V2.0 — Role-Based Refactor
Restructured around Background / Foreground / Border inspired by eBay's token model.
Reduced to 68 tokens (Background 30, Foreground 19, Border 19)
Integrated Supernova for Figma → JSON export
First GitHub + Vercel pipeline for token deployment
Abstraction layer still too shallow
OutcomePipeline working. Token count down. Readability still not there.
Q4 2023Led
V3.0 — Intent-Based Architecture
Final model: tokens grouped by semantic intent. ~48% reduction from V1.
Rebuilt to 44 tokens: Surface 6, Content 6, Action 4, Border 8, Status 6, State 2
Decoupled intent from value — enabled algorithmic theming
Migrated from Radix to Shadcn
Took 1 full year to perfect this model
OutcomeWhite-label onboarding reduced from weeks to hours.
Q1 2024Led + Advised
Storybook & Documentation
Built the living component library. Storybook adoption went from 20% to 70%.
Deployed wa-ds-playbook.vercel.app as public-facing Storybook
Documented all 100+ components with usage guidelines
Advised 3+ product designers on building their own systems
Established contribution guidelines and review process
OutcomeTeam stopped rebuilding existing components — 40% sprint time recovered.
Q2 2024Led
B2B White-Label Pipeline
Turned the token system into a product — automated 70% of client onboarding.
Built Play Layout demo for sales — live primitive token customization
Client onboards by editing only colors + border-radius
Semantic tokens auto-cascade across all 100+ components
Deployed via automated GitHub + Vercel pipeline
OutcomeNew client onboarding: weeks → hours. Direct B2B business impact.
Q3 2024Initiated
AI-Assisted Workflow
Token system enabled AI code generation with 95% accuracy.
Integrated Cursor + Claude Terminal with the token system
AI-generated components align to DS constraints without manual correction
Shadcn's atomic structure proved critical for LLM readability
Team adopted AI-first iteration
OutcomeDesign system became the foundation for AI-augmented product development.
Q4 2024Led
Scale & Stability
System now supports 20+ developers, 3 verticals, and 10+ client brands autonomously.
70% reduction in QA visual bugs through strict tokenization
500+ components unified into a single scalable library
3 distinct brands (Lottery, Sportsbook, Casino) served from one system
Ongoing advisory to designers building their own systems
OutcomeInfrastructure supports itself. The system is the product.
( + Key Insight 01 )
The product couldn't scale without a UX foundation
Without an end-to-end UX layer and a proper token system, every new B2B client required weeks of manual re-skinning. The business case for a systematic redesign was immediately clear.
( + Key Insight 02 )
Design was invisible to stakeholders
Without Figma as source of truth, PMs had no way to see the full picture. Bugs went undetected, decisions were made directly on live products, and nobody had a reliable map of existing flows.
( + The Mission )
Rebuild the Lottery platform from the ground up — UX, system, and brand identity.
The mandate was total: migrate from Adobe XD to Figma, build a multi-brand token system with theme modes, redesign all critical flows (cashier, wallet, betslips, lottery widgets), create gamification features for user retention, and deliver everything to Storybook for developer handoff. As the sole designer, I owned every decision — from token architecture to brand mascot design.
The mandate was total: migrate from Adobe XD to Figma, build a multi-brand token system with theme modes, redesign all critical flows (cashier, wallet, betslips, lottery widgets), create gamification features for user retention, and deliver everything to Storybook for developer handoff. As the sole designer, I owned every decision — from token architecture to brand mascot design.
Design System Evolution
Token breakdownv1.0 · 1 tokens
Hex colors
60
Components
0
Token rules
0
Themes
0
Figma modes
0
Storybook
0
No design system existed. All files in Adobe XD, fully disconnected from code. Branding relied on hardcoded hex values. Every new client required a manual re-skin from scratch with zero token governance.
( + Solution )
Multi-brand system, gamified UX, and a new B2B identity: LotteryPaw
Built a complete multi-theme design system connecting 10+ B2B clients through Figma modes and Storybook handoff. Redesigned all critical flows and introduced LotteryPaw — a mascot-driven brand identity built to compete with national lotteries on familiarity and emotional engagement.
Built a complete multi-theme design system connecting 10+ B2B clients through Figma modes and Storybook handoff. Redesigned all critical flows and introduced LotteryPaw — a mascot-driven brand identity built to compete with national lotteries on familiarity and emotional engagement.
Key deliverables: Cosmic Picks widget · Favorite Numbers 2.0 · Step-by-step lottery board · Onboarding microanimations · Quick Pick promo badges · Results interface · LotteryPaw brand identity.
( + Impact & Results )
40% fewer bugs. 10+ brands connected. One designer, full ownership.
0%
Reduction in implementation bugs
Devs stopped building from scratch — designs translated to Storybook and documented in Figma. Tracked via Jira sprints.
Tracked via Jira · PM lead
0+
B2B brands connected
All clients managed through Figma modes and token pipeline. Brand onboarding reduced from weeks to hours.
B2B client records · WA Technology
0
Critical flows redesigned
Cashier, wallet, betslips, lottery board, and onboarding — all rebuilt from scratch with validated UX patterns.
Figma · project documentation
0
Designer. Full ownership
UX, design system, brand identity, Storybook docs, and mascot design — all owned and delivered by a single designer.
Solo contributor · 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 implementation bugs
Devs stopped building from scratch — designs translated to Storybook and documented in Figma. Tracked via Jira sprints.
Tracked via Jira · PM lead
0+
B2B brands connected
All clients managed through Figma modes and token pipeline. Brand onboarding reduced from weeks to hours.
B2B client records · WA Technology
0
Critical flows redesigned
Cashier, wallet, betslips, lottery board, and onboarding — all rebuilt from scratch with validated UX patterns.
Figma · project documentation
0
Designer. Full ownership
UX, design system, brand identity, Storybook docs, and mascot design — all owned and delivered by a single designer.
Solo contributor · 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.
( + Technical Arch )
From Figma modes to Storybook: multi-brand handoff pipeline
Built Figma as the single source of truth — variables, modes, and a component library fully aligned with the dev repository. Storybook served as the living handoff layer, eliminating the gap between design and implementation.
01Figma — Source of Truth
VariablesModesComponentsIA
10+
brands connected
Figma variables + component library
Migrated from Adobe XD to Figma. Built variables with light/dark and brand modes. Created a component library fully aligned with the dev repository. Figma became the live map for PMs to detect bugs and track decisions.
10+brands connected
02Storybook — Living Handoff
DocumentationHandoff40% fewer bugs
40%
fewer bugs
Component documentation + dev handoff
All components documented with usage guidelines in Storybook. Devs stopped building from scratch — designs were pre-translated and documented. 40% reduction in implementation bugs tracked via Jira sprints.
40%fewer bugs
03LotteryPaw — Brand System
Brand identityMascotsB2B templates
1.5yr
to stabilize
Mascot-driven B2B brand identity
Created LotteryPaw — a mascot-driven vanilla brand to compete with national lotteries on familiarity and emotional engagement. Clients customize only primitive tokens: colors and border-radius. The brand is the product.
1.5yrto stabilize
( + Key UX Deliverables )
Gamified flows, microinteractions, and a brand identity that sells
LotteryPaw shipped with 9 signature UX features — each designed to increase trust, reduce friction, and turn a generic B2B template into a product clients wanted to make their own.
LotteryPaw shipped with 9 signature UX features — each designed to increase trust, reduce friction, and turn a generic B2B template into a product clients wanted to make their own.
Step 01
Cosmic Picks & Favorite Numbers 2.0
Cosmic Picks generates lucky numbers by zodiac sign and adds them to favorites. Favorite Numbers 2.0 lets users save their picks across any lottery — connected directly with Cosmic Picks for a seamless experience.
Microinteraction on each ball selection. Lucky Star extras moved to a modal drawer to keep the main board clean.
Cosmic PicksFavoritesZodiacRetention
Key Learnings
This case study shows just the surface. Want to go deeper into the UX decisions, gamification strategy, or multi-brand token system behind LotteryPaw?
This case study shows just the surface. Want to go deeper into the UX decisions, gamification strategy, or multi-brand token system behind LotteryPaw?
Process01
Start with functionality, not perfection
Agile is the only path when the product is broken everywhere.
When a product is broken on all fronts, trying to fix everything at once is impossible. The right move is to generate functionality sprint by sprint — stabilize the foundation before adding complexity. Agile methodology was the enabler, not just a methodology.
AgilePrioritizationIncremental delivery
Design System02
The system has to exist before UX can scale
Without a stable DS in Figma and Storybook, every UX improvement is temporary.
40%
fewer bugs
Without a stable design system in Figma and Storybook, every UX improvement is temporary. The DS wasn't a nice-to-have — it was the prerequisite for everything else. Building the system first unlocked all the UX work that followed.
40%fewer bugs
TokensStorybookFoundation firstCollaboration03
Committed PMs make design decisions stick
When PMs adopted Figma as their bug map, decisions shifted from opinion to evidence.
The inflection point was when PMs started using Figma as a screen map to detect bugs. With Hotjar on top, design decisions went from being opinions to being backed by evidence. Committed stakeholders are the multiplier that makes design work matter.
PM collaborationHotjarEvidence-based
Brand04
Brand identity is a product differentiator, not decoration
LotteryPaw was a sales argument — not cosmetic work.
LotteryPaw wasn't cosmetic — it was a sales argument. A mascot-driven brand competing against national lotteries gave B2B clients something to sell: familiarity, emotion, and identity. Without it, the template was generic. With it, the platform had a personality clients wanted to own.
Brand identityB2B salesMascots
Ownership05
Solo designer = maximum creative ownership
Being the only designer forced radical prioritization and total coherence by design.
3.5×
designer, full stack
Being the only designer forced radical prioritization and full ownership. There was no ambiguity — every decision was mine. The constraint became an advantage: coherence by design, not by committee. UX, DS, brand identity, and Storybook docs all spoke the same language because they came from the same hand.
3.5×designer, full stack
Solo designerOwnershipPrioritization( + Next Project )
Next Case Study Preview
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