Provide tools to help Citi customers overcome challenges to achieving their debt-related goals.
Allow users to be informed of how payment amounts, expected spend, repayment time, and current balance are connected,
Current landscape of citi payments and Credit cards
Pay my Bill has significant implications to customers financial health
- Many customers have issues managing their credit card debt
- Customers want to be debt-free, but may not know how to get there
- They want to have the financial education and resources
- They want to feel their debt is manageable
- Customers want to feel understanding and empathy from Citi
Competitive Analysis with Discover and other Online Debt Repayment Calculators
Many took the form of a calculator, and showing data by simply plotting data points to bar graphs. However, no one was able to effectively communicate the education piece.
Other competitor sources that we drew inspiration from include: credit karma, Chase, Nike Training App, Wealthsimple, and many more.
identifying user groups and their needs when handling their debt
“My debt is manageable”
Motivated & confident in eliminating debt
Credit card debt was a choice
Has been more focused on savings
“my debt is strenuous”
Anxious about the journey, but hopeful
Looking at her balances is upsetting
Finances are always top of mind due to
irregular income and expenses
“My debt is an impossible issue”
Living with past financial mistakes
Feels debt will always be there
Previously poor financial management forced
him/her to take drastic actions
We Need to think of experience in two parts
How do we empower customers to take their credit card debt into their own control?
Focus is on education
How do we provide the resources to keep customers motivated to reducing their balance?
Focus is on accountability
In order for users to really get out of their credit card debt, they need to be educated and also held accountable for their spending and their efforts.
What users need is not a tool that simply calculates their payments, they need a supporting tool that will keep them on a “plan” . so that they can reach their goal..
one: setting up a repayment plan
Goal: Empower customers to take their credit card debt into their own control through comprehension of their debt situation, and awareness of tools that can help them reduce their balance to zero.
concept 1 - guided & step-by-step
Simplify steps to set up a plan through progressive disclosure of questions asked in a conversational manner.
concept 2 - self-discovery
Provide pre-set plans and some customization, with a focus on getting the customer’s balance to zero.
Prototyping & Concept Testing
Using Axure, we created interactive prototypes to test both concepts. We worked with a research insights company to conduct in-person usability testing with real Citibank customers, and gather their feedback on which one was more effective in helping with their challenges.
From there, we narrowed it down to one concept, the self-discovery and customization concept. There was a number of users that commented on liking the ability to use the interaction of the drag bar to see how changing the monthly payment amount will change the. It was a more effective education tool for the user, than the first concept, which, although easier to use, did not achieve the same comprehension from users.
After refining the 2nd concept, we conducted another round of usability testing in order to address any finer areas of focus in both the designs and the language.
two: staying committed to the plan
Goal: Provide the resources to keep customers motivated to reducing their balance and keep them accountable for their progress.
Concepting Sessions: the more the merrier
In order to create a hub for customers to access their repayment plan and review their progress, we ran a series of brainstorming sessions (in the form of whiteboard sessions, card sorting of pertinent information, rapid sketching, and group sketching) where we brought together sizeable quantity of directions and ways to visually show “progress”. Below are some of the iterations that were then wired to be validated and tested.
Prototyping & Concept Testing
Similar to the process for the initial flow, we used Axure to create 3 interactive prototypes in order to perform initial usability testing of what the experience would look like for a returning user. In these rounds we focused on testing data comprehension - how clear was the information that was being served, did the users understand the language that was used, how long did it take them to decipher all the data points?
It was clear that while understanding their payments history and balance history was just as important, both pieces needed to be visualized and presented to the user on their own in order to not inhibit easy comprehension. It was also observed that the user of symbols and icons were helpful in communicating status to the user on the summary page.
three: creating the browser experience
Goal: Create the same experience for responsive browser while considering additional constraints and nuances on web experiences.
ONE: Creating a repayment plan
Leveraging the interactivity from the native experience, we kept the drag bar as the main controller for users to customize and tailor their plan to work for them.
To keep the experiences seamless between native and browser, we opted to keep as much of the same content as possible, unless it did not make sense to do so.
We took liberties to create a more interactive tour of the repayment hub that the user would return to once they have started making payments - this is to familiarize the user with where they can access information and take certain actions, and prevent anyone from becoming overwhelmed.
two: returning and reviewing your progress
In the browser design, because we have more real estate, we opted to combine the summary screen, payments history and balance history in one experience. We also took advantage of interactions and micro animations to enhance the ease of comprehension for users, by building out the graph upon page load, connecting the interaction of the status bubbles with the expansion/collapsing of the drawers below.
Much thought was given to the placement of CTAs, the hierarchy of information, and the depth at which users would be looking for at a particular part of the page.
In order to ensure our design considers all scenarios and use cases, we thought through all the possible use cases that would occur as a customer progresses through the repayment plan, and mocked up designs to validate that the design and the arrangement of data will not break even in more complex situations.
Post Delivery - Outcomes
The Paydown Calculator tool was launched on July 20th, 2019, and was made available for 5% of qualifying Citi’s revolver customer base. Since then, over 1000 unique customers have enrolled into a payment plan, and most have returned to review their progress after initial set up. Our client reports that the tool is trending to meet the target set for the first month of launch, and has congratulated us no a successful beginning. More detailed reports and analytics to follow.