Michael Doss
UX Designer

Project Summary

Note: This is an ongoing project. This will be updated as each phase goes live. Research and user testing done by T-Mobile are confidential and cannot be shared. Due to a reorganization, the project has now been handed off to a new lead designer and I have switched projects.

eSIM Modernization is a project aimed toward increasing awareness of what eSIM is, eSIM activation instructions, SIM swapping within the Purchase (buying a phone on T-Mobile's website), and BYOD (bring your own device) flow for new (prospect) and existing customers. This project covers web, mobile, and app.

An eSIM is an electronic SIM card already in the phone so people don't have to get a physical SIM card to activate their phone. This reduces wait time for users that would've bought a physical SIM online or saves them a trip to their local T-Mobile store to buy one.

Overview

The Roles

My Role -

UX Designer

Team -

Shelley Eang - Lead UX Designer (entire project)

Stephanie Hossenlopp - UX Designer (phases 3 & 4)

Dave Bagley - Senior Copywriter

Michael Luoma - Senior User Experience Researcher

Stakeholders -

Product Manager, Customer Experience

Technical Product Owner, Customer Experience

Technical Product Owner, Customer Experience

Technical Project Manager, Marketing

Project Manager, Digital

Senior Director, Customer Experience

Technical Project Manager, Marketing

Senior Manager, Marketing

Software Used - Figma, FigJam, Contentsquare, Adobe Analytics, Asana

Design process

Design process

Who We're Targeting.

eSIM Modernization

What Are The Problems And Goals We're Tackling?

eSIM Modernization

Why Is eSIM Such A Big Deal?

We all know what it's like switching carriers, it's a massive headache. Your first thought is probably along the lines of "I'm going to go waste half my day...". The process is outdated, boring, and just painful. Not just for the customer but also for the employees. No one wants it to take as long as it does. This is what we are solving with this project. We're eliminating the need for the hours you have to take off work or use part of your day off. To do so, we need to solve the three problems listed above.

With eSIM, we are revolutionizing not only how people can come to T-Mobile but how current customers can switch devices and add lines to their accounts, from the comfort of their homes or wherever they desire.

How Does A User Check Their Phone's eSIM Compatibility?

To find out if you're phone is eSIM compatible you would go to the BYOD page on T-Mobile's website and enter your phone's IMEI number.

Another method of finding out is going to the SIM card details page and entering your IMEI number. This experience would only work for prospect customers or current customers adding a new line since current customers cannot purchase SIM cards for a current line online due to fraud protection.

The results from the IMEI checker -

  • Compatibility with T-Mobile's network

  • If your device is blocked from use on T-Mobile's network

  • SIM card compatibility

For SIM card compatibility it would either be only physical SIM card, physical SIM card and eSIM, or only eSIM.

For some Samsung phones, the results can come back as "eSIM unknown" and in that scenario, we would give the user the option to enter their phone's EID number (a 32-digit number attached to a device that uses an eSIM), to confirm its eSIM compatibility. Entering these numbers was a technical requirement that we could not bypass, the "eSIM unknown" state is an edge case for an extremely small % of users.

Competitive Analysis & Journey Mapping
Competitive analysis

Competitive analysis

  • Multiple carriers aren’t showing a detailed list for IMEI results

  • Mint and Cricket have the IMEI checker on the BYOD page

  • Only AT&T and T-Mobile explain what an eSIM is

  • Google Fi provides a lot of info on your phone's compatibility with their network, similar to T-Mobile

  • Most explain the steps on how you bring your own device to their network

  • Google has users select the brand and model, not their phone's IMEI number

  • AT&T has the user decide whether they’re a prospect or a current customer wanting to add a line

  • All have very few steps for prospect customers

  • Mint Mobile tells the users what step they’re on in the process

  • Mint Mobile also lets users decide to enter their phone's IMEI number or by brand and model.

Journey mapping

Journey mapping

Existing BYOD flow - prospect customers (bringing your own phone to T-Mobile)

  • There's a lot of information on the BYOD page, not sure where to go or what to click

  • Check compatibility is under the second step but the IMEI checker is below it on the page

  • Too many CTA's on the page

  • Users have to select their plan choice two times

Existing Add-A-Line flow - current customers (purchasing a phone from T-Mobile's website)

  • Doesn't inform users how much their new monthly bill will be, only shows the added cost of the line and phone

  • Doesn't let users change their plan

  • Shows the deal the company wants to promote even if the user isn't eligible for it

  • The pill button is almost hidden on the cart page that shows the user they've added a new line

Keep It Simple, Stupid.

After our competitive analysis, user research, and journey mapping of the current experience, we found some similarities and differences between the companies, some of which were listed above.

The biggest similarity between all companies was that they all kept the steps minimal for bringing your own phone to their network.

70% of users who visit the BYOD page are prospect customers while 30% are current customers. The vast majority of complaints from users from our research were on technical errors they encountered.

The majority of users feel confident in being able to complete the process of bringing their own phone to T-Mobile after visiting the BYOD page. The BYOD page has vital information on what users need to successfully bring their device to T-Mobile and are taken through the process to ensure there won't be any user errors. Customers are also likely to visit a T-Mobile Store or call customer service to switch to T-Mobile. Our assumptions for that are because that is how it's always been done and steps will need to be taken to educate people that you no longer need to do so.

Some areas that we wanted to focus on -

  • Add something to show users what step they're on in the process*

  • Clarify the steps on the BYOD page above the IMEI checker to match the most updated process*

  • Ensure minimal steps are needed for users to be successful

  • Inform users during the process on what their next steps are in advance

  • Use human language to explain technical terms and processes like IMEI and EID numbers and how to find them on your phone

  • Only show relevant information to the users once they started the process

  • Decrease amount of CTA's users see on the BYOD page*

* = Not able to do on the current phase that's live

Constraints

This project had multiple technical requirements on what we could and couldn't do during each phase. The back-end developers were restricted due to budget, time, and the current platform it was being built on.

A different team also owned part of the BYOD page that restricted us from fully redesigning the page, at least for the version that is now live on T-Mobile's website. This restricted us to only being able to design from the IMEI checker down at this current phase for the BYOD page. Basically, what the users see after they enter their IMEI number is what we were focused on while designing that page.

We were also constrained on how the flow could be built to ensure the process to join T-Mobile or add a new line to their account would be successful. In later phases that are not yet live, we were able to make a lot more changes to the process.

Some of the constraints -

  • When/where the login modal could appear

  • The order of some pages in the flow

  • Capabilities we wanted to introduce

  • Strict timeline

  • Back-end capabilities

  • and more

The current phase was designed for the web. Mobile and app versions are in later phases.

Phases 1 - 3

What These Phases Cover

Phases 1 -3 were to launch the MVP version and a quick iteration of it as soon as possible. These phases only covered prospect customers. With the release of the iPhone 14 coming soon (which is eSIM only) and more phones with eSIM capabilities, we needed to provide users an option to use eSIM for their devices. As I said above, technical limitations were in play that constrained what we could do during this phase.

The pages that we designed include -

  • BYOD page

  • SIM PDP page

  • Cart page

  • Order confirmation page

BYOD Flow - Prospect Customers Only

Scenario - Customer purchased a phone from OfferUp and wants to bring it to T-Mobile. They need to check if their phone is compatible with T-Mobile's Network if it's locked, or blocked, and if it is eSIM compatible.

While designing this experience, we wanted to make the users jump through the least amount of steps possible. After landing on the BYOD page, they would enter their phone's IMEI number. Once they submit it, the results and steps for what's next will appear.

If a user selects eSIM -

They'll be taken to the plans page to select the plan they would like and then to the cart to begin the checkout process. The eSIM activation instructions will appear on the order details page and will be emailed to them as well. They'll also create their account after finishing this process.

If a user selects a physical SIM card -

They'll be taken to the PDP details page where they'll add the physical SIM card to their cart. After that, they'll be taken to the plans page and then to their cart to begin the checkout process.

BYOD flow

BYOD flow

Purchase Flow - Prospect Customers Only

Scenario - Customer wants to purchase a phone from T-Mobile. They can purchase either an eSIM-specific phone from T-Mobile so they can activate it immediately from the comfort of their home or buy a physical SIM card-only phone.

This flow is for prospect customers that are buying a phone on T-Mobile's website. The flow is the same except they won't be on the BYOD page to start the process.

Purchase flow

Purchase flow

Research Prototype

Once we built out the flows, we began wireframing different versions of the BYOD page. After many iterations and a couple of peer reviews, we settled on a design. During this process, we constantly communicated with key stakeholders and our copywriter to ensure it was meeting the needs of the business and our users.

After the design and copy were ready for testing, we put together a prototype for the UX research team to test with users.

Research prototype

Research prototype

Usability Testing

The UX research team used remote unmoderated usability sessions, task scenarios, and a survey. There were 15 participants in total. Since I can't share any numbers I'll share some quotes from the participants.

Due to the timeline of the project, we used the results from this research during the next phase to make iterations to the design.

Quotes -

"It was easily communicated and I knew where to go next and what to expect after putting in my IMEI number and choosing the eSIM option. It was all right there for me on the page and flowed easily for me to understand the next steps in the process"

"I felt somewhat confident because I wasn't 100% sure how I was going to activate my phone until I got to the very end. I think if I was provided with activation instructions earlier on, I would have felt more confident."

"I loved how easy it was to see the list of needed info, lists of things to do once I placed my order, and how clean and simple the process was."

"I liked that there was a lot of white space on the pages, they were easy to read, easy to follow, buttons to click that made sense, and you were guided throughout the whole process."

Design Handoff

Phase 3 handoff

Phase 3 handoff

Phase 4

What This Phase Covers

Phase 4's goals were to expand eSIM to existing customers and to keep iterating the prospect customer's experience. Existing customers will now be able to add a new line to their account using the BYOD page as their starting point. The same technical limitations that constrained us in the earlier phases were the same for this phase.

The pages that we designed include -

  • BYOD page

  • SIM PDP page

  • Cart page

  • Order confirmation page

BYOD Flow - Existing Customers

Scenario - Existing customer purchased a device from OfferUp and wants to bring it to T-Mobile to add a new line to their service.

The first flow is the authenticated experience, in which the customer is already logged in. The second flow is when the current customer is viewing it as a prospect customer (not logged in) and will see the log-in modal appear when they click the IMEI checker.

Current customers won't need to choose a plan since they're already on one. T-Mobile does not allow lines to be on different plans unless they're different types of devices like a phone and a tablet. Once a user enters their phone's IMEI number they will select either eSIM or physical SIM to continue with.

If a user selects eSIM -

Takes the user to a page that shows how much this new line will cost every month and then to their cart.

If a user selects a physical SIM card-

If a user selects the physical SIM card option, they'll be taken to the SIM PDP (product detail page) where they'll add the physical SIM card to their cart. Then they will be taken to the page that shows much the line will cost every month and then to their cart.

Authenticated BYOD flow (user already logged in)

Authenticated BYOD flow (user already logged in)

Unauthenticated BYOD flow (user isn't logged in at the start)

Unauthenticated BYOD flow (user isn't logged in at the start)

Iterations

There are now two versions of the results on the BYOD page after a user enters their IMEI number. This phase also now allows existing customers the option to use eSIM. Before this, it was only possible for prospect customers.

Version 1 - Prospect view (any user that isn't logged in)

For the prospect customer view, we had to ensure that the copy on the prospect version of the page fit both prospect and existing customers since 30% of the visitors are existing customers. We couldn't track what % of existing customers are logged in or not while visiting this page.

Even though we added a log-in modal after the user clicks the IMEI button, an existing customer could exit out of it and continue. Updating the copy was to add another layer of security to help make sure no existing customer goes through the process without logging in.

Version 2 - Base (users that are logged in while on the page)

From phases 1 & 2, we revamped the "What's next?" again in phase 3 and now in phase 4 for base customers. Copy changes were required to better fit the steps that existing customers would go through.

A log-in modal was also added so any existing customers that aren't logged in were asked to do so. Stopping any potential error state happening if they continued as a prospect customer as I said above. If a base customer continues and completes the process without logging in, they would now have two T-Mobile accounts.

Technical Limitations -

The same technical constraints were still affecting what we could and couldn't do. Some of the findings from the research we wanted to capitalize on weren't possible until later on in the project.

Design Handoff

Phase 4 handoff

Phase 4 handoff

Phase 5

Introducing The SIM Swap Capability

T-Mobile now offers existing customers the ability to switch their SIM cards on their phones. For example, if you have an iPhone 12 currently using a physical SIM card, you can switch it to eSIM with this new feature. This was only for new customers until now. With more and more phones releasing with eSIM capability and with the iPhone 14 being eSIM only, this was a vital project to T-Mobile.

There are two entry points into this feature -

  • Bring Your Own Device (from the main navigation)

  • MyTMO (from your account homepage)

New Flows

This gave us the opportunity to create brand-new flows for each entry point for existing customers. We want the experience to walk users through each step until the process is complete. Prospect customers would experience the existing flow we did in phase 4.

 BYOD flow for existing customers

BYOD flow for existing customers

MyTMO SIM swap flow

MyTMO SIM swap flow

Design Handoff

BYOD existing customers flow

BYOD existing customers flow

MyTMO SIM swap flow

MyTMO SIM swap flow

Some Of The Final Designs