Many of Citibank’s 200mm customers have low or no credit scores. A key challenge is most don’t know the root of their problem, making it very difficult to break out of mounting debt. Credit Climber by Citi aims to educate customers and teach them better credit habits.

To achieve this, Credit Climber helps customers understand how credit works by breaking it into understandable pieces and engaging them step by step. The app was created in 8 months as part D10x, Citi’s internal growth model.

Credit Climber
by Citi

Role: As a senior product designer for Credit Climber, my role was to create user flows, prototype, and test. I worked with product owners, researchers, and developers to ensure the product would fit business, strategy, and tech needs.

Team: I worked with a design pod comprised of a CD, ACD, two junior designers, and a Project Manager. Additionally I worked with a Product Owner, and a dev team.

Platforms: iOS
Disciplines: UX, UI, User Research, Prototyping

Tools: Figma, Invision
Timeline: 2 months

Research

Method: User Interviews & Survey

After gathering insights from our survey and interviews, a key takeaway was that credit feels like a black box. Many customers don’t understand how a credit score is calculated or the components that make it up.

Additionally, people really don’t want to feel guilty for having low or no credit scores. For that reason, many customers avoid dealing with mounting credit card debt.

Process

My team began by brainstorming possible features, and whiteboarding possible screens and user flows. A main area of focus for Credit Climber is credit utilization because it has a huge impact on credit scores and customers can easily monitor and control it. We also took care to avoid colors like red because of the negative connotation and aimed to make the experience feel guided. I designed data visualizations so customers can understand the bigger picture behind a number; created a calculator so they can plan larger purchases and see the real cost after interest. Credit Climber by Citi also has articles for further learning and payback plans to keep track of calculated payments for the purchases.

Cost it Out UX

The Cost it Out tool needed to be enjoyable to use and intuitive. An early iteration was a good start, but results from testing told us that it was too wordy and could be more engaging. We went back to the drawing board and you can see that the final UI is more visual and easier to understand.

Payback Goals UX

The first iterations of payment plans were trying to do too much. We discussed levels that customers would hit based on their spending. After testing, we found people were becoming too confused at the many different features. The final result (below!) is much more streamlined and clear.

Landing Page

Marketing website to inform customers about Credit Climber by Citi and provide CTAs to download the app.

Onboarding and Coachmarks

A carousel onboarding of key value props to welcome customers to Credit Climber by Citi and a guided tour of the dashboard.

Cost It Out Tool

This flow of Credit Climber by Citi aims to help users plan their large purchases and see the real cost after months of interest. When customers know they’re about to make a large purchase, they can use the calculator tool to map out their plan. After inputting the details of their item, a visual will generate of what the impact will be on the credit usage. Next, they can see the real cost by creating a monthly payment goal and seeing the total cost after interest. To keep customers accountable, they can track whether they’ve met their goals and see their payback history.

We highlighted users’ credit card utilization because it was a major takeaway from research that customers can focus on to improve their credit.

On the main dashboard, users can have a quick view of their current usage. The more usage you have the more pink the graph is. We chose this color because red can be very discouraging to customers.

Users can quickly tap to see a detailed view of their daily spending. The graph is navigable - as the user slides the guide, transactions will scroll to that day so they can see their exact purchases.