Skip to content
Roshan Prasad
What is a virtual credit card?1/9

Freecharge Axis Bank Virtual Credit Card

UX design case study

An end-to-end UX case study for a virtual credit card launched with Axis Bank: personas, product vision, wireframes and high-fidelity design, built around cutting drop-off in a 15-field application.

Company
Axis Bank × Freecharge
Role
Senior Product Designer
Focus
Fintech, Mobile
Cover image for Freecharge Axis Bank Virtual Credit Card

What is a virtual credit card?

A virtual credit card has a card number, expiry date and CVV like any other card. The difference is that it exists only online, inside the bank's or financial institution's website or app.

Move your pointer across the card to tilt it. Tap to turn it over for the physical card.

Why a virtual credit card?

VCCs are the newest entry among online credit tools, alongside debit cards, traditional credit cards, network EMI cards and buy-now-pay-later. The advantages that mattered to our users:

Who are our customers?

People with a fixed monthly income and a good payment history, aged 25–35, already familiar with modern credit tools. They shop frequently on e-commerce sites, where a VCC can be a more rewarding and convenient way to pay.

Personas

George Peter, 22, Bangalore, front-end developer, English and Hindi. A frequent online shopper with a good credit score and moderate history with online financial services. Digitally native and familiar with online payments; hasn't owned a credit card yet; aware of digital fraud and phishing.

Rohan Sharma, 33, Pune, accountant, English, Marathi and Hindi. Fair online purchase frequency, fair credit score, good history with online financial services. Already owns a credit card; concerned about the security of physical cards; wants a card quickly.

Persona card for George Peter, 22, a front-end developer in Bangalore
Persona card for Rohan Sharma, 33, an accountant in Pune

User story

George wants to buy a new smartphone on Amazon using debit card EMI, since he doesn't have the full amount. He finds out his debit card isn't eligible for EMI. Later he sees an online ad for the VCC, and is drawn in by instant approval (about five minutes) and the option to convert the whole amount to EMI.

User journey

StageTouchpointWhat happensEmotion
DiscoveryLead generationSees a YouTube or online ad and clicks through to the SEO landing pageCurious, doubtful
DiscoveryLanding screenLearns about zero application fee and instant approvalExcited, interested
Adding detailsAdd detailsEnters the details the application needs (about 15 inputs), the most critical part of the flowBored, cautious
Adding detailsConfirm OTPConfirms OTP for Aadhaar verificationEasy, relaxed
Reaching dashboardSuccess screenApplication submitted; told final approval takes about five minutes, which the design needed to explainRelieved, curious
Reaching dashboardCard dashboardLands on the VCC dashboardExcited
User journey map from discovery through to the card dashboard, with an emotion curve
The map runs wide. Swipe or drag across it; each stop is a full view of one part of the journey.

Wireframes

Nine screens: landing, add details, contact details, personal details, work details, terms and conditions, OTP verification, application success, and the VCC dashboard.

The details worth noting are the small ones. A three-step progress bar so the length of the form is never a surprise. A placeholder for trust marks beside the call to action. And an OTP screen that explains the code can take up to five minutes, asks the user not to leave the page, and shows how many resends remain, because the silence after submitting is where people give up.

Landing screen wireframe
Add details screen wireframe
Contact details screen wireframe
Personal details screen wireframe
Work details screen wireframe
Terms and conditions screen wireframe
OTP verification screen wireframe
Application success screen wireframe

Final screens

Final feature screen introducing the virtual credit card and its benefits

Feature screen

Introduces the card, highlights the key benefits, and leads to a clear call to action. Three components: the card view, benefit cards, and feature banners (welcome vouchers, annual fee waived on monthly spends above ₹50,000, and the digital plus physical card pairing).

The add details flow, split across three steps

Add details

Filling in details is usually the most time-consuming part of an application, and the place drop-off concentrates. The flow is split into three groups, contact, personal and work, so users stay focused and finish with ease.

All three detail sections complete, with the call to action now active

Details added

As each section is completed it gets a checkmark, and once all three are done the call to action turns orange and becomes active. Progress you can see is progress you'll finish.

Application success screen leading into card activation

Success and activation

Confirms the application and moves the user straight on to card activation.

Visual design

Source Sans Pro, in Regular 400, Semibold 600 and Bold 700, at 16, 14 and 12px. Text in #222222 and #444444, an accent of #FF7744, on #FFFFFF.

Outcome

The card launched on 27 August 2019, Freecharge's first digital credit card, powered by Axis Bank. A Visa Platinum on a 50-day credit period, issued to invited users from a banner inside an app they already had.

The activated card in the app, showing the masked card number, credit used and available, the due date, and recent transactions
The card in use, once activated.

It was never an acquisition funnel

Only pre-qualified users ever saw the banner, so this was not a form competing for strangers. Everyone who reached the first step had already been approved. That changes what the design is for: not persuasion, but completion. It is why the flow opens on the benefits rather than the eligibility criteria, and why the three groups of details sit in one screen that can be worked through in any order instead of a linear gate.

The handoff was the hard part

Everything before approval lived in Freecharge, and most of what came after it did not.

In FreechargeDesigned here
  • The invite banner
  • The application, in three groups of details
  • Terms and OTP verification
  • Approval, and the card itself
  • Checkout, as a saved payment method
In the Axis Bank appHanded over
  • Available credit limit
  • Reward points
  • View card details
  • Repayment, and the minimum due
  • Cancellation
  • Transaction alerts, by SMS and email

So the job was to carry someone confidently to a card and then hand them over without it feeling like being dropped. That constraint shaped the success screen more than anything else: it had to close the application and open the next thing in the same breath.

The pattern outlasted the project

Axis later added a higher tier, the Freecharge Plus card, on the same model: invite only, issued virtually from a banner in the Freecharge app, and used with an OTP rather than a PIN. That is still how both cards are onboarded today.