Kicking things off
The legacy Web Billing experience was not just outdated — it was causing real harm. Research revealed it was a top driver of support calls, and because the Web view was iframed directly into the App, the problem spread across platforms.
Visually, the UI had not been updated in years and clashed with the newer T-Mobile design system. Functionally, it was dense, redundant, and difficult to navigate — especially in high-stress moments when users needed answers fast.
This project was a chance to do more than fix a broken page. It was an opportunity to:
• Reduce support call volume at scale
• Improve information clarity and reduce “bill fatigue”
• Align Web and App experiences
• Propose new reusable components that could scale to other products and future features
I led the audit, cross-platform coordination, and design system expansion to ensure this redesign solved for today’s user pain and tomorrow’s platform evolution.
What Problems Are We Trying to Solve?
The main objective was to reduce confusion and support call volume related to billing. The most common user quote?
✨ “Why did my bill go up this month?” ✨
This single question guided the structure of the redesign. If we could make the answer to that question instantly visible and understandable, we could eliminate a major source of user frustration and business cost.
Other Key Points:
Bill fatigue: cognitive overload and poor visual hierarchy
Confusing IA: redundant or irrelevant content made scanning painful
Unclear deltas: no clear way to understand what changed
Platform Continuity: Web and App experiences felt disconnected
I collaborated with researchers to validate these issues through both quantitative and qualitative methods. From there, I framed the opportunity as one that justified new design system components—making the case for investment beyond a simple UI refresh.
Exploring and Evaluating Ideas
My early explorations went wide, with each concept evaluated for cross-platform flexibility and design system scalability. Proposals were reviewed with principal designers from both Web and App to ensure tactical reusability and alignment.
One concept leaned into a tabbed file cabinet metaphor, mirroring how users mentally organize financial documents. While we later moved away from literal tabs, the idea of semantic grouping and logical separation became core to the final IA.
Across all explorations, I focused on solving for:
✅ Information density and hierarchy
✅ Gestalt grouping principles
✅ Pathways to action
✅ Consistent delta tracking across product surfaces
I tested early concepts internally, iterated in Figma, and worked with engineering partners to assess feasibility and integration into the broader T-Mobile design ecosystem.
What We Shipped 🚀
We launched a fully redesigned Billing experience across both Web and App, delivering a unified experience for T-Mobile’s entire customer base.
Delta Clarity
Smart Summary
Simplified Hierarchy
Reusable Components
Closing Thoughts
This project modernized a legacy touchpoint for over 150 million users and established a new design foundation for all billing-related experiences at T-Mobile.
The redesigned interface now serves as a launchpad for future features, including predictive billing and AI-generated summaries.
Components from this work are already being reused across product teams, amplifying their impact. Early feedback has been strongly positive, with continued improvements expected as the rollout scales.
🎉
IT WAS A SUCCESS!
It excited key stakeholders — it fulfilled product’s goals, aligned seamlessly with engineering, and laid the groundwork for future AI-powered billing experiences.
Projected to reduce billing-related support calls as rollout expands.
Core components now reused across 3+ other product surfaces.