Role

UX Designer

Strategy, Visual design, Documentation, Maintenance, Prototyping & Testing

Overview

Every product I’ve helped design – regardless of what stage of development it’s in – has required some form of backbone or roots from which to start, grow, and mature around.

I built the Xbox Design System around this principle.

Approach

The goal of the design system is to make it as automated as possible – allow the system to do the pixel pushing for the designers so that they can focus on storytelling and presentation, instead of alignment and consistency.

To achieve this, it’s best to break down the visual elements into a tiered system – metaphorically represented as atoms, molecules, and elements.

To this effect, any changes made at the atomic level are reflected throughout the molecules and elements that use that atom, reinforcing alignment and consistency throughout design files utilizing the library. Same with any changes at the molecular or elemental level.

The same method can be applied to font ramps, reducing any variance or doubt when creating compositions and layouts.

In use

Setting up a library system in this way allows for users to pick and choose from a set of options, with minimal need to resize elements, or manually input values.

Wherever this design system is utilized, designers simply place the element they’re using, input the appropriate label and select the state they desire, and the element is created for them. Any changes to the styleguide can be reflected with a simple update, keeping any comps and documentation created consistent with the plan of record.

Results and takeaways

The implementation of such design systems allows for faster production and more focus on the product and features themselves, discouraging any distractions from the goals, such as element placement, out of date components and other conversations that take away from primary discussion.

Added benefits include being less reliant on wireframes, since the design system has made it so easy to create comps and tell stories, that we don’t have to tell clients to “imagine if you will.” Any conceptual ideas are that much closer to reality because placing an actual button that looks like what the finished element looks is as easy placing a rectangle as a representative.

At Xbox, this design system is used today by both designers and developers, easing collaboration and increasing productivity, while pushing conversations farther and faster to better the Xbox brand and ecosystem.