T-Mobile Plan and Device Purchase
T-Mobile Connect Saga Part 1
Overview
T-Mobile prepaid plans are typically an in-store offer that assistance may offer, but there was an opportunity to acquire customers online. The prepaid website needed a serious overhall regarding plan selection, account management, and checkout.
Role and Responsibilities: UX Designer, Discovery, Wireframes, Strategy, Visual Design
Collaboration: Design team of 3, Product Managers, Project Managers, directors, researchers, UX writer, Marketing, Development
Users: T Mobile Prepaid Customers
Tools: Figma, Miro , UX Pin UserZoom
“Watching Customers react !”
User Research and Discovery (Product and Plan selection problems)
Working with the team, I developed and facilitated a baseline research plan to observe how users interacted with T-Mobile’s existing prepaid experience.
I discovered user painpoints relating to consistency and selected plans. labeling, connect wasnt properly explained. Errors due to skp sections. services were not labeled clearly, ie: scam protection vs block scam, and what does that mean?.
“Hey! Check out the Checkout Experience”
Heuristic Analysis
( looking at the current state through the lense of UX principles )
One of the most problematic elements was the Product Selector page, which attempted to combine plan, device, and service selection into a single screen. Key findings from user interviews and heuristic review included:
Hidden plan options within accordions caused many users to overlook available choices.
Unclear device selection flow—links felt disconnected from the main journey and did not preserve user progress.
Ambiguous service names created confusion, leading to “pogo-sticking” between service and plan pages to understand offerings.
These insights highlighted the need to restructure the purchase flow into a more familiar, step-by-step process, improving clarity and reducing drop-offs.
“Document Findings: Target Pain points”
Mapping out Opportunities
Our research findings highlighted key pain points in the prepaid user experience, which helped me define the scope of the redesign and prioritize the most critical areas to address first. To keep the focus on user needs throughout the process, I translated these insights into clear, actionable personas. These personas became a reference point for decision-making, ensuring that every UI recommendation was grounded in the real behaviors, motivations, and challenges of T-Mobile’s diverse customer base.
“Sketch Ideas from observations”
Plan Selection Flow Ideation
Once the overall purchase flow was defined, I moved into sketching interaction patterns that guided users from the plan selection page through checkout and into their account dashboard.
While designing the new purchase flow, I also accounted for existing customers who needed to change or upgrade their plans directly from the dashboard. By considering both new and returning user journeys early, I ensured the flow was consistent, scalable, and adaptable across different customer scenarios.
“Finalize sketches into a over all new Experience”
Experience Strategy
I designed a high-level workflow to address key pain points in the original purchase experience. Instead of relying on a single-page product selector, the redesigned flow guides users through a clearer, more intuitive sequence:
Plan Selection – Users begin by selecting a plan from a standardized, easy-to-browse plans page.
Cart Interaction – After choosing a plan, users are taken to the cart, where they can either add a device or choose the Bring Your Own Device (BYOD) option.
Checkout – From there, they proceed to a streamlined, mobile-optimized checkout experience.
This modular flow supports better decision-making, increases clarity, and sets the foundation for higher conversion rates across devices
“Oh By The Way, we have a new look and Feel!” - Marketing
Integrating the Connect Brand Across the Purchase Experience
Marketing introduced a new visual identity to distinguish these plans from existing offerings, and I worked closely with them to carry that branding seamlessly from the landing page through the full purchase flow. I preserved visual continuity while keeping the UX clear and intuitive, helping users immediately recognize Connect as a distinct yet integrated part of the T-Mobile ecosystem..
“Trying out the new Look, with a new Flow.”
“Translating Brand into a Scalable Digital Experience”
For the Connect by T-Mobile rollout, I translated a print-focused brand guide into a scalable digital design system and used it to design the transactional plan page that followed the marketing landing experience. The page balanced campaign-specific branding with clear differentiation from Simply Prepaid and Data-Only plans, resulting in a visually consistent, intuitive shopping flow that highlighted value, simplified comparison, and felt native to the broader T-Mobile ecosystem.
Nice add ons to go with your plan Presents optional features tailored to each plan type. My role was to design this page with a focus on clarity, customization, and user intent. To support diverse customer needs, I categorized available add-ons into intuitive tabs. This allowed users to explore services based on their interests without feeling overwhelmed by irrelevant options. .
Cart Design: Guiding Users Through Device Selection
I designed the cart UI to immediately surface a visual alert when no device is associated with the plan. This prompt guides users to either:
Shop for a phone from available devices
Or Bring Your Own Device (BYOD) using a clearly labeled option
This decision point is central to the purchase journey, and the design ensures that users don’t get stuck or confused about next steps. By providing a clear and frictionless path forward, the cart experience supports both conversion goals and user confidence.
We have all the plans you need, for any entry point
Device-First Flow – For users who begin by selecting a device before choosing a plan, this page presents a clean overview of all compatible plans in one place, making it easy to compare and select the best fit.
Plan Changes from Account Dashboard – For returning users managing their existing service, this page serves as the go-to destination when switching plans from within their account.
“Make sure this new flow and look fits all devices.”
Responsive Plan List & Plan Detail Pages (PLP & PDP)
I designed responsive versions of both the Plan List Page (PLP) and Plan Detail Page (PDP). These pages serve as key steps in the linear user flow—from plan selection to checkout—and were built to function fluidly on both mobile and desktop.
PLP (Plan List Page): Presents all available plans in a scannable format, optimized for browsing. It allows users to compare features, pricing, and compatibility before drilling down.
PDP (Plan Detail Page): Offers in-depth information about a selected plan, including features, fine print, and eligibility. It includes clear calls to action for moving forward with add-ons or device selection.
This structure supports users entering the flow at different stages—whether selecting a plan first, changing their plan mid-cycle, or returning to compare new offers—while maintaining a consistent and accessible design system across breakpoints.
In conclusion, the new design provided valuable insights into customer needs. uplift in products purchase and an alternative to in-store purchases aligning with the business goals and at the same time addressed serious user pain points.