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

Team

CEO (Product Owner), CPO, Product Designer, 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 (Mar - Aug 2025)

4 months
(May - Aug 2025)

Scope

Product design, research, prototyping, testing

Winning enterprise deals by making the complex simple: payment approvals that actually get used.

As Frienton moved upmarket, payment approvals became a deal-breaker – 3 prospects needed them, competitors had them. Instead of matching feature-for-feature, I designed for speed: embedded approvals in existing workflows, binary decisions only, keyboard-first navigation. The simplified approach retained 2 at-risk customers who 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.

01

The Problem

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

The Challenge:

Large companies need 4-eye approval for expenses, but existing tools force users to juggle multiple systems, manually track dozens of approvals, and configure complex rules. Approvers processing 20-50 documents daily needed a faster solution.

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:

  • Customer Retention:
    2 enterprise clients chose Frienton over established competitors

  • Operational Efficiency:
    Teams processing 50+ daily documents no longer need manual tracking

  • Competitive Advantage:
    Simplicity won over feature-rich alternatives

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