2022, Web, Mobile, App
Bringing T-Mobile to the next generation of SIM technology
eSIM Modernization
UX Designer
My Role
Adobe XD, Figma, FigJam, Miro, Asana
Tools
Early Winter 2022 - Late Summer 2022
Timeline
2 UX Designers
2 Product Owners
1 Project Manager
1 Copywriter
2 UX Researchers
2 Product Owners
1 Project Manager
1 Copywriter
2 UX Researchers
Team
Project
An overivew
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 the T-Mobile 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 who would've bought a physical SIM online or saves them a trip to their local T-Mobile store to buy one.
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 who would've bought a physical SIM online or saves them a trip to their local T-Mobile store to buy one.
The Problem
What we're solving
4 out of 5 customers do not know what an eSIM is
T-Mobile does not have eSIM messaging or education
A high volume of calls to customer service regarding failed eSIM activations
Get T-Mobile ready for the iPhone 14 release
T-Mobile does not have eSIM messaging or education
A high volume of calls to customer service regarding failed eSIM activations
Get T-Mobile ready for the iPhone 14 release
Target Audience
Our target
They are coming from a different carrier and need to get a T-Mobile physical SIM card or an eSIM to activate their phone on the T-Mobile network.
Prospect Customers
Add a new line to their account whether it is using a physical SIM card or an eSIM.
They are replacing one of their current phones and switching the type of SIM card they're using.
They are replacing one of their current phones and switching the type of SIM card they're using.
Existing Customers
Reiterations
11
MVP Launch
10
QA Testing
9
UX Handoff
8
Make Updates
7
Usability Testing
6
Usability Feedback/Review
5
Check With Devs
4
UX Mockups
3
UX Research
2
Project Kickoff
1
Design Process
Resarch
An overivew
We partnered with the UX research team to complete research and testing with them.
Almost all of the complaints from the users from our research were because of technical errors they encountered.
Almost all of the complaints from the users from our research were because of technical errors they encountered.
Add something to show users what step they’re on in the process.
*not able to do on the current phase of the project that’s live
*not able to do on the current phase of the project that’s live
Clarify the steps on the BYOD page above the IMEI checker to match the most updated process.
*not able to do on the current phase of the project that’s live
*not able to do on the current phase of the project that’s live
Paint point
Ensure minimal steps are needed for users to be successful while informing them of their next steps.
Paint point
Use human language to explain technical terms and processes like IMEI and EID numbers and how to find them on your phone.
Paint point
Paint point
Only show relevant information to the users once they started the process. Users are shown deals they don’t qualify for currently.
Paint point
Decrease the amount of CTA's users see on the BYOD page. Users don’t know which one to click.
*not able to do on the current phase of the project that’s live
*not able to do on the current phase of the project that’s live
Paint point
BYOD Journey Map
Keep It Simple
Finding our solution
After completing our competitive analysis, heuristic evaluation, and user research, we found some similarities and differences. What we believed was the most important similarity was that they kept the number of steps minimal and used human language, not a bunch of technical jargon users wouldn’t know.
Constraints
Hands were tied
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 which restricted us from fully redesigning the page, at least for the version that is now live on T-Mobile's website,
A different team also owned part of the BYOD page which restricted us from fully redesigning the page, at least for the version that is now live on T-Mobile's website,
Back end
Flows
Capabilities we wanted to introduce but weren’t allowed to to technical limitation and/or budget and timeline.
SEO
The order of some of the pages in the flows.
When and where the log in modal could appear. Placing it incorrectly would ruin the SEO.
Testing
Hearing from users
I can't share specific results but here are some quotes from the users.
"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."
"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."
Phases of the project
How we broke it down
Phase 5
Phase 4
Introducing SIM Swap capability, allowing current customers the ability to switch SIM types on their phones. MyTMO was also introduced as an entry point into this flow.
Phase 1 - 3
The goal was to expand eSIM to existing customers and keep iterating the prospect customer experience.
Phases 1 - 3 were to launch the MVP version and a quick iteration of it as soon as possible.
Flows
The experience
Having flows from multiple entry points from BYOD (bring your own device), MyTMO (signed-on experience), and the purchase flow (when buying a device on T-Mobile’s website) created a difficult challenge. We needed to create a process that no matter where you started and what type of customer you are, you can be successful in the least amount of steps possible.
These flows cover the web and mobile experience. The app is slightly different in areas.
These flows cover the web and mobile experience. The app is slightly different in areas.
Final Designs
Some of the
