UX Case Study · End to End
Credence — spend
with confidence
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.
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
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
Philip, 28
Says
- "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.
Entry flow
Splash → Onboarding → New user?
Sign Up → Mobile Verification → KYC
Login
Home
Home
Recommended card
Most used
Card sorting
Menu → Add cards / Savings / Unbilled / Latest bills / Fuel usage / Credit score / Rewards / Settings / Profile
Cards
Cards
My Cards
Unbilled
Benefits → Fuel / Grofers / Amazon / Netflix
Manage
Marketplace & Balance
Marketplace
Store
Travel
Benefits
Balance
Credit Balance
Utilization
Savings
06 · Prototype — Starting the Design
Low-fidelity wireframes
Grayscale, structure-only — the point here is validating hierarchy and flow before anyone argues about color.
Homepage — structure pass
My Cards
My Cards
Best
Benefits
Manage
Pay
Cards — structure pass
Best Card
My Cards
Best
Benefits
Cards → Best — structure pass
Benefits
My Cards
Best
Benefits
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
🧭
Know your grace period, always
See how many interest-free days each card has left before you tap to pay.
Next
Onboarding
Create account
Full name
Mobile number
Email address
Create password
Continue
Sign Up
Quick KYC
2 of 2Upload PAN / Aadhaar
Tap to scan document
🔒 Bank-grade encryption — used only for card linking.
Finish setup
KYC
Home & Cards
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
Home
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
Cards → My Cards
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
Cards → Best Card
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
Cards → Benefits
Marketplace & Balance
Marketplace
Store
Travel
Benefits
🛍️
💻
MacBook Air M3
$1,099 · was this really necessary?
📺
Samsung 55" QLED
$799 · 12 mo no-cost EMI
Marketplace → Store
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
Balance
Fuel usage
QR scan⛽
Scan the pump QR to auto-select the card with the best surcharge waiver.
✓
Chase Sapphire
1% fuel surcharge waiver
Use this card
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.
Plum · #711E49
Primary CTA, headers
Primary CTA, headers
Coral · #DF6E4E
Alerts, secondary accent
Alerts, secondary accent
Peach · #EFA787
Illustration, highlights
Illustration, highlights
Typography
Display / Fraunces 600
Grace: 24 days
Body / Inter 500–700
Chase Sapphire · Statement due Mar 15
Data / JetBrains Mono
•••• •••• •••• 4821
Component spec
| Corner radius | 14px cards, 20px sheets, 12px buttons |
| Elevation | 0 4px 14px rgba(43,27,39,.05) — default card shadow |
| Grace-period gauge | SVG ring, 4–6px stroke, plum on blush track |
| Grid | 16px screen margin, 8px spacing unit |
| Min tap target | 44×44pt, all nav and buttons |
09 · Final Delivery
Handoff package
What actually gets handed to engineering and stakeholders at the end of this cycle.
Design files
All 17 screens (auth, Home, Cards ×3, Marketplace, Balance, Fuel usage) as a linked Figma prototype with click-through navigation matching the IA.
Redlines & states
Spacing/size annotations per screen, plus empty, loading, and error states for Home, Cards, and Pay Now — the three highest-traffic flows.
Content & copy
Finalized microcopy for empty states, KYC trust line, and error messages — written in Credence's plain, non-apologetic voice.
10 · Test — Take Away & Next Steps
What we'd validate before dev handoff
5
Usability sessions per persona type, planned
3
Critical tasks to test: pay now, find best card, read fuel QR flow
2
Open items needing product decisions first
Ready to test
- Does "Best Card to use" reduce the time to decide, measurably, in a moderated task?
- Is the grace-period gauge understood without a legend the first time it's seen?
- Does the KYC encryption line reduce drop-off at that step?
Needs a product call first
- Card customization (Philip's request) — scope and pricing model undecided
- Marketplace "Compare" logic — needs real partner pricing data before it can ship, not just UI
Credence — UX Case Study
Concept → Empathize → Define → Ideate → Prototype → Test → Delivery