Sharilyn Johnson

Paydown Calculator

Client: Citibank  //  Agency: Critical Mass // Date: 2018-2019 // Medium: Website, mobile app
The Team: Cecily Lo, Mark Rawlinson, Jasmine Tam, Sabrina Alaimo, Mike Chiu,
Yana Tzanov
My role: UX Copywriter

The project

Our client, Citi, wanted to educate customers about credit card debt and reduce the number of accounts going into arrears. 

Instead of simple educational content, Critical Mass initiated a net-new tool that kept customers credit card payments on track. We blew the initial ask out of the water, and Citi was suitably impressed.  

How it works

The Paydown Calculator helps customers plan choose a managable  timeline and monthly amount to you pay, and factors in new purchases. Customers get regular reminders to make their payments, or to re-set the plan if they spend more or go off track. 

My job was to guide users through this complex tool using succinct language, with a tone that was optimistic and empathetic to customers experiencing debt issues. 

Initial Flow:
Bringing stakeholders together

You don’t get more risk-averse than a major bank. I worked closely with Citi stakeholders to ensure I addressed every compliance, legal, and marketing concern without compromising the user experience. It was common for multiple stakeholders to contradict each other, but I was able to get them on conference calls (remember those?) to discuss and find common ground. 

Even the word “plan” was hotly debated, out of concern customers would misinterpret the tool as the type of payment plan they’d be forced into if they were in arrears. I solved this by adding “flexible” to the first onboarding screen, and ensuring each subsequent screen spoke to the non-mandatory nature of the tool. 

Re-entry and progress:
Addressing accessibility needs

Citi loved visualizations. Citi also loved AA-level accessibility standards.

I had no access to Citi’s dev team, so I was on my own to figure out how to best make these re-entry and progress screens accessible.

Nothing against ALT tags, but look at this bubble chart and tell me you’re eager to hear each of those elements described by a screenreader:

The ALT solution: dynamic summaries

The bubble chart is meant to be an “at a glance” view of the user’s progress, and the bubbles aren’t tappable. Rather than force a user to listen to repetitive ALT text for a dozen different bubbles, I wrote three different narratives for different scenarios to mimic the summary they’d receive visually.

This is reflected in the unshaded blue line of the copy deck:

One last decision:

After almost a year of work, all I needed was a success screen and a non-success screen. 

Success screen was easy: Congratulations! You successfully achieved a zero balance. Cue the confetti. 

The other? Not so much.

First, I didn’t want the user to feel like they failed. Second, there’s a big difference between making minimal payments the whole time, vs coming up only a couple dollars short of your goal.

I decided to make two versions of the “unsuccessful” message. One for people who paid down more than 70% of their original goal, and one for people who paid down less than 70%. I chose the threshold arbitrarily, but our client product owner agreed that it was a fair point of delineation.

In addition, I flipped the primary/secondary CTAs to what the most appropriate next step was for the situation.


Initial rollout to 10,000 users on mobile app. Over 4,000 users set up a plan and returned to the tool to check their status. 

Further results were kept confidential. 

“Thanks for your best in class designs. The feature looks super cool and we are excited to engage business on our achievements.”  – Citi’s SVP, Group Product Manager