Fintech / Banking Dashboard Design

Banking that Reconciles
Itself

A banking and treasury platform built for finance teams who can't afford to discover problems at end of day. Meridian brings live reconciliation, corporate cards, and bill pay into one dashboard — designed around the CFO's fundamental need: knowing where the money actually is, right now.

Role Senior Product Designer
Timeline 2025
Category Fintech / SaaS
Type Landing Page & Dashboard
Visit Project Read Case Study
Meridian — Banking Platform
$2M+ Daily Volume UI
0 Platform Integrations
99.97% Uptime SLA
0 Product Squads

01 — The Problem

Your books closed yesterday.
Not today.

The Challenge

CFOs and finance teams live with constant uncertainty — bank balances that lag by hours, reconciliation that takes days, and integrations that break silently. Meridian needed a landing page that immediately communicated the proposition: your books are always closed, always accurate, always live.

Design challenge: make financial certainty feel like a feature, not just a claim.

The Design Problem

How do you make live financial data feel trustworthy rather than overwhelming? How do you communicate both depth and stability at the same time? And how does a product pass an IT security review before the user even reaches the feature list?

These questions shaped every design decision — from the monospace financial typography to the lime accent on positive actions.

Research Insights

INSIGHT 01
Trust Before Features
B2B fintech buyers evaluate trust before they evaluate features. The visual language had to signal stability, precision, and institutional credibility — before any feature copy was read.
INSIGHT 02
Numbers as Hero
Finance professionals respond to numerical confidence. Real-time counters, balance displays, and reconciliation scores in the hero communicated the product's core value proposition without a single marketing word.
INSIGHT 03
The Security Signal
In a post-FTX, post-SVB world, finance teams are hyper-sensitized to counterparty risk. Trust signals (SOC 2, bank-grade encryption, regulatory compliance) needed to appear before the feature list, not after.

02 — User Research

User Personas & Goals

Meridian's users range from Series B CFOs seeking real-time certainty, to VP Finance managing multi-entity consolidation, to startup Finance Managers needing automated spend controls — each with distinct evaluation criteria.

👤
Priya Mehta
Series B CFO, 38
Goals
  • Real-time visibility into cash position across all accounts
  • Automated reconciliation without manual exports
  • Clean audit trail for the board
Pain Points
  • 24-hour lag in bank statements
  • Monthly reconciliation taking 3 days of finance team time
🧑
James Okafor
VP Finance at Scale-up, 44
Goals
  • Multi-entity consolidation in one view
  • Custom approval workflows for large payments
  • FX exposure management at live rates
Pain Points
  • Managing 6 separate bank portals
  • No single source of truth for group cash
👩
Aisha Torres
Startup Finance Manager, 29
Goals
  • Automated bill pay with approval chains
  • Virtual cards for each team's budget
  • Real-time spend visibility per department
Pain Points
  • Chasing receipts across Slack
  • No budget-level spend controls for engineering

03 — Business Challenges

Core Challenges

CHALLENGE 01
📊
Communicating Real-Time Without Overwhelming

Real-time data is the product's core differentiator. But financial dashboards that try to show everything simultaneously create anxiety rather than confidence. Design needed to prioritize the right metrics at the right hierarchy.

CHALLENGE 02
🔒
Trust in a Skeptical Market

Post-FTX and post-SVB, finance teams are deeply skeptical of fintech promises. Security and compliance signals had to be woven into the visual design language, not buried in a footer.

CHALLENGE 03
🗺️
Feature Depth vs. Landing Page Clarity

Meridian has 14 integration categories, 4 product lines, and enterprise-grade configuration. A landing page that tried to communicate all of it would communicate none of it. Ruthless prioritization was required.

CHALLENGE 04
👥
Multi-Persona Entry Points

The CFO, the Finance Manager, and the Ops Lead evaluate the product differently. A single landing page had to speak to all three without fragmenting the narrative or creating choice paralysis.

04 — Secondary Research

Market Insights

FINDING 01
73%
Manual Reconciliation Prevalence

73% of SME and scale-up finance teams still perform manual bank reconciliation at least weekly — representing an average of 6 hours of finance staff time per cycle. This was the primary pain point Meridian needed to visually solve. (Source: Xero SME Finance Report 2024)

FINDING 02
4.2x
Real-Time Data Premium

Companies with real-time financial data access are 4.2x more likely to catch fraud within 24 hours and 3.8x more likely to identify cash flow issues before they become critical. The live data proposition was strategically central, not a feature. (Source: Deloitte CFO Survey 2024)

FINDING 03
87%
Security as Table Stakes

87% of B2B fintech buyers list security certification and regulatory compliance as non-negotiable before evaluation — not a decision factor, but a qualification gate. Meridian had to pass this gate in the above-the-fold experience. (Source: G2 Fintech Buyer Survey 2024)

05 — User Stories

What Users Need

As a... I want to... So that... Priority
CFO See real-time cash position across all accounts in one view I can make treasury decisions without waiting for end-of-day sweeps Critical
Finance Manager Get automated reconciliation that flags exceptions My team spends time on exceptions, not on confirmation High
VP Finance Multi-entity consolidation with currency conversion at live rates I can report group cash to the board without manual spreadsheet work High
Operations Lead Virtual cards with per-team budget limits and real-time spend tracking I can control spend without approving every transaction manually Medium
IT Security Lead See SOC 2 Type II, PCI DSS, and bank-grade encryption evidence before procurement I can qualify Meridian through our security review process Critical

06 — Competitor Analysis

Market Landscape

Feature Mercury Brex Ramp Airwallex Meridian
Real-Time Balances ✓ ✓ ~ ✓ ✓
Auto-Reconciliation ~ ~ ~ ~ ✓
Multi-Entity ✕ ✓ ✓ ✓ ✓
Virtual Cards ✓ ✓ ✓ ✓ ✓
Bill Pay ✓ ~ ✓ ✕ ✓
FX / Multi-Currency ~ ✓ ~ ✓ ✓
SOC 2 Type II ✓ ✓ ✓ ✓ ✓

07 — User Flow

The Journey

STEP 01
Live Dashboard Hero
The hero surface is a live-feel banking dashboard with real-time balance counters and reconciliation status — communicating the product's core promise before any headline is read.
STEP 02
The Problem Statement
A stark, numerical articulation of the reconciliation lag problem — "your books closed yesterday, not today" — frames the product as a solution to a specific, quantified pain.
STEP 03
Feature Architecture
Three product pillars (Treasury, Cards, Reconciliation) presented with interactive product UI — each demonstrating a distinct workflow rather than listing capabilities.
STEP 04
Trust Layer
SOC 2 Type II, PCI DSS Level 1, and bank-grade encryption signals, plus named institutional bank partners — qualifying Meridian through the security review gate before any feature evaluation.
STEP 05
Conversion
Demo request form with a "see live data, not a slide deck" framing — reducing the barrier of a traditional sales demo by positioning it as a product experience, not a sales call.

08 — Toolkits

Tools & Workflow

Tools and methods used throughout the Meridian design process — from competitive audit and CFO interview synthesis through to precision financial dashboard execution.

🎨FigmaUI Design
📊JetBrains MonoFinancial Typography
📐Claude CodeFrontend Build
🔒OWASP GuidelinesTrust Signals
🗺️FigJamIA & Flow

09 — Process

From CFO pain
to designed certainty.

Financial product design lives or dies on trust. Before any wireframe, the process started with understanding what breaks that trust — slow data, opaque fees, dashboards that show information but not insight. The process below reflects six phases, but honestly, the first three were mostly about unlearning assumptions about what a fintech dashboard should look like.

01
Competitive Audit
Analysed Mercury, Brex, Ramp, and Airwallex landing pages for visual hierarchy, trust signal placement, and feature prioritization. Identified reconciliation automation as the unclaimed differentiator.
02
CFO Interview Synthesis
Reviewed 12 published CFO interviews on fintech adoption barriers. Identified "I don't trust the numbers are real-time" as the universal anxiety across company sizes.
03
Dashboard Architecture
Designed the hero as a live dashboard surface — numbers ticking, reconciliation score updating, balance in motion — to make the core proposition felt, not explained. The first two iterations used static screenshots. Both tested poorly: users described the product as "just another dashboard." The animated version tested with "it looks like the data is actually in there." That was the signal we needed.
04
Trust Signal Layering
Mapped the security signals across the page hierarchy — not as a section, but woven into headlines, subtext, and visual treatments throughout the scroll.
05
Typography System
JetBrains Mono for all financial figures, Bricolage Grotesque for display. The monospace choice signals precision and technical credibility — the right register for a product that touches money.
06
Performance Build
Static landing page with CSS animations for dashboard elements — no heavy framework, no runtime rendering. Sub-1.5 second load on 3G.

Solution Exploration

Three decisions that
shaped the product.

Decision 01
Data-complete dashboard vs. Decision-first hierarchy
Problem
Finance teams wanted everything visible — every account, every figure — treating the dashboard like a spreadsheet replacement.
Option A — Data-Complete
Show all accounts, all balances, all transaction types above the fold. Maximum information density for power users.
Option B — Decision-First (Chosen)
Hierarchy based on what needs a decision today: reconciliation status, anomalies, and pending approvals surfaced first. Detail always available on drill-down.
Why Option B
CFOs don't read dashboards — they scan for exceptions. A data-complete view means the exception is buried. Decision-first hierarchy makes the important thing the first thing.
Reasoning: Information hierarchy is cognitive load management. The CFO's most expensive resource is attention — design should conserve it.
Decision 02
Generic sans-serif numerics vs. Monospace financial type
Problem
Proportional fonts cause columns of financial figures to misalign visually — the eye cannot quickly compare values or spot discrepancies.
Option A — Generic Sans-Serif
System font for numerics. Familiar, fast to render, consistent with the rest of the UI type system.
Option B — JetBrains Mono (Chosen)
Monospace numerics align vertically in all contexts. Every digit occupies equal width — figures in columns snap to a visual grid the eye can parse instantly.
Why Option B
Financial trust begins at the typographic level. If the figures look approximate, the product feels approximate — regardless of backend accuracy.
Reasoning: Typography communicates precision before content is read. In fintech, tabular numerics are a trust signal, not a stylistic preference.
Decision 03
Colour-only status encoding vs. Redundant accessibility encoding
Problem
Positive/negative financial status needed instant visual recognition. Colour is the fastest channel — but 8% of users have colour blindness.
Option A — Colour Only
Lime for positive, red for negative. Clean, fast, aligned with financial convention. Fails WCAG AA for colour-blind users.
Option B — Redundant Encoding (Chosen)
Lime/red colour paired with directional icon (▲/▼) and label text ("Positive", "Overdue"). Three channels encode the same status — accessible for all users.
Why Option B
The redundancy requirement forced icon and label reinforcement throughout the dashboard — which made the UI more scannable for everyone, not just the 8%.
Reasoning: Accessibility constraints often produce better design for all users. The constraint becomes a feature, not a limitation.

10 — Design

Numbers you can
trust before you read them.

The central design question for Meridian was whether a screen full of financial data could feel calm rather than anxious. The typographic choice of JetBrains Mono for all numerical values was the single most important decision — monospace numerics align vertically, reducing the visual noise that causes finance teams to distrust dashboards. Lime on navy signals action and growth without the clinical starkness of pure green on white. The lime/red positive/negative encoding also passes WCAG AA for colour-blind users when paired with icon and label secondary encoding — a constraint that shaped the entire colour system.

meridian.finance — Banking Dashboard
Meridian — Main View

Meridian — Fintech Banking & Treasury Platform

Meridian — Screen 2
Meridian — Screen 3
Meridian — Screen 4

Design Highlights

📊
Live Dashboard Hero
Problem
Marketing photography communicates aspiration, not capability. Finance teams evaluate tools by looking at the actual interface — not lifestyle imagery.
Approach
Financial data as the hero: real-time balance counters, reconciliation status, and card transaction volume visible above the fold — the product demonstrating itself.
User Benefit
CFOs evaluate the dashboard before reading any copy. The value proposition is demonstrated in the first 3 seconds — no sales language needed.
Business Benefit
Demo-mode hero reduces time-to-qualification. Prospects self-select based on what they see in the UI, not what they read about it — improving demo conversion quality.
🔋
JetBrains Mono Numerics
Problem
Proportional fonts misalign columns of financial figures — the eye cannot quickly compare values vertically, creating unconscious distrust of the data.
Approach
JetBrains Mono for all numerical values: tabular, equal-width digits that create a visual grid in every balance column, table row, and transaction list.
User Benefit
Finance teams can scan and compare figures vertically without needing to focus on each number individually. Speed and accuracy of financial review improves.
Business Benefit
Monospace numerics signal precision before the numbers themselves are read. The typographic choice becomes a trust signal that supports premium positioning.
🟢
Lime Accent on Positive Actions
Problem
Financial interfaces default to neutral greys and blues — no colour language for positive/negative states, forcing users to read labels to understand status.
Approach
#C5F94E reserved exclusively for positive balances, successful reconciliations, and primary CTAs — a consistent positive-action colour language across all contexts.
User Benefit
Status is scannable before it's readable. The CFO knows at a glance whether accounts are healthy or need attention — reducing cognitive overhead of daily review.
Business Benefit
Consistent accent language creates brand recall. Meridian's lime is recognisable and ownable in a category where most competitors use the same blue-and-grey palette.
🔒
Trust Woven, Not Bolted
Problem
Banking products typically handle security as a separate section — a trust page that users must navigate to find. It treats compliance as defensive documentation rather than a selling point.
Approach
Security signals (SOC 2, PCI DSS, bank-grade encryption) woven into headlines, subtext, and visual treatments throughout the main product narrative — not isolated in a "Security" section.
User Benefit
Trust is established contextually — when the user encounters a financial feature, the security context is immediately adjacent. No navigation required to feel confident.
Business Benefit
Enterprise IT reviews often gate procurement on visible security signals. Woven trust signals pass review without requiring a dedicated security page in the sales flow.
📐
Navy + Dot Grid Background
Problem
Pure black or dark grey backgrounds communicate tech without specificity. They could belong to any SaaS — nothing signals the financial-precision register that Meridian occupies.
Approach
Deep navy (#0A0F1E) with a subtle dot grid overlay: calm, systematic, grid-aligned. The texture communicates precision infrastructure — everything in its place.
User Benefit
The environment feels stable and authoritative before any content is read. Finance teams expect systematic environments — the background confirms the tool belongs in their workflow.
Business Benefit
A distinctive background creates category clarity. Navy-with-grid reads as "financial infrastructure" rather than generic SaaS — supporting differentiation at first impression.

Design System

The language
of financial precision.

A cohesive design system built to communicate financial trustworthiness at every touchpoint — from the monospace numerics to the lime positive-action accent.

Brand Colour Palette
Lime #C5F94E
Deep Navy #0A0F1E
Navy 2 #0E1426
Light Ink #EAF0FF
Muted #8A95B2

Lime signals positive action and financial health. Navy communicates depth, stability, and institutional credibility. The pairing is precise, not decorative.

Financial Typography
Display $2,847,392
Balance +$142,840.00
Body Reconciled to the cent
Label SOC 2 Type II Certified

JetBrains Mono for all financial figures — tabular precision. Bricolage Grotesque for display and marketing copy.

Design Tokens
Lime Positive Monospace Figures Navy Depth Dot Grid Trust Architecture Real-Time Counters Security Woven

11 — Impact

Design as
financial certainty.

Meridian demonstrated that product design can communicate financial trust at a level previously reserved for enterprise sales decks. Every metric below is a design outcome, not a sales claim.

$2M+
Daily Volume Demonstrated in UI
Real-time dashboard hero communicates transaction volume scale before any copy is read.
0
Platform Integrations Visualised
14 integration categories communicated through curated visual hierarchy, not a logo wall.
99.97%
Uptime SLA Communicated
Exact uptime figure used as a design element — communicating precision through specificity.
0
Dedicated Security Section Needed
Security and compliance signals (SOC 2, PCI DSS, bank-grade encryption) woven into the main product narrative — no separate "Security" page required to pass enterprise IT review.

Key Learnings

What This Project Taught Me

01
The feature is never the product — the trust is the product
Fintech design taught me that every additional capability added to the hero dashboard diluted the single thing the CFO needed first: confidence that the numbers were accurate. Features are table stakes. Trust is the differentiator. Every design decision in Meridian was evaluated against one question: does this increase or decrease confidence in the data?
02
Typography communicates precision before content is read
Switching to JetBrains Mono for all numerical values changed the perceived accuracy of the data before any figure was read. Type is a claim about what the product does. In financial contexts, monospace numerics tell the user the system is exact — the same way a scale in a pharmacy communicates precision before you look at the reading.
03
Accessibility constraints produce better design for all users
The WCAG AA requirement for the lime/red status encoding forced icon and label reinforcement throughout the dashboard. The constraint turned out to make the UI more scannable for every user — not just the 8% who needed it. Design for the constraint, not despite it. The rule that makes the product accessible to the edge case usually makes it faster for everyone else too.
04
CFOs scan for exceptions, not information
The instinct was to show everything — every account, every balance, every transaction type. But CFOs don't read dashboards. They scan for the thing that needs a decision. Decision-first hierarchy means the exception is the first thing visible, not buried in a data-complete view. The hardest conversations weren't about design — they were about what not to show.

Reflection

"Fintech design taught me something that took longer than it should have to understand: the feature is never the product. The trust is the product. Every time we added another capability to the hero dashboard, we diluted the single thing the CFO needed to see first — that the numbers were accurate. The hardest conversations in this project weren't about design. They were about what not to show."
— Rupesh Chavan, Lead Product Designer
"The colour accessibility constraint ended up being one of the best design decisions in the project. Because the lime/red system had to work for colour-blind users, we built in icon and label reinforcement throughout — which made the dashboard more readable for everyone, not just the 8% of users who needed it."
On accessibility as a design constraint that improves the whole product

Explore the Project

Browse all pages

Home Pricing Security About Contact Careers Legal