Debit card transactions look simple in your mobile app, but the reality underneath spans multiple systems with different clocks and owners. The goal for this demo was to make that invisible choreography visible. I wanted a walkthrough that product managers, analysts, and junior engineers could experience together—no mainframe access required.
Success Criteria from the PRD
- • Join authorization and memo feeds into a unified transaction event schema.
- • Enrich each event with merchant directory attributes when available.
- • Surface latency and enrichment metrics for stakeholders.
- • Deliver an API payload and customer UI contrast that sells the value of the enrichment step.
A guided flyover of the data sources
The app opens with three simple counters: authorization feed, memo feed, merchant directory. Those numbers prime viewers to think about the data they have—and the data they might be missing. Each card references the actual JavaScript dataset that powers the demo, so workshop facilitators can swap in their own records for private trainings.
Sample records included
- • Auth: Network reference IDs, amounts, raw POS descriptors.
- • Memo: Posting dates, settlement channels, reconciliation timestamps.
- • Merchant: Names, categories, addresses, friendly logos for immediate recognition.
Turning two partial truths into one source of truth
Authorization systems speak in milliseconds. Memo systems prefer batch windows. The UI highlights that separation by presenting both tables side-by-side, then animating the unified event objects underneath. Each row lists timestamps for the three lifecycle stages plus live latency calculations so teams can talk about performance instead of guesswork.
One of the four sample transactions intentionally fails enrichment. That “pending” badge is there on purpose—it gives analysts the perfect opening to discuss directory coverage, fallback logic, and when to trigger customer messaging.
Metrics that resonate with operations and product
I surfaced the three KPIs most teams debate: average auth → memo latency, average memo → enriched latency, and throughput. They’re calculated on the fly inside the browser so the numbers update instantly if you extend the dataset. Showing the math demystifies how Ops teams justify staffing and infrastructure investments.
Latency instrumentation
Every unified event stores both latency deltas for dashboards and alerts.
Schema clarity
I documented the event schema in the UI so product + engineering stay aligned.
API-first mindset
A copy-ready JSON payload demonstrates what downstream consumers receive.
Why the customer view matters
Most cardholders never see memo lines. They see merchant names, logos, phone numbers, and friendly categories. The dual-card comparison at the bottom of the app drives that point home. Pick a transaction from the dropdown, and you’ll watch the raw descriptor transform into a clean, enriched UI instantly.
This section has become my favorite boardroom tool. Show the unenriched card first, pause, then switch to the enriched version. Stakeholders feel the delta immediately—and that usually unlocks the budget conversation.
Run the live demo
Dive into the full experience, inspect the schema, and copy the API payload for your own experiments.
Launch the Debit Card ETL Demo →What you can repurpose
- Copy the dataset structure to prototype your own joins before touching production environments.
- Reuse the efficiency dashboard to teach operations teams how latency KPIs roll up.
- Embed the customer-view comparison inside onboarding decks for partner banks.
Building this demo forced me to zoom out of my usual AI workflows and reconnect with the classic payment fundamentals. If you ship products in fintech, you owe it to your stakeholders—and your customers—to make these flows legible. Start with this sandbox, tweak the datasets, and keep iterating.