top of page
Primary lockup@2x.png

ROLE

Product Designer & AI-Assisted Builder

Product Designer & AI-Assisted Builder

DURATION

2 weeks

The Problem

  1. First-time users can't find split-with-friends from the home screen. It's buried a few menus deep, so most people never even discover it exists.

  2. No reminders for autopays or responsibilities. Users find out only after the money's gone.

  3. Low balance shows up mid-payment, after the PIN. Sometimes failing right in front of the person they're paying.

  4. Loading and failure states stay silent too long. Users don't know if the money actually left.

  5. Payments read as a form to fill out, not an experience, No warmth, no reassurance, just fields.

Solution

Puffin is a UPI payment app that fixes exactly these five gaps: a guided split-with-friends flow, a reminders feed for what's due, a balance check before you commit, calm and honest loading states, and a mascot-led payment experience that's actually fun to use.

No install. Just expeirence it.

Process

image.png

Research

Audited Paytm and GPay's P2P

and found out the gaps

image_edited.jpg
image.png

Claude Code

Built the working prototype, mascot, and animations.

Define

Mapped the five problems and the flows to fix them.

image.png

Vercel

Shipped live, playtested with real friends

image.png

GitHub

Version-controlled the full build

Research

Audited Paytm and GPay's P2P and split flows screen by screen. Found the split flow buried behind extra taps, no balance visibility before paying, robotic loading screens, and no reminder system at all for recurring payments.

image.png
image.png
image.png

No reminders for autopays or responsibilities

Check balance is kept at the bottom. Can be shown before payment Actions

Split with friends is invisible in Homepage

No section to see or add responsibilities / subscription

image.png

The Idea

Why playful? Money is already stressful — a clinical app adds to it. Most fintech "fun" stops at bright colors. Puffin's creature is actually there for the anxious moments — the PIN, the wait — not just decoration.

Who it's for Gen Z, raised on apps with personality — Duolingo's owl, BeReal, Discord. They don't want payments to feel like banking.

The theme A companion, not a mascot for marketing — it reacts to what's happening: peeks, covers its eyes, cheers on success. Purple and pink, soft and round: calm enough to trust, fun enough to enjoy.

image.png
image.png
image.png

Problem Statement

Paytm and GPay treat splitting a bill, tracking what's due, and paying someone as three disconnected, anxious tasks. Puffin redesigns UPI P2P as one calm flow — see what's due, split what you owe, pay without the mid-transaction panic.

App flows

1. Scan & Pay

scan, confirm, swipe to pay. Swipe means you always meant it — no accidental taps.

2. Split with Friends

build a squad, split the bill, settle up. The app runs the math and tracks who's paid; you just tap.

3. Check Balance

PIN/fingerprint gate, balance, transaction history. See it before you commit to a payment, not mid-transaction.

4. Reminders

responsibilities, subscriptions, split debts, one feed. Surfaced before you pay again — not after autopay already took it.

4. Chats

group and 1:1 threads, pay straight from a conversation. No switching apps to send money to someone you're already talking to.

Key Decision

1. The Homepage

Reminders sit at the top so you see what's due before you pay anyone.

image_edited.jpg

The balance card comes right after, so you know what you can spend before paying.

Split with friends placed along with other payment actions

image_edited.jpg

Responsibilities get their own section because rent and EMIs are a different mindset from paying a person.

Subscriptions show renewal dates and a monthly total, so you see what's leaving each month.

2. Quick Actions & Add Responsibility

Tap the sleeping creature and it fans out Scan, Split, and Pay within thumb reach, with Scan centred as the most used.

image.png
image.png

The dashed Add tile opens a quick form for what you owe, who you pay, and when, so it appears on Home without leaving the screen.

3. Choose card & Swipe to pay

Swipe through your cards and drag one into the POS machine while the creature watches, with the paying bank always shown below.

Type your PIN while the creature covers its eyes, then swipe to pay and watch calm messages and a moving trail replace a blank spinner.

4. Split with friends

​Pick a suggestion or roll the dice for a random fun name, so naming never feels like a chore.

The pizza re-slices live as you split equally, by amount, shares, or percentage, so the maths is always visible.

Key Learnings

  • A calm flow needs proof, not just reassurance, the processing screen only worked once the messages were paired with a visible progress trail.

  • Reminders only work if they interrupt at the right moment above the balance card, not in a menu, was the difference between seen and ignored.

  • Playful and trustworthy aren't opposites, sequencing is the mascot can joke around when idle, but has to go quiet and precise during the PIN, or it reads as reckless with money.

What's Next

  • Real failure-state handling — payments always succeed today; build the retry/refund path for when they don't.

  • Push-level reminders — nudge before a subscription renews, not just an in-app card.

  • A real backend — everything's mocked client-side right now; next is actual auth and persistence.

Next Project...

Loku logo.png

loku

Loku AI turns a prompt, sketch, sitemap, user flow, or existing design into a real, editable UI. One canvas covers the whole process: wireframes, multiple variations, prototypes, and code, editable by AI or by hand.

bottom of page