T-Mobile Fiber

PRE-ORDER CREDIT CARD EXPERIENCE
Project type:
Website / Responsive Design
Timeline:
1-4 week sprint

My Role


As the lead designer, I balanced business objectives with customer needs for intuitive experiences.

The Challenge


Several customers who had pre-ordered our fiber internet service experienced problems when their credit cards expired or were about to expire. Consequently, this caused delays in installation and appointment scheduling, resulting in non-payment and a low churn rate.

I worked to address this issue and ensure a smoother experience for our customers and business needs.

The Solution


Significant improvements were made to enhance the user experience without doing a complete design overhaul, resulting in a highly usable launch.


How?

  • Reviewed the initial pre-order user flow to see if there was a missing step that I was able to include.
  • Addressed and resolved inconsistencies in the design and usability of the pre-existing pre-order user flow.
  • Incorporated the most up-to-date typography system in the new launch of the pre-order user flow.
  • Maintained design consistency and brand recognition by using existing design template.

Designs


I prioritized building the desktop experience first, as most of our users primarily use desktop. You can find the web prototype here, which demonstrates the pre-order user flow. Additionally, banner notifications in green, yellow, and red colors (shown below) are displayed on the desktop version to update users about the status of their credit cards or upcoming installation services.




Tablet and mobile will be shown at a birds eye view since they're the same design as the desktop.



What's New?

  • New billing and payment screen added to the pre-order user flow, prompting users to update their expired or expiring credit card information before logging in to their accounts.
  • Banner notifications, colored green, yellow, or red, will inform users of the status of their credit cards or upcoming installation services.
  • Consistent layout spacing in all pre-order screens and button sizes.
  • Updated copy in all pre-order screens and button microcopy to clearly communicate to the user of next steps.
  • Red text to alert users of expiring credit cards.
  • Desktop, tablet, and mobile screens were updated with the latest typography from the design system.

Results & Next Steps


The new screen and features implemented in our pre-order process guaranteed that service installation won't be impeded and removed any inconveniences for our customers. This modification also resulted in an enhancement of our retention rates by 5%. Looking forward, I am optimistic that these changes will continue to enhance the customer experience.