Xbox Cloud Gaming promotional art: floating LG TV with Cloud Gaming dashboard and tiles for The Outer Worlds 2, Call of Duty Black Ops 6, EA Sports FC 25, Grounded, and Gears of War; phone, Meta Quest 3, two ASUS ROG Ally handhelds, laptop with Xbox app, and Xbox Series X with controller on a dark navy gradient.

Systems design at scale

I worked on defining grid structures and early variable use at Xbox which turned into a multi-year infrastructure project that has changed how Xbox designs at scale

Role

Product designer

Worked across

  • Design tokens & foundations
  • Component libraries & patterns
  • Documentation & adoption
  • Cross-surface consistency

Partnered closely with

  • Product designers, engineers, and system designers
  • Client engineering
  • Accessibility
Xbox experience across surfaces: a TV shows a full profile for StormYeti with Welcome, Social, and Gaming tabs; a laptop shows the web library for Yumi Floods with game tiles; two phones show portrait and landscape profile and rewards views with consistent dark theme and Xbox green accents.

Problem & opportunity

As Xbox experiences multiplied across web, console companion apps, and smart TV, we had multiple libraries and tech stacks, inconsistent delivery, and players moving towards multi-endpoint play. If we could standardize how we built across Xbox, we would save a ton of time, and deliver more consistent experiences more often.

Composite showing a consistent Xbox-style dashboard across a TV, laptop, two phones in portrait and landscape, a handheld console, and a mixed-reality window over a living room: shared hero art with aircraft, Forza Horizon 5 tiles, and channel labels.

Vision

One scalable design system that keeps Xbox experiences recognizable, accessible, and fast to ship—no matter which surface a team is building for.

Grid systems and variables

Documentation & adoption

The hardest part of a system isn’t the first release—it’s keeping teams aligned as the product evolves.

  • usage guidance,
  • migration paths,
  • examples grounded in real flows.

I focused on documentation patterns that reduce ambiguity: when to use a component, how it behaves across breakpoints, and what accessibility guarantees come “for free.” That lowered repeated questions and made reviews faster for both design and engineering partners.

Training slide titled Try it out: scale a comp from xSmall to Medium by attaching a Breakpoint variable to the frame, with Figma-style property panels and a dark Xbox Library mockup with My Games, collections, and queue tabs.
Xbox Cloud Gaming promotional art: floating LG TV with Cloud Gaming dashboard and tiles for The Outer Worlds 2, Call of Duty Black Ops 6, EA Sports FC 25, Grounded, and Gears of War; phone, Meta Quest 3, two ASUS ROG Ally handhelds, laptop with Xbox app, and Xbox Series X with controller on a dark navy gradient.

Impact: We’re live!

Open play.xbox.com
  • Scale to every screen size
  • Cut delivery costs and duplicate work
  • Freed teams to focus on innovation
  • Helped product designers think more in systems
  • Migration complete