MAGENTA IS T-MOBILE! That’s one of the first things I realized coming to the US. The brand has used color in all its branding in the most creative way across all departments. I’ll be serious, If I see the color Magenta anywhere, T-Mobile is the first thing that pops into my head ( just like the Airtel music in India). I even saw their headquarters in Seattle which was completely lit up from the ground in the bright Magenta bling
With all that being said, the moment I laid eyes on their user account website page, the color that popped into my head was ALARMING RED. I could instantly feel all the Magenta magic dissipating slowly with every click. To better understand this shift, I decided to conduct a case study specifically analyzing T-Mobile’s user account website.
So, here we go!
T-Mobile is a telecommunications company that provides wireless voice, messaging, and data services in the United States and beyond. Founded in 1994, T-Mobile has grown to become one of the largest wireless service providers in the country, serving millions of customers with its LTE and 5G networks. In addition to its mobile services, the company offers a range of other products and services, including home internet, TV, and wearable technology. T-Mobile is known for its innovative and customer-focused approach and commitment to customer satisfaction.
When I came to the US, I visited the nearest T-mobile store and subscribed to one of their basic plans. A month later, I was sent a notification to recharge my account. I downloaded the app but for some reason, it wasn’t supported on my mobile (It still is not!). This pushed me to witness, for the first time, the T-Mobile website.
As a UX enthusiast, when I logged into my account and saw the home screen, I felt I was suddenly redirected to some random page. It is a UX minefield that is held together by a few working functionalities. I was reminded of all the design principles only by the fact they were missing on this site.
The primary aim of this project was to do an in-depth analysis of the usability and user experience of the website with psychological and design principles as guidelines.
- Also, to find gaps in the UX/UI design
- The use of content and microcopy across the platform
- The design inconsistencies
Right after I decided on working on the T-Mobile site, I started to gather some website account page designs of similar products. Here are a few of them:
When exploring the user account pages of similar products, most of them had a very intuitive and well-structured information architecture in place. The task flow was aptly defined with appropriate and crisp content that followed the keywords used in conversations.
The tasks were short and quick. Information was laid out with graphs and progress bars to reduce cognitive load.
When considering the research methods that can be employed in this project, it was evident that usability testing in combination with surveys would make the best fit.
- Determine how well your product meets the needs and expectations of your users, and whether they find it easy and comfortable to use.
- Learn how well users can complete the assigned tasks, and identify areas of struggle or difficulties.
- Observe how users interact with the product’s UI and uncover instances where design improvements could result in improved user experience.
- User feedback is too valuable to miss and from this, you potentially get direct feedback from users about their experiences.
- Identify any technical issues that arise during testing, such as bugs, crashes, or slow performance, and work to resolve them.
Once decided that I’m going to do usability testing as the research method, I took a step-by-step approach to complete this project.
- A Survey Sampling was conducted to give me an idea of the users I needed for my project for the best possible results.
- I selected 5 participants based on their age, profession, and awareness of the brand/product.
- Decided to conduct video interview-based usability testing on Zoom and created a consent form to be sent to the users for their approval and participation.
- Selected two major tasks that will take the users across the major sections in the user account flow.
– Recharge Account Balance
– Change the plan subscription
- Created a post-test survey to get an in-depth understanding of every action taken by the users and their perspective on the website.
The participants were individually invited to a Zoom link and were given introductions to this project along with the scenarios and tasks. They were also informed that the testing will be recorded for research purposes.
Scenarios and Tasks:
Scenario 1: You are an existing T-Mobile network user. Your current $10 monthly plan is about to expire with only a couple of days remaining. Renew your existing plan by logging into your account from the website to continue services.
Task 1: Visit the My Account page on the T-Mobile site
Task 2: Renew your account for the next month for the same plan.
Task 3: Check out and add payment details.
Scenario 2: You are an International student traveling to India for a month during your winter break. You need to keep your T-Mobile network active as you have some important transactions and international calls to be made. Change to a plan that has more data/month and add International roaming to your connection.
Task 1: Go to your My Account page on the T-Mobile site
Task 2: Change the plan to your need
Task 3: Add customizations as per your need
Task 4: Check out and add payment details.
Task 5: Complete recharging your account
It was really interesting to see that every participant took a different approach each time to go about the task. Every action they did gave me an insight into the design and their thinking behavior.
Let’s dive deep into what we discovered.
- Firstly, all participants found the renewal of current plan was an easier task in comparison but had its own flaws.
- 3 out of 5 participants struggled to find the CTA to begin their Change Plan task.
- 3 out of 5 participants needed help and took more time to compare and choose a plan.
- All the participants verbally raised an issue with the terminologies and the copy used across the tasks.
- Few participants found the navigation of the site to be confusing.
- There was visible frustration seen among the participants due to the time taken for them to complete the task.
- The participants constantly scrolled up and down to see the entire page.
- Every page took time to load with few taking more than 5 seconds.
The usability tests were extremely useful in identifying key design flaws along with other major UX gaps that were blocking the users from performing their tasks. Some were obvious and some were specific to the journey the user was taking to complete a task.
Let’s take a look at them.
- The layout of the page did not follow the usual ‘F-shaped’ format. It was center-aligned with information scattered around making it hard for participants to focus on one thing.
- The design was not pulling attention toward the CTAs that needed attention to perform the tasks.
- The layout of the plans page was a nightmare as it did not have a tabular format (at first, they recently replaced the radio buttons to a basic table) in place making it difficult for users to compare and decide.
- There were too many steps to complete the checkout process. It can all be condensed into 2 steps.
- The page is not very responsive as it took its own time to process interactions and had to refresh multiple times to reflect the results.
Not many products have survived to see the end of daylight by avoiding the design principles or heuristics and the principles of human psychology. We must weave these guidelines carefully into our products so that it improves the experience of a user. They are vital to make sure the product is forever usable and never remembered for its flaws.
I’ve deconstructed the issues with human psychological principles as well. To read about that, check out the below link
Home page section:
- During this research, users were lost after landing on the home account page which lacks in consistency of design, and prioritization of information. They didn’t anticipate the needs of an incoming user to add conspicuous elements to catch their attention instantly.
- The CTAs like ‘Edit Plan’ or ‘Change Line’ was given very less priority and no iconography is seen throughout the page to reinforce Bottom-up or top-down processing psychologies.
Choose a new plan page:
- When users come to choose a plan, the plan page architecture is nothing but a cognitive load for the users to go through. The plans were used not designed under the comparative table but are given radio buttons which when clicked show the plan’s details. ( This has been updated after Jan 2023).
- The Active plan is mentioned multiple times in the top section of the page with a CTA ‘Keep existing plan’ as the primary button. (Why would users come to this page to keep the existing plan?)
- The CTA to go to the next step is way down at the bottom of the page creating a lot of confusion and completely designed against the psychological principles of attention.
- This page doesn’t inform the user what it offers and what the user must be doing. Upon closer look, it has two dropdown sections that include additional services like international packages, port protection( not a good feature name), and more.
- The CTA again does not sound very user-friendly and it does not give any idea as to the user what the next step is going to be.
- In this penultimate step, users are asked to choose the order date which can be done in the previous step. With all these steps, this task seems to be long and winding. And again the CTA says Add to Cart.
- And only in the final stage of the process, the user can give out a sigh of relief as it is simple to select the payment option and proceed with payment.
During the process of usability testing and primary research, I found a lot more design inconsistencies within the website but overall all the flaws can be categorized as follows
AMBIGUOUS USER FLOWS: The task flows on this website do not follow any of the mental models of its users. Thus making the user journey convoluted and confusing for the users to complete the task in time.
INCONSISTENT UX WRITING: The website does not have a well-defined tone or voice for its writing. They are neither concise nor appropriate to give a sense of familiarity to the users. There is no synchronous feel to the website’s design and copy.
NEVER TO BE FOUND DESIGN HEURISTICS: The design didn’t have most of the heuristics that product designers hold dear which makes the website an epitome of bad user experience.
There were a lot of recommendations from the participants post their usability tests which made a lot of sense and were valid.
- The steps required for changing a plan could be reduced — it could be completed in just 2 screens.
- To keep all plans simple and informative on one page rather than going through multiple pages to choose the same plan or any addons.
- Maybe having a landing page would be good as I was clicking on the T-mobile logo hoping to be taken to the homepage.
- Making it more usable. It is currently a little difficult to use.
- Reduce the number of steps.
One of the things I understood as I was conducting research for this project is that even with products that are well-known and popular, you can find gaps in the UX if you are really looking into the flows and the pain points of the users. Most of the time, we assume that it’s fine and move along but with enough sample space it becomes evident that these minor UX gaps can be a real challenge for many use cases.
During the course of this research, I got to do a lot of things for the first time, like:
- Conducting usability testing on Zoom.
- Getting to decode user behavior based on the recordings
- Creating user flows, scenarios, and tasks.
- Learning the psychology of human behavior behind the design decisions we take.
Hoping to do more user or product research. Till then
Read the full article here