T-Mobile Avatars
😊 Avatar Design System for T-Mobile's SyncUP Apps | iOS - Android
Company: T-Mobile
Duration: Approximately 2 months
Team: SyncUP Design Team
My Role: Principal Product Designer
Case Study: More Than Just a Pretty Face
Designing T-Mobile’s modular avatar system for joy, identity, and personalization.
Overview
A Fresh Chapter in Digital Identity
After creating the original avatar system for SyncUP KIDS, I was tapped to expand that work across T-Mobile’s broader product suite—including major updates to the TRACKER and PETS apps.
The goal: push personalization further with deeper inclusivity, sleeker UX, and scalable systems. I led the effort to evolve the visual language, define avatar-building logic, and craft a modular Figma system that balanced expressive design with engineering needs.
The result? T-Mobile’s most comprehensive, flexible avatar system—built through heavy user research, design iteration, and deep cross-functional collaboration.
⬆️ Above — Modular layers made it easy for users to mix, match, and make it their own.
Problem Solving
Breaking the Binary. Building for Everyone.
As Principal Product Designer, my first challenge was addressing the limitations of the original avatar system from the SyncUP KIDS app. It forced users to choose a gender upfront, which restricted creative freedom and failed to reflect the diversity of our audience.
I led the charge to remove that constraint—designing a more fluid, inclusive experience that welcomed all identities. Beyond that, the scope grew: dozens of new hairstyles, expanded color options, expressive accessories, and a system flexible enough to scale across products.
To support this, I partnered with senior engineers to establish a new workflow—ensuring every design decision worked seamlessly within T-Mobile’s platform architecture.
Core issues that limited user joy
My goal: solve each of these blockers and design a system that feels inclusive, playful, and personal.
Leading the Avatar System Vision
My core role: Designing modular joy, systematizing identity, and scaling personalization.
I was tasked with evolving the avatar work I’d originally created for SyncUP KIDS into a modular, scalable system that could power personalization across T-Mobile’s suite of SyncUP apps. I owned the full design lifecycle from concept to implementation, including:
- Conducting research on user identity, hair color, skin tone, and accessories
- Exploring dozens of visual concepts and avatar styles
- Designing a streamlined, inclusive UX for avatar creation
- Building flexible Figma components for engineering handoff and reusability
- Collaborating directly with iOS, Android, and platform engineers
- Developing the “Lasagna Recipe System” for saving & rendering avatars on the cloud
- Documenting every design, layer, and logic rule for future teams
This work combined deep UX thinking with cross-functional collaboration, laying the foundation for expressive digital identity across all SyncUP products.
⬆️ Above - A quick look at the final screens. But to understand the journey it took to get here, scroll on to see how each piece came together.
The Work in Action
From Figma to final product
Where strategy met execution—every screen, flow, and decision I led as Principal Product Designer.
Research
Validating visual choices through data-backed decisions
To ensure the avatar experience reflected real users, I dove into research to support key visual design decisions and justify them in leadership reviews.
One standout insight:
- A 2025 U.S. study showed that 70% of women and 38% of men had dyed their hair at least once—validating the need for more dynamic hair color options.
- A 2023 report found that 63.7% of Americans use prescription glasses, making eyewear a must-have personalization option.
This research directly informed our decisions around color variety and accessories—helping us create avatars that felt relatable, expressive, and grounded in reality.
38% of Men
Said they dyed their hair
70% of Women
Said they dyed their hair
63% of Americans
Said they used or currently use glasses
Avatar Builder UX Flow
Moving beyond gendered UX to create a more inclusive builder experience
After reviewing the original avatar flow from the KIDS app, I set out to reinvent it—eliminating the gender selection step entirely to make the process more inclusive and user-friendly.
The new flow focused on simplicity, speed, and self-expression—allowing users to build their avatar in just three intuitive steps:
- Choose a skin tone
- Choose a hairstyle
- Add an optional accessory
By focusing on personalization over categorization, this updated approach gave users more freedom and joy—no labels required.
Design Iterations
Exploring the options. Testing the possibilities.
Dozens of ideas. One clear winner. I sketched, iterated, and prototyped to find the most joyful, intuitive path forward—where function and fun finally clicked.
Fast & Easy Skin Tones Selection
As you can see, the idea behind the new sleek UI was quick and easy interactive skin tone selection.
Hair Style
& color that fits you
Each color was hand-picked to harmonize with the new skin tones. After testing dozens of styles, the final palette was locked in for max delight and versatility.
Accessories
Every detail counts
Dozens of variations were explored (and several coffees sacrificed) to get the accessory colors just right.
The final set? A playful, tested mix that added personality without overwhelming the design.
T-Mobile's Avatar Design System
A comprehensive inclusive success
I partnered with iOS, Android, and platform engineers to test every avatar asset and define a consistent naming structure for seamless development. To future-proof the work, I also produced thorough documentation for both developers and designers.
Delivering Results
The lessons, the wins, and the legacy
This project was a rewarding design challenge and a chance to innovate. I worked hand-in-hand with devs to create a system that saves each user’s unique avatar “recipe” in the cloud — what I cheekily dubbed the “Lasagna Recipe System” (LRS).
LRS is basically a set of instructions T-Mobile’s platform uses to reconstruct the user’s personalized avatar—layer by layer—making it lightning-fast and super flexible for any T-Mobile app.
Beyond innovation, I’m proud to have smashed barriers and championed truly inclusive design practices that put users first.
Disclaimer:
The work shown here was created during my time at T-Mobile and is presented solely for personal portfolio use. All visuals reflect my role and contributions, and are shared respectfully to highlight process and craft—not for public or commercial use.
Here’s what teammates had to say…
"...Insightful, user-friendly designs every time..."
Laurel — Principle Copywriter, T-Mobile
September 27, 2023