T-Mobile Plan and Device Purchase
Connect by T-Mobile Part 1
Problem
As part of T-Mobile's Digital First initiative, the company was shifting more prepaid customers from in-store transactions toward online self-service. But the existing prepaid experience wasn't built for that shift.
Plans, devices, services, and add-ons had grown into a fragmented journey. Customers were asked to make too many decisions at once, while research showed them overlooking plan options, struggling with unclear terminology, and losing context as they moved between pages.
To make Digital First work, the online experience needed to do more of the work traditionally handled by a store associate.
Opportunity
Create a clearer path from plan discovery to purchase while opening prepaid to more online customers. The opportunity wasn't simply to redesign checkoutb it was to rethink how customers compare plans, choose a device or bring their own, add services, and confidently move toward activation.
The new experience also needed to introduce Connect by T-Mobile, balance campaign goals with the way customers naturally shop, and work consistently across mobile and desktop.
I used an iterative design process, balancing business goals and customer needs through research, story mapping, prototyping, and testing while collaborating closely with cross-functional teams.
My Role
UX Designer · T-Mobile Prepaid eCommerce
I worked across discovery, UX strategy, interaction design, responsive design, and visual design, partnering with Product, Research, Marketing, Content, Engineering, QA, and the broader Design System team.
My work spanned the prepaid customer journey—from plan and device selection through checkout, BYOD, payments, and account management—helping establish a more connected experience across acquisition and self-service.
The findings shifted the conversation. Marketing had been committed to the “Connect” name, but customers consistently found it unclear. The research gave us a shared North Star, helping Product prioritize quick wins at the top of the funnel while revealing longer-term opportunities in account management, including upgrades and adding lines.
Customers Changed the Conversation
User Research & Discovery , Product and Plan Selection
Partnering with Product, Marketing, and Engineering, I helped develop and facilitate a baseline study of T-Mobile’s prepaid experience. We uncovered confusing terminology, inconsistent labeling, and friction around finding and comparing plans.
Finding Our North Star
Mapping out Opportunities: Our research helped the team see where the biggest opportunities were, making it easier to define the scope of the redesign and focus on the highest-impact improvements first. I translated those insights into actionable personas that gave product, marketing, and engineering a shared view of who we were designing for.
Mapping the journey helped us see where friction carried across the entire experience, from plan and device selection through checkout and account management. It also surfaced opportunities to create a more connected experience beyond the initial purchase.
Tracy represents the experienced, self-service customer who values efficiency, reliable connectivity, and staying current with technology. She expects to manage her account independently, understand exactly what she's paying for, and avoid customer service whenever possible.
The research surfaced high-severity breakdowns across the purchase journey—customers struggled to discover and compare plans, understand Connect and service terminology, and maintain progress through the flow. These findings gave us clear, prioritized opportunities for improvement.
The Product Selector created significant friction by combining plan, device, and service selection on one screen. Users missed hidden plans, lost progress when selecting devices, and struggled with unclear service names. These findings pointed to a clearer opportunity: replace the dense selector with a familiar, step-by-step purchase flow.
Building Alignment Through Heuristic Analysis
Heuristic Analysis — Evaluating the current experience through established UX principles
These sessions became more than an evaluation of the experience. They helped build a shared UX language across the team. Reviewing issues together gave stakeholders a clearer understanding of the why behind our recommendations and helped us align on which problems were worth solving.
Sketching Solutions Together
With the purchase flow defined, I used quick sketches to explore ideas and collaborate with developers early, validating technical constraints before moving into high fidelity.
I also considered both sides of the customer journey, new customers selecting a plan and existing customers changing or upgrading one and helping create a consistent experience that could scale across scenarios.
Building Alignment Around the Journey
Experience Strategy with product and owners
Once the team aligned on the core customer problems, I led the effort to visualize a new experience strategy that everyone could react to, refine, and build toward. This approach helped us quickly validate the direction before moving into detailed UI design.
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.
By aligning on this experience strategy early, the team had a shared blueprint that guided product decisions, engineering discussions, and UI design throughout the project. The modular approach improved clarity for customers while creating a scalable foundation for future enhancements.
The PIVOT
Design Systems Collaboration
Working closely with the Design System team and marketing, we reviewed available components, explored styling options, and identified gaps where Prepaid had unique needs, such as tables and accordions that weren't yet part of the shared system. The Design System team was incredibly collaborative, while marketing brought campaign-driven visual ideas that were strong for print but needed refinement for digital products.
Together, we worked through those trade-offs, finding a balance between introducing the new campaign and maintaining a familiar experience. The goal wasn't to make the interface look different—it was to make it feel like a natural evolution of the product customers already knew.
Oh By The Way, we have a new look and Feel!” - Marketing
Evolving Without Starting Over
Midway through the project, a new requirement emerged: Prepaid needed to align more closely with the evolving Postpaid Design System, which was also being updated in parallel.
Fortunately, we had kept the experience strategy intentionally flexible. Rather than locking ourselves into rigid UI solutions, we focused on solving user problems first. That made it much easier to adapt without losing momentum—a lesson I've learned from experience.
The business strategy positioned Connect as T-Mobile’s answer to the growing low-cost wireless market—targeting customers who wanted reliable service without paying for more than they needed. The challenge for UX was translating that strategy into a simple digital experience customers could understand and shop confidently.
Designing for a Nonlinear Purchase Journey
Unlike competitors with a more linear purchase path, T-Mobile customers could start with either a device or a plan. That flexibility supported different marketing campaigns, but also created more complexity within the purchase experience.
Connect by T-Mobile introduced another path, centered around plans with upfront 1-, 3-, and 6-month allotments. The design needed to accommodate these offers while keeping customers oriented—requiring new design-system patterns, alerts, and contextual guidance to move customers toward purchase completion.
Improving Device Discovery
The product landing page needed an overhaul. Faulty ZIP-code interactions and dated filtering made finding available devices difficult. Updated search and filtering patterns, paired with the new design system, improved device discovery, wayfinding, and overall searchability.
Simplifying the Product Detail Experience
The previous PDP was content-heavy and difficult to scan, with product configuration competing against dense feature and specification content. I reworked the hierarchy around the purchase decision, bringing price, availability, configuration, and selection together, while pushing supporting product details further down the page.
The result was a PDP that felt less like a specification sheet and more like a guided commerce experience.
Shaping the Marketing-to-Purchase Handoff
Marketing owned the campaign landing pages, but I helped shape how customers transitioned from marketing into the purchase flow. Early concepts used a “Select Plan” CTA, even though customers couldn’t actually select a plan on the landing page.
I recommended changing it to “Shop Plan,” pairing the CTA with clear pricing and offer details. This better set expectations and created a more natural handoff from campaign messaging to the transactional experience.
I iterated on the previous experience, where plans were buried in carousels and accordions, limiting visibility and comparison.
Clarifying a Growing Plan Portfolio
Prepaid included Unlimited, Limited, and Data-Only plans, each with different pricing, allowances, and restrictions. Research showed these customers were discerning shoppers who welcomed plan details and comparison, so simplifying couldn't mean hiding information.
While Marketing wanted to reinforce Connect, the name alone was ambiguous to customers. We prioritized descriptive plan categories, upfront pricing, data limits, and plan details—keeping the brand while making the differences clear.
screens expose things like “9GB / Up front,” 1-, 6-, and 12-month options, capped data, and the Unlimited/Limited/Data-Only categories. The UX challenge wasn't cosmetic—the customer had to understand how each product actually worked before choosing.
Making Services Easier to Understand
Services were previously buried at the bottom of the product selector with unclear names and little organization. I reorganized add-ons into meaningful categories, such as International Services, Call Protection, and Security and worked to provide clearer descriptions so customers could understand their value before adding them.
Making the Value Clear at the Point of Purchase
The transactional pages needed to reinforce the Connect brand while making plan selection clearer. I moved away from the previous experience’s accordions and unconventional plan cards, which made pricing and limits difficult to understand.
Because “Connect” alone didn’t communicate the value, I partnered with a UX writer to bring the “Get More for Less” proposition into the purchase experience—clearly emphasizing data allotments, caps, and plan limits so customers understood what they were buying.
Turning the Cart Into a Decision Point
The cart became more than a container for selected items. I redesigned it as a place to review, modify, and continue building the purchase with clearer paths to change plans, manage services, duplicate lines, and add devices or accessories.
Pricing was also reorganized to clearly separate what’s due today from recurring monthly costs, while contextual alerts guided customers toward eligible plan changes and promotional opportunities.
the old cart separates information into a long line-by-line layout with a dense pricing rail; the redesign groups each device, plan, and add-on as a single line, making the relationship between what the customer selected and what they’ll pay much easier to understand.
Research by Design
Partnering with our researcher, we designed a series of tests around the areas we were most concerned about, including default plan selection, the meaning of the term "Connect," and how pricing influenced customer decisions.The researcher guided the testing strategy while I helped shape the scenarios and hypotheseswe wanted to validate.
Turning Insights into Action
The results showed where users naturally gravitated, which elements captured attention first, and how visual emphasis influenced decision-making. Those insights gave the team confidence in some design choices while revealing opportunities to refine others before implementation.
“Trying out the new Look, with a new Flow.”
Validating the New Direction
With the redesigned experience taking shape, we wanted to validate our assumptions before moving into development. Around this time, the User Research team introduced Maze, which was quickly becoming a valuable tool for rapid prototype testing and measuring first impressions across a user journey.
Role and Responsibilities: Facilitate the discussion surrounding the purchase path from discovery, design, development, testing, and Release.
Collaboration: Immediate Design team of 3 (part of a larger hub ) includeing ux writers, researchers, project managers , Product Managers, Project Managers, directors, researchers, UX writer, Marketing, Development
Users: T Mobile Prepaid Customers
Tools: Figma, Miro , UX Pin UserZoom
Part 2 Account Management Dashboard
Problem
The prepaid account experience made everyday tasks like understanding renewals, making payments, changing plans, and managing lines harder than they needed to be. Important information and actions were fragmented, while alerts often failed to clearly tell customers what was happening or what to do next.
What I Changed
I redesigned the account dashboard around status, next payment, and high-priority actions, while creating clearer paths for payments, plan changes, upgrades, and adding lines. I also introduced new alert and messaging patterns to communicate prepaid-specific states and edge cases.
My Role
I worked across Product, UX Writing, Engineering, QA, and the Design System team to rethink key account-management journeys, translating the complexities of prepaid billing and account rules into clearer, responsive experiences.
Impact
The redesign transformed the dashboard from a passive account summary into a self-service hub, giving customers clearer visibility into their account while creating natural opportunities for retention, upgrades, AutoPay, and additional lines.
Iterating Toward Clarity
I iterated on the dashboard by reorganizing information around customer priorities, testing different ways to surface alerts, balances, payments, and account actions. Each iteration moved the experience from simply displaying account information toward clearly guiding customers to their next action, editing plans, addling another line, upgrading phones etc.
UX Audit & Takeaway
The account had the right information, but didn’t clearly connect account status to the next action. The opportunity was to make alerts, balances, payments, and AutoPay work together, helping customers quickly understand what’s happening, what it means, and what to do next.
The redesigned layout supported multiple lines within a single account, giving customers clearer visibility into each line’s device, plan, status, and payment details.
The new dashboard also needed to extend seamlessly into the native T-Life app, adapting the account experience to T-Mobile’s mobile UI patterns and design system.
Users now recive data visaUsers now received clear data visualizations for Talk, Text, and High-Speed Data on each line, making usage and remaining allowances easier to understand at a glance.
Connecting Account Management to the Purchase Flow
Rather than creating separate account-management journeys, I leveraged the new purchase flow for upgrades, plan changes, adding lines, and devices. This reused familiar patterns, reduced duplicate experiences, and created a more consistent path from managing an account to making a purchase.
The layout encouraged users to take action, surfacing key account tools and creating a natural path to enroll in AutoPay and simplify future payments.
The dashboard calculated the exact amount needed to restore the account balance at that moment, removing the guesswork from prepaid payments.
Emails and warning alerts kept customers informed about overdue payments, successful payments, and potential cancellations, clearly communicating the actions needed to prevent service suspension or restore an account.
Part 3 Account Payments and Refills
Reusing Patterns Across Payments
With the new dashboard and account components established, we could reuse familiar patterns across payments and refills. This created a more consistent experience while reducing the need to design and build separate solutions for each payment scenario.
Problem
Prepaid payments were more complex than a typical checkout. Customers could refill balances, make one-time payments, redeem refill cards, use AutoPay, and manage payments across multiple lines, while renewal timing and account status affected what they needed to pay.
Impact
Payments became less about understanding the mechanics of prepaid billing and more about knowing what you owe and what to do next. Customers received clearer guidance for keeping service active, while the experience provided stronger paths to refills and AutoPay.
Making Refill Cards Feel Seamless
The Pay as Guest refill-card flow needed to feel fast and intuitive despite the required CAPTCHA step. I worked with Development to design around the technical constraint, introducing CAPTCHA at the right moment so it didn’t feel like an unexpected interruption.
Customers could enter their refill card number, complete verification, and immediately see the card’s value before redeeming it. The confirmation state then clearly communicated the amount added, transaction details, and a direct path back to the account.
Scaling the Experience into T-Life
The new payment patterns and components were designed to scale directly into the T-Life native app, rather than creating a separate mobile experience. The same balance, renewal, payment, refill, and confirmation components could adapt to the app’s design system while preserving the logic established on the web.
This also allowed authenticated T-Life customers to get a richer experience and showing their current balance, calculating the amount needed for renewal, surfacing AutoPay, and guiding them toward the appropriate actionall while reusing the same underlying payment flow across channels.
Legacy Payments & Refill
Payments and refills were siloed across separate paths, relying on an outdated navigation model that required too many steps and wasn’t compatible with the emerging T-Life app experience. Critical information was also missing: customers weren’t shown how much they needed to add to maintain service, while AutoPay setup and refill-card redemption lacked clear, intuitive direction.
The opportunity was to consolidate these fragmented paths into a shared payment experience, reduce unnecessary navigation, and reuse the new account components to provide clearer balances, payment guidance, and next actions.
UX Strategy
The UX strategy I proposed to Product built directly on findings from our baseline research: simplify the payment experience and bring previously fragmented options into one place. There was no reason refill cards, credit/debit payments, AutoPay, and account balance information needed to live in separate flows.
I mapped authenticated and quick-refill paths around a shared payment experience, reducing unnecessary steps while keeping the customer’s current balance, amount needed, payment method, and confirmation visible throughout. The goal was to make paying or refilling feel like one coherent task, regardless of how the customer entered the flow.
Designing One Payment Experience Across Channels
The payment experience had to work seamlessly across T-Life’s native app, mobile web, and desktop, while bringing each touchpoint into the updated design system. I designed reusable patterns so the experience could adapt across screen sizes without changing the underlying payment flow.
The design also supported two distinct customer needs: a fast Pay as Guest path for customers who simply wanted to refill an account, and an authenticated path for customers who wanted access to their balance, renewal amount, AutoPay status, and account details. Both paths converged on the same payment components, creating a more consistent and scalable experience across channels.
Making AutoPay Part of the Payment Experience
AutoPay was integrated and promoted within the same payment experience rather than treated as a separate account setting. Customers could see their available balance and renewal amount before choosing between automatic monthly payments or scheduled AutoRefill.
I designed the flow to explain the difference between the two options, expose frequency, start date, recurring charges, and payment method at the point of setup, and show how much needed to be added to keep the account active. This turned AutoPay from a hidden account feature into a clear, contextual option for preventing interrupted service.
Part 4 - Final - Bring Your Own Device (BYOD)
Problem— The legacy BYOD experience put too much responsibility on customers to understand device compatibility, IMEI checks, SIM options, and what to do next. The experience needed to turn a technical compatibility check into a clear path toward activation.
Changed — I transformed the largely single-page experience into a guided sequence: identify the device → enter IMEI → check compatibility → explain eSIM/physical SIM → recommend the appropriate option → continue to plans. Instead of simply reporting whether a device was compatible, the experience explained what the result meant and gave customers a clear next action.
My Role— I mapped the existing experience, identified points of confusion, and worked with Product and Engineering to define a more guided flow. I designed the responsive experience and worked within the evolving design system while accounting for the different compatibility outcomes.
Impact— BYOD became less of a technical utility and more of a guided purchase path. Compatibility results could lead customers directly into relevant plans and activation, connecting a previously isolated tool to the broader prepaid shopping experience.
Findings & Opportunities
The heuristic evaluation and competitive analysis revealed that the legacy BYOD experience placed too much responsibility on customers. Dense content, unclear IMEI and SIM guidance, weak system feedback, and blocked paths made a relatively simple task feel technical and uncertain. Competitors demonstrated that clear steps, upfront education, and stronger guidance after compatibility checks could make the experience easier to understand.
Understanding the System Before Designing It
BYOD introduced a layer of technical complexity I first needed to understand myself before I could simplify it for customers. I collaborated closely with QA and Development to map the activation journeyand how device compatibility, IMEI checks, eSIM, physical SIM (pSIM), plan selection, and activation actually worked together.
Content Design was part of this discovery process, helping translate technical requirements and terminology into language customers could understand. Mapping the system also exposed the different paths and edge cases, compatible vs. incompatible devices, eSIM vs. pSIM, and what customers should do when their device couldn't continue.
This shared understanding became the foundation for the UX: turning a complicated technical system into a guided sequence of decisions with a clear next step at every outcome.
Moving from One Page to a Guided Flow
The legacy BYOD experience attempted to handle device compatibility, IMEI checks, SIM education, and next steps on a single page, creating a dense experience with too many decisions competing for attention.
One interesting edge-case pivot was supporting customers who already had a T-Mobile SIM card. I quickly introduced an interaction that let them enter their SIM number and continue directly into plan selection.
Putting the Pieces Together
I brought the pieces together into a single flow that accounted for IMEI guidance, compatibility states, SIM options, edge cases, and clear next steps. Mapping each possible outcome helped ensure customers weren’t simply told whether their device worked—they were shown what the result meant and given a clear path forward.
The result turned a technical compatibility check into a guided decision flow that connected naturally to plan selection and activation.
Bringing It All Together
Connect by T-Mobile evolved beyond a series of individual redesigns. Across plan shopping, account management, payments and refills, and BYOD, I worked to create a more connected experience built around the way prepaid customers actually make decisions.
Research established the North Star, while story mapping, competitive analysis, heuristic evaluation, prototyping, and close collaboration with Product, Engineering, Content, QA, and the Design System team helped translate that strategy into shippable experiences.
The result was a simpler, more consistent prepaid ecosystem—one that reduced dead ends, clarified complex decisions, supported web, mobile, and T-Life, and created reusable patterns that could scale as the product evolved.
The biggest takeaway: I wasn’t just redesigning screens. I was connecting fragmented journeys into a system customers could understand and the organization could build on.
I moved away from squeezing the entire BYOD process onto one page. Instead, the landing page set expectations upfront and guided customers into a focused, step-by-step flow.
I moved the experience toward a guided, sequential flow consistent with the new purchase journey. Breaking BYOD into focused steps reduced cognitive load, allowed us to provide the right information at the right moment, and gave customers a clear path from device check → compatibility → SIM selection → plan selection.
The opportunity was to transform BYOD from a standalone compatibility tool into a guided purchase journey—simplifying the content, clearly explaining IMEI and SIM options, providing immediate compatibility feedback, and always giving customers a relevant next step toward SIM selection, plans, or
Connecting BYOD to the Purchase Flow
I mapped BYOD into the larger purchase journey to define what happens after the compatibility check. Compatible devices continued directly into the purchase flow, while incompatible devices were guided toward another device and then rejoined the journey without starting over.
This ensured every compatibility result had a clear next step and preserved the customer’s purchase intent.
I provided clear guidance on IMEI numbers and where to find them, then invited customers to check compatibility upfront—setting expectations that not every device would work on the network.
I designed for different levels of device compatibility, making the results transparent instead of treating compatibility as a simple yes-or-no outcome. Customers could understand how well their device would perform on the T-Mobile network, what functionality might be limited, and what that meant for their next step.
From there, the experience recommended the best SIM option—eSIM, physical SIM, or an existing T-Mobile SIM—based on the device’s capabilities and the customer’s needs, turning a technical compatibility result into a clear path toward choosing a plan and activating service
Role: UX Designer
Team: 3 Designers, Product Manager, Lead Developer, UX Researcher, UX Writer and QA