Rupesh S. Ghadi
Back to work
Product · B2B FinTech

Nimbbl 1-Click Checkout

One payment sheet that has to hold every way India pays - and stay fast, honest and recoverable while doing it.

Nimbbl 1-Click Checkout hero - the merchant-branded payment sheet and its payment method screens composed over a branded backdrop.
Role
UI/UX Designer (end-to-end)
Client
Nimbbl
Type
Product · B2B FinTech
Platform
Mobile web checkout (SDK)
230+
Designed checkout states
20+
Methods, partners & lenders
4
Distinct UPI flows
1-click
For a recognised buyer

TL;DR

Nimbbl's pitch is a 1-click checkout: a buyer who has paid once should never fill a form again. The sheet opens inside the merchant's own page, greets a recognised buyer by name, and offers their saved instruments before any method list. The hard part was never the one click - it was everything underneath it. Indian payments are not one flow but dozens: UPI alone behaves as four distinct products, cards run through an issuer OTP the checkout doesn't control, and every BNPL lender brings its own eligibility and authorisation rules. On top of that sits money the buyer must never be surprised by - convenience fees, dynamic currency conversion, international cards. I designed the sheet as a system of states rather than a screen, on the assumption that a checkout spends much of its life failing and its real job is to make failure recoverable.

My role & contribution

  • Owned UI/UX end to end as the sole designer, working from Nimbbl's own API and partner documentation and business requirements to get UPI/NPCI behaviour, issuer OTP flows and per-lender BNPL rules right.
  • Translated constraints the design couldn't change (RBI/NPCI rules, an issuer's own OTP page, each BNPL lender's separate eligibility and auto-debit model) into states the checkout could still own honestly.
  • Designed the full state model behind the sheet: identification tiers, four distinct UPI paths, the card journey, EMI and BNPL variations, failure and recovery states, and money disclosure.
  • Specified states down to individual UI treatments, including close-button behaviour across light and dark merchant storefronts.

Motivation

India's payment methods are not one flow but dozens, and most of the hard behaviour sits with parties outside the checkout: NPCI's UPI rules, an issuer's own OTP page, each BNPL lender's separate eligibility and auto-debit model. Working from Nimbbl's documentation and business requirements rather than being able to change those third-party systems, the brief was to design a checkout that tells the truth about what's happening even when it doesn't control the outcome: which of four UPI paths a buyer is on, whether a fee applies, why a shelf is empty, and what to do next when something times out or fails. The one-click promise only holds if the state machine underneath it is honest.

The core challenges

  • 01Every way India pays, in one sheet - UPI, cards, wallets, netbanking, EMI and BNPL, each with its own rules and failure modes.
  • 021-click is a recognition problem - the promise only holds if the sheet knows the buyer before it renders.
  • 03Third-party rules the design cannot change - issuer OTPs, NPCI behaviour, and per-lender authorisation models.
  • 04Money that moves after the decision - convenience fees, dynamic currency conversion and international cards all had to be disclosed, not sprung.
  • 05Failure is the common case - timeouts, dropped OTPs, declines and exits needed recovery paths, not dead ends.
  • 06It lives inside someone else's brand - the sheet had to feel like the merchant's checkout, not a stranger holding the money.

Design solutions

The whole product in one screen

The sheet is not a page the buyer travels to: it opens over the merchant's own storefront, carrying the merchant's logo and order summary, so the buyer never feels handed off to a stranger holding their money.

The greeting does the real work: a recognised buyer is addressed by name and told their fast options are ready, before any method list appears. Everything below that line is a fallback for people the system doesn't know yet.

Merchant branding, the order restated, a named greeting, fast options first, and the full method list demoted below them.
The flow logic behind it
Master checkout flow diagram: merchant click through to fast payment options rendered.

The master flow this screen is built from: pay is clicked, checkout opens with the order, the system checks for a known device, and fast options render before anything else.

How the sheet recognizes you, from best case to worst

Recognition is the feature. The sheet doesn't treat every buyer the same: it checks what it already knows, from a device it's seen before down to nothing at all, and adjusts the flow rather than asking everyone the same questions.

The escape hatch matters just as much as the fast path. Shared devices are normal, so "not you?" is a first-class control rather than a support ticket.

The same sheet, adapting to how much it already knows about the buyer in front of it.

1Known device, no OTP
2Merchant already told us who you are
3A mobile number alone unlocks it
4When the merchant sends nothing
5"Not you?" switches identity anytime

Swipe to see the next step →

Every recognition tier still resolves to a usable checkout, down to a mobile number alone, and switching identity is never a dead end.

Fast payments, and the honest design of having none

Fast payments are the promise in the product's name: saved instruments the buyer can fire in a single tap. The interesting design problem is not the happy path but its absence.

A buyer with nothing saved must not be shown an empty shelf and left to guess. The zero state explains why it's empty and what to do instead, which is what keeps a first-time buyer from reading "1-click checkout" as a lie.

From explaining what fast payments are to the different reasons the shelf might be empty.

1Explain what fast payments are
2Say plainly there's nothing saved yet
3Or that it isn't available at all
4Stay reachable on a phone number alone

Swipe to see the next step →

An empty shelf, explained, is what keeps "1-click" from reading as a lie.

UPI is not one flow, it's four

UPI looks like a single button and behaves like four different products. A saved VPA, a fresh VPA, an intent handoff into a payment app, and a non-intent collect request each have their own timing, their own failure modes, and their own idea of where the buyer's attention goes.

Designing this meant refusing to pretend they're the same. Each path gets its own sequence, and the buyer is told which one they're on, because a collect request that silently waits looks identical to a broken screen.

From the fastest path (a saved VPA) to the ones that need typing, an app handoff, or a wait.

1Saved VPA, one tap
2Fresh VPA, typed and validated
3Handed off to a payment app
4A collect request that waits
5An unrecognised app still resolves
6Inline help for a lost UPI ID

Swipe to see the next step →

Four different products behind one button, each told apart, because silence during a collect request reads as failure.

The flow logic behind it
UPI collect and saved-VPA flow diagram, from method selection to success or failure.

One of UPI's four sub-flows mapped out: user selects UPI, a saved VPA list renders if one exists, the collect request triggers, and the result resolves to success or failure.

Cards: the longest path, kept as short as it can honestly be

Cards carry the most steps of any method: number, validation, an issuer OTP on someone else's page, and a processing wait the checkout does not control. Every one of those is a place to lose the sale.

The design compresses what it can and narrates what it can't: validation happens inline as the number is typed, errors resolve in place, and the OTP and processing waits are given honest, legible states instead of a blank screen.

The longest method in the sheet, walked step by step.

1Entry, kept to what the network needs
2Validation lands as you type
3Errors resolve in place
4The issuer's OTP, framed not hidden
5A designed wait, not a blank screen
6Saved, so next time it's the fast path

Swipe to see the next step →

The longest method in the sheet collapses into the fast one once it's saved.

The flow logic behind it
New card entry flow diagram: card selected, details entered, validation, bank OTP, processing, success or failure.

The state machine behind it: card selected, details entered, inline validation, the bank's own OTP screen, processing, then success or failure.

EMI: choosing a plan the buyer can actually parse

Credit at checkout is where Indian payments get genuinely hard. EMI plans vary by bank, tenure and category, and none of it is the checkout's to decide.

A tenure list with every bank in it is unusable, so the choice is staged: category first, then plan, with the cost of borrowing stated where the decision is made.

From category to plan, and the honest state when neither applies.

1Category first, not every bank at once
2Then the plan, cost stated upfront
3Said plainly when it isn't available

Swipe to see the next step →

Staging the decision is what makes a genuinely complicated product (bank x tenure x category) parseable at checkout.

BNPL: one button, a dozen different promises behind it

BNPL lenders each bring their own eligibility, auto-debit behaviour and authorisation model, and none of it is the checkout's to decide either.

The honest move was to surface the lender's rules as the buyer's states. "Delayed authorisation allowed" and "not allowed" are two different products behind one button, and the buyer is told which one they're standing in.

What a single BNPL button can actually mean, depending on the lender.

1Eligibility and auto-debit, per lender
2Delayed authorisation allowed
3And not allowed, same button

Swipe to see the next step →

Two different products behind one button, so the buyer is told which one applies to them.

When things go wrong

A checkout spends more of its life failing than most designers admit. Sessions expire, buyers hit the X, OTPs never arrive, and lenders time out mid-authorisation.

This is the part of the work I'd defend hardest. A session timeout with a visible counter, an exit that asks before it discards a cart, and a retry that offers alternatives rather than repeating the thing that just failed: these are what decide whether a payment is recovered or lost.

The un-pretty states, walked in the order a buyer actually meets them.

1A visible countdown, before it happens
2The session expiring, said outright
3The X asks before it discards a cart
4Errors at the first field, cheapest to recover
5Retry offers alternatives, not just "try again"

Swipe to see the next step →

A checkout spends much of its life failing. Recovery, not the happy path, is the real design problem.

Currency conversion, shown not hidden

The fastest way to lose a buyer at the last step is a number that changes without explanation. Dynamic currency conversion and international cards both move the amount after the buyer has decided.

So both are disclosed before they're charged: conversion shows the before and the after, and international cards get their own summary rather than a surprise on the statement.

What the buyer sees when the currency isn't the one on their card.

1Conversion, before
2And after, both numbers, buyer chooses
3International cards get their own summary

Swipe to see the next step →

The conversion is never done to the buyer silently.

Fees and offers, named where they apply

Convenience fees are the other number that can move at the last step. And offers, done badly, get buried in a coupon field the buyer has to go hunting for.

So a fee is named at the method that carries it, and stated as absent where it doesn't apply. Offers appear at the method that unlocks them instead.

Where a fee applies, where it doesn't, and where an offer unlocks.

1A fee, named at the method that carries it
2And where there's none, that's stated too
3Offers surfaced at the method that unlocks them

Swipe to see the next step →

Silence about money is what buyers punish.

Reflection

  • The one click is the marketing; the state machine is the product. What made this checkout work was refusing to flatten four UPI flows, a dozen lenders and an issuer OTP into one optimistic happy path.
  • Designing the zero state of a feature called "fast payments" was the most useful hour in the project. A first-time buyer meeting an empty shelf is the moment the product's name becomes a lie - so that state had to teach, not apologise.
  • Disclosure is a design decision, not a compliance one. Fees and currency conversion shown before they are charged is the difference between a completed payment and a chargeback, and I'd fight for that placement again.
  • What I'd measure next: drop-off per method, how often each failure state is hit, and - the number I actually want - what share of recovered payments came from the retry-with-alternatives path rather than a plain try again.

Visuals are recreated / sanitised representations for portfolio use and contain no real buyer, merchant or card data. Merchant branding shown is illustrative of the white-label sheet.

Want to see more?

More case studies are on the way - or reach out directly.

Hire Rupesh