Skip to main content
Payflow logo
Payflow

Agentic finances & accounting with traceable AI decisions.

I designed a workspace where finance teams ask questions, create reports and inspect the sources and assumptions behind each answer.

  • Finance
  • Accounting
  • AI Workspace
  • Design Engineering

Project overview

  • Overview

    Every answer needs a source

    A finance workspace with source files, integrations and assumptions beside each AI answer.

  • Role

    Design Engineer and Product Designer

    Research, information architecture, interactions, data visualization, and React implementation.

    Team: Product, engineering and finance operators

  • Problem

    Finance answers need verifiable sources

    Controllers need to check a figure against its bank feed, invoice, or stated assumption before including it in a board report.

  • Solution

    Trace each answer to its evidence

    Keep source files, integrations, and assumptions attached to each answer, with a direct path to the underlying figures.

Finance teams were bringing AI into daily work

Gartner’s 2025 survey of 183 finance leaders found growing use of AI alongside persistent data-quality and technical-skills barriers. That context makes source visibility a practical product requirement.
Reported AI use in their finance function1
59%
Used AI for knowledge management, among AI adopters1
49%
Used AI for accounts payable, among AI adopters1
37%

Designing for a finance lead

A finance lead needs to bring accounting, payments and banking data into a report. The workspace connects that task to the sources and assumptions behind each figure.
  • Answer questions about runway and performance before a board meeting.
  • Check the source, integration, and assumption behind a figure without recalculating it.
  • Receive recurring reports with citations in an inbox.

Mapping questions, answers and evidence

The wireframes test a question, attached context, a cited answer, and a report that opens to its supporting evidence.
Wireframe: Payflow home with the Luca composer and starting points
Screen 1 of 9

01. Home

Ask Luca, or bring in context to ground the answer.

From a question to a report

Luca answers the question, builds the report, and keeps the supporting sources available.
Payflow home with Luca composer and starting-point suggestions
Screen 1 of 4

01. Ask in plain language

Ask a finance question in plain language.

Shared navigation across the workspace

Dashboards, recurring reports, source documents, and settings use the same navigation patterns.
Executive dashboard with revenue, margin, cash, and expense widgets
Dashboard: leadership KPIs with questions available from each chart.
Recurring reports list with schedules, statuses, and run controls
Reports: scheduled board packets with citations.
Context document library with an upload dropzone and source table
Context: source documents available to Luca.
Settings with profile, team, account, and accounting-data sources
Settings: identity, team, and the accounting data Luca can reach.

Checking sources on mobile

On mobile, the composer stays within reach, KPIs stack in one column, and each insight retains its source links.
Payflow mobile home with the Luca composer
Screen 1 of 4

01. Ask from anywhere

Type the board's question, or tap a suggested starting point.
Workspace picker on mobile listing operating model, board packet, and treasury monitor
Open an operating model or board packet on mobile.
Context document library on mobile with an upload dropzone and document cards
Add a board deck to the source library.

Charts and source controls

Waterfalls, area charts and donuts share one palette while persistent Assumptions and Sources controls keep every figure connected to its evidence.

Visual & token foundations

Executive chart tokens, tabular typography and citation primitives shared across desktop and mobile.

Components in context

A local specimen. Inspect its appearance without running an action.

Keep the answer connected

Q4 cash flow

Synced
Assumptions
3
Sources
6

Inspect the system

Control state
Status
Surface--cardComponent surface
Action--payflow-brandPrimary control
Synced--payflow-brandStatus tint

Default appearance · synced status. Preview only.

Six roles, one palette

  • Surface
  • Action
  • Comparison
  • Category
  • Attention
  • Secondary

Three type roles

Heading

Revenue to net profit across six months

Interface

Understand the numbers. Keep the answer connected to its evidence.

Telemetry

Assumptions · 3 · Sources · 6 · Synced

Specified: Mona Sans. Preview: Geist.

Spacing rhythm4px

Control heights32 / 40 / 44px

Corner radii8 / 12 / pill

Token and component referenceValues, sizing and variants

Color roles

Role and tokenLightDark
Surface--card#ffffff#201f1d
Action--payflow-brand#09442f#4ade80
Comparison--viz-accent#2563eb#60a5fa
Category--viz-purple#8b5cf6#a78bfa
Attention--viz-amber#f59e0b#fbbf24
Secondary--muted-fg#6b7280#9ca3af

Selected source values shown in a local component specimen.

Type and geometry

Specified: Mona Sans and Geist Mono. This preview uses Geist and Geist Mono.

Heading
16px · 500 · -0.015em
Interface
14px · 400 / 500 · 1.5
Telemetry
12px · mono · tabular
Spacing

4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 px

Control heights
  • Compact · 32pxTable, chart and filter controls
  • Default · 40pxButtons, header actions and composer
  • Touch · 44pxMobile targets
Corner radii

8px · 12px · Pill

One control family

The same shape, action color and focus rule across labels and icons.

  • Ask Luca
  • Report
  • Source
  • Sync
  • Inbox
  • Search
  • Upload
  • Verified

Engineering practices

Small implementation choices that hold the system together.

  • Steady figures

    Revenue, margins and deltas align by digit and never jitter on update.

    Implementation 
    font-variant-numeric: tabular-nums;
  • Chart color as tokens

    Series colors are semantic roles with tuned light and dark values.

    Implementation 
    stroke: var(--viz-accent);
fill: var(--viz-purple);
  • Tints from one source

    Badge fills mix from their series color, so pairs stay related.

    Implementation 
    background: color-mix(
  in srgb, var(--viz-amber) 14%, transparent
);
  • Visible keyboard focus

    Rings appear for keyboard users across charts, chips and the composer.

    Implementation 
    :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
  • Safe areas on mobile

    The shell pads for notches and the home indicator.

    Implementation 
    padding-inline: max(
  16px, env(safe-area-inset-left, 0px)
);
  • Motion that can stand still

    Indicators and pop-ins settle instantly when less motion is requested.

    Implementation 
    @media (prefers-reduced-motion: reduce) {
  transition: none;
}

Revenue to net profit

Trailing six months
RevenueNet profit

Revenue

+12%

$4.2M

+12%

Expenses by department

This quarter, in $k

Cash on hand

$1.84M

$1.84M

Gross margin

Up 3pts on the quarter
68%

Ask Luca

Composer

Context library

PDF · CSV · XLSX

Drop a board deck or export

Revenue mix

By line of business
Subscriptions 62%Services 24%Marketplace 14%

Net burn

$310k

$310k

Provenance footer

4 sources
Assumptions · 3Sources · 6

Pinned to every answer with QuickBooks, Stripe, Mercury, and Shopify links.

A connected finance workspace

The React implementation brings questions, reports, source review and connected data into one responsive product.
  • Ask and refine. Keep the conversation beside the generated report.
  • Review the evidence. Open source files and assumptions from the answer.
  • Reuse the system. Shared charts, navigation and source controls work across desktop and mobile.

Explore those flows in the interactive build. For a next phase, I would measure the time from a question to a verified answer to understand how quickly someone can check a figure and use it in a decision.

Tools and implementation

Design

Figma for interface design.

  • Figma

Interface

Typed components, responsive styles, motion and financial charts.

  • React
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Recharts

Development and delivery

The application framework, assisted coding and version control.

  • Next.js
  • Cursor
  • Claude Code
  • GitHub

Shipped with

  • Design engineering

    Research, product structure, interactions, charts and React implementation

  • Product and engineering

    Product direction and application development

  • Finance operators

    Workflow context and product feedback

Sources

1 reference
  1. gartner.com
    Gartner’s 2025 AI in Finance Survey covered 183 CFOs and senior finance leaders. The 59% figure refers to all respondents; knowledge-management and accounts-payable percentages refer to respondents already using AI. Industry context, separate from Payflow’s results.

More work