Credit cards

Context

Platforms: one native screen shared across iOS, Android, and Web.
Team: PM, tech lead, analyst, 3 SWEs, 3 QA.
Timeline: 2024–2025.

The problem

The Balance screen was heavily overloaded: dense text, a pile of separate debt categories — past-due principal, accrued interest, late fees, court fees, and more — dates and numbers with no clear structure. Every new feature added to the pile, and customers got lost, calling support just to make sense of their debt.

A 2024 study confirmed it: most respondents struggled specifically with this screen. But customer experience alone wasn't enough to unlock a budget for a rebuild — the screen was shared code across three platforms, so changes were expensive and tied to each platform's release cycle. The team read the rebuild as a cost with no clear payoff against the metrics it tracked.

The Balance screen before the redesign, screen 1 — Before the redesign, regular and past-due balances lived on separate screens

The Balance screen before the redesign, screen 2 — Before the redesign, regular and past-due balances lived on separate screens

What changed

The redesign became possible with a new product — a credit card with no grace period. The old screen's logic was built around grace-period debt, and the new product needed the focus to shift toward interest-bearing debt instead: not every customer was going to buy a grace period.

At that point the redesign was inevitable, and the only question was what would go into it. I pushed to go beyond the minimum fix for the new product and use the same release to also solve the overload problem the screen had been carrying for years, since engineering budget was already committed either way.

My task

Run a qualitative study of the existing screen
Put together a plan and align it with the business and the support team
Restructure the screen and simplify it

Running a qualitative study of the existing screen

Together with UX researchers, we ran a qualitative study with seven respondents and surfaced a long list of problems. A few of them:

Too much text, dense wording, dates, and numbers — the information was hard to read
Confusion between terms: not everyone could tell "grace period" apart from "billing cycle"
The interest calculation logic was opaque — not every user could explain where the interest came from
It wasn't clear why grace-period debt could be smaller than total debt

The UX researchers' presentation on the study findings

The plan

After the study, I put together a plan with a few steps:

Bring interest-bearing debt to the same level as grace-period debt. A customer could make a purchase outside the grace period and not even notice — now it's easier to track spending
Merge past-due debt into the regular balance view and drop the extra screen it lived on
Rebuild the grace-period cells: too many dates and visual noise made them hard to read, so I trimmed the amount of information
Put together a glossary of key terms — when the bank and the customer speak the same language, they actually understand each other
Polish the wording across the interface: small, targeted tooltips now help with navigation

Redesigning the screen's architecture

The screen is now built around two debt states — grace-period and interest-bearing — surfaced as tabs instead of a scattered list of categories. I moved the next-payment banner to the top and made it smaller. There's now a clear entry point into buying a grace period.

Merging the regular and past-due balance screens

I rebuilt the past-due state separately — it no longer lives on its own screen, but sits inside the main one, with an explicit warning about the risk of the card being blocked.

Payment cells became full sentences

I also rebuilt the cells: simplified the wording and rewrote each one to read as a single sentence — "Pay 6,000 rubles by June 30 for purchases made March 1–31."

The Balance screen after the redesign, the "Grace period" tab — Grace/interest tabs and the past-due state after the redesign

The Balance screen after the redesign, the "Interest" tab — Grace/interest tabs and the past-due state after the redesign

A glossary of common terms

A button featuring Gazik, Gazprombank's mascot, now offers to help make sense of the credit card. Inside sits a glossary of the core terms used across the interface and paperwork tied to credit cards — billing cycle, minimum payment, debt types, and so on. Now the bank and the customer can speak the same language.

Tooltips and clearer wording across the interface

I rewrote the names of the debt types to make them simpler while staying factually accurate, and added clickable tooltips for the cases that stayed complex or unclear.

Entry point into the term glossary on the Balance screen — Glossary of terms related to credit cards, and a breakdown of the mandatory payment

Glossary of terms related to credit cards, and a breakdown of the mandatory payment

What was left: sign-off from the business and support, plus a validation study

The redesign shipped without a single custom component — everything came from the design system as it stood. Some screens used new components, others just tapped new capabilities in existing ones, like the cell component. The team signed off fast, because the build turned out far cheaper than expected. Support signed off too, since we'd kept them in the loop and talked through every step along the way.

Before development started, we ran a validation study and confirmed we were on the right track: where respondents used to make mistakes on 5–6 out of 7 tasks, the new screens brought that down to 1–2 out of 5. The business was satisfied with the result, and the new screen shipped right in time for the new product's launch.

The prototype respondents tested in the validation study

The result

While pulling metrics before the redesign, I noticed a pattern: whenever a product with new mechanics launches, support sees a 10–15% bump in complaints that gradually fades. That's just the nature of a new product — customers don't always get it right at first, but they learn.

Six months later, the numbers showed we hadn't just flattened that spike — we'd pushed past it: the new screen was steadily driving the complaint rate down. As a side effect, DAU on the screen grew 13%, a sign the screen had gotten clear enough that people reached for it instead of calling support.

-30%
complaints tagged "Debt" and "Grace period": +13%
daily active users of the Balance screen

What this taught me

Work that could have sat on a shelf won because of factors outside my control: a big part of a designer's job in a corporate environment is waiting for the right moment and keeping the work ready. Even the best intentions stall against a reality where every move needs an economic case. But talk to stakeholders in numbers — not "it'd be nicer to use" but "minus 200 support calls" — and the picture changes, and the redesign everyone had been waiting for finally ships.

← Previous case — Dashboard