Case studiesFintech

Fintech · Human-AI interaction · Mobile banking

Clearcharge

A card dispute flow where the AI explains first, and only files what the customer confirms.

Type
Self-initiated concept
My role
Solo: heuristic audit, Human-AI interaction design, UI
Platform
Mobile banking app, debit card
Methods
Heuristic audit, regulatory requirements mapping, Human-AI guidelines, decision log
Clearcharge key visual: the charge explanation and dispute status screens on a deep green background, with floating cards

Concept projectI didn't test this with customers. The audit is based on common patterns in today's dispute flows, the timelines come from the regulation itself, and the AI behavior follows published Human-AI interaction guidelines (sources at the end). Merchants, amounts and the bank in the screens are fictional. This is a design study, not legal advice.

Overview

Long story short

Context
When people see a charge they don't understand, the bank app usually offers one path: "Report a problem." What follows is a form built around the bank's process, not the customer's question.
Problem
Two failures sit on either side of one button. Customers dispute legitimate charges because the merchant name on the statement is unrecognizable. And customers with a real problem fill in jargon-heavy forms with no idea what happens next, or when.
My role
  • Ran a heuristic audit of a typical dispute flow and mapped the regulatory timelines into product requirements.
  • Designed the AI's behavior using published Human-AI interaction guidelines: what it explains, what it drafts, and what it never decides.
  • Designed the flow, wrote the decision log, failure modes and validation plan.
Solution
Explain before dispute: the assistant identifies the merchant with visible evidence. If something's wrong, a five-way triage routes it correctly, the AI drafts the dispute in the customer's words, and the status screen turns the law's deadlines into dated promises.
Deliverables
Heuristic audit, rules-to-UX map, AI behavior spec, decision log, 4 high-fidelity screens, failure-mode handling, validation plan and metrics.

Heuristic audit

What a typical dispute flow gets wrong

I reviewed the common shape of in-app dispute flows against Nielsen's usability heuristics. The patterns below are generalized rather than tied to one bank, and each one became a requirement.

Pattern todayHeuristic it breaksEffect on the customerRequirement for Clearcharge
Raw merchant descriptor ("SQ *BLUESTN RSTR 8442") with no explanationMatch between system and the real worldCan't tell if it's theirs, so they dispute to be safeExplain the charge first, with evidence
One "Report a problem" path for fraud and billing errors alikeError preventionCard frozen for a wrong-amount issue; they lose a working card for nothingTriage first; only fraud freezes the card
Form fields named after internal processes ("reason code", "chargeback")Recognition rather than recallThey guess the category, which can route the claim wronglyChoices written as what happened to them
Blank free-text box: "Describe the issue"Help users recognize, diagnose, recoverVague statements that need follow-upAI drafts a specific statement from their answers
"We'll be in touch" after submittingVisibility of system statusAnxiety, repeat calls to supportA dated timeline, including temporary credit

Rules as UX

The law already sets the timeline, so show it

For debit cards, error resolution in the US follows Regulation E1. Its deadlines are promises the bank already has to keep. Most flows hide them. I treated each one as a piece of interface.

What the rule says (simplified)What it means for design
Customers report an error within 60 days of the statement it first appeared onShow "You can report this until…" on older transactions, so people don't assume it's too late or wait too long
The bank investigates within 10 business daysA specific date for a first answer, not "soon"
If it needs longer, it gives provisional credit within those 10 business days, and can take up to 45 days (90 for point-of-sale and some other transfers)A card at the top of the status screen: "You'll get $30.00 back as a temporary credit by Nov 18"
The bank reports its decision and explains it"We'll explain the reason either way", plus a final date the customer can hold us to

Simplified for design purposes; a real build would be reviewed by the bank's compliance team.

AI principles

What the assistant is allowed to do

I based the AI's behavior on Microsoft Research's Guidelines for Human-AI Interaction2, choosing the four that matter most when money and trust are involved.

G1

Make clear what the system can do

The assistant says "probably" and explains merchants. It never says a charge is or isn't fraud.

On screen: "What this charge probably is", with a "How we know" link.

G11

Make clear why the system did what it did

Each conclusion is backed by evidence the customer can check: earlier visits, card present, chip read.

On screen: three bullets of evidence and a source label.

G9

Support efficient correction

Anything the AI writes is editable before it's sent, and the customer's own words are the default.

On screen: an "Edit" link on the drafted statement; amounts read from the receipt are shown for checking.

G8

Support efficient dismissal

If the explanation solves it, one tap ends the flow. If it doesn't, the dispute path is never more than one tap away.

On screen: "I recognize it now" and "Something's wrong" as equal options.

Decision log

Three choices, and what I gave up

Decision 01

Should the AI's explanation come before the dispute, or instead of it?

Dispute first, AI help laterKeeps today's flow. But the customer has already decided before they see the explanation.
Explain first, both paths equalThe explanation appears on the transaction itself, and "Something's wrong" sits right beside "I recognize it."
AI decides whether a dispute is allowedWould cut unnecessary disputes, but takes away a legal right, and erodes trust the first time it's wrong.

WhyMost of the value is upstream: many confusing charges are resolved by knowing what they are. Equal buttons keep the explanation from becoming a gate.

Trade-off acceptedSome customers will dispute anyway. That's their right, and the triage makes those disputes better-formed.

Decision 02

How should customers describe the problem?

Free text, AI classifiesFeels natural, but misclassification silently changes what happens to their card.
Five plain choices, each stating its consequence"I didn't make this purchase · we'll freeze ••4417 and send a new card."
Bank reason codesAccurate for operations, but unreadable for customers.

WhyThe category decides big things (freezing a card, what evidence is needed), so the customer should choose it knowingly. Free text comes later, as the AI-drafted statement they can edit.

Trade-off acceptedFive options won't fit every case. Testing would show which "other" cases are common enough to need their own path.

Decision 03

What should the status screen lead with?

Case status label"Investigating" is accurate but doesn't answer the real question.
When the money comes back"You'll get $30.00 back as a temporary credit by Nov 18 while we finish."
Full process explainerComplete, but long, and read only by the people who need it least.

WhyFor most people, a dispute is about money they need. Leading with a date turns an open-ended wait into a promise.

Trade-off acceptedDates create accountability. If the bank misses one, the customer will notice, which is the point.

Close-up of the AI explanation card and the drafted dispute statement
Spotlight · AI that is easy to disagree withThe assistant hedges, shows its evidence, and drafts only from what the customer said.

Design

From "what is this?" to a dated promise

Charge explanation
1 · ExplainWhat the charge probably is, and how we know.
Triage
2 · TriageFive plain choices, each with its consequence.
Review drafted dispute
3 · ReviewThe AI's draft, in the customer's words.
Status
4 · TrackTemporary credit and final decision dates.

Closer look · The explanation

Confidence you can check

Charge explanation
A
The raw descriptor stays visibleCustomers can match it to their statement, so the explanation adds to what they see rather than replacing it.
B
"Probably", on purposeThe headline is hedged because the system can be wrong. Overconfident AI is worse than none in money matters.
C
Evidence the customer can verifyPrevious visits on specific dates, chip read, and a common reason for late posting.
D
Two equal ways forwardSame size, same weight. The assistant doesn't nudge toward dropping a claim.

Closer look · Draft and status

The AI writes; the customer signs off

Drafted dispute reviewDispute status
A
The math is done for themExpected $34.20, charged $64.20, disputing $30.00. Partial disputes keep the rest of the charge out of the claim.
B
First-person, specific, editableThe draft reads like the customer wrote it, which makes it easier to check and stronger as evidence.
C
Reassurance about the card"You can still use your card" answers the question people are afraid to ask.
D
Deadlines as dates"By Nov 18" and "no later than Feb 2" come from the regulation's timelines for a point-of-sale purchase.

Visual language

A look that does a job

Money needs calm. Deep forest green signals the bank and its promises; violet is reserved for anything the AI generated, so customers can always tell the system's words from facts and from their own.

Forest#0b3d2eBank, primary actions
Mint#0b6b45Money back, success
AI violet#5137c9AI-generated content only
Mist#f4f6f5Background
Amber#8a5300In progress
Ink#0e1a16Text

Typeface

Aa

Inter

Title 30Heading 17Body 14 · the default reading sizeCaption 12 · sources and timestamps

Amounts at 38px with tight tracking; monospace for raw merchant descriptors so they match the statement.

Components

✦What this charge probably isBased on merchant data + your history
InvestigatingAttachedWrong amount
SQ *BLUESTN RSTR 8442 NYRaw descriptor, kept visible
I recognize it nowSomething's wrongEqual weight, on purpose

AI failure modes

Designing for when the AI is wrong

An AI feature is only as good as its worst moment. These are the failures I planned for, and what the interface does in each.

It names the wrong merchant

Risk: customer drops a real fraud claim.

Behavior: explanation is always hedged and evidence-led; "Something's wrong" stays equal; fraud signals suppress the explanation entirely.

It can't identify the merchant

Risk: a confident-sounding guess.

Behavior: it says "We don't recognize this merchant" and goes straight to the choices. No guess beats a bad guess.

It misreads the receipt

Risk: the wrong amount is disputed.

Behavior: the read amount is shown for confirmation next to the photo; the customer can type over it.

The draft overstates the claim

Risk: the customer signs something untrue.

Behavior: the draft uses only facts the customer entered, and it can't be sent until they've viewed it.

Real fraud looks like a familiar merchant

Risk: reassurance where there should be alarm.

Behavior: risk signals (new device, unusual location) switch the screen to a security path instead of an explanation.

Validation plan

How I'd test it

QuestionMethodParticipantsWe'd keep going if…
Does the explanation help people recognize real charges?Unmoderated test: 8 charges, half familiar, with and without explanations40 banking customers, split into two groupsMore correct "that's mine" answers, with no rise in missed fraud
Do people over-trust the AI?Same test with a few planted wrong explanationsSame 40Most planted errors are challenged rather than accepted
Can people choose the right category?Scenario cards: pick the closest option15 participantsAt least 85% pick the intended path
Do people feel informed after filing?Moderated test of filing and status, then interview8 participants who have disputed beforeThey can say when they'll get money back without looking

Success metrics

What I'd measure after launch

North star

Share of "what is this?" moments resolved correctly, either recognized or properly disputed

It rewards clarity in both directions, not just fewer disputes.

Leading signals
  • Disputes later withdrawn as "I recognize it"
  • Disputes needing follow-up information
  • Support calls about dispute status
Guardrails
  • Fraud reported after an explanation was shown
  • Planted-error challenge rate in ongoing audits
  • Time from first view to filed dispute

Reflection

What this project taught me

Regulation is a design brief

Rules usually show up as fine print. Here, the regulation's deadlines became the most reassuring part of the interface.

An AI should be easy to disagree with

The test for every screen was: if the AI is wrong here, can the customer tell, and is it one tap to say so?

The metric shapes the AI

Measuring "fewer disputes" would reward talking people out of their rights. Picking the north star was an ethical choice.

Sources

References

  1. Consumer Financial Protection Bureau, Regulation E, 12 CFR 1005.11: Procedures for resolving errors.
  2. Amershi, S. et al., Guidelines for Human-AI Interaction, CHI 2019, Microsoft Research.
  3. Nielsen, J., 10 Usability Heuristics for User Interface Design, Nielsen Norman Group.
Next case studyGroundwork →

A research repository that stores insights instead of files, and checks what a team already knows before a new study.