2019–2021 / UI+UX DESIGNER
Convergence and coherence
In 2020, Xbox Design began creating its own design system. I was part of the initial group that laid the groundwork for what it would eventually become today.
define
I was once told that designers at Xbox were akin to jazz musicians all playing together, rather than an organized orchestra. Even though we were all playing the right notes, to the untrained ear it could sound like chaos.
How do we unify our experiences and offer a consistent experience no matter what size screen the player may use?
process
We started by auditing all of the design team's files. The goal wasn't to start over completely, but rather to make a gradual push towards a singular converged vision. This meant cataloguing all the various components and patterns from all of the endpoints.
As we shipped to more and more devices, we knew the next step needed to be our input story. Before this time, we had never defined a cohesive narrative for how we considered multiple input modalities across the ecosystem (mouse, touch and controller). I defined how we should think about mapping inputs to make our UI as natural as possible, no matter what input type you were using.
Vertical list scrolling across input devices
Horizontal list scrolling across input devices
Context menu across input devices
We already had an existing font and color ramp that we were adopting, so the next step was to create a set of base components, these included things like buttons, search boxes, text input and list items using the atomic method.
Once we started creating 'organisms' (combinations of molecules), we began documenting and redlining each component and would share out the component for the team to adopt.
result
The impact of this can be seen today, as we move onto v.3 of the design system built upon the foundation our small team helped to establish.