All work
UI/UX Design

Northbank — Treasury Console Redesign

A dense treasury console rebuilt around one question every finance lead asks first: where is my money right now?

Download PDF
Northbank — Northbank — Treasury Console Redesign
ClientNorthbank
IndustryFintech / Business Banking
RoleProduct design partner
Duration11 weeks · Feb — Apr 2025
ServicesProduct discovery · UX architecture · UI design · Design system
TechnologyFigma · FigJam · Maze · React · TypeScript · Radix UI

The client challenge

Northbank's console had grown for four years without an owner. Finance teams managing 40+ accounts had to cross three screens to answer a single reconciliation question, and 6 in 10 new workspaces never completed a payment run in their first week. Support was absorbing the difference.

Research

We ran a two-week discovery embedded with Northbank's operations and support teams before touching a single screen.

  • 11 interviews with controllers, treasury analysts and agency bookkeepers
  • Competitive teardown of 6 platforms including two the client's customers used alongside Northbank
  • Session-replay review of 340 first-week workspaces to locate the exact drop-off point
  • Pain points: hidden account grouping, ambiguous pending states, approvals buried two levels deep

Strategy & Planning

We reorganised the product around three verbs — see, move, approve — and rebuilt the information architecture so each one owns a single surface.

  • Flattened a 4-level navigation tree to 3 primary destinations
  • New account-grouping model driven by how teams actually reconcile, not how the ledger stores data
  • Approval queue promoted from a settings sub-page to a first-class workspace
  • Content strategy: every pending state now names the actor, the amount and the next step

Design Process

Low-fidelity flows were tested on Maze in week four, iterated twice, then developed into a token-driven high-fidelity system.

  • 3 wireframe rounds, 2 unmoderated tests with 24 participants
  • Design system: 128 components, 5 density modes, dark-first with a compliant light theme
  • Typography scale on a 4pt grid; tabular figures across every numeric surface
  • Colour system tested for AA contrast at every state, including status pills and charts

Development Support

We paired with Northbank's in-house engineers through implementation so the built product matched the specification without a redesign round.

  • React + TypeScript component library published to their internal registry
  • Virtualised tables to keep 10,000-row ledgers scrolling at 60fps
  • Keyboard-first interaction model for power users, fully screen-reader labelled
  • Visual regression tests wired into their existing CI pipeline

Final Showcase

The console shipped in April 2025 across desktop, tablet and a focused mobile approvals experience.

  • Desktop: the full treasury console with density controls
  • Tablet: side-by-side balances and approvals
  • Mobile: approve, decline and comment — nothing else
Deliverables

What we shipped.

Everything handed over at the end of the engagement.

42 high-fidelity screens across 6 core flows
Northbank Console design system (128 components)
Accessibility and motion specification
Annotated hand-off files and Loom walkthroughs
Results

Measured outcomes.

Reported by the client after launch.

+214%

First-week activation

-37%

Bounce on the balances view

4.1 → 1.3 min

Time to first payment run

WCAG 2.2 AA

Audited and passing

We had budget for a facelift and got a genuinely different product. Activation more than tripled and our support queue is quieter than it has been in three years.
Marissa OkaforVP Product, Northbank
Gallery

Project gallery.

Selected screens and assets from the engagement.

Balances overview — desktop console
Balances overview — desktop console
Payment run flow and approval states
Payment run flow and approval states