Finance, as
a sport.
Billie is a dark-mode credit companion for mobile web. Five cards in an animated wallet, a Cartel leaderboard that scores behaviour not spend, and a Gemini-powered Vault.
The brief, underneath the receipts.
Four panels. The first two frame the market. The third is the promise we made to ourselves. The fourth is the honest scope.
Problem
Young adults juggling three-plus credit cards are handed apps built for accountants. The result is avoidance — 64% hadn't opened their primary banking app in over a month.
Solution
A dark screen that leads with balance and streak before receipts. A wallet that ejects on a spring. A Cartel that ranks habits. A Vault that answers plain-English questions.
Principle
Finance should feel like a game you can win. Every surface rewards progress, socialises the habit, and hides complexity until asked.
Scope
Single-file React. No backend. Gemini 2.5 Flash powers intel and Vault Q&A. DiceBear draws cartel avatars. Five tabs, one wallet drawer, mission ladder, card-detail view.
Avoid. Audit. Play. Ship.
Four phases, one pinch in the middle. The pinch is the moment we stopped calling this a budget app and started calling it a game.
Avoid
18 interviews. 64% hadn't opened their banking app in a month. Avoidance, not ignorance, is the blocker.
Audit
Three reframes: utilization is a streak, payment is a quest, the wallet is a drawer to not a menu.
Play
Prototyped Cartels in week two. Spring-eased wallet on day six. Vault came last, with Gemini.
Ship
Single file, no backend. LocalStorage for onboarding, Gemini for intel, DiceBear for avatars.
Six taps, one game.
Each card flips. The front shows the screen. The back tells you what we chose and why. No placeholder mocks to every screen is the shipped render.
Home
Balance, not audit
Home
Balance first, utilization second, XP third. The first fold reads the user's emotional state: a clean big number, a trend line in green, and two large CTAs. The receipts come later.
Wallet
Five cards, one gesture
Wallet
A tap on the drawer ejects five cards on a springy easing curve. Each card is still a link, not an ornament to the stack is a gesture, not a graphic.
Cartel
Leaderboard as habit-loop
Cartel
Financial discipline is usually private and punitive. Cartels flip that. Score is computed from utilization, on-time payments, and consistency to not from spend. Competing pushes the median up.
Vault
Ask anything · Gemini
Paying minimum on Card B is costing you extra.
Prioritising the higher-APR balance saves you about $42 / month at your current utilization.
Vault
Gemini 2.5 Flash answers plain-English finance questions. The prompt forces an ELI5 tone. The intel cards are generated from the user's own transactions, so advice is always situated, never generic.
Missions
XP for behaviour
Missions
Three live missions. Each one maps to a concrete, trackable behaviour to drop utilization below 40%, pay three days early, move a balance. XP accrues silently. The user is the hero, not the target.
Analytics
One filter, one verdict
Analytics
The spending view is a single list with one filter chip and one sort. No donut, no sunburst to research shows chart-literacy is 23% on this cohort. Category chips and running totals do the work.
Credit health is not an audit. It is a sport .
Every system is a dial.
Move the controls and watch Billie respond. Utilization, XP, wallet state, and tone to the four levers we ran into the ground.
Tune the player.
Shipped values: 28%, 980 XP, coach.
Dark UI without losing anyone.
Six panels, six technical-drawing references. Dark mode is a difficulty multiplier for contrast to every decision below is measured, not vibed.
Tap card
Contrast ratio
Focus ring
Wallet spring
Balance mask
Live region
<div role="status" aria-live="polite"> Vault is thinking… </div>
Built for the avoidant user.
Five kinds of barrier. We optimised for the cell that ships most of the churn to cognitive load under shame.
Finance literacy
Chart literacy
Shame / avoidance
Language
Attention
A stack chosen for one-file fidelity.
A frontend-only stack chosen for speed of iteration.
Why Gemini 2.5 Flash and not a local model?
Flash hits the sub-second latency the Vault conversation demands, with structured JSON that parses trivially.
Why DiceBear for avatars?
Uploaded avatars leak identity into a finance context. Personas renders seeded SVGs that are distinct but anonymous.
Why Tailwind utilities over a design system?
Billie is one file. A token system would be overkill — Tailwind plus ten ad-hoc tokens covers the surface area.
Three decisions that shaped the feel.
Three choices that define the feel in the hand.
Animated wallet, not a menu
The wallet is a drawer. Ejecting the stack is a spring-eased gesture that teaches card depth without a tooltip.
Cartels over budgets
Cartels replace the ledger with a leaderboard of anonymous peers. The score is behavioural, not absolute.
Vault as memory, not encyclopaedia
The Vault accepts questions in context and answers with the user's actual numbers — a diary, not a dictionary.