FinTech Platform — B2B SaaS
The Business Problem
Fragmented approval chains forced finance teams through 6 manual steps with no system handoff between PR, PO and Invoice stages. 75% of users routinely lost track of invoices mid-flow, reverting to calls and emails to chase status updates. Budget decisions were flying blind — 60% of admins operated on stale Excel data, not live figures. The mandate: architect a validated, role-aware workflow that gives every stakeholder exactly what they need — and nothing they don’t.
Broken approval chains — 6 disconnected steps, zero system handoff; teams chased status via calls & emails
Invisible budgets — 60% of admins made financial decisions against stale Excel data, not real-time system figures
Disappearing invoices — 30% lost mid-flow with no alert, audit trail or recovery mechanism
What did I do?
Problem Statement & User Research
Surveyed ~50 users to identify where procurement workflows break down.
Core Pain Points
- Multi-PR/PO invoice flows → approval bottlenecks
- No single view of document status across stages
- Manual tracking via calls, emails & Excel
- Unclear approval ownership → repeated follow-ups
- No unified tool — constant context switching
"Complex multi-PR/PO workflows lead to delays in document processing, inefficient budget management and heavy manual tracking — resulting in lost invoices, unclear approvals and poor financial visibility."
Workflow Architecture
Current-state friction mapped in Miro — redesigned to cut steps & add validation-driven automation.
No way to track a specific document in case of urgency — teams had zero visibility into where a PR or invoice was stuck in the pipeline.
No notification when a document stalled — the correct user was never alerted, causing invisible delays that only surfaced via calls and emails.
Finance teams lacked a pre-approval tracking system to verify documents before sending to vendor — leading to costly rejections post-dispatch.
Improved visibility, reduced workflow complexity, and proactive in-system tracking — eliminating every instance of out-of-system communication.
Request
Matrix
Approval
Approval
(Excel, offline)
Send PO
Invoice
Review
(manual)
Quick Review
Approval
Execution
Request
Validation
system
auto
Invoice
auto
Quick Review
Approval
Execution
☑ Unanimous Needs (100%)
- Export reports from dashboard — no tool switching
- Quick status view — no drilling into docs
💡 Emerging Needs (60%)
- Automate routine tracking & reminders
- Pull approval queues from standup schedules
Design Decisions & Considerations
Key trade-offs made while simplifying the platform before finalising hi-fi screens.
Faster, but relies on system validations — reduced manual error-catching by users.
Better at-a-glance status — mitigated overload via progressive disclosure.
Show data on demand, not upfront — lowers cognitive load significantly.
Each role sees only what's relevant — reduces noise & permission confusion.
Permission Visibility
Role-based access for relevant information and actions — each user sees only what they need.
Restricted Workflows
Controlled actions based on user roles and business rules — prevents unauthorised state changes.
Audit Readiness
Critical user actions tracked for transparency and compliance — every decision is role-stamped.
Approval Ownership
Defined clear owners for every approval stage — eliminates ambiguity and follow-up loops.
User Role Wireframes
Low-fi wireframes validated information architecture before moving to high-fidelity.
User Role — Super Admin
User Role — Finance Admin
Color Strategy
Every color decision was made for a specific data role — not decoration.
Deep blue (#2B4C8C) signals system authority — in financial interfaces, users interpret interface color as platform credibility. Blue was chosen for primary navigation, headers and interactive states to establish unwavering trust.
Ledger gold (#E8B23A) is reserved exclusively for warnings — maintaining WCAG AA contrast ratios across both light panels and dark modal overlays. It draws the eye without triggering false urgency.
Green and red are semantically locked to Approved / Rejected — never used decoratively. In dense invoice tables, overloading status colors with decorative use is a fast path to user error and mis-approval.
Typography
Manrope 700–800 anchors dashboard headings — geometric, tight letterforms reduce horizontal eye travel in data-dense environments where users scan rows, not paragraphs.
Body at 16px, weight 400, line-height 1.65 — calibrated for long approval queues and invoice tables where tight leading causes scan fatigue in under 3 minutes.
IBM Plex Mono reserved for numeric data & status codes — fixed-width columns prevent optical jitter when aligning financial figures and invoice IDs across table rows.
Final UI — Super Admin Dashboard
Simplified information architecture by consolidating PR, PO, and Invoice flows into a unified, dashboard-driven structure for better visibility and navigation.