Case study · Product Designer · 2021–22

The bank let us redesign one flow. It grew into fourteen.

A year redesigning IDFC FIRST Bank’s mobile app with BCG: payments, login and the design system behind them.

Who’s reading?

Pick one and the page folds to what matters to you. Skip it to read everything.

Context

The app worked, but it was hard to use.

Navigation was confusing. Key details were missing when people needed them. And the flows didn’t match Google Pay or Paytm, the apps customers used every day.

The bank had no brief, just a feeling that the app wasn’t good enough.

What I did
Payments, login and the design system, as one of five designers working with BCG.
How long
Twelve months, from one test flow to fourteen journeys.

The problem

Before giving us the app, the bank tested us on one flow.

The flow was adding money. People use it every day, so it was a fair test. If we got it wrong, there wouldn’t be a second flow.

Old flow: choose the account to take money from
01Source account
Old flow: choose where the money goes
02Destination
Old flow: enter the amount
03Amount
Old flow: confirm the details
04Confirm
Old flow: verify with an OTP
05OTP
Old flow: success
06Success
BeforeThe old add-money flow. It worked, but the steps felt unfamiliar next to the apps people used every day.

The goal

Make moving money feel familiar and safe, and earn the rest of the app.

Approach

When money moves, familiar feels safe.

I didn’t invent new patterns. I used the ones customers already trusted from Google Pay and Paytm, in the order they expected.

Part 1 · The test flow

Win one flow, and earn the rest.

01

Steps in the order people expect

People already knew how to pay in other apps. Our flow made them learn a new order.

Pick an account, enter an amount, confirm, enter your UPI PIN. Done.

New flow: pick the account
01Account
New flow: enter the amount
02Amount
New flow: confirm
03Confirm
New flow: enter your UPI PIN
04UPI PIN
05Done
AfterFour steps, in the same order as the payment apps people already used.

02

Keep the promo out of the way

The bank wanted to advertise its savings rate inside the payment. That’s exactly when people need to focus.

Removing it wasn’t an option, so I argued to make it small. It shipped quiet, the first time the client went with my reasoning over theirs.

The receipt screen, with the savings promo as one small line at the top
The promo, kept to one line above the receipt.

Part 2 · The rest of the app

Thirteen more journeys, and a system to hold them.

03

More than one way back in

A forgotten username, a new phone or a new SIM locked people out of their own account.

Four ways to verify: Customer ID, PAN, account number or debit card. The SIM check runs in the background. Set a PIN once, then use your fingerprint.

Login: enter your mobile number
01Mobile number
Login: verify the SIM
02SIM check
Login: register with a Customer ID
03Customer ID
Login: create a PIN
04PIN
Login: set up fingerprint login
05Fingerprint
Login: welcome back
06Welcome
Before, login was one screen with two fields, and no way back in if they didn’t work.

04

One set of parts for five designers

Five designers made ten versions of the same button.

We locked the shared components and wrote down the patterns. Builds and reviews got faster.

It helped with the client too. When they asked for “something different”, the system gave us a clear reason to say no, and a quick way to say yes when a change made sense.

The component library: navigation, buttons, inputs, cards, drawers, charts and error states

Results

No launch numbers came back, but the work kept growing.

We handed over to the bank and BCG before launch data was in. Here’s what I can say.

1test flow

14journeys

  • ScopeOnboarding, payments, savings, credit cards, mutual funds and spend tracking. Then NRI onboarding, and concept work BCG used to pitch the bank’s leadership.
  • TrustEarly on, every screen got pushback. By the end, the client listened even when we disagreed.
  • FeedbackInformal, but consistent: the new flows were working.
The redesigned app, screen after screen on IDFC FIRST red
The redesign, from login to dashboard.

What I learned

What I’d keep doing.

  1. Trust comes from delivering.Good work on the test flow earned me the right to push back later.
  2. Pick the fights that matter.I couldn’t remove the promo, so I made it small.
  3. Build the system early.It sped up five designers and settled arguments with the client.