T-Mobile
Built the component library for the T-Mobile consumer design system. That library was the bulk of the work, with a Metro theme and color tokens for iOS, Android, and web.
Component library
Generic stand-ins for pieces of the library. Not a T-Mobile screen.
- Button
- Card
- Input
- Nav
One color token, three platforms
A color token is written once, then output for iOS, Android, and web.
color.brand
- iOSNative color
- AndroidNative color
- WebCSS color
Illustration, not a screenshot. Colors stand in for the two themes.
01 — Role
The component library was the bulk of the work.
Front End Developer IV on the consumer design system team, 2020 to Sep 2023, in Bellevue, WA. Building the component library, as part of the full design system, was the bulk of his work. Most elements on the T-Mobile site came from components the team built. Christian had a part in most of them.
02 — Approach
Library first, then a theme and tokens.
Built the component library for the consumer design system. Core components were the bulk of the work.
Helped the AEM team make headless core components.
Created a Metro theme so Metro by T-Mobile could reuse the same component set and switch brands.
Built a cross-platform color token tool that outputs tokens for iOS, Android, and web.
Component library
Core components for the consumer design system. Building that library was the bulk of the work, plus help for the AEM team on headless core components.
Metro theme
Metro by T-Mobile reuses the same component set and switches brands.
Color tokens
One token written for iOS, Android, and web.
03 — Result
The library, on T-Mobile and Metro.
Building the component library was the bulk of the work. The T-Mobile site drew most of its elements from the team’s components. Metro by T-Mobile reused that set through a theme. Color tokens shipped for iOS, Android, and web.
Facts
- Building the component library was the bulk of the work
- Consumer design system team, 2020 — Sep 2023
- Most elements on the T-Mobile site came from the team’s components
- Built core components for the library
- Helped the AEM team make headless core components
- Metro theme reuses the same component set
- Color tokens output for iOS, Android, and web
End of case
Thanks for reading.
The rest of the work is on the index.