A mobile app that helps multi-card holders track grace periods, pick the right card for every purchase, and close each month debt-free — from the first empathy interview to the final annotated handoff.
Role
Product Designer (solo)
Timeline
6 weeks
Process
Empathize → Define → Ideate → Prototype → Test
Deliverables
Research, IA, wireframes, UI kit, hi-fi flow
Platform
iOS / Android, 375×812
01 · Design Brief
The problem in one sentence
How might we help people limit or control credit card usage in day-to-day life, stay debt-free at month end, and still spend confidently — without fear of an unwanted bill?
The Product
What Credence is
An app that watches how users spend across every credit card they hold, and steps in before a purchase turns into next month's regret — not after the statement arrives.
Problems & Challenges
Four recurring pains
Month-end bills swallow whatever's left, every time
Multiple cards, multiple due dates, no single view
No visibility into which category the money went to
Grace periods go unused because nobody tracks them
Solutions
What we build in response
Real-time nudge before an off-plan purchase
One dashboard, every card's due date and grace period
Auto-categorized spend, surfaced monthly
A comparison prompt before big-ticket upsells
02 · Goals & Business Model
Why this is worth building
The goal isn't just "save the user money" in the abstract — it has to close the loop into a sustainable product.
User goal
Give people one place to see every card's grace period and category spend, so they stop making decisions in the dark and stop dreading the statement date.
Business goal
The more money we help a user save, the more relevant offers we can put in front of them — turning savings into a trusted channel for partner deals, not an ad interruption.
Process
Five stages, one thread
Empathize
Define
Ideate
Prototype
Test
Empathize
Understanding the user
Interviews with two multi-card holders; empathy mapping to surface unspoken frustrations.
Define
User journey maps
Traced the path from discovering the app to the first month of measurable savings.
Ideate
User flow & information architecture
Mapped every screen the four core tabs would need, end to end.
Prototype — starting the design
Low-fidelity wireframes
Grayscale layouts to validate structure before touching color.
Prototype — refining the design
High-fidelity wireframes
Full visual system applied across every IA node — the plum/peach identity and the grace-period gauge.
Test
Take away & next steps
What to validate with real users before dev handoff.
03 · Empathize
Two people, two very different relationships with credit
Empathy mapping pulled apart what each persona says from what they actually think and feel — that gap is where most of the feature ideas below came from.
Joana, 24
Product Consultant · manages 4 cards manually
Says
"I can manage all my cards by myself, manually."
"I like a seamless experience without complications."
"Sometimes I don't want auto-payment deductions."
Thinks
Wants to pick the card that gives max grace period for a given purchase
Wants due dates visible at a glance across all cards
Feels genuinely down when an unwanted bill lands month-end
Does
Memorizes due dates herself
Uses whichever card is nearest, no sorting logic
Feels
Wants the app short and low-friction — not another dashboard to study
Distrusts heavy charts and graphs
Would want rewards, not just savings, as the payoff
"I spend too much time cross-checking offers across shopping apps."
"I need a reminder for auto-payment deductions."
Wants a spend cap with snooze alerts beyond a set limit
Thinks
Wants instant awareness of the best card at time of purchase
Wants to upgrade a card without extra annual charges
Wants a QR scan at the fuel pump to auto-select the best card
Wants to customize the physical card design
Does
Reaches out to support for every offer or charge query
Feels
Cards are "easy to use but hard to understand"
Feels banks only show their side — the user just accepts the final bill
04 · Define
User journey map — Joana
The original journey table shipped with empty rows. Filled in below, using Joana's empathy data, across the three milestones that matter most: getting the app, adding her cards, and seeing the first saving.
Stage
Get App
Add Cards
Save Money
Doing
Downloads Credence after a friend mentions it saved them a late fee
Scans or manually enters 4 existing credit cards during onboarding
Opens the Home tab weekly to check spend and grace periods
Thinking
"Will this actually be simpler than what I do in my head already?"
"I hope this doesn't ask for more detail than I'm comfortable sharing"
"Which card should I actually be using for this purchase?"
Feeling
🤔 Cautiously curious
😬 Slightly guarded about KYC
😌 Relieved to finally see it laid out
Opportunity
Lead onboarding with the grace-period value prop, not a feature list
Keep KYC to two short steps; explain the encryption line up front
Surface "best card to use" as the first thing she sees on Home
05 · Ideate
Information architecture
Four core tabs sit behind a standard sign-up/KYC gate. Cards and Marketplace carry the most depth, since that's where daily decisions actually happen.
Grayscale, structure-only — the point here is validating hierarchy and flow before anyone argues about color.
9:41▮▮▮
Your new bill
Next →
Home
Cards
Shop
Funds
Homepage — structure pass
9:41▮▮▮
My Cards
My Cards
Best
Benefits
Manage
Pay
Home
Cards
Shop
Funds
Cards — structure pass
9:41▮▮▮
Best Card
My Cards
Best
Benefits
Home
Cards
Shop
Funds
Cards → Best — structure pass
9:41▮▮▮
Benefits
My Cards
Best
Benefits
Home
Cards
Shop
Funds
Cards → Benefits — structure pass
07 · Prototype — Refining the Design
High-fidelity screens
The full visual system applied across every node in the IA — plum and coral on cream, Fraunces for numbers that matter, and a grace-period gauge as the recurring signature.
Onboarding & Auth
Credence
SPEND WITH CONFIDENCE
Splash
9:41●●●
🧭
Know your grace period, always
See how many interest-free days each card has left before you tap to pay.
Next
Onboarding
9:41●●●
Create account
Full name
Mobile number
Email address
Create password
Continue
Sign Up
9:41●●●
Quick KYC
2 of 2
Upload PAN / Aadhaar
Tap to scan document
🔒 Bank-grade encryption — used only for card linking.
Finish setup
KYC
Home & Cards
9:41●●●
Hi, Joana 👋
🔔
Marriott Bonvoy bill due
$567.90
Today, Jan 17
12d
Pay now
$3,048
Spent · Feb
$2,850
Saved · Feb
Best card to use this month
⛽
Fuel & groceries
Chase Sapphire · 50d grace
Recommended
Home
Cards
Market
Balance
Home
9:41●●●
My Cards
My Cards
Best Card
Benefits
4 active · $48,500 outstanding
CHASE SAPPHIREVISA
•••• •••• •••• 4821
Grace: 24 daysDue 15 Mar
$24,786
Total due
$4,508
Min due
Manage
Pay
Home
Cards
Market
Balance
Cards → My Cards
9:41●●●
Best Card
My Cards
Best Card
Benefits
Ranked by remaining grace period
DISCOVER ITVISA
•••• •••• •••• 1190
Grace: 50 daysDue 5 Apr
$3,000
Spent
$45,000
Remaining limit
Manage
Pay
Home
Cards
Market
Balance
Cards → Best Card
9:41●●●
Benefits
My Cards
Best Card
Benefits
Total points
4,047
How to redeem →
Offers on your cards
🛒
Grofers
10% cashback, this week
📦
Amazon
5% back on electronics
Home
Cards
Market
Balance
Cards → Benefits
Marketplace & Balance
9:41●●●
Marketplace
Store
Travel
Benefits
🛍️
💻
MacBook Air M3
$1,099 · was this really necessary?
Compare
📺
Samsung 55" QLED
$799 · 12 mo no-cost EMI
Home
Cards
Market
Balance
Marketplace → Store
9:41●●●
Balance
Credit utilization
35%
Healthy range: under 30%
$68,240
Credit balance
$2,850
Saved this month
Debt-free countdown
On track — 6 days to fully clear next statement
Home
Cards
Market
Balance
Balance
9:41●●●
Fuel usage
QR scan
⛽
Scan the pump QR to auto-select the card with the best surcharge waiver.
✓
Chase Sapphire
1% fuel surcharge waiver
Best match
Use this card
Home
Cards
Market
Balance
Home → Fuel Usage
Answers Philip's QR-at-the-pump request directly.
08 · Design System Snapshot
What ships to engineering
A condensed style guide — full tokens live in the linked Figma/handoff file, this is the reference sheet.