Legacy Dashboard: Missed Opportunities & UI Challenges
The previous version of the Account Dashboard contained several outdated UI patterns and overlooked key user needs. These shortcomings created friction for returning users trying to manage their plans, monitor line status, or complete transactions.
Identified Issues:
Outdated Alert UI
Alerts were visually understated, making it easy for users to miss important information like renewal deadlines or account issues.Unclear Payment Information
The renewal amount lacked visual prominence and hierarchy, leaving users unsure of how much they owed or when their next payment was due.Irrelevant Quick Links
The dashboard surfaced quick links that weren’t contextually relevant to the user’s current account state, adding clutter rather than clarity.No Clear “Add a Line” CTA
A key action for growing accounts—adding a new line—was not presented in a clear or discoverable way. Users had to navigate away or hunt through unrelated links to find this option.
User Story Mapping: Account Management
To guide the redesign of the Account Dashboard and management tools, I worked with the Product Manager to map out the basic steps users take when interacting with their accounts post-purchase. This exercise helped us align on key behaviors, clarify goals, and prioritize which features to include in the early sprints.
User Flow Objectives:
Help users understand the status of their account and phone lines at a glance
Make payment actions and due dates highly visible and actionable
Support secondary actions like changing plans, adding lines, or updating payment methods
Story Mapping Approach:
I led a whiteboarding session and flow sketch to visualize each touchpoint a user may encounter during common account interactions.
We used color coding, with yellow representing feature ideas and hypotheses.
This visual map helped us isolate critical vs. nice-to-have functionality.
Sprint Priorities (Highlighted in Yellow):
Displaying account and line status upfront, with color-coded indicators
Clear, persistent payment CTAs (e.g., “Make a Payment,” “Refill Line”)
Messaging around due dates, auto-pay status, and renewal reminders
This foundational work gave us clarity not only on the immediate features to build but also on how the account experience should evolve over time. It ensured that every screen supports task completion, visibility, and long-term engagement.
Account Dashboard: Payments, Plan Management & Line Status
The Account Dashboard plays a crucial role in ongoing customer engagement—especially for users managing payments, monitoring phone line status, or making changes to their service.
In the legacy experience, many critical details and call-to-actions (CTAs) were not properly prioritized, leading to confusion and missed opportunities for self-service. As part of the broader purchase flow redesign, I revamped the dashboard to better support both post-purchase activity and account management.
Key improvements included:
Prominent status alerts for phone lines, payment issues, or plan expiration
Streamlined access to key actions like making a payment, refilling a line, or adding a new line
Integration with new plan selection flows, allowing returning users to switch plans or upgrade devices without restarting the purchase process
Responsive design to ensure full functionality across mobile, tablet, and desktop
This redesign ensured that customers had a consistent, frictionless experience—from initial sign-up through long-term service management—all within a unified, branded environment.
Authenticated Customer Purchase Flow
The authenticated purchase flow was designed to integrate seamlessly into the new end-to-end purchasing experience. When logged-in customers take actions such as adding a new line or modifying an existing plan, they are intentionally routed through the enhanced flow to improve awareness and boost conversion.
Entry Points:
“Add a Line” from the Account Dashboard
“Change My Plan” from an active line’s settings
These actions guide users to the newly designed All Plans page, which showcases the full range of prepaid plan offerings—Connect, Simply Prepaid, and Data Plans—in a clear, comparable layout.
From there, users can:
Select a new plan
Choose to bring their own device (BYOD) or shop for a new phone
Proceed through a streamlined, mobile-first checkout experience
This flow ensures that even existing customers can benefit from the updated product presentation, improved UX, and marketing-aligned design, while maintaining full compatibility with their account data and service status.
Ideation Sketches: Mapping Core Interactions
Once the purchase flow was established, I began sketching out key interactions to visualize how users would move from plan selection to checkout, while also incorporating account management views.
These early wireframe explorations focused on structuring information in a way that was both task-driven and visually scannable.
Key Elements Covered in Sketches:
Plans Page to Checkout Flow:
Visualized how users would select a plan, choose a device (or BYOD), add services, and proceed through a simplified checkout process.Account Dashboard Integration:
Designed screens to surface active phone lines, associated plan names, and account statuses (e.g., payment due, auto-renew enabled, expired line). These elements were prioritized to give users immediate context and next steps.Relevant CTAs and Links:
Ensured actions like “Change Plan,” “Add a Line,” “Make a Payment,” and “Refill Now” were clearly visible and logically placed next to related account details.Modular UI Thinking:
Components were designed in a modular way, allowing for consistency across authenticated and unauthenticated flows.
New Dashboard UI: Prioritizing Clarity and Service Continuity
The redesigned Account Dashboard was created to surface key information the moment customers land on the page—supporting both proactive account management and service continuity.
Modernized Alerts & Status Indicators
I reworked the alert system to better highlight critical account and phone line statuses, using modern UI patterns and visual hierarchy. This includes color-coded banners and contextual icons to draw attention to:
Line expiration warnings
Payment due alerts
Inactive or suspended service statuses
Smarter Payment Calculation
To reduce confusion around renewals, the dashboard now automatically calculates the amount needed to continue service. This eliminates guesswork and encourages immediate resolution through an integrated payment CTA.
AutoPay Enrollment Prompt
A persistent and clearly styled AutoPay call-to-action helps users enroll in recurring payments, a key feature for reducing churn and late payments. The CTA is presented contextually, only when AutoPay is not yet active.
Prioritized Links to New Purchase Flow
For returning users looking to expand their service, I surfaced a prominent “Add a Line” link. This action routes them into the updated, streamlined purchase experience—making it easier to grow their account while staying within the ecosystem.
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.
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.