Connect by T-Mobile
T-Mobile Prepaid Purchase Flow Redesign
Challenge
Historically, most T-Mobile prepaid customers signed up in stores. As part of a new digital-first initiative, the company set out to increase online acquisitions by improving the prepaid purchase experience. This required a full redesign of the existing flow to streamline plan selection, device purchase, and account setup. At the same time, the Marketing team was preparing to rebrand and relaunch the Connect plans, creating an opportunity to align the digital experience with the new campaign.
My Role
As a UX Designer (Contract), I led the redesign of the prepaid purchase journey. I collaborated closely with product, development, and marketing teams to ensure the updated flow balanced usability, business goals, and brand consistency.
Approach
Conducted a baseline user study with marketing and development partners to identify friction points in the current flow.
Redesigned core user journeys to improve clarity and conversion:
Plan & Device Selection – streamlined the decision-making process with simplified comparison views.
Bring Your Own Device (BYOD) – created a clearer path for customers bringing their own phones.
Checkout – optimized for mobile-first use, with fewer steps and more transparency.
Account Dashboard & Refill – improved usability and payment flows to support ongoing customer engagement.
Impact
The new digital experience supported T-Mobile’s Connect plan launch and contributed to a smoother online purchasing process, helping shift prepaid customer acquisition from physical retail to the web.
User Research
Working with the team, I developed and facilitated a baseline research plan to observe how users interacted with T-Mobile’s existing prepaid experience. Through usability testing and behavioral observation, we uncovered several key pain points, including friction in plan selection, difficulties with the purchase flow, and navigation challenges. These insights provided a strong foundation for redesign decisions and ensured that our solutions directly addressed real user needs.
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.
As part of the baseline evaluation, I conducted a heuristic analysis of the existing prepaid site. 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.
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.
Purchase Flow Redesign
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
New Branding Integration: Connect by T-Mobile
To support the launch of the Connect by T-Mobile brand, the Marketing team introduced a fresh visual identity and color scheme to differentiate these plan options from T-Mobile’s existing offerings.
I collaborated closely with Marketing to ensure that this new branding was seamlessly integrated from the landing page through the entire purchase flow. My focus was on maintaining design consistency while making sure the user experience remained intuitive and aligned with the expectations set by the campaign visuals.
The distinct color palette and layout cues not only reinforced the Connect brand but also helped users immediately recognize that these plans offered something unique—positioning them clearly within the broader ecosystem of T-Mobile products.
Transactional Plan Page Design: Connect by T-Mobile
As part of the Connect by T-Mobile rollout, Marketing provided a new brand guide focused primarily on print and campaign materials. I adapted these guidelines for digital use—translating typography, color treatments, and layout cues into a responsive, UI-ready design system that could scale across the product experience.
I was responsible for designing the Connect transactional plan page, which directly followed the marketing-owned landing page. This page needed to both reflect the unique Connect branding and clearly differentiate these plans from Simply Prepaid and Data-Only offerings on the same site.
The result was a plan page that maintained visual continuity with the marketing campaign while providing a clear, intuitive shopping experience optimized for digital users. The design highlighted value distinctions, simplified plan comparison, and ensured that the Connect flow felt like a natural extension of the broader T-Mobile ecosystem.
Services Page: Add-On Selection Experience
After selecting a plan, users are guided to the Services page, which 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—such as international calling, hotspot data, device protection, and more. This allowed users to explore services based on their interests without feeling overwhelmed by irrelevant options.
The layout emphasized flexibility while keeping the UI lightweight and mobile-friendly. Clear descriptions, pricing transparency, and smart defaults made it easier for users to understand the value of each service and make informed decisions before proceeding to checkout.
Cart Design: Guiding Users Through Device Selection
Once users select their plan and optional services, they are taken to the cart to finalize their purchase. A key usability challenge was ensuring that users clearly understood the need to select or bring a device before continuing.
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.
All Plans Page: Supporting Alternate User Paths
To address user drop-off caused by limited visibility into available plan options, I designed the All Plans Transactional Page—a comprehensive view of all prepaid offerings.
This page plays a key role in two specific user journeys:
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.
The design prioritizes clarity and scalability, presenting Simply Prepaid, Connect, and Data-Only plans side by side with clear feature breakdowns. This ensured users had full visibility into all options, reducing confusion and improving the likelihood of conversion or successful plan management.
Responsive Plan List & Plan Detail Pages (PLP & PDP)
To support a seamless purchase experience across devices, 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.
Legacy Dashboard: Missed Opportunities & UI Challenges
The previous version of the Account Dashboard contained several outdated UI patterns and overlooked key user needs. These shortcomings created friction for returning users trying to manage their plans, monitor line status, or complete transactions.
Identified Issues:
Outdated Alert UI
Alerts were visually understated, making it easy for users to miss important information like renewal deadlines or account issues.Unclear Payment Information
The renewal amount lacked visual prominence and hierarchy, leaving users unsure of how much they owed or when their next payment was due.Irrelevant Quick Links
The dashboard surfaced quick links that weren’t contextually relevant to the user’s current account state, adding clutter rather than clarity.No Clear “Add a Line” CTA
A key action for growing accounts—adding a new line—was not presented in a clear or discoverable way. Users had to navigate away or hunt through unrelated links to find this option.
User Story Mapping: Account Management
To guide the redesign of the Account Dashboard and management tools, I worked with the Product Manager to map out the basic steps users take when interacting with their accounts post-purchase. This exercise helped us align on key behaviors, clarify goals, and prioritize which features to include in the early sprints.
User Flow Objectives:
Help users understand the status of their account and phone lines at a glance
Make payment actions and due dates highly visible and actionable
Support secondary actions like changing plans, adding lines, or updating payment methods
Story Mapping Approach:
I led a whiteboarding session and flow sketch to visualize each touchpoint a user may encounter during common account interactions.
We used color coding, with yellow representing feature ideas and hypotheses.
This visual map helped us isolate critical vs. nice-to-have functionality.
Sprint Priorities (Highlighted in Yellow):
Displaying account and line status upfront, with color-coded indicators
Clear, persistent payment CTAs (e.g., “Make a Payment,” “Refill Line”)
Messaging around due dates, auto-pay status, and renewal reminders
This foundational work gave us clarity not only on the immediate features to build but also on how the account experience should evolve over time. It ensured that every screen supports task completion, visibility, and long-term engagement.
Account Dashboard: Payments, Plan Management & Line Status
The Account Dashboard plays a crucial role in ongoing customer engagement—especially for users managing payments, monitoring phone line status, or making changes to their service.
In the legacy experience, many critical details and call-to-actions (CTAs) were not properly prioritized, leading to confusion and missed opportunities for self-service. As part of the broader purchase flow redesign, I revamped the dashboard to better support both post-purchase activity and account management.
Key improvements included:
Prominent status alerts for phone lines, payment issues, or plan expiration
Streamlined access to key actions like making a payment, refilling a line, or adding a new line
Integration with new plan selection flows, allowing returning users to switch plans or upgrade devices without restarting the purchase process
Responsive design to ensure full functionality across mobile, tablet, and desktop
This redesign ensured that customers had a consistent, frictionless experience—from initial sign-up through long-term service management—all within a unified, branded environment.
Authenticated Customer Purchase Flow
The authenticated purchase flow was designed to integrate seamlessly into the new end-to-end purchasing experience. When logged-in customers take actions such as adding a new line or modifying an existing plan, they are intentionally routed through the enhanced flow to improve awareness and boost conversion.
Entry Points:
“Add a Line” from the Account Dashboard
“Change My Plan” from an active line’s settings
These actions guide users to the newly designed All Plans page, which showcases the full range of prepaid plan offerings—Connect, Simply Prepaid, and Data Plans—in a clear, comparable layout.
From there, users can:
Select a new plan
Choose to bring their own device (BYOD) or shop for a new phone
Proceed through a streamlined, mobile-first checkout experience
This flow ensures that even existing customers can benefit from the updated product presentation, improved UX, and marketing-aligned design, while maintaining full compatibility with their account data and service status.
Ideation Sketches: Mapping Core Interactions
Once the purchase flow was established, I began sketching out key interactions to visualize how users would move from plan selection to checkout, while also incorporating account management views.
These early wireframe explorations focused on structuring information in a way that was both task-driven and visually scannable.
Key Elements Covered in Sketches:
Plans Page to Checkout Flow:
Visualized how users would select a plan, choose a device (or BYOD), add services, and proceed through a simplified checkout process.Account Dashboard Integration:
Designed screens to surface active phone lines, associated plan names, and account statuses (e.g., payment due, auto-renew enabled, expired line). These elements were prioritized to give users immediate context and next steps.Relevant CTAs and Links:
Ensured actions like “Change Plan,” “Add a Line,” “Make a Payment,” and “Refill Now” were clearly visible and logically placed next to related account details.Modular UI Thinking:
Components were designed in a modular way, allowing for consistency across authenticated and unauthenticated flows.
New Dashboard UI: Prioritizing Clarity and Service Continuity
The redesigned Account Dashboard was created to surface key information the moment customers land on the page—supporting both proactive account management and service continuity.
Modernized Alerts & Status Indicators
I reworked the alert system to better highlight critical account and phone line statuses, using modern UI patterns and visual hierarchy. This includes color-coded banners and contextual icons to draw attention to:
Line expiration warnings
Payment due alerts
Inactive or suspended service statuses
Smarter Payment Calculation
To reduce confusion around renewals, the dashboard now automatically calculates the amount needed to continue service. This eliminates guesswork and encourages immediate resolution through an integrated payment CTA.
AutoPay Enrollment Prompt
A persistent and clearly styled AutoPay call-to-action helps users enroll in recurring payments, a key feature for reducing churn and late payments. The CTA is presented contextually, only when AutoPay is not yet active.
Prioritized Links to New Purchase Flow
For returning users looking to expand their service, I surfaced a prominent “Add a Line” link. This action routes them into the updated, streamlined purchase experience—making it easier to grow their account while staying within the ecosystem.
Account Suspension with an opportunity to restore the account.
Various account statuses are made clear and readable for the user.
Services suspensions, balance past due
The account is all set and ready for the next renewal date.
Bring Your Own Device (BYOD)
BYOD Flow: Redesigning for Clarity and Conversion
A substantial portion of T-Mobile’s prepaid customers bring their own unlocked devices to access the network—especially in retail environments. As part of the Digital-First Initiative, it became critical to update the Bring Your Own Device (BYOD) flow to fit into the newly optimized online purchase experience.
Problem
The legacy BYOD flow was compressed into a single, dense page—likely for development efficiency—resulting in a fragmented user experience. Users were expected to understand technical details about their devices, navigate compatibility questions, and complete the purchase with limited guidance.
This created friction, confusion, and drop-off—particularly for users unfamiliar with SIM types, network bands, or device eligibility.
Solution: A Guided, Educational BYOD UX
I redesigned the BYOD flow to function as a step-by-step experience, focused on education, clarity, and momentum. The new flow includes:
✅ Device Compatibility Check
Clearly explains how users can test whether their device works on the T-Mobile network, with links to tools and instructions for entering IMEI numbers.✅ SIM Card Education
Visual descriptions of different SIM options (physical, eSIM, 3-in-1 kits), explaining what each one does and which is best based on the device type.✅ Guided Purchase Path
Once compatibility is confirmed, users are guided to select a SIM card, and then moved into the updated All Plans page to complete their plan selection.
Results & Benefits
This updated flow improves confidence, reduces abandonment, and aligns with T-Mobile’s goal of creating a cohesive digital purchase journey—even for users starting with a device they already own.
How to Connect to the TMO Network | Conceptual Model
To level set with the team I drew a concept model to understand how customers tap into the T Mobile network SIM card to communicate with T Mobile based on the plan of account.
These models help with the content strategy information, the user needs to understand before making a SIM card purchase. what distinguishes an eSIM and pSIM what plans are available based on device compatibility?
An eSIM (embedded SIM) is one that is installed on a chip that is permanently attached to the circuits inside the device. A pSIM (physical SIM) card is a card that is inserted into the device. Unlike a pSIM card, and eSIM does not need to be installed or swapped.— Quote Source
Phone Compatibility Wireflow
For a better visual representation I used wires to get by in from more business-oriented stakeholders (regular user flows can make some people zone out)
Based on the type of compatibility users go down different baths and receive certain SIM cards. eSIM, pSIM or both.
with the flow mapped out and following the Mobile-first approach, I designed verticles to map out the flow from entering the IMEI number to selecting the desired sim type.
Because buying a SIM card is not the same as other Phone devices the goal is to inform and move along.
Inform the user about how to test the network, the status of network compatibility and what types of SIM cards that are available for purchase.
BYOD Desktop, SIM card purchase layout.
The UI warns the user of the different states compatible and what that means before making a purchase. the different benefits of eSIM and pSIM cards, Customers may also have their own SIM card that can be tested as well.
Payment Refill Enhancements
To understand how plans and Payments interact I made a Conceptual model
Website Issues
There are multiple ways to make a payment for T-Mobile prepaid.
However, the website was unnecessarily siloed different paths, credit cards, refills etc.
users didn’t know the balance without leaving the page causing a lot of confusion and back and forth between pages. this is a critical area of the user journey that I mapped out.
Solutions
Clearly call out the balance amount on all payment pages.
Reduce clicks to make a payment.
Make it easier to login and make a payment.
Unify all payment options into one page, Refill Card, One time payment, autopay.
Key Behaviors and Principles
Flexible UI, multiple ways to make a payment
Match the real-world payment methods
Correlate necessary information with add-to-balance ( Setup Autopay, account status)
Authenticated path includes diplays account balance
The user flow outlines 2 flows, Authenticated (login with username and pass)
Unauthenticated (login with phone number)
to pay for the account
The new landing page displays different payment methods as soon as they page loads. Customers toggle between refill cards and credit card methods
Either the user sees an autopay CTA or the autopay payment date if enabled. Balance and renewal amounts are on full display for users who are logged in with their credentials.
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.