Zehra Jaffrey

case study · 2024 to 2025

Architecting a scalable B2B payment dashboard from 0 to 1

I designed the Quick Pay 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
Product Designer
timeline
Sept 2024 - Feb 2025
tools
Figma, Linear, FigJam, Datadog
A laptop showing the tilliX saved payment methods dashboard: Welcome to your Saved Payment Methods, with payment method cards and a recent transactions table.

The problem

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

I mapped Quick Pay 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

The challenge was architectural: design a scalable, secure dashboard that balances transactional speed with persistent financial oversight — without compromising clarity.

Restructuring for mobile

I restructured the dashboard with a mobile-first mindset, prioritizing core actions like invoice review and payment approvals.

Mobile designs on a FigJam board (iPhone, version 2-1). A checkout list of invoices grouped in Collections with a Checkout button; a payment drawer with Select Payment Method (card or bank account, view your saved cards, an OTP consent and Send OTP, Apple Pay, Google Pay, PayPal and Amazon) and Cancel and Continue buttons; a Checkout order summary with a discount code, saved Visa and Cancel and Pay buttons; and a Select Payment Method drawer with a default Visa. Sticky notes: “if user clicks out of the drawer section? cancel button to go back, otp phone number is alr put in”; “when invoice is clicked, pop of invoice appears”; “when requirements of page have not been filled, the black button is grey”.

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

I reduced context switching during payment confirmation by keeping invoice data, verification state, payment method, and totals visible in a single interface.

  • The Quick Pay payment screen: a stepper (Account Lookup, Select Invoices, Payment Method, Checkout), a payment summary listing invoices with amounts, a discount code field and a subtotal of $400.00, and, beside it, verification with a one-time code, then Add payment method (debit or credit card, bank account), PayPal and Google Pay.

    Single-screen payment flow

    Invoices, totals, verification, OTP verification and payment stay in one view to prevent hesitation and loss of context.

  • The Select Payment Method screen: saved payment methods as cards (an Apple Card, a Visa, a bank account, a Chase Bank account) with PayPal and Google Pay options and a New Payment Method card.

    Clear payment choice

    Payment methods are shown as scannable cards so users can choose quickly and confidently.

Post-login dashboard solution

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.

  • The post-login dashboard, Welcome to your Saved Payment Methods: your payment methods as cards, a panel of 2 payment methods that need attention (with update card actions), a Stay on Track card about Auto Pay with Enroll Now and Learn More buttons, and a Recent Transactions table.

    Wallet

    I introduced a dedicated wallet space so users can resolve payment issues ahead of checkout.

    Separating payment management from payment moments reduces friction.

  • The expanded invoice view: invoice details, line items, comments and a conversation thread on the left, and the invoice itself with a Pay Now button and an Auto Pay prompt on the right.

    Expanded invoice view

    Invoice details, payment, and conversation live in one view to keep decisions focused.

  • The invoices list: total amount due, unpaid balance, amounts due in the next 30 days and invoices past due at the top, tabs for open, unpaid, all and past invoices, and invoices grouped by event with due dates, amounts and status tags such as partially paid and unpaid, with a Pay Now button.

    Clear status at a glance

    Totals, due dates, and payment status are prioritized so users know what needs action immediately.

What I learned

Quick Pay and post-login needed different mindsets

One of the hardest parts was clearly separating Quick Pay and post-login. I had to be intentional about why they felt different; Quick Pay 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 it's 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.