Fintech Platform
Whites Group
WhitesPay App, Stack Banking & Website Design
Overview
A full-suite fintech engagement: two mobile apps, a web platform and a marketing site.
WhitesPay (P2P currency exchange and payments), Stack business banking (cash flow with ML) and the marketing site — wireframes to high-fidelity.
Role
Lead UX/UI Designer
Deliverables
Mobile Apps, Web Platform, Marketing Site
Duration
12 months
Tools
Sketch, InVision, FigJam
Team
PM, 2 Engineers, Designer, UX Researcher
Impact
3
Digital Products Designed
13+
Desktop Wireframe Iterations
2
Mobile Apps (iOS)
FCA
Regulated Platform
01 — WhitesPay Mobile App
Send, exchange and request money — globally
Easy Exchange
Swipe to change currency at the live rate, one confirm.
Wallet & History
Multi-currency balances with grouped history and quick actions.
Invoice Flow
Send, summarise, confirm and receipt — in one dark card UI.
02 — App Screen Flows
End-to-end user journeys, fully designed
Invoice payment, wallet selection, pay invoice, and notification flows
Wallet, Easy Exchange, contacts directory, and card management screens
Invoice detail, choose invoice amount, history, confirm invoice, and numeric entry flows
03 — Website UX & Wireframing
13+ desktop iterations before a single pixel was coloured
Structured iteration
Lettered rounds refined hero, USPs, services and CTAs.
Multi-page coverage
Home, About, Contact, FAQ, Fund and Affiliates wireframed.
Annotated rationale
Notes covering navigation, disclosure, trust and footer.
04 — Marketing Website
Wireframe to visual — a bold fintech presence
Hero with live rate calculator
A full-bleed photography hero with an embedded currency quote tool — users enter a send amount and instantly see how much their beneficiary receives, with a prominent "Get Started" CTA.
Trust & conversion architecture
A Trustpilot review carousel, FCA compliance badge, teal brand CTA block, and a structured multi-column footer — all designed to convert cautious financial service customers.
05 — Desktop Trading Platform
Desktop trading platform wireframes
The WhitesPay Pro desktop platform was designed for FX traders, covering Trade 1–3, Beneficiaries, History, and Settings within a structured sidebar-driven layout.
Admin area with permission-based access
3-step trade flow with live rate selection
Beneficiary management and company profiles
Full transaction history with repeat functionality
06 — Stack Business Banking App
Let's make business banking simple
Wallet overview, projected cash flow summary, January payment detail, and monthly spend breakdown by category
Wallet overview
Corporate balance and quick actions over a cityscape.
Projected cash flow
Money Time Machine toggles real and future projections.
Payments breakdown
Payments In paired with Debts Out, for instant clarity.
Summary
Overview
A fintech redesign spanning WhitesPay, the website, trading and Stack banking.
Challenge
Four products ran on inconsistent patterns with little cross-platform coherence.
Solution
One design system, a rebuilt app, a new trading platform and Stack — up 52% retention.
Key Results
07 — User Testing
Fintech confidence testing — validating trust, clarity, and transaction security
Freelancers, SMEs and international workers judged trust, rate clarity and transfer security.
High-stakes transaction flow testing
A live £500 transfer to Spain captured hesitation and anxiety points.
Wireframe comprehension reviews
13+ rounds reviewed by 3–4 users in 30-second tests.
Stack business banking concept testing
SMEs tested the cash-flow toggle; 'today' needed marking.
Key Outcomes
52%
retention gain — trust and clarity cited
Exchange rate
needed a 'locked rate' step before confirming
Fee display
moved to the exchange screen; late fees caused 28% drop-off
"Today" marker
added — 80% couldn't read the current date
Invoice flow
gained a summary-before-send step
Methodology
Design System
Whites Group — unified fintech design system
A cohesive system spanning WhitesPay, Stack, and the marketing website — ensuring consistent interaction patterns, trust signals, and brand recognition across all three products.
Colour Palette
WhitesPay Teal
#00B2A9
Primary brand, CTAs, active nav, balance display accents
App Dark
#1A1A2A
Mobile app background, full-bleed screens
Card Surface
#242436
App card backgrounds, module surfaces, wallet panels
Stack Blue
#1E3A5F
Stack business banking brand colour, desktop platform nav
Positive Green
#00C853
Successful transfers, cash-in indicators, positive delta
Alert Red
#FF3D00
Failed transactions, negative balance, error states
Neutral Grey
#9E9E9E
Inactive icons, secondary labels, placeholder text
Off White
#F8F9FA
Website backgrounds, marketing page card surfaces
Typography Scale
40px / 700w
Balance Display
Wallet balance, total portfolio value — most prominent number in the app
22px / 600w
Screen Title
Screen headings (Wallet, Easy Exchange, Invoice)
16px / 500w
Transaction Label
Transaction names, recipient identifiers, exchange amounts
14px / 400w
Body
Descriptions, T&C text, help copy, invoice details
13px / 500w
Mono Figures
Exchange rates, currency amounts, trade confirmation values
Core Components
Wallet Balance Card
Multi-currency balance with five quick actions.
Currency Exchange Slider
Swipe-to-confirm exchange with live rate and one CTA.
Transaction Row
Icon, counterparty, date and amount, grouped by recency.
Invoice Flow Step
Multi-step dark card flow with a progress step indicator at the top.
Rate Quote Widget
Live destination calculation — the landing page's main driver.
Cash Flow Chart (Stack)
Projected vs actual cash flow, with a real/future toggle.
"Chris made complex fintech feel simple — engagement has improved dramatically."
James Patel
Head of Digital, Whites Group