Gallery Hero Image - Glue.png

T-Mobile

 
 

T-Mobile GLUE

Creating a Design Language and CMS for T-Mobile

Content Strategy Product Management UI/UX Design Visual Design Design Systems


In 2017 I worked with the This Place team in Seattle to help create T-Mobile GLUE – or Global Language for Unified Experiences. T-Mobile was undergoing a transformation in their digital experiences and asked This Place to help drive their design work.

My team was responsible for creating a new design language system as well as creating a tool that hosted and documented design


Problem Statement

Designers and creators internally at T-Mobile as well as at partner agencies do not have a single source of truth for designing digital experiences for T-Mobile.

 

01 Discovery Phase

Interviewing stakeholders

To better understand who creates digital experiences at T-Mobile, and how they work, I interviewed various stakeholders within internal design teams, as well at partner agencies. Gaining these insights was invaluable when I began defining user types and roles.

 
 
GLUE Design Audit.png

We discovered many inconsistencies across T-Mobile digital experiences, and an overall lack of a design system.

 
 

01 Discovery Phase

Auditing the digital experience landscape

My team and I had already been working with T-Mobile on other projects when we were approached to work on GLUE. We had felt the pain of trying to create digital experiences for T-Mobile with no design systems or documentation in place. So when we set out to create GLUE, our first step was to audit current digital experiences to get a sense for the breadth of design work needed.

 

02 Research Phase

Researching design language systems

After understanding the opportunity area and the various stakeholders, the next step for me was to research other design systems for companies and brands. I read a lot about design teams at companies like IBM and Salesforce – how they create, document, and maintain design systems for their digital experiences. It was not surprising to discover that these teams faces many of the same challenges that T-Mobile was

 
 
 
 

03 Build Phase

Designing a new system for T-Mobile

Once we had a better understanding of T-Mobile experience design, my team and I started exploring new, consolidated design patterns with a more systematic, mobile-first approach. We started with existing design patterns and evolved them as we saw fit. That meant pressure-testing designs in prototypes and mockups, and iterating accordingly. Eventually we ended up with a solid foundation of design patterns which we validated with internal teams at T-Mobile as well as partner agencies.

 
 
GLUE Visual Design Exploration.png
 
 

03 Build Phase

Documenting the new design language

Working with internal stakeholders, we prioritized which areas of the new design system should be documented and delivered first.

Early design system documentation Grids and Spacing

Early design system documentation Typography

 

03 Build Phase

Building the GLUE system

Our team worked with T-Mobile to design and build an internal tool for stakeholders to access documentation around the new T-Mobile design language system. We took inspiration from other hosted design systems we found during the research phase.

GLUE onboarding tutorial

 

03 Support Phase

Handoff to T-Mobile teams

I worked along side T-Mobile stakeholders to help kick start the GLUE system and workflow – creating a content strategy and templates for documentation pages. Once we felt that there was enough content and design direction in the GLUE system we transitioned responsibilities to the appropriate T-Mobile teams, and continued to support them in their efforts to maintain the GLUE system, and roll it out to all digital experiences.

 

T-Mobile GLUE Welcome Screen

 

 

T-Mobile GLUE

Various Platform Screens

 

 

T-Mobile Design System

T-Mobile Design System In the Wild