Client

T-Mobile

Role

UX/UI Designer

Duration

Aug 2023 - Present

Overview

The Team

Spectrum Health is an analytical application and the core of SAMS, it provides insights into various spectrum bands which T-Mobile owns.

  • Features: Provides spectrum utilization details and site/license analysis.

  • Functionality: Identifies transmission anomalies and offers channel planning.

  • User Privileges: Allows approval of spectrum patterns by Region and Market.

  • UX Designer (3)

  • UI Designer (1)

The Challenge

  • My mission: Re-establish the design system and build up a reusable component library for Spectrum Health and other applications that related to the bands.

  • Audience: Designers, developers, stakeholders for understanding and utilizing the central components.

  • Benefits:
    Increased efficiency and consistency in design and development.
    Improved usability and accessibility.
    Enhanced user experience with consistent design language.

Color

The design team is constantly building up the existing color system of T-Mobile based on the primary color - magenta. The colors that we created are mainly used on the maps, tables and charts on multiple products, not limited to Spectrum Health application. We also made sure that the color system passes WCAG 2.1 check.

Typography

Roboto typeface was designed by Google for Android, offering clear letterforms and multiple weights/styles suitable for various design needs while ensuring a consistent visual experience across different devices and operating systems. Thus, Roboto was chosen as the typeface for Spectrum Health due to its readability, versatility, modern aesthetic, accessibility features, consistency across platforms, and easy availability as a web font.

Spacing and Containers

Setting up spacing in a design system in UI design promotes consistency, hierarchy, readability, scalability, efficiency, ease of maintenance, and collaboration, leading to better-designed and more user-friendly interfaces.

Component Library

I establish the component library by following atomic design methodology and breaking down UI elements into smaller, reusable components, starting from the smallest building blocks and gradually assembling them into larger, more complex structures. The goal is to have the component library function as a bridge of designers and developers, so that we can improve work efficiency and flexibility.

Current Design

  • The team has been focused on re-establishing the Spectrum Health application using components from the central library.

  • In consideration of security measures, I have implemented fake data in the prototypes, replaced the logo with a placeholder, and adjusted the primary TMO magenta color to a teal tone.

Result

  • Reduced time of minor design changes by 60%.

  • Reduced time to implement features by 40%.

  • Streamlined engineering workflow led to faster results.

  • Provide consistent user experience for SAMS users.