As the lead designer, I formulated the strategy and led the tactical work on the T-Mobile Design System team across multiple project initiatives to rethink our enterprise design system.
In this role I defined our design tooling strategy and delivery method, developed a robust collection of foundational styles and tokens, and lead our team in the design and build of a core set of components. This was less of a re-thinking of the design system and more building from the ground up and included:
- Redefining the foundational system primitives and tokens to solve for accessibility gaps, promote consistent brand expression, and empower multi-tenancy.
- Streamlining design tooling and libraries to empower designers across multiple platforms and brands.
- Consolidate design system processes, strategy, documentation, and methodology into a unified team structure and single source of truth.
Color system
The legacy design system at T-Mobile used an extremely limited color palette which made solving accessibility problems challenging, limited brand expression, and led to designers seeking solutions outside of the system to meet their needs.
The first step in this project was redefining the color system through a token-first approach to exceed the minimum accessibility requirements for color contrast and pairing, while supporting multiple brands across the T-Mobile portfolio; including:
- T-Mobile's "Magenta" theme
- T-Mobile for Business
- Metro by T-Mobile
- Legacy Sprint (via the recent acquisition)
Through this work I created a set of brand themes for each business line, a set of shared core foundational colors, and a set of semantic alias tokens as consumable libraries in Figma. Working closely with our engineering we implemented a set of tokens using style-dictionary for use across web, iOS, and Android.
