Fintech · Frontend Engineering · Design-System Migration
Rebuilding Chargebacks911.com on a Real Component System
A ground-up rebuild of the public marketing site for Chargebacks911, a fintech platform that helps merchants, issuers, and payment providers prevent, fight, and recover from card disputes. The old site was a stack of one-off pages. This one is a Next.js 16 / React 19 application with a written, enforceable design system, a real component library, and dozens of bespoke, hand-animated product illustrations built from scratch in React.
The Component Library
More Than Hero Animations: a Full Redesign System
Beyond the interactive moments, the rebuild shipped a complete, reusable UI kit: a typographic scale, a button system, status badges, and card patterns that every new page is assembled from, in place of the old site's one-off clipart layouts.
Stop chargebacks before they happen
A dispute layer for the entire payments ecosystem
Prevention, intelligence, and recovery in one platform, built for the risk, compliance, and finance teams who carry dispute strategy.
Eleven Solution Pages, Rebuilt as Real Live Widgets
Every card below is an actual React 18 + TypeScript + Tailwind app, embedded live, not a screenshot. Hover a corner to bring it forward.
A Standalone Product
Meridian: a Full Dispute-Ops Dashboard, Built From Scratch
Beyond rebuilding the eleven solution pages as live widgets, I decided to build one complete standalone product for this showcase: a dispute-operations dashboard with its own navigation, a live recovery trend, and a working case queue. It's deliberately its own product ("Meridian"), an original design system rather than a copy of the client's live tool, so it shows the product-design range without exposing a real customer-facing dashboard.
Live build · original product design ("Meridian"), fictional data
01 · The Company
The Dispute Layer for the Entire Payments Ecosystem
Chargebacks911® is the original chargeback management company: technology and expertise that resolves disputes for merchants worldwide, across three pillars: Prevention (stopping disputes before they're filed), Intelligence (the data and reason-code analysis behind why disputes happen), and Recovery (representment and revenue recovery on invalid chargebacks), spanning merchants, acquirers, issuers, and payment facilitators.
Figures throughout this case study are illustrative placeholders, not the company's real reported metrics.
Prevention
Stopping disputes before they're ever filed.
Intelligence
The data and reason-code analysis behind why disputes happen.
Recovery
Representment and revenue recovery on invalid chargebacks.
Why a Rebuild
A Fintech Site That Has to Look as Trustworthy as the Product It's Selling
This is a payments-industry SaaS product: the audience is risk officers, compliance teams, and finance leads at merchants and issuers. The site's job is to make a fairly abstract product (fraud/dispute data pipelines, card-network integrations, an expert-services layer) feel concrete and provable. The real internal dashboard is a live customer-facing product, so it's out of scope here, and the confidential VAMP/Compliance program pages live in a separate case study entirely.
Every solution page therefore earns its own custom, illustrated "proof" moment instead of reusing one template: an animated chargeback-decline chart for Prevention, a live call simulation for Data-Based Deflection, a signal console for Intelligence, a case-file lab for Recovery. None of it is stock imagery, all of it is hand-built React.
Prevention, Intelligence, Recovery: one dispute layer spanning merchants, acquirers, issuers, and payment facilitators.
02 · Process
A Written Design Law, Enforced Collaboratively With an AI Agent
Rather than a static Figma-to-code handoff, this project ran on a written, machine-readable design law (docs/design-system.md + styles/tokens.css) that the developer authored and owned. An AI coding agent (Claude Code) handled the organizational heavy lifting of applying it: inventory the whole codebase against the rules, fix everything with exactly one correct answer automatically, then surface every genuine judgment call back to the developer one at a time with a recommendation attached. The developer made every real decision; the agent did the mechanical work at scale and kept the audit trail. Nothing was silently "cleaned up."
Tier 1 · Mechanical
~150+ Token Violations Fixed With Zero Questions Asked
Anything the design law defined unambiguously got corrected automatically and cascaded from the shared component: button radius (all buttons to 3px, oversized glass CTAs to 6px), the "arrow law" (buttons point right, only two carve-outs: trend arrows and carousel chevrons keep their own direction because flattening them would destroy their meaning), gradient-fill headline text removed sitewide, every em dash in rendered copy replaced, and six rounds of raw-hex-to-token sweeps (brand red across 27 files, grayscale across 17, near-black surfaces unified across 11).
docs/design-system.md
## 7. Arrow lawButtons: arrows point right only, and are optional.Two carve-outs exist, and neither is ever "corrected" to point right:- Trend arrows on stats keep their diagonal. A diagonal-up arrow means growth; flattening it to a right arrow destroys the meaning.- CarouselNav prev/next chevrons keep their left/right direction. Prev points left, next points right,Excerpted from the project's real design law: two documented exceptions, not a loophole.
| Question | Ruling |
|---|---|
Two near-identical near-blacks (#0e0e11 vs #0A0C10) used for different roles |
Unify onto bg-surface-dark across 9 files, overriding the agent's own recommendation to park it |
13 files hand-roll frosted glass duplicating GlassPill |
Leave as-is, not extracted into a shared component |
| Remaining raw-hex tail, ~24 instances, no exact token match | Guessed reasonable tokens anyway rather than leaving it; one new token (surface-dark-2) added |
PrimaryButton arrow drawn at 45°: intentional "opens externally" affordance? |
No exception. Arrow law fix stands unconditionally |
Excerpted from docs/DECISIONS.md, the project's real audit trail: 15 rulings across two rounds.
Tier 2 · Judgment Calls
One Question at a Time, Always With a Recommendation Attached
Anything the design law didn't spell out, or anything that looked intentional rather than accidental, got escalated as a numbered question with the agent's own recommendation attached. The developer could accept, override, or park each one. "Parking" is always safe: the element stays exactly as it looks, logged for a later look, never silently normalized.
Flair Registry
The System Standardizes the Core. It Doesn't Flatten the One-of-a-Kind Moments
A handful of bespoke, high-fidelity illustrations are explicitly protected from normalization: the homepage dashboard preview, the Recovery page's representment-steps animation, and the canvas-driven "Unified Approach" background (built from an external design handoff explicitly marked "do not re-tune"). Each is catalogued in docs/FLAIR-REGISTRY.md with exactly which rules it's allowed to bend and why, rather than silently exempted.
03 · What Got Built
Every Solution Page Earns Its Own Hand-Built Illustration
The pieces below are the actual bespoke React components shipped on the internal solution pages, recreated here in the dark palette they were originally designed in. The live dashboard product and the VAMP/Compliance program page are intentionally excluded from this case study.
Flagship Build · Homepage
Industries: a Live Showcase Row, Built End to End
Nine real, photographed verticals (Digital Goods, Travel, Event Ticketing, Crypto, Dating, Issuers, Memberships, Health & Beauty, Gift Cards) in a horizontally-scrolling row that advances one card at a time on an infinite loop, then eases back to the start. Chevron controls step through it manually, and the whole thing holds still for anyone who prefers reduced motion.
Live build · auto-cycling showcase row
Live build · Recharts + Motion, custom animated bar shape
/solutions/prevention
Stop Chargebacks Before They Happen
A Recharts ComposedChart with its default bar animation switched off (isAnimationActive="false") and replaced by a custom shape: a motion.rect that grows in on its own staggered delay per bar. That hand-off is what lets the chart respect prefers-reduced-motion uniformly with the rest of the page, instead of relying on Recharts' separate, harder-to-gate animation API.
ReferenceLine marks the month prevention "switches on": bars before it are brand red (high chargeback volume), the line's month is amber, everything after fades to teal as volume declines. Color itself carries the before/after story, no legend needed.
/solutions/prevention/data-based-deflection
Resolve Disputes With Information, Not Refunds
A live "cardholder calls the bank" simulation: a chat bubble raising a disputed charge, an enriched transaction-data panel streaming in row by row, then a resolution banner. This is one of several hero mockups that shipped dark first, flipped to a white card during a later design pass, and is restored here to its original dark treatment per the developer's direction.
Dark version shipped first; flipped to a white card in a later "Wednesday Updates" pass and restored here per developer direction.
Live build · Motion staggered timeline, restored dark palette
Merchant descriptor · order details · delivery confirmation · device match
Live build · interval-cycled signal state, restored dark palette, all 3 route variants
/solutions/intelligence · /ert · /isd
Understand Your Chargebacks. Then Stop Them.
The Intelligence hero rotates through live-feeling signal alerts on an interval; its two child pages (ERT, ISD) share one component with a kind prop, each rendering a different "moment": ISD translates a raw reason code into its true root cause, ERT shows a threat-monitor queue.
The ERT page also ships a genuinely functional notification browser, not a mockup: filterable cards, a focus-trapped modal, a "mark as resolved" flow that persists resolved IDs to localStorage and animates a green pulse before closing.
/solutions/recovery
Recover Revenue From Invalid Chargebacks
RecoveryCaseLab pairs a clickable case queue with an AnimatePresence detail panel: true source, an animated evidence-strength bar, an evidence checklist, and a four-stage pipeline. Below the hero, a fully bespoke, protected-flair illustration walks four casework stages connected by a hand-tuned SVG "spine" that a glowing dot travels along, triggered once by an IntersectionObserver at 25% visibility.
Simplified representation of RepresentmentSteps.tsx's four-stage flow — the real component's hand-tuned SVG spine and traveling glow dot are protected flair, not reproduced here.
Live build · clickable queue + AnimatePresence detail panel
Live build · AnimatePresence cross-fade cycle, restored dark palette
/solutions/prevention/refund-based-resolution
Prevent Chargebacks With Early Intervention
Cycles through four real pre-chargeback alert sources (Verifi CDRN, Ethoca Alerts, Visa RDR, Cb911 Alerts) with an AnimatePresence cross-fade, closing on a refund-issued banner. Same dark-to-white-to-restored-dark history as the Deflection hero, flipped in the same commit.
/solutions/recovery/roi-calculator · /solutions/prevention/prevention-calculator
Two Real Financial Models, Not Lead-Gen Decoration
Both calculators run genuine math, not a static form, on the live site: the ROI Calculator's engine scores conservative/likely/optimistic recovery scenarios from log-scaled sliders and a progressive, branching question flow, then gates the full report behind a validated work-email capture. The Prevention Calculator models diminishing returns when multiple prevention products stack, with a dependency graph between products and a region toggle reflecting Visa vs. Mastercard tools performing differently across US/EU card mixes.
Live build · UI showcase only, explicitly not wired to real figures
Live build · canvas reads live getBoundingClientRect() each frame
Homepage · Unified Platform
A Shared Canvas That Reads Its Own DOM to Stay Correct Across Resizes
Instead of hardcoding coordinates, the canvas layer reads each connector's live getBoundingClientRect() every frame to place its traveling "signal" balls, so the physics never drifts out of alignment on reflow. Each ball has independent speed, size, alpha, and a sinusoidal glow pulse, with edge fade over the last 12% of its travel. Device-pixel-ratio canvas sizing is capped at 2x, and frame delta-time is clamped to 50ms so a throttled background tab doesn't cause the animation to jump on return.
Responsive by Construction
Built Mobile-First, Never Just Shrunk Down
Every widget, the dashboard, and each page reflow to a real mobile layout of their own. Scroll-scrubbed sections detect the viewport and swap to static stacks, the parallax row degrades to a native scroller, and multi-column grids fold down cleanly, one breakpoint at a time.
One component set, from a four-column desktop grid down to a single stacked column.
04 · Stack
Bleeding-Edge on Purpose
Next.js 16 and React 19 both shipped breaking changes from what most tooling (and most AI training data) still assumes; the live project's own AGENTS.md flags this explicitly so any agent touching the repo reads the vendored docs before writing Next.js code, rather than pattern-matching stale APIs.
By the Numbers
What Actually Shipped
src/The Result
A rebuilt marketing site that finally looks as trustworthy as the fraud-prevention product it's selling: one written design law instead of tribal knowledge, a real React component library replacing an aging PHP/WordPress site stitched together from clipart and stock elements, and dozens of hand-built product illustrations in place of that stock imagery. The migration itself became a collaborative case study in its own right: an AI agent doing the mechanical, unambiguous cleanup at scale while every genuine judgment call still landed on the developer's desk, logged and attached to a recommendation, never silently decided for them.
Review the full example page