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.