Connect by T-Mobile
T Mobile derived most if not all, prepaid customers through their retail stores. As part of the new ‘digital-first’ initiative, there was a push to acquire customers using their website. However, there was a much-needed design overhaul regarding their purchase flow. Marketing also decided to rebrand and restructure the plan package known as Connect for an up-and-coming campaign. I was brought on to redesign the purchase flow to the prepaid T-Mobile website and work with marketing to roll out the Connect Plans.
Solutions
Conduct a baseline user study, with product marketing and dev on key aspects of the site.
Key Flows
Purchase Flow, Plan, Device Selection and Checkout
Bring Your Own Device (BYOD)
Account Dashboard
Refill and Make Payments
User Research
The team and I put together a research plan to observe user behaviors under the then-current UX prepaid paradigm. The baseline study uncovered issues on the website that hindered purchasing plan options and overall navigation issues.
Mapping out Opportunities
Conducting sufficient research helped me Identify pain points in the UX, to map out the scope of the project and prioritize what we needed to tackle first. I distilled some of these behaviors into personas to keep the user in mind when making recommendations surrounding the UI.
Heuristic Analysis
The Prepaid site previously had this page called the product selector. The UI attempted to squeeze plan, device, and service selections into one page. From our user interviews, this page was a major hurdle and needed to be replaced with a much more standard purchasing experience.
Plans hidden in accordions, users glanced over options
Unclear device selection, the links to the user are out of the flow without saving.
Unclear service names cause pogo-sticking between service and plan selection as they are related.
Plan selection flow ideation
After the flow is established I sketched the interactions from the plans page to checkout and including the account dashboard.
Even though the purchase flow from plan selection to cart was the first I had to consider how already established customers would change plans from their account dashboard.
Purchase Flow
I designed a high-level workflow to communicate the ideal design that addresses all the above issues. Instead of the one-page product selector; Users select a plan from a standard plans page, go to the cart where they can add-a-device or ‘Bring Your Own Device‘ BYOD, and proceed to checkout.
New Branding
Marketing created a look and feel for the Connect by T-Mobile Brand. I collaborated on the Design from the landing page into the purchase flow to make sure it was seamless and made sense to the user. The color scheme helped to suggest these plan options have something different to offer compared to the other plan packages on the same site.
Transactional Plan Page Design
Marketing provided a brand guide that was more print-focused. I used the guide and adopted it for the UI look and feel to help to distinguish connect plans from, simply prepaid plans and data plans. I designed the Connect transactional page that followed the landing page that marketing owned.
Services Page
From the plans page, users are taken to the services page which displays additional optional features for different plan types. I designed and categorized add-ons and services within tabs based on interest.
Cart Design
After users select the plans and services, they are taken to the cart. Right away I designed the UI to alert the user about the device needed to continue. Users can shop for phones or bring their own devices to continue the checkout.
All Plans Page,
To address users abandoning the site without seeing everything prepaid offered. I designed the All Plans Transactional page for users that select the device first then plan, and / or when users change plans from their account page.
Responsive PDP and PLP
The new design follows a linear path from plan to cart spread out between the service page PLP and PDP pages. I designed for mobile and desktop.
Similarly, the Account Dashboard had old UI patterns and missed opportunities
Old Alert UI
Renewal amount not prominent
Quick links unrelated to the current page status
No clear ‘Add a line‘ link, related links are not needed in this current context.
Account Management User story
I mapped out the basic steps for account management.
me and the PM to carve out what ideas are a priority.
Ideas (in yellow)
The key ideas for the first sprint were showing the status of accounts and making payment CTAs as very clear.
Account Dashboard
Making payments and phone line status alerts take place on the Account Dashboard. Much of the information and CTAs were not prioritized. The dashboard redesign is for the new purchase flow that fits into the account management system for customers who want to change plans or add-a-line.
Authenticated Customer Purchase flow
The authenticated flow fits right into the new purchasing flow. Adding a new line or editing a plan brings awareness to the new plans through the newly designed all plans page. From there, users can purchase a new plan and device or change a plan.
Ideation Sketches
After the flow is established I sketched the interactions from the plans page to checkout and including the account dashboard.
The design needs to show phone lines and plan names
as well as account statuses and relevant links.
New dashboard UI
The new dashboard UI calls attention to numerous relevant statuses when customers land on the page. I modernized the alerts to bring awareness to the account and phone line statuses. The renewal amount is calculated for the user to add the necessary amount to continue service. The AutoPay CTA is clear to invite enrollment. Links are prioritized for adding lines that, use the new purchase flow.
Account Suspension with an opportunity to restore the account.
Various account statuses are made clear and readable for the user.
Services suspensions, balance past due
The account is all set and ready for the next renewal date.
Bring Your Own Device (BYOD)
Users that bring their own purchased devices to access T Mobiles network makes up a substantial customer base in their retail stores, following thedigitial first initiative set forth by leadership it was time to update the BYOD flow to fit the new purchase flow.
Problem
like many of the previous pages, the BYOD flow was squeezed into a single page possibly for dev convenience. This leaves users to find their way around the UI. BYOD requires some knowledge about the customer’s device and how to test the compatibility with the T-Mobile network.
Solution
Create a BYOD UX that:
Provides information on how to check for compatibility between the device and the TMO Network
Provide knowledge about the different SIM cards and what they provide for the customer.
Guides users to the next step in purchasing their SIM cards and Plans.
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.