Cut credit card complaints by 30% with a redesigned Balance screen

Context

Gazprombank is one of Russia’s largest banks, with more than 5M monthly users across its apps. The credit card Balance screen is one native screen shared by iOS, Android, and web. The redesign kept getting pushed back: changing a shared screen is expensive and depends on the release cycles of three platforms, and the team didn’t see how it would move the metrics they tracked

The opening came when the bank was launching a new product, a credit card with no grace period built in. The old screen was organized around the grace period balance, but for the new card the interest balance mattered more: not every customer was going to buy a grace period add-on

The screen needed rework anyway, and the dev budget was already approved. So I proposed fixing the clutter at the same time

The problem

Before the redesign, the main screen listed every debt category one after another: past-due principal, accrued interest, penalties, legal fees. Current and past-due balances lived on separate screens, and every new feature added more text and numbers

The result was a wall of text, dates, and amounts with no clear structure. Customers got confused and called support to figure out what they owed. In usability testing, participants made mistakes in5–6 out of 7 tasks

My task

1. Find what keeps customers from understanding their balance
2. Form hypotheses based on the findings
3. Test the solution on a prototype
4. Get the redesign signed off by the business and the support team
5. Ship in time for the new card’s launch

Auditing the flow

With UX researchers, we tested the old screen with 7 participants and found several problems:

• Hard to scan. Too much text, dense wording, dates, and numbers
• Confusing terms. Not everyone could tell the grace period from the billing cycle
• Unclear interest charges. Some participants couldn’t explain where the interest charges came from
• Amounts didn’t add up. It wasn’t clear why the grace period balance could be lower than the total
• Past-due balance on a separate screen. Current and past-due balances had to be checked in two different places

Market benchmarking

I looked at how fintech apps show credit card debt. On the best screens you can tell right away how much to pay, by when, and what amount keeps you interest-free. Terms are explained through consequences or in a single line

Hypotheses to test

• If we put the interest balance on the same level as the grace period balance, customers will notice charges outside the grace period and find it easier to keep track of spending
• If we merge the past-due balance with the current one, everything owed ends up on one screen
• If we cut dates and visual noise from the grace period cells, they’ll be easier to read
• If we build a glossary of key terms, customers will stop mixing up the grace period and the billing cycle
• If we add info tooltips to the tricky wording, the screen will be easier to navigate

Validating the hypotheses

Before development we ran a follow-up test on a prototype. On the old screen participants made mistakes in5–6 out of 7 tasks, on the new one in 1–2 out of 5. So we were on the right track. The business was happy with the result, and the screen shipped in time for the new card’s launch

Building the concept

I built the concept without any custom components, entirely on the design system: some new components, some new capabilities of existing ones, like the list cell. The redesign came out cheaper than the team expected, so it got approved fast. The support team signed off too: we stayed in touch the whole time and walked them through each step

1Grace period and interest balances got equal weight

Instead of a scattered list of debt categories, the screen now has two tabs: Grace period and Interest. The next-payment notice moved to the top and got a bit smaller. There’s also a clear way to extend the grace period

I simplified the copy in the payment cells, so each one now reads as a single sentence: “Pay 6,000 ₽ by Jun 30 for purchases Mar 1–31”

2The past-due balance moved to the main screen

I removed the separate past-due screen. It now shows up on the main screen along with a warning that the card may be blocked

3A glossary with Gazik

I added a “Help me understand my card” button with Gazik, the bank’s mascot. The glossary covers the terms from the app and the card paperwork: billing cycle, minimum payment, types of debt. The app and the cardholder agreement use the same words

4Tooltips cover the tricky cases

I simplified the names of the debt types while keeping them accurate. For the tricky cases I added tappable info tooltips

The result

Six months after release, complaints tagged “Debt” and “Grace period” were down 30%. The screen’s DAU grew 13%: most likely it got easier to use, and people checked it instead of calling support. But the most interesting part was the shape of the complaints curve

-30%

complaints tagged “Debt” and “Grace period”

+13%

daily active users of the Balance screen

Key insight: the redesign flattened the new-product complaint spike

While pulling metrics before the redesign, I noticed a pattern: whenever a product with new mechanics launches, support gets 10–15% more complaints, and the spike slowly fades. Customers need time to figure out a new product, but they learn

The new screen knocked that peak down, and after that complaints slowly but steadily dropped below the baseline

Takeaways

• Work that could have stayed in a drawer happened because of an outside trigger. In a big company you sometimes have to wait for the right moment and keep your groundwork ready
• Everything at a bank needs a business case. Stakeholders respond to numbers: “200 fewer support calls” works where “I want it to be convenient” doesn’t

← Previous case: Dashboard