Home

Next Project

Chapter • 03

The Engine

Orchestrating a multi-rail financial ecosystem into a single, fluid interface

My Role

Product Design Lead

Scope

Design Systems, Web, Back Office, B2B

Users

Internal Staff (CS, AML, Ops) & Business Clients

Status

Live & In-Progress

The Challenge

A bank is not just an app. Behind the mobile screen lies a massive operational machine: Customer Support (CS), Anti-Money Laundering (AML) teams, and Payment Operations, etc. These teams often suffer through outdated, clunky legacy software. Additionally, we needed a high-performance marketing web presence and a Business Banking portal

The Goal

To design the "Architecture of the Invisible." My goal was to treat our internal employees as valued users. We aimed to build bespoke, high-efficiency tools for the CS team while simultaneously developing a scalable visual language for our public-facing web properties. The challenge was balancing "Brand Magic" (for customers) with "Operational Speed" (for staff)

Resource Management

Implementing a custom, brand-heavy Design System for public touch points, and an established UI library for internal tools to accelerate development

Operational Velocity

Designing the CS Back Office tool with a "Zero-Mouse" philosophy, utilising keyboard shortcuts to reduce ticket resolution time

Unified Brand Presence

Ensuring the marketing website remains a pixel-perfect extension of the mobile app, maintained entirely in-house

ALLOCATING DESIGN DEBT

A common mistake in startups is trying to build one design system for everything. I recognised that our Consumer App and our Back Office had opposing goals

THE MIRROR PATTERN

Crypto is inherently intimidating for the average retail banking user. My core architectural constraint was to reduce cognitive load to zero

We designed the Crypto Dashboard using a 'Mirror Pattern'. We tried to replicate structure of the Fiat Dashboard. The visual hierarchy, the 'Send/Receive' buttons, the transaction histories and etc. share the exact same logic.

By reusing the user's existing mental model, we ensured that if a user knows how to send USD, they intuitively know how to send ETH

THE PUBLIC SYSTEM

For the App and Website, 'Brand' is king. We built a custom design system to ensure unique visual signatures

THE INTERNAL SYSTEM

For Back Office tools (AML, CS, etc.), 'Density' is king. Instead of wasting months building custom data tables, I mandated the use of an established UI library. This allowed engineers to move 10x faster, while I focused design effort on UX workflows rather than pixel-pushing components

DESIGNING FOR POWER USERS

I view our Customer Support agents as 'Corporate Athletes' - they require speed and efficiency, not aesthetic whitespace. To support this high-velocity workflow, I designed the CS Dashboard with a keyboard-first approach.

To reduce time-to-resolution, I implemented a contextual preview within the search function. Now, agents can see the immediate trigger for a request - such as a specific verification error - directly in the search results, eliminating the need to click into a detailed profile to identify the initial problem

ABSTRACTING THE INFRASTRUCTURE

Global money movement is fragmented by rail: SWIFT, SEPA, XBS and domestic. each with different fields and latencies. Instead of forcing users to navigate this complexity, I designed a Unified Send Flow. The interface dynamically adapts input fields based on destination, while the backend 'Smart Router' automatically selects the fastest and cheapest settlement path

KEYBOARD FIRST

We mapped the most common inquiries (Transaction Status, Card Block). I introduced global hotkeys that allow an agent to pull up a user’s full profile and transaction history in under 6 seconds without touching a mouse. In a high-volume call center, these micro-efficiencies compound into thousands of saved hours annually

WEB AS A FIRST-CLASS CITIZEN

Marketing sites often get outsourced or neglected. We kept ours in-house to ensure it serves as a true extension of the product

ABSTRACTING THE INFRASTRUCTURE

THE WEB PAGE

Though primarily presentational, the site is built on the same Custom Design System as the mobile app, with some necessary tweaks. This ensures that when a user moves from the 'Marketing Promise' (Web) to the 'Product Reality' (App), the visual language is unbroken

SCALING TO B2B

While the Consumer App focuses on simplicity, the Business Banking portal focuses on power. Currently in development, this platform adapts our 'One Hub' philosophy for corporate needs-handling complex flows like bulk payroll, tax management, and multi-user access permissions

ABSTRACTING THE INFRASTRUCTURE

FIRST CHAPTER

The Foundation

The Foundation

From zero to launch

The Foundation

From zero to launch

App Gallery

COPY EMAIL

INSTAGRAM

COPY EMAIL

INSTAGRAM