Payment Approvals: Designing the Fast Path.

Frienton payment approvals interface on laptop showing 10 documents to approve list with Decline/Approve buttons, invoice preview displaying FinAPI credit note, and approval history panel on the right
Frienton payment approvals interface on laptop showing 10 documents to approve list with Decline/Approve buttons, invoice preview displaying FinAPI credit note, and approval history panel on the right

Projects

Projects

Projects

My role

Product design, research, prototyping, testing

Team

CEO (Product Owner), CPO, 3 Engineers (Frontend, Backend, QA)

CEO (Product Owner), CPO, Product Designer,
3 Engineers (Frontend, Backend, QA)

CEO (Product Owner), CPO, Product Designer,
3 Engineers (Frontend, Backend, QA)

Timeline

6 months (Nov 2024 - Apr 2025)

6 months
(Nov 2024 - Apr 2025)

To unblock enterprise deals, I aimed to outpace competitors on speed, designing an instant approval workflow that let CFOs act without ever leaving the document.

Instead of matching competitors feature-for-feature, I embedded approvals directly into existing document workflows. No separate system, no complex setup. Binary decisions, keyboard-first navigation, approve-and-pay in one action. The simplified approach won - 2 at-risk enterprise clients chose us over feature-rich alternatives.

CQuel's customers had access to everything
–12+ data points per project, real-time metrics, financial models – yet they abandoned the platform and called operations instead. I shadowed 20+ customer calls to understand why, discovering they didn't need more data but interpretation. The redesign focused on one principle: always show whose turn it is and what to do next.

2

enterprise clients retained

<5 sec

average approval time

75%

enterprise clients activated within a week

My contribution:

  • Designed an embedded workflow, removing the need for a separate tool.

  • Created a "binary choice" system to force faster decisions.

  • Built keyboard interactions for power users processing large volumes.

  • Led 2 rounds of testing with 5 users

01

The Problem

As Frienton pivoted from startups to enterprise clients (50+ employees, €5M+ revenue), 3 prospects requested payment approval workflows.

The Challenge:

We were losing deals to competitors who had robust, complex approval suites. The trap would have been to copy them feature-for-feature (multi-tier routing, complex logic). But our users were different: they were fast-moving teams who viewed approvals as a bottleneck, not a compliance ritual. The challenge was to satisfy enterprise requirements without destroying our core value proposition: simplicity.

02

Research

Competitor Analysis:

Analyzed 4 tools (Flowwer, Datev, Candis, Moss)

User Interviews:

6 interviews with enterprise decision-makers

2

Finance Managers

2

CFOs

2

Project Managers

Key Insights:

  • Speed matters
    Approvers handle 20-50 documents daily, need <5 seconds per approval

  • Visibility problem
    Users couldn't locate pending approvals without searching

  • Setup complexity
    Competitors require 10+ clicks to configure basic rules

  • Missing context
    Amount and counterpart must be visible during decision-making

  • Double-handling
    Users wanted approve + pay in one action

03

The Solution

Core Innovation:

Approval workflow embedded directly into existing document flow – no separate system or complex setup required.

Three User Roles:

  • Owner
    Configure approval rules (thresholds, tag-based approvers, deputies) + Review and approve/decline documents

  • Approver
    Review and approve/decline documents

  • Bookkeeper etc.
    Submit documents, trigger manual approvals

  • Proactive status
    Tell customers where they are automatically
    – don't make them ask 5+ times per project.

Frienton Payment Approvals onboarding modal explaining three rule types (By Amount, By Project, Manual Override) with four-step workflow diagram
Frienton Payment Approvals onboarding modal explaining three rule types (By Amount, By Project, Manual Override) with four-step workflow diagram
Frienton Payment Approvals onboarding modal explaining three rule types (By Amount, By Project, Manual Override) with four-step workflow diagram
Payment Approvals settings page with general rules (auto-approve below €500), tag-based rules with primary approvers, optional backup approvers, and deputy management
Payment Approvals settings page with general rules (auto-approve below €500), tag-based rules with primary approvers, optional backup approvers, and deputy management
Payment Approvals settings page with general rules (auto-approve below €500), tag-based rules with primary approvers, optional backup approvers, and deputy management

Key Features:

Simple Rules

Set once, runs forever

  • Auto-approve below €500 → Small expenses flow through

  • Require approval above €5,000 → Control where it matters

  • Tag-based routing → Right approver automatically

  • Deputy assignment → No bottlenecks during absence

Fast Approval

Built for volume processing

  • Binary decisions – Approve/Decline only, no analysis paralysis

  • Keyboard-first – Spacebar to approve, arrow to advance

  • Auto-advance – Next document loads instantly

  • One-click payment – Approve + pay in single action

Full approval interface showing 12 documents to approve list with status indicators, invoice preview, and batch Pay button for selected invoices
Full approval interface showing 12 documents to approve list with status indicators, invoice preview, and batch Pay button for selected invoices
Full approval interface showing 12 documents to approve list with status indicators, invoice preview, and batch Pay button for selected invoices
Approval notifications dropdown showing pending requests, deputy assignments, overdue reminders, and weekend accumulation alerts with Mark as read action
Approval notifications dropdown showing pending requests, deputy assignments, overdue reminders, and weekend accumulation alerts with Mark as read action
Approval notifications dropdown showing pending requests, deputy assignments, overdue reminders, and weekend accumulation alerts with Mark as read action

Clear Visibility

Never miss an approval

  • Badge notifications — "12 to approve" always visible

  • Smart filters — Show only what needs action

  • Multi-channel alerts — In-app + email reminders

  • Full audit trail — Who approved what, when

04

Iterations

Tested with 5 users across 2 rounds

What changed and why:

Multipayment Floating Bar → Sidebar

Moved approval actions from floating bottom bar to sidebar. The floating pattern was inconsistent with the rest of the application - users expected controls in the sidebar where other document actions live.

Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action
Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action
Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action
Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action
Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action
Before and after: separate approval and payment creation screens combined into single sidebar flow with document list, status indicators, and batch payment action

5 Approval States → 3 States

Reduced states from 5 to 3. Users couldn't distinguish between similar states.

Status reduction from 5 states (Needs approval, Awaiting approval, Approved, Declined, Changes requested) to 3 clear states (Approval pending, Approved, Declined)
Status reduction from 5 states (Needs approval, Awaiting approval, Approved, Declined, Changes requested) to 3 clear states (Approval pending, Approved, Declined)
Status reduction from 5 states (Needs approval, Awaiting approval, Approved, Declined, Changes requested) to 3 clear states (Approval pending, Approved, Declined)
Before and after: header without approval indicator changed to include visible 'Approve - 4 docs' badge for pending approvals awareness
Before and after: header without approval indicator changed to include visible 'Approve - 4 docs' badge for pending approvals awareness
Before and after: header without approval indicator changed to include visible 'Approve - 4 docs' badge for pending approvals awareness

Header Notification Enhancement

Users missed pending approvals in their daily workflow - prominent banner increased awareness by 85%.

Separate Tab → Embedded Filter

Removed dedicated "Approvals" tab, added approval filter to existing Documents tab. Users already worked in Documents - integration reduced navigation clicks

Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending
Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending
Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending
Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending
Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending
Before and after: separate Approvals tab with 4 status types consolidated into Documents tab with approval status as filter - Verified/approved, Overdue/declined, Viewed/approval pending

05

Impact

Business Results:

  • Revenue Retained:
    Saved 2 at-risk enterprise accounts directly due to the new workflow.

  • Adoption Velocity:
    Hit 75% activation in week one (vs. weeks/months for competitors).

  • Operational Speed:
    Cut approval time to <5 seconds, proving the keyboard-first model worked.

  • Competitive Win:
    Prospects actively chose our simplicity over complex competitor tools.

06

Key Learnings

  • Speed over features
    Binary decisions beat feature-rich interfaces for high-volume tasks

  • Embed, don't isolate
    Integration with existing workflows drives adoption

  • Progressive disclosure > upfront complexity
    Show one clear path, hide edge cases until needed