Architecting a Scalable B2B Payment Dashboard from 0→1
[1]
I designed the QuickPay and post-login dashboard for Tilli Software to support the full invoice lifecycle, architecting the system’s IA and workflows to enable secure transactions and ongoing financial oversight for enterprise teams.
Role
UX Designer
Tools
Figma, Linear, FigJam, Datadog
Timeline
Sept 2024 - Feb 2025
The Problem
[2]
How do you design one payment system for two radically different user modes?
Mode 1 — Urgency
Pay a bill in under 60 seconds.
Mode 2 — Oversight
Track, reconcile, and manage invoices over time.
No IA, workflows, or dashboard foundation existed — the challenge was defining a minimum viable system for speed, visibility, and scale.
Research
[3]
I mapped QuickPay and post-login flows end-to-end. I reviewed support logs and spoke with client teams.
Key insights
Visual language sets expectations early
A modern system UI was critical to signal momentum and credibility.
Momentum had to be designed
Users hesitated to trust on-screen confirmations.
Users needed direction after login
The dashboard had to clearly surface what matters most, not everything at once.
Refined Problem Statement
[4]
The challenge was architectural: design a scalable, secure dashboard that balances transactional speed with persistent financial oversight — without compromising clarity.
Restructuring for Mobile
[5]
I restructured the dashboard with a mobile-first mindset, prioritizing core actions like invoice review and payment approvals.
Dense tables were converted into scannable card views, and navigation was simplified to reduce friction on smaller screens.
The result was a responsive system that preserved clarity without sacrificing functionality.
Quick Pay Solution
[5]
I reduced context switching during payment confirmation by keeping invoice data, verification state, payment method, and totals visible in a single interface.
Single-screen payment flow
Invoices, totals, verification, OTP verification and payment stay in one view to prevent hesitation and loss of context.
Clear payment choice
Payment methods are shown as scannable cards so users can choose quickly and confidently.
Post-Login Dashboard Solution
[6]
I designed to surface what matters now instead of everything at once.
Invoices, totals, due dates, and status are prioritized through hierarchy so users can act immediately without scanning.
Wallet
I introduced a dedicated wallet space so users can resolve payment issues ahead of checkout.
Separating payment management from payment moments reduces friction.
Expanded Invoice View
Invoice details, payment, and conversation live in one view to keep decisions focused.
Clear status at a glance
Totals, due dates, and payment status are prioritized so users know what needs action immediately.
Lessons Learned
[7]
QuickPay and post-login needed different mindsets
One of the hardest parts was clearly separating QuickPay and post-login. I had to be intentional about why they felt different; QuickPay needed speed and reassurance, while post-login needed control, without making the product feel inconsistent.
considering the security aspect
Security was also a real challenge. Designing a space where users can see multiple payment methods at once meant there had to be trust, since its all their accounts. We chose OTP as the best balance between usability and protection, but it pushed me to think more critically about how security is communicated in the UI, especially when real money is involved.
Footer
[8]