Systems design at scale

 
 
 
 

Problem / Opportunity:
A major part of Xbox strategy moving forward is the continued focus on multi-platform play as our content and services revenue outpaces our declining console hardware business. If we don’t build up our skills to meet customers wherever they play from, we risk falling behind and delivering an experience that isn’t optimized or coherent.

Role:
I worked with product designers, engineers, and our design system team to champion scalable design practices across the organization with the adoption of Figma variables and reworking of our components, grids, templates, and guidelines.


Impact:
Guidelines have allowed our product designers and engineers to amplify their output by being able to design once and have views populated across devices. Drastically reducing the amount of time spent on maintenance and design coverage, allowing teams to focus more on core customer problems.

My work has also surfaced new challenges for the team to go after like when to optimize vs be consistent, input and content shifts, changes in navigation, etc…


Testimony:
I really appreciate the way you've approached your work on (x)! I love that you asked questions and wanted to start with the design system and leverage that where possible. I also appreciated your commitment to trying the design system throughout your comps and then also helping us catch bugs and iterate our components too! I think you do an amazing job of learning the system and implementing it in your work and you do it quickly too. It's really been very healing for us. Thank you for being one of our best collaborators! - Design Systems teammate

 
 

Scalable components example for supported language module

In-product example scaling from desktop to mobile breakpoints all the way down to mobile. Allowing us to have full control over desired visual outcomes

Developed workflow to create entire page templates that automatically scale according to our grid systems and screen sizes.

Page templates leveraged by all designers are also connected to accessibility variables

 
More details can be shared in an interivew