Skip to content
BankingConfidentialFlagship

Pre-Approved Credit Card Onboarding

Presenting a pre-approved card offer inside a call, collecting consent, completing verification and activating the card — end to end.

Client

Major Indian Private Bank (confidential)

Role

UX/UI Designer — offer presentation, consent flow, verification states, PIN and activation journey.

Platform

Mobile · Voice + Visual UI

Confidentiality: Client identity and internal flows are confidential. Screens are schematic placeholders — no real screenshots are included.

Visual IVRBankingCredit CardKYC
OverviewContextJourneyUX DecisionsInteractionEdge CasesScreensLearnings

01Overview

A pre-approved credit card offered inside a call: the customer sees the offer, understands the terms, gives consent, completes verification, sets up the PIN and activates the card — with a scratch-card reward moment at the end.

02Context

Banks sell pre-approved cards over outbound calls. Voice-only presentation made disclosures long, consent weak and activation drop-off high. The goal: present the offer visually, collect genuine consent, complete onboarding in the call, and get the card activated.

03User Journey

Onboarding journey

  1. 01

    Pre-approved offer

    The call opens with the offer and what it means, in plain language.

  2. 02

    Card recommendation

    If relevant, a short comparison between options — limited to the offer context.

  3. 03

    Offer presentation

    Limit, fees and key terms in an honest summary card.

  4. 04

    Consent

    Explicit, audited consent for the application — never buried.

  5. 05

    Verification

    KYC details and OTP verification with clear state handling.

  6. 06

    PIN + activation

    Secure PIN setup, then activation with visible progress.

  7. 07

    Confirmation + reward

    Success screen with card delivery info and a scratch-card reward interaction.

04UX Decisions

01Consent before anything else

The offer screen explains what the user is consenting to and what happens next. Consent is explicit, logged and irreversible-looking — a checkbox was never enough.

02Fees and limits up front

Annual fee, joining fee and credit limit are stated on the first offer screen. Surprises in card terms destroy trust faster than anything else.

03One input per step

Details are collected one field per screen, so focus, validation and error handling stay simple and mobile-friendly.

04Secure PIN entry

PIN setup uses a masked keypad with the digits never shown on screen — secure by design, not by warning text.

05The scratch-card moment

After activation, a scratch-card interaction reveals the reward. It is the one playful moment, earned by finishing — not decoration on every screen.

05Interaction Design

States, transitions and behaviour — not just the happy path.

OTP flow

Clear countdown, resend with lockout visibility, and a masked input with inline validation.

PIN setup

Masked keypad, confirm step, and explicit mismatch handling with remaining attempts.

KYC failure

Dignified decline paths — the journey explains why and what alternatives exist, never leaving the user stuck.

Activation

A visible multi-step progress so the user knows activation is happening, not hanging.

Duplicate application

Detected early with a clear message and a path to check existing application status.

06Edge Cases

Good UX is what happens when things go wrong. Each case: the problem, the user-facing message and the recovery action.

KYC verification fail

Edge case

Identity details do not verify against records.

“We couldn't verify these details with the records.”

Recovery: Offer document-based verification or an in-branch / agent-assisted path.

Duplicate application

Edge case

An application already exists for this identity.

“You already have an application in progress.”

Recovery: Show application status instead of starting a second one.

OTP limit reached

Edge case

Too many failed OTP attempts.

“You've used your OTP attempts. We'll switch you to an agent.”

Recovery: Handoff with full journey context — the user never repeats themselves.

Limit change mid-flow

Edge case

The approved limit changes during the journey.

“Your approved limit has been updated.”

Recovery: Show the new offer explicitly and require consent again.

Session timeout during PIN

Edge case

The call drops during PIN setup.

“Your session ended before the PIN was saved.”

Recovery: Resume securely with the card already verified — no re-entry of card details.

07Final Experience

Primary action

Offer presentation

Offer presentation

Limit, fees and key terms in one honest summary — consent context first.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Primary action

Secure PIN keypad

Secure PIN keypad

Masked digits, visible progress, no screen ever reveals the PIN.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Primary action

Activation progress

Activation progress

Multi-step activation progress so completion is felt, not assumed.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Primary action

Scratch-card reward

Scratch-card reward

The one playful moment — earned by finishing the journey.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

08Learnings

  • Compliance and UX are not enemies: clear disclosure, designed as part of the flow, converts better than fine print.
  • Security states need their own UX — a dignified failure path protects both the customer and the brand.
  • One playful, earned moment carries more delight than endless animation.

Next case study

UPI Payment Journey

All workNext case study

← /work · case study · credit-card-onboarding