T Mobile Refill
Payment Enhancements
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 we mapped out, money is involved so we wanted to reduce as much friction as possible.
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 payment options into one page.
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)
Conceptual Model
Understanding Prepaid Payments
To help level set with the team, I visually conceptualized how customer accounts work on prepaid. Accounts have a balance that gets swept every month to renew their account based on their plan. There are different methods to add to make a payment and add to the balance.
Pathways to make a payment
the previous make-a-payment flow had unnecessary steps that could be simply resolved with a unified page.
Sketching the new payment Page
To replace the landing page, I sketched a single page that has multiple areas to make a payment. Sketches like this quickly communicate the idea to get buy-in from all parties upfront (Product, Dev, Buisness) then I can get into more detailed designs.
Authenticated Customer Purchase flow
To help accommodate some user issues surrounding login and forgetting of passwords. I designed 2 ways to sign in, one using the usual credentials and the other using the phone number. The Authenticated flow will provide account balance and unauthenticated without.
I designed mockups for the two main pathways, Authenticated sign-in with password and username and Unauthenticated, sign-in with their phone number.
The Authenticated view makes sure users are aware of the account status. Balance, Renewal date, Autopay status, next payment date, how much the need to add to stay current
The "Use Refill card" page invites users to enter in their refill number which produces the value for them to redeem and add funds to their available balance.
We want the balances to be prominent and show on all pages for users to bring awareness to the account status.
