UI Design / Fintech WeB App
Fintech · Internal Platform
Background
This project is an internal pricing platform built to bring order to retail-finance credit. The goal was to replace scattered spreadsheets and email sign-offs with one governed source of truth — where every FCA-regulated rate can be found, edited, scheduled and approved with a full audit trail.
Designed at Ant Technology Solutions for a UK retail-finance client. The client's identity, partner names, reference numbers and rates are anonymised and illustrative under NDA.
Working alongside the UX designers, I joined discovery with the people who live in this tool; credit admins, pricing managers and a compliance stakeholder.
Research & Planning
Two themes dominated and shaped every UI decision that followed: findability (reaching the right rate fast) and governance (making sure no rate goes live without a controlled, traceable approval).
Marketing & Design
I built the high-fidelity interface and an underlying design system in Figma — tokens for colour, type and spacing, and reusable components for the catalogue rows, status indicators, metric cards and rate tables, then prototyped the core flows for testing and stakeholder sign-off.
The Approach
The catalogue is deeply hierarchical: Retailer → Brand → Product → Variant. The old tool forced a page change at every level. The team re-architected it around a single file-tree, and I designed how it worked and felt — retailers, brands and products expand and collapse inline on one page, like a file explorer, and only a variant (the one level with an actual rate) opens its own page. I designed the interaction states and visual hierarchy that keep a dense, thousands-of-items tree easy to scan.
Rate Governance
To solve the compliance problem, I designed an approval gate where every rate change is reviewed before it goes live, and an effective-dated rate timeline grouped into Current, Future and Past — so admins can see today's live rate, anything approved and scheduled ahead, and the full history of superseded rates. A compliance headache became an audit-ready view at a glance.
Accessibility
In a regulated, numbers-heavy tool, clarity is non-negotiable. I designed to WCAG AA contrast, used tabular figures so every rate and count aligns, gave every control a visible focus state, and made status legible through colour and text together — never colour alone.
This is the heart of the concept. Instead of presenting every account detail at once, the redesigned experience groups information by intent: what I have, what changed, and what I can do next.
Business Problem & Solution
pricing across dozens of regulated partners lived in scattered spreadsheets and email approvals — slow, error-prone, and impossible to audit. The solution: one governed source of truth, where finding, editing, scheduling and approving a rate all happen in a single, controlled flow.
Built for Scale
With thousands of variants across dozens of partners, the screen could have become overwhelming. The file-tree, the rollup status summaries (e.g. "7 live · 1 draft · 1 pending") and a clear status colour system keep the whole catalogue scannable no matter how large it grows.
Measurable Improvements
Every rate change is now reviewed, effective-dated and logged — meaning the business can answer, at any moment, exactly what a rate is today, what it will be, what it was, and who approved each change.
Cadence is built on a Figma design system: colour, type and spacing tokens, and reusable components with documented states (hover, focus, empty, loading).
Short Summary
Typography stays restrained and hierarchical, with tabular figures everywhere numbers appear. At the centre sits a consistent status language — Live (green), Draft (blue), Pending (amber), Scheduled (indigo), Expired (grey) — applied the same way on every screen, so the system scales without ever feeling inconsistent.
Reaching and editing a rate went from multiple pages and breadcrumbs to a single expandable catalogue — an estimated [~60%] fewer navigation steps.
Improved User Experience
Moved primary money actions closer to the context where users need them.
Simplified Application Process
Improved readability for balances, alerts, and transaction details across mobile layouts.
Interactive Prototype
Created reusable patterns for cards, spending insights, savings goals, and security controls.
Final Thoughts
I didn't make a complex, regulated tool feel simpler by hiding the detail. I made it simpler by giving every screen and every status one clear job.
My Goal
To make a dense, regulated tool feel calm and controllable, so teams focus on decisions, not spreadsheets.
Thoughts
Atlas taught me that in regulated finance, trust is a design material as much as usability, every screen had to be auditable and safe, not just easy.
