Credit Card Debt Payoff Calculator

Designing clarity, control, and measurable impact across mobile and web

CREDIT SESAME | Mobile & WEB UX/UI Design

MY ROLE: LEAD PRODUCT DESIGNER
TOOLS USED: FIGMA, JIRA, USERTESTING.COM

Turning financial anxiety into clarity — and measurable growth.

I led the end-to-end design of a cross-platform Credit Card Debt Payoff Calculator that empowered users to take control of revolving debt while delivering a 6% increase in return logged-in users.

THE VISION

Debt isn’t just math.

It’s uncertainty.
It’s avoidance.
It’s feeling out of control.

“What if managing credit card debt felt transparent, motivating, and empowering instead of overwhelming?”
— Katya B.

The vision was simple:

  • Show users exactly how long payoff will take

  • Reveal how much interest they’re paying

  • Help them experiment with extra payments

  • Show how debt reduction impacts credit score

  • Offer smarter ways to reduce interest

And most importantly — help them feel in control.

THE BUSINESS OPPORTUNITY

The initiative was launched in response to direct user feedback and sponsored by the VP of Product.

Business Goals

Increase Returning Logged-in Users (RLU)

  • Improve engagement with financial tools

  • Support adoption of debt-reduction products

  • Strengthen retention across free and premium cohorts

FINAL Success Metrics

  • +6% increase in RLU among free users

  • Strong engagement lift across user segments

  • Clear retention improvement in both free and premium cohorts

This feature proved high utility — not just feature usage.

MY ROLE

Lead Product Designer

End-to-end ownership across:

  • iOS

  • Android

  • Web (desktop + mobile)

  • Light & Dark mode

  • Prototype validation

  • Dev-ready specifications

I partnered closely with Product, Engineering, and Research to bring this to life — from concept to shipped product.

THE PROBLEM

USER PAIN

Many users:

Don’t understand how interest compounds

Don’t know how long payoff will take

Don’t see the relationship between utilization and credit score

Avoid checking their debt due to emotional overwhelm

CORE INSIGHT

Debt avoidance is emotional — not mathematical.

So the experience needed to reduce cognitive load and build psychological momentum.

DISCOVERY & STRATEGIC FRAMING

Before designing UX/UI, I needed clarity on:

  • What backend credit data could be reliably pre-populated?

  • Should we allow editable balances and APR?

  • Snowball vs Avalanche payoff strategy?

  • How do we introduce financial offers without eroding trust?

  • What’s the minimum viable experience that still drives impact?

We explored broader feature ideas including:

  • Step-by-step payoff plans

  • Habit-forming nudges

  • Milestone celebrations

KEY TRADE-OFF

To meet timeline and scope constraints, we narrowed the MVP to:

✔ Core calculator functionality
✔ Editable balances and APR
✔ Minimum vs extra payment comparison
✔ Interest saved visualization
✔ Payoff timeline projection
✔ Credit score simulation
✔ Contextual interest-reduction offers

We postponed the more advanced step-by-step payoff planner for future release.

This allowed us to ship faster while still delivering high user value.

DESIGNING FOR BEHAVIORAL IMPACT

Several deliberate design decisions drove engagement:

Real-Time Feedback Loop

The slider instantly updates payoff date and interest savings — encouraging experimentation.

“You Could Save” Framing

Reframing extra payments as opportunity rather than obligation.

Credit Score Simulation

Connecting repayment behavior to personal credit identity.

Visual Progress

Clear timeline projections to build hope and clarity.

This wasn’t just a calculator — it was a behavioral motivation tool.

CROSS-PLATFORM EXECUTION

Design complexity included:

  • Multiple device breakpoints

  • Consistent calculation logic across platforms

  • Dark & Light theme accessibility

  • Clear dev-ready specs

  • Component scalability

After design handoff, I worked closely with engineering and QA to ensure alignment and fidelity through implementation.

VALIDATION & ITERATION

In usability sessions, we learned:

  • Users needed clearer distinction between interest paid vs money saved

  • Extra payment logic needed clearer explanation

  • Interest savings messaging had to be simplified

We refined:

  • Summary modules

  • Savings presentation

  • APR explanation clarity

Result: increased confidence and reduced friction before launch.

LAUNCH & RESULTS

Once launched, the feature delivered measurable impact:

+6% Increase in Returning Logged-In Users

The experience strengthened retention across both free and premium cohorts.

This validated that providing high-utility financial clarity drives repeat engagement.

FUTURE EVOLUTION

If expanded further, I would explore:

  • AI-driven personalized payoff strategies

  • Income-aware affordability modeling

  • Habit-based reminder systems

  • Gamified milestone rewards

  • Auto-payment nudges

  • Premium behavioral coaching features

The foundation is built for a broader financial empowerment ecosystem.

REFLECTION

This project reinforced a core belief:

When users feel clarity and control, engagement follows.

By simplifying complexity and connecting behavior to visible outcomes, we transformed a traditionally stressful topic into an empowering experience — while driving measurable business results.