ClearPay — Fintech Dashboard Redesign
A comprehensive redesign of ClearPay's internal analytics dashboard, reducing task completion time by 42% and improving financial oversight for 50,000+ SME users.
ClearPay
Overview
ClearPay is a B2B fintech platform serving over 50,000 small and medium enterprises across the UK. Their internal analytics dashboard had grown organically over five years, resulting in a fragmented interface that financial teams found slow and cognitively demanding.
I was brought in as the lead product designer to rethink the dashboard from the ground up — balancing the complexity of financial data with the clarity users needed to make fast, confident decisions.
The Problem
"I spend more time navigating the dashboard than I do actually analysing data." — Finance Manager, ClearPay Enterprise customer
Through initial stakeholder interviews, three core pain points emerged:
- Information overload: The existing layout displayed over 80 data points on the primary screen, with no clear visual hierarchy.
- Slow task completion: Common workflows (reconciling transactions, generating reports) required 7–12 clicks on average.
- No mobile parity: Field-based finance teams could not access critical data on mobile devices.
Discovery & Research
User Interviews
I conducted 18 contextual interviews with finance managers, accounts payable specialists, and CFOs. Sessions were recorded and analysed using affinity mapping in Miro.
Key findings:
- 78% of users relied on only 6–8 data points regularly, yet all 80+ were always visible
- Users wanted to "scan" the dashboard in under 30 seconds to assess financial health
- Approval workflows were the most time-sensitive but hardest to locate
Competitive Audit
I audited five competing fintech dashboards — Xero, QuickBooks, Brex, Ramp, and Stripe — evaluating navigation patterns, data density, and mobile experience. This surfaced an opportunity: most competitors prioritised breadth over depth, while ClearPay's users needed the opposite.
Design Process
Information Architecture
Working with the product and engineering leads, I restructured the IA around three primary mental models users described:
- "Health check" — quick daily scans of overall financial status
- "Investigation" — deep dives into specific transactions or time periods
- "Action" — approvals, reconciliations, and report generation
Design Principles
Four principles guided every decision:
- Progressive disclosure: Show only what's needed at each step
- Speed over comprehensiveness: Optimise for the 80% use case
- Trust through accuracy: Never obscure or round critical financial data
- Accessible by default: WCAG AA compliance across all states
Wireframing & Iteration
Starting with low-fidelity wireframes in Figma, I ran three rounds of usability testing with 6 users each. Key changes between iterations:
- Round 1: Collapsed the primary nav from 12 items to 5 using card sorting results
- Round 2: Replaced tabular transaction views with scannable card rows after users missed critical alerts
- Round 3: Added a persistent "Quick Actions" panel after users struggled to find approval workflows
The Solution
Homepage Dashboard
The redesigned homepage introduces a Financial Health Score — a single composite metric combining cash flow, outstanding invoices, and approval backlog. This gave users the 30-second scan they needed.
Below the hero metric, a customisable widget grid lets users pin their most-used data points. Default configurations are set per role (CFO vs. accounts payable), reducing the initial setup burden.
Transaction Management
Transactions are now presented in a timeline view with smart grouping by merchant, category, and date range. Inline filtering eliminates the need to navigate away from the list, cutting the average reconciliation workflow from 11 steps to 4.
Approval Workflows
A new Action Centre surfaces all pending approvals in a single focused view. Users can approve or reject items individually or in bulk, with a contextual side panel showing transaction details without leaving the flow.
Design System
I built a component library of 60+ reusable components in Figma, documented with usage guidelines and accessibility annotations. This reduced engineering handoff time by approximately 30% and ensured visual consistency across the platform.
Results
After a phased rollout to 2,000 pilot users over 8 weeks:
- 42% reduction in average task completion time (reconciliation workflows)
- 67% reduction in support tickets related to "can't find" navigation issues
- NPS increased from 28 to 54 among dashboard users
- Mobile usage increased from 3% to 19% of total sessions
Reflections
This project reinforced the importance of challenging scope early. The initial brief was to "improve" the existing dashboard — but discovery revealed the underlying IA needed to be rebuilt. Advocating for that scope change required aligning stakeholders around user evidence, which is a skill I continue to sharpen.
If I were to revisit this project, I would have invested more time in the onboarding experience for new users, which remained a friction point in post-launch research.