I led the creation of the T-Ads Design System from the ground up— a unified design language shared across cross-functional teams. It has been implemented in 2 web platforms and 1 mobile application.
TIME
April, 2022 - October, 2022
SKILL
Design System
Accessible Design
Research & Testing
Cross-function Stakeholder Collaboration
TEAM
2 designers, 5 engineers
When I joined T-mobile, the Magenta Advertising Platform (formerly PushSpring) was undergoing rebranding to align with the T-mobile brand. While working on some re-skinning projects, I noticed significant inconsistency across pages, resulting redundant design work and inefficient collaboration with developers. Therefore, I proposed creating our own design system to the team.
How can I create a design system that ensures a more cohesive user experience within the platform and streamline collaboration with developers?
Before presenting the idea to the development team, I researched what a design system is, why it's important, and the goals I aimed to achieve by creating one. While reading Lean UX by Jeff Gothelf, I came across a concept that deeply resonated with me:
“…A design system functions as a single source of truth for the presentation layer of a product.”
Some high level goals I wanted to achieve:
📚 Library of Components
Establish a library of components and different visual languages as a single source of truth that all stakeholders can reference.
👀 Visual Consistency
Enhance visual consistency across all the digital products under T-Ads as more acquisitions are taking place.
💻 Agile Collaboration
Promote agile collaboration between designers and developers to facilitate faster iteration and delivery.
🌱 Living Document
Design system should be a living document. Make the design system sustainable and scalable.
.png)
The basic elements of T-Ads Design System
Inspired by Brad Frost’s Atomic Design Methodology, I started by auditing the entire website, categorizing the existing basic styles and components including typography, colors, buttons, textfields and icons, and also building the basic structure for the design system in Figma. As the result of the auditing:
.png)
Buttons with different sizes, typography styles, icon styles and paddings
I sat down with our platform engineers, one of the user groups of the design system, and worked on component prioritization. The main question I posted to our developer was:
What challenges do you encounter when implementing our design, and how can we facilitate your work?
It was the first time we shared each other’s work flows and tried to understand the implementation process in depth. Some insights shared by developers:
%20copy.png)
Component Prioritization
The Figma design system includes all components, from basic styles to page templates, along with the necessary documentation for implementation. In Q3 2023, the MAP platform developer team began updating their Tailwind stylesheet to align with the revised design system.
Direction Change
Due to the shift of prioritization and pivot of the product direction at the end of 2023, the MAP platform style update was halted. However, the design system was successfully implemented in multiple products, including Octopus Driver mobile app, RMN CMS platform and Magenta Advertising Platform.
I created an accessible color palette focused on text legibility across various sizes and backgrounds. By following WCAG guidelines and using tools like contrast checkers and simulators, I ensured the palette met accessibility standards, enhancing readability and inclusivity.
T-Ads Color Palette
My peer designer, Ivy Cai, and I dedicated significant time to ensuring the accessibility of data chart colors, which could include up to six colors depending on the complexity of the data. We used simulators to evaluate how the colors appeared to users with color blindness and made adjustments to optimize clarity.
.png)
Visual Exploration on the Chart Color
Color Implemented in the Platform
I had two goals in my mind when developing the typography system: readability and scalability. Through further research on typography, I discovered a scalable grid system is paramount to creating legible texts. Therefore I built a 8 pt grid system that utilizes multiples of 8 for padding, margins, icons and typography.
T-Ads Product Under Different Screen Sizes
T-Ads Typography
Following the accessibility guideline outlined by WCAG, the minimum target size for interactive elements such as buttons and text fields in the T-Ads design system is 44 by 44 pixels and for Android mobile is 48 by 48 pixels. In addition, the space between each interactive elements is designed as 24 pixels to avoid clicking the wrong element by accident. This spacing also follows the 8pt grid system.
Web
Mobile-IOS
After building all the foundational styles, atoms, molecules, and organisms, I proceeded to assemble these components into various page types. In response to the platform engineers' request, I created multiple variants for each design pattern in Figma to accommodate different types of pages.
Page Headers
Structural design patterns allow designers to quickly put together a mockup based on the page type and maintain consistent visual hierarchy throughout the platform.
problem statement
The sign-in issue is one of the primary reasons why the product team decided to transition to native app. The team believed that enabling biometric login would alleviate the problem of users forgetting their sign-in information or being unable to access the text message because drivers switch their phone numbers frequently which is common among ride-share drivers.
The missing piece
Initially I started creating user flows of sign in, however after reviewing with the product team, I realized that the key to design a successful sign-in experience is closely related to understanding how the backend operates. Therefore I sat down with the engineering team and learned about biometric sign-in from a technical aspect.
💭 What I thought it was...
🤯 The reality is....
.png)
working agile with the team
With a deeper understanding of the technical requirements, I developed user flows that aligned with the technical work flow provided by the engineer team and then proceeded with creating wireframes. In order to move things quickly and minimize back-and-forth in the design phase, I involved engineers in the weekly sync during the early stage to ensure we are on the same page.
Final Deliverable of Sign-in
.svg){kind=icon}
.svg){kind=icon}