T-Mobile’s Apeiron Design System
Streamlining Design and Engineering Efforts
--
Before my arrival at T-Mobile, the organization’s pre-existing design system called Phoenix that had become outdated, inconsistent, and lacked accessibility concerns.
To consolidate design and engineering efforts, T-Mobile required a new design system that could unify the company’s vision. The Apeiron design system was created to serve as a living, ever-changing Figma Tokens library closely tied with the developers’ GitLab repository.
Auditing the Pre-existing Design System
As a system designer, the first task was to audit the pre-existing design system to establish loose rules for the brand colors, typography, spacing, radiuses, box shadows, etc.
These rules were the foundation of the Apeiron design system. However, it was also crucial to speak with designers and engineers to understand their individualized workflow and incorporate their feedback to improve the design tokens’ flexibility.
Creating and Documenting Components
Once the foundational library was in good condition, the next focus was creating and documenting all the different components such as text areas, dialogue, input fields, radio buttons, select fields, snackbars, tidbits, and toggles. Each component was highly documented and copy curated, detailing the anatomy, sizing, spacing, interaction states, and motion across web, iOS, and android.
Design tokens were instrumental in splitting up different variables between platforms, light and dark themes, and different T-Mobile brands such as Magenta and Metro, future-proofing the system for scalability.
Defining Motion
Defining motion was a crucial part of the involvement in the design system. With my former experience as a motion designer, I took point lead in defining and creating the animation parameters.
The default variables set in place in terms of how animation is played out for something like a snack bar, which animates on-screen using a set parameter change of opacity and position, and the timing and easing between each needed to be documented. Accessibility needs were also considered, and auto-dismiss functionality was detailed.
Consideration for Engineers
It was vital to consider the engineers as users as well since their GitLab repository reflected the Figma Tokens plug-in library. Constant communication with the developers eliminated any translation layers that needed to happen with just a simple peak into Storybook and discussion on any translation errors between design and development.
Every component was inspected to account for any outliers, such as text cropping and responsiveness, to eliminate edge cases of designers needing to detach components to adjust to their design needs.
Android’s unique text areas mimicking material design’s single versus multi-line input fields were incorporated into a toggle-able variant in the component.
Conclusion
The Apeiron design system was released in beta form in December 2022 and was well-received by designers across the organization. The system provided the product teams across the organization with guidelines and streamlined certain processes. Although the project was cut short due to internal budgetary reasons, it provided valuable insight into the system’s potential and the value it brought to designers and engineers.
Overall, the Apeiron design system served as a vital tool for unifying T-Mobile’s vision and consolidating design and engineering efforts. The approach towards documentation as a living, ever-changing Figma Tokens library proved to be effective in future-proofing the system for scalability. The involvement in defining motion, considering the engineers as users, and incorporating their feedback made the Apeiron design system a valuable asset to T-Mobile’s design and engineering teams.
