FX Payments Hub

End-to-end design of a role-based B2B platform for international payments, approvals, and compliance

Fintech

Payments

B2B SaaS

Design System

Role-based Workflows

FX Payments Hub is a B2B web application designed for finance teams to create, approve, and track international payments with confidence. It balances surface simplicity with the complexity required for approvals, compliance checks, and auditability.

In regulated environments, users don’t just need a nice UI. They need clarity, predictable behaviour, and a single source of truth across dashboards, lists, details, and audit logs.

View live product

Live, simulated product built to demonstrate end-to-end UX, role-based workflows, and system design.
Data resets automatically and is for demonstration purposes only.

Overview

What makes it work

Finance teams managing cross-border payments often need to work fast, but cannot sacrifice control. FX Payments Hub explores how complex international payment workflows can be designed to feel clear, trustworthy, and auditable. The platform supports:

Multi-currency payments

Send and receive across borders with transparent FX rates and fee breakdowns.

Approval workflows

Maker-checker model with clear decision panels and mandatory audit trails for every action.

Compliance checkpoints

Automated checks built into the payment flow, not bolted on as an afterthought.

Status integrity

One source of truth across dashboards, lists, details, and audit logs. Always consistent.

Roles

Each role sees the same payment truth

The platform is built around explicit role boundaries. Finance teams work within clear permissions, with each role seeing the same data but with different emphasis and authority.

Finance Analyst

Creates payments, manages beneficiaries, and submits for approval. The maker in the workflow.

Approver

Reviews submissions, approves or rejects with accountability. Every decision is logged.

Finance Manager

Oversees activity, configures settings, monitors compliance. The admin view of the system.

System Compliance

Runs automated checks and maintains the audit log. Silent but essential.

Process

Clear steps, transparent costs

Payment creation is broken into logical steps that reduce error and support mental validation. FX rates and fees are never hidden.

Beneficiary selection

Mid-market rate, margin, and fees are shown separately. Optional rate locking with a clear time limit.

Review and confirm

Final validation before submission. Users see the total cost and can step back if needed.

Audit

Every action leaves a trace

The audit trail is not hidden away. It lives at the heart of every payment, showing who did what, when, and why. No surprises. No gaps.

Trust

Chronological record of all actions

Each entry is timestamped and attributed. The sequence is clear. The responsibility is clear.

Workflows

Four journeys, one platform

The platform supports the core workflows that finance teams need. Each one is linear but reversible. Users can step back without losing their place.

Create payments

Build a payment from beneficiary through to confirmation. Five clear steps, no shortcuts.

Review approvals

See pending submissions in a dedicated decision panel. Approve or reject with full context preserved.

The “New Payment” journey is linear but reversible. Users can step back without losing context.

Manage beneficiaries

Add, edit, or remove recipients. The foundation for every payment you send.

Monitor activity

Track payments in real time. See balances, trends, and recent activity at a glance.

Built to production depth, tested for the real world

The platform supports the core workflows that finance teams need. Each one is linear but reversible. Users can step back without losing their place.

7

Payment statuses

Draft, Submitted, Pending, Processing, Completed, Failed, Cancelled.

5

Payment creation steps

Beneficiary, details, quote, review, confirmation.

Interface

Where clarity meets action

Payments list and approvals panel designed for speed and accountability.

Find what you need

Strong status indicators. Clear filtering. Fast decisions. No confusion.

Scanning

Filtering

Details

Decide with confidence

The payments list is built for quick navigation. Status tags are visible at a glance. Search and filters work without friction.

Real-time

Consistent

Predictable

Watch it move

After you navigate away and return, the list remembers where you were. No surprises. No re-learning.

Accountable

Context-rich

Deliberate

Payment list view

Optimised for scanning and action. Status always visible. Details one click away.

Filtering

Approval decision panel

Context preserved from submission. Clear action hierarchy. Every decision is logged and auditable.

Workflow

Approval

Audit

Empty state handling

No results? The interface stays clear. Navigation remains intact. Users know where they are.

States

Feedback

Validation

Built to work, not just to look good

The prototype was built to handle real workflows. Payments were created, approved, rejected, duplicated, and edited. Edge cases like drafts, failed transactions, and missing data were stress-tested.

Tested against reality

The prototype was built to handle real workflows. Payments were created, approved, rejected, duplicated, and edited. Edge cases like drafts, failed transactions, and missing data were stress-tested.

Tested against reality

The prototype was built to handle real workflows. Payments were created, approved, rejected, duplicated, and edited. Edge cases like drafts, failed transactions, and missing data were stress-tested.

Problems found and fixed

Status mismatches between views were caught and resolved. List reordering, date picker interactions, layout inconsistencies, and currency formatting were all corrected before the final design.

Problems found and fixed

Status mismatches between views were caught and resolved. List reordering, date picker interactions, layout inconsistencies, and currency formatting were all corrected before the final design.

What this proves

FX Payments Hub is not a concept. It is a working product that handles the complexity finance teams face every day, with predictable behaviour and no hidden surprises.

What this proves

FX Payments Hub is not a concept. It is a working product that handles the complexity finance teams face every day, with predictable behaviour and no hidden surprises.

Result

Complexity made simple, trust made visible

FX Payments Hub proves that financial software does not have to choose between power and clarity. The platform handles approval workflows, compliance checkpoints, and audit trails with the same care it gives to currency conversion and fee transparency. This is what happens when design thinking meets regulated environments.

Design System Foundations

Components that work the same way, everywhere

The design system was built in parallel with the product, not after. Every button, form field, table, and alert follows the same logic. Status tags behave consistently. Approval panels preserve context. Audit timelines update without confusion. This foundation means the platform scales without losing clarity.

See it in action

The live product is ready. Explore the full platform, test the workflows, and see how clarity and control work together.

View live product

Next Case STudy

Platinum Pension Administration Platform

View Project

FX Payments Hub

End-to-end design of a role-based B2B platform for international payments, approvals, and compliance

What makes it work

What makes it work

Each role sees the same payment truth

Each role sees the same payment truth

Clear steps, transparent costs

Beneficiary selection

Review and confirm

Every action leaves a trace

Every action leaves a trace

Chronological record of all actions

Four journeys, one platform

Four journeys, one platform

Built to production depth, tested for the real world

7

5

Where clarity meets action

Where clarity meets action

Built to work, not just to look good

Built to work, not just to look good

Tested against reality

Tested against reality

Problems found and fixed

Problems found and fixed

What this proves

What this proves

Complexity made simple, trust made visible

Complexity made simple, trust made visible

Components that work the same way, everywhere

See it in action

See it in action

Let’s talk about design

Let’s talk about design