Systems design at scale
Architected Xbox's cross-platform design infrastructure for universal scalability.
- Role
- Product designer
- Surfaces
- 5 platforms
- Live at
- play.xbox.com
Overview
What began as defining grid structures and early Figma-variable use grew into a multi-year infrastructure project that changed how Xbox designs at scale across mobile, handheld, desktop, web, and TV.
Problem & opportunity
As Xbox experiences multiplied across surfaces, we had multiple libraries, inconsistent delivery, and players moving toward multi-endpoint play. Standardizing how we built would save time and ship more consistent experiences, more often.
Approach
A page-by-page migration proved unrealistic — it meant maintaining two apps. Mapping the product end-to-end showed the real bottleneck was components, not pages, so we shipped reusable pieces in batches to compound progress.
I paired that with documentation that reduced ambiguity: when to use a component, how it behaves across breakpoints, and the accessibility it guarantees for free.
Impact
It's live on play.xbox.com. The system scales to every screen size, cut delivery costs and duplicate work, and freed teams to focus on innovation — while helping designers think more in systems.