T-Mobile
Design System & Global Framework
T-Mobile is a leading U.S. telecommunications company known for its mobile and internet services.
Team
Design System & Framework Team
Role
Sr. UX/UI Designer
Dates
Mar 2022 - Nov 2022 (9 months)
T-Mobile, a leading telecommunications brand in the USA, offers a wide array of products and digital sub-brands that necessitate governance and consolidation to attain a seamless, unified, and holistic visual UX/UI experience across its product portfolio. As a UX/UI Designer in a cross-functional agile team, my role involved contributing to the development of TMO's Figma design system standards for responsive web. These standards aimed to unify foundational styles, components, and code across all TMO practices globally.
My Task.
Deliverables
Hi-Fidelity Mockups
Sticker Sheets
Design System Components
UX Research
Design Tools
Figma
Adobe CC
Productivity Tools
Asana / Product Board
Miro / Figjam
Slack
Colors
Foundational colors for T-Mobile's responsive web were defined in alignment with existing brand guidelines as part of the future-state Design System.
Typography
Typography, as a foundational style element in the T-Mobile design system, encompassed the selection and application of the font pairing - Teleneo (primary font) and System Font SF Pro (secondary/iOS), to ensure a consistent and visually cohesive text presentation across the web.
Design System Elements
Here are a few examples of some basic components and a handful of their variations from the T-Mobile Design System for responsive web.
Contextual Mockups
Contextual mock-up samples were created to test, preview, and showcase the application of updated and redesigned foundational styles and components. Here are a few examples:
UX/UI Best Practices Research
The redesign and management of components entail in-depth research into UX/UI best practices for foundational styles and both simple and complex components. Below, you'll find a selection of sample research case studies:
This Typography case study encompasses thorough best practice research and offers strategic recommendations for integrating a revised Type Ramp into their existing Design System. The objective is to unify typography styles across T-Mobile's digital products and applications, enhancing brand consistency and user experience throughout their digital ecosystem.
Typography - Foundational Case Study and Recommendations
The Tables component case study provides an exploration of best practices with UX/UI recommendations for integrating updated tables UI pattern. The primary aim is to clean up and consolidate table styles across all user touch-points within T-Mobile’s responsive web and native app digital products.
Tables - Simple Components Case Study and Recommendations
Feature List Cards - Simple Component Case Study and Recommendations
This case study on the Feature List component entails best practice research and provides actionable recommendations for seamless integration of a revised feature list UI design into T-Mobile's existing Design System. The primary goal is to unify list card styles by category across T-Mobile's digital products and applications.
End.
The phased and completed deliverables were prepped, auto-laid-out, and then added to the Design System sticker sheets. Completed styles/components were also handed off to the Development Team for build-out and scheduled Dev. demo presentations.