Personalizing payment online

Expanding the online payment experience for T-Mobile customers.

πŸ’³ Find your price with the live site β†’

 
 

My role

UX design

Launched

Sep 2019

 

Timeline

3 months

Client

T-Mobile

CC cover.png

How it started

T-Mobile.com is the main platform for T-Mobile prospects and existing customers to research, purchase, and use the product and services it offers. For customer who is intended to purchase from T-Mobile, their primary reason come to the site is to research, specifically gathering pricing on new phones or wireless plan.

However, as observed through monthly interception surveys on T-Mobile.com, customer's ability to find pricing information was decreasing. Additionally, customers reported seeing different financing prices while browsing, comparing the amount in the final order.

The main reason for the differences is due to the lack of credit verification in the online process. If the customers decided to finance their purchases, their credit class will determine what the amount of downpayment and monthly price would be.

At the time, all credit and identity verification happened offline manually after the customers submitted an order. Although a prospecting customer can self-select between 3 credit classes (awesome, good, no credit) when browsing for a product, it was oftentimes different than their actual score as measured through the internal credit system. As a result, almost half of them required a call back from the customer service team, and over 80% of it didn't end up in a sale.

The customer could self-select their credit class in the old shopping experience.

The customer could self-select their credit class in the old shopping experience.

To address these pain-points, we worked with T-Mobile to implement a new capability that gives customer transparency of their financing options while shopping online. As the lead UX designer for the project, I collaborated with a visual designer and UX writers, as well as the User Research team at T-Mobile for the initial iterations and first launched in September 2019.

 
 

Vision the personalized payment experience

Our main hypothesis was that, by providing customer accurate pricing relevant to their creditworthiness during their shopping experience, they will be able to make a better-informed purchase decision and more likely to complete their purchase with any channels of their choice.

The high-level goals for the product experience were:

  1. Grow the sales of the digital channel with an eventual goal to enable omnichannel credit applications

  2. Accommodate for customers based on their credit classes and provide alternatives paths when the online channel is unable to meet their needs

  3. Build a foundation and platform that support future growth in the financing space for T-Mobile

Understanding what went behind the scene

It can go many ways

For T-Mobile to show personalized pricing for their prospect based on their creditworthiness, the customer needs to share a few pieces of information with them, such as their last 4 digits of Social Security Number (SSN). No credit impact will happen during the pre-screen experience or what we called the "soft" credit check process. However, if the credit database fails to find a qualified offer based on providing information, the customer will need to share additional credentials in order to receive their financing option.

 
A high-level flow of how the credit check process work.

A high-level flow of how the credit check process work.

Everybody pays the same price, but downpayment can be different

Additionally, we learned only a very small percentage of the customer (~10%) would receive a downpayment of $0 while the majority of them will see a downpayment. With the new credit database, through the initial pre-screen process, more than half of the shoppers can have a credit offer without a credit check. The rest of it can go through an automated "hard" credit check process to receive their actual price. A small percentage of those will need to be manually reviewed for fraud purposes.

To better understand the problem space, I looked at other industries that offer products or services build on customer's creditworthiness β€” for example, insurance providers, online marketplaces to financial service companies. Combining with previous customer surveys and interviews with the retail stores, we learned that there is a lack of standardization of how credit-related language was used across industries. It meant that the language in our design needs to be well articulated.

Additionally, we saw that people are willing to share their information in exchange for pricing information. Likewise, customers were aware that credit application is a common step for a more significant purchase, for example, buying a phone with installment.

 

Design for the experience

Based on these insights, I came up with these questions for our initial exploration for the pre-screen experience:

  1. When does a customer feel comfortable to input their information in exchange for an accurate price?

  2. How can we address the difference between a pre-screen experience vs. an actual credit check?

  3. How can we address user's reactions to a price change in an elegant way, especially for those in the lower credit classes?

Since the initial launch of the capacity would be focusing on commerce experience, our exploration focused mainly on the e-commerce flow with some touch-points from the marketing website. As mention early, since the ultimate goal is to expand the credit experience to all channels, we created a modular design that can be leveraged across the digital ecosystem. These explorations ware tested and iterated on before the first launch with prospects who were either actively or passively looking for a new carrier to switch to.

 
The high-level user flow of the experience.

The high-level user flow of the experience.

Multiple points of entry

Since price is an important motivator for sale, so it is crucial to establish a consistent experience no matter where the customers come into the site.

I included the entry point for the pre-screen experience throughout every touchpoint and provided variations based on the priority of each section.

 
The final design of the different entry points.

The final design of the different entry points.

For example, when the customers are still in the learn and research phase, they are mainly seeing pricing information at the product listing page and product detail page, and potentially in their cart to see an estimated total cost. However, when the customer is in the checkout process, they are more committed to the process. As a result, the pre-screen/ credit check experience is a required step to complete a transaction. The entry point is designed to more evident in the flow.

This direction was well-received in our user test, especially when combining with the reflection of price change after the go through the pre-screen experience (see below).

 

Form vs. Wizard

The core component of the experience was the form that captures and informs the pre-screen/credit check result. To create a personalized experience, we explored mainly two ways to handle the pre-screen questionnaire.

A conversation starter

Since the initial pre-screen experience is a key step to cultivate new a customer relationship and establish T-Mobile's brand equity with a prospect, we experimented with a wizard-style form where the prospect will answer the 5 pre-screen questions through a Q&A format.

 
Wizard.png
 

A standard form

Alternatively, we translated the experience into a one-page form. From our user testing, we learned that the although wizard form was intuitive and easy to use, the majority of the participant prefers the standard form as it was perceived to have fewer steps and could potentially leverage their auto-fill function through the browser.

 
Form.png

In our final design, we iterated on the one-page form design and kept the wizard form in our back pocket for future A/B testing at scale.

 

Speak in their languages

The biggest design challenge for us was: How can we effectively communicate the different stages of the process as well as to gain consent from the customer in exchange for accurate pricing information.

Working with the legal and writing team, we explored different ways to talk about the credit check experience. After multiple rounds of reviews and user testing with the customers, we learned that over-explaining is hugely beneficial to build trust, and clarify in design is more important than simplicity.

 

Sample of the explorations to the final design.

For example, we learned that although a majority of the participants indicated that they are okay to opt-in to the pre-screen process as it won't impact their credit score, they were less likely to go through the hard credit check online. In the final design, we make sure the language is very clear to distinguish the difference between the two processes, and what the impact would be for a prospect's creditworthiness.

 
HCC.jpg

Additionally, we explored different ways to communicate the downpayment, especially when it is bigger β€” from ways such as providing:

  • % of total downpayment rather than just the amount;

  • % of other customers who also pay the same price so they don't feel alone (or as the weird number);

  • an alternative path, such as browsing for other devices that might fit better with their budget (lower downpayment), or talk to a sales representative who can answer any of their pricing questions.

To make the design feasible and viable to the internal operations, we worked with the business to figure out the best path and process to handles these situations internally and externally to the customers.

 
Alternative path.png

The launch

The experience was launched in September. With the new release of iPhone and Pixels, the team is currently gathering data to further refine the design and use-cases as they are charging to the next generation of online payment for T-Mobile.