GameAnalytics
Design system
Leading the design system for GameAnalytics, delivering a synchronized UI and token architecture that powers data-dense analytics for over 100,000 game developers while enabling multi-theme and white-label customization.
Role
Skills
Duration
Overview
In 2019, GameAnalytics set out to redesign its core SaaS platform, but maintaining UI consistency across complex features quickly became a challenge. I took on the role of leading our design system efforts end-to-end. Beyond building components, libraries, variables, and design tokens, as well as automating tokens to code, I established the governance and workflows: documenting UX patterns, setting clear rules for component usage, and creating standardized templates for feature specifications and documentation. This gave us a solid foundation to handle white-labeling and multi-theming down the line, aligned design, product, and engineering, and ultimately doubled our shipping speed for new features.
The challange
Maintaining UI consistency was an uphill battle as the platform grew. Design and engineering were working in silos, leading to duplicated components, diverging styles, and heavy design debt. Without central guidelines, every new feature required building basic elements from scratch, which slowed down product releases and made multi-theme rendering or white-labeling nearly impossible.
1
Button
Border radius :
16
2
Icon / Outlined / Plus
Depends on :
Icon / Outlined / Plus
3
Label
Text align :
center
4
Icon / Filled / CaretDown
Depends on :
Icon / Filled / CaretDown
Button
1
2
3
4
The Architecture
To solve this, I designed a multi-layered structure that bridges design and code
- Design Tokens & Variables: Etablished a 3-tier token system (Core, Semantic, Component) to control global values like color, spacing, and typography.
- Automated Sync: Connected tokens directly from Figma to the code repository, ensuring code stays updated automatically whenever design decisions change.
- Standardized Layouts: Created modular page templates (Wide, Sidebar, Lightbox) to keep interface structures consistent across different core analytics views.
Governance & Workflows
A design system is only as good as its adoption. I focused heavily on making the system easy for product, design, and engineering teams to use
- Single Source of Truth: Documented explicit UX patterns, component rules, and workflows in a centralized hub. Whenever debate arose on how to handle a specific interaction, teams could instantly check the documentation to resolve issues quickly and keep momentum.
- Feature Spec Templates: Created standardized documentation templates in Confluence, making it easy for product managers and designers to write clear, structured specs.
- Component Refactoring: Cleaned up existing UI components, improving contrast, accessibility, and typography across the board.
The Result
- Enterprise Scalability: The white-label architecture enabled us to land a major partnership deal with Meta (Facebook Gaming), proving the system could seamlessly handle custom enterprise branding at scale.
- 100% Faster Production: Doubled shipping speed for new features by removing repetitive design and frontend work.
- Aligned Teams & Faster Decisions: Created a shared standard that eliminated friction between design and engineering, ending endless UX debates through clear documentation.
