McKinley Bank

This design challenge came from a session where I asked Claude to think of something I could build that was both dense and related to financial software. This is the result.

The demo is a Batch Payment Review dashboard for a fictional McKinley Bank. The prototype is a single screen; an operations analyst (or a treasurer) opens a batch of 847 payments, finds the 27 that are broken, and releases the rest before the wire cutoff. It's especially challenging because the analyst is looking at multiple payments at once, under time pressure. I had no idea what currency mix, value dates, or FX meant at first. To successfully design around this problem however, I had to truly immerse myself and deconstruct what was actually going on.

In simple terms: someone at a company needs to pay a lot of people at once. Payroll, vendor invoices, a few wires. They upload a file. The bank (McKinley) validates it. Most of it's fine. Some of it isn't (e.g. a duplicate of last week's payment, an FX quote that expires while you're looking at it, an amount above your approval limit). The analyst has to triage each broken row, fix it or remove it, and release the clean ones before the wire cutoff. Then someone else checks off and confirms the release. That's the demo.

I used Claude Code to build three personas into it (Maker, Checker, Approver), each with their own controls.

The design system is built on Radix primitives and TanStack Table, with tokens defined as both CSS variables and a JSON file ready for Style Dictionary. A second route at /system documents every component with its variants and states.