Case study · Syndicated loan agency platform - fintech UX/UI redesign
Billion-dollar loans, one calm desk.
We redesigned the agency platform banks use to run syndicated loans: drawdowns, repricing, fees, payments and maker-checker approvals. We started with a UX audit of the live product and finished with a new design system and developer-ready frontend.
AGENCY DESK · CLIENT, BANK AND BORROWER NAMES ANONYMISED
{01} - THE CHALLENGE
Powerful engine. Painful cockpit.
Agency teams administer syndicated loans worth hundreds of millions on behalf of many lenders. The platform could do the work, but daily use was slow and stressful, and in lending mistakes cost real money.
01Everything urgent, nothing prioritisedThe home screen mixed KPI tiles, five tabs and a dozen filters. Agents had to hunt for what was overdue or waiting on them, and some of the numbers they saw every day were never acted on.
02Tables that hid the important partSmall type, truncated IDs and columns pushed off-screen. Every row carried the same Edit / Delete buttons, so the one action that mattered never stood out.
03Long requests, late surprisesA drawdown touches tranche, details, cashflows, pricing, eligibility, sellers and approval. Errors and eligibility issues often surfaced only at the end, after the work was done.
04Maker-checker frictionClaiming, returning and approving tasks meant jumping between deal pages, with notes and history scattered. It was hard to see who owned what.
BEFORE → AFTER
Same data, same rules, a very different day at work.
Home: from dashboard to deskFewer tiles, clearer tabs, overdue rows tinted and one primary action on every task.
Drawdowns: from cramped table to clear listFull IDs, right-aligned amounts, status badges and a single "Initiate drawdown" action.
{02} - OUR ROLE
From audit to shippable code.
We owned the experience end to end: diagnosing what was wrong, designing the new model and handing developers interactive, state-complete screens they could build from.
- 01UX audit of existing flows
- 02Maker-checker task model & IA
- 03Agency Desk & deal workspace UX
- 047-step request wizard
- 05UI design & interaction states
- 06Figtree-based design system & tokens
- 07Status badge system (42 lifecycle statuses)
- 08Interactive prototypes & frontend (React / Tailwind)
{03} - PROCESS
AUDIT → MODEL → DESIGN → SPECIFY
What we looked into, and why.
01Audit the live productWalked every core flow screen by screen (onboarding, deals, drawdowns, repricing, fees and payments) and logged usability issues against each one.WHYWe needed a shared, evidence-based list of what was broken before proposing anything new.
02Map the maker-checker lifecycleCharted how a request moves: raised → claimed → processed by a maker → checked → approved, returned or rejected, and who can act at each stage.WHYOwnership and handoffs were the real pain, so they became the backbone of the new task model.
03Design the queue firstStarted from the question every agent asks each morning: "What needs me today?" The answer became the Agency Desk.WHYFix the daily habit first, and every other screen gets used in a calmer way.
04Prototype the riskiest flowBuilt the asset purchase & disbursement (drawdown) request as an interactive 7-step prototype, including every validation and edge state.WHYDrawdowns move the most money and generate the most errors, so they had to be right.
05Specify every stateDesigned empty, error, loading, locked, claimed / unclaimed and returned states for each component, with 120+ screen variants in total.WHYDevelopers built from real states, not guesses, so fewer "what happens if…" questions reached QA.
DRAWDOWN REQUEST · 7-STEP WIZARD
A request that used to be one long form now guides, checks and explains as you go.
{04} - DECISIONS & TRADE-OFFS
What we changed, and what it cost.
DECISION 01One queue across all dealsThe Agency Desk shows everything that needs action today, across every deal: All, My tasks, To process, To approve, Returned to me. Overdue rows are tinted so they surface first.TRADE-OFFLess deal-specific context on the home screen; the full deal workspace is one click away.
DECISION 02One clear action per rowEach task shows the single next step (Process, Approve, Set rate, Acknowledge) instead of generic View / Edit / Delete.TRADE-OFFButtons vary from row to row, so we kept their position, size and colour identical.
DECISION 03A guided 7-step wizardDrawdowns became a stepped flow: tranche, details, cashflow, pricing, eligibility, sellers, review. A live side panel shows progress, tranche headroom, eligibility and the indicative rate.TRADE-OFFMore steps than a single long form. Autosaved drafts and a review page with "Edit" on every step keep it fast.
DECISION 04Validate early, explain clearlyErrors appear next to the field and as a summary ("3 fields need attention"). Eligibility checks split hard blocks from informational flags.TRADE-OFFMany more states to design and build, all specified up front with developers.
DECISION 05Maker-checker in a side drawerClaim or release a task, read notes and history, then approve, reject or return to the maker, all without leaving the queue.TRADE-OFFThe drawer covers part of the table, so it expands to full screen and steps through tasks with next / previous.
DECISION 06Numbers you can scanAmounts right-aligned with consistent currency formatting, full IDs, and status badges with a fixed colour meaning across 42 lifecycle states.TRADE-OFFWider tables, handled with sticky actions and responsive column priority.
MAKER-CHECKER · TASK DRAWER
Claim, review and decide without losing your place.
Info, notes and history in one drawer. Ownership is always visible ("You claimed this task"), and Approve, Reject or Return to maker sit at the bottom, steps away from the queue.
DESIGN SYSTEM · STYLE GUIDE
Built for dense, high-stakes data.
Every value below is a named variable in Figma (primary/base, badge-green-text, space-16) and the same token in code.
COLOURA single confident blue for action, cool neutrals for dense data, and colour reserved for meaning: green for passed, red for overdue, orange for attention.
Primary#3B5FE0
primary/base
primary/base
Tint 3#D8DFF9
primary/tint-3
primary/tint-3
Tint 2#EBEFFC
primary/tint-2
primary/tint-2
Tint 1#F5F7FD
primary/tint-1
primary/tint-1
Brand#0051A5
color-bg-brand
color-bg-brand
Ink#12162B
ink/base
ink/base
Text secondary#414555
secondary-text
secondary-text
Icon#8793A1
icon-color
icon-color
Border#D7DBE0
border-default
border-default
Surface#F3F4F5
bg-secondary
bg-secondary
Success#1E9E6D
success/base
success/base
Success tint#D2ECE2
success/tint-1
success/tint-1
Error#E64E56
color-red-100
color-red-100
Error tint#FDEDEE
color-red-10
color-red-10
Warning text#B93815
badge-orange-text
badge-orange-text
TYPOGRAPHY · FIGTREEFigtree keeps long financial labels readable at 12-14px; tabular figures keep amounts aligned in tables.
Agency DeskDisplay xs / SemiBold
Figtree 600 · 24/32
Figtree 600 · 24/32
Select trancheText lg / SemiBold
Figtree 600 · 18/28
Figtree 600 · 18/28
Choose the tranche, buyer and pricing option.Text md / Regular
Figtree 400 · 16/24
Figtree 400 · 16/24
Process drawdown requestText sm / Medium
Figtree 500 · 14/20
Figtree 500 · 14/20
USD 10,000,000.00 · 24 Sep 2026Text sm / Regular
Figtree 400 · 14/20
Figtree 400 · 14/20
TRANCHE HEADROOMText xs / SemiBold
Figtree 600 · 12/18
Figtree 600 · 12/18
STATUS BADGES · 42 LIFECYCLE STATES, ONE COLOUR LOGIC
ActivePassedDraftPendingReturned
RevolverTerm financingOverdueInformational
ACTIONS
ProcessApproveContinue →Return to makerRejectExport
SPACING · 4-POINT GRID
4812162432
WIZARD STEPPER
✓Tranche✓Details✓Cashflow✓Pricing5Eligibility6Sellers7Review
{05} - OUTCOME
MEASURED OVER 6 MONTHS AFTER LAUNCH
Less hunting, more lending.
45%faster to raise a drawdown request
60%fewer requests returned to maker
120+screens & states delivered
200+live deals run on the new UI