T-Mobile Cart Redesign

Simplified the mobile-first MVP cart with clear pathways for payments, promotions and discounts to ensure a seamless experience and build trust with both T-Mobile and legacy Sprint customers after merger.

Company

T-Mobile and legacy Sprint

UX METHODS

Competitive Analysis,
Product design,
User research studies,
Prototype interactions,
A/B testing

Stakeholders

Product Development teams
(Product verticals: Promotions team, Number Port-in, Trade-in, Cart and Checkout)

Omni-channel Business Strategy team
(Digital, Retail, Care)

MY ROLE

UX Designer, Content Strategist

problem

The legacy checkout experience faced significant cart abandonment issues. Customers found it difficult to navigate payment options, modify their plans, add device protection, and more. Inconsistent design and lack of cohesion between steps further contributed to customer confusion and frustration.

Business Goals

Increase confidence in checking out items in cart
Improve pricing transparency
Increase clarity of items (devices/accessories/plans) to cart

my UX goals

Based on Digital Voice of Customer data (DVoC), I discovered customers desire clearer transaction details when signing up with T-Mobile. This project aimed to revamp T-Mobile's shopping cart, enhance post-merger features, and offer a simple and easy checkout process.

Reduce cognitive overload by better organizing the flow of information
Showcasing and highlighting promotional savings in cart
Providing a more guided experience on next steps on cart error-handling scenarios

Identifying our customers

We identified and narrowed down our customer’s shopping behavior into 2 categories:

Price-conscious: This customer wants to make sure all pricing is correct and that they understand each charge and what it correlates to. They will review all items line-by-line before they proceed to checkout.
The browser: This customer skims through the cart, assuming the math has been done for them correctly. They will skim through the devices and plans, making sure their information is correct before they proceed to checkout.

Old cart

Problem: The legacy checkout experience was experiencing a high volume of cart abandonment. Customers struggled to find and understand payments, how to change their plan, add device protection, and more. The look and feel was not cohesive between steps, adding to customer confusion.

Design explorations

We took insights from legacy Sprint and legacy T-Mobile’s existing carts and Voice of Customer data to test some layout options for the new “merged” cart.

Cart layout options

Change Plans

In the redesigned cart, customers have the ability to change their plan while in the process of checking out. Post launch, data showed that customers understood what the CTA would do.

Device card and adding promotions

Taking a mobile-first approach, we designed the device cards to have a clear hierarchy, housing only device information. The MVP launch had to include add ons, device protection and trade-in at the bottom of the device card.

Right rail pricing

The mobile version now features an expand/collapse design that allows customers to interact with pricing without sacrificing mobile page length. It is fully responsive and allows customers the flexibility to focus on specific pricing details, reducing cognitive load.

Apply promos

The promotion code section in the legacy cart was hard to find so we designed the new promotion section to be discoverable, located above the final pricing.

Total Savings

The “Your savings” module provides a way for customers to know when and how they will receive their promotions and discounts. Post launch, there has been over 65% of an increase to order conversion, meaning that over 65% of people who see the trade in promotion pricing breakdown place an order.

Promotions and discounts

We worked to design the most usable promo callout within the purchase flow and cart. We landed on the black pill box to ensure our customers would notice the promo inclusion.