DRAFT

User Journeys

Invoice Creation UX
Generated from benchmark · Last updated: 2026-04-09
0

First-Time Merchant Onboarding

A merchant opens Teya Invoices for the first time. Rather than asking them to type their business name, VAT number, address, and bank details manually, we offer a single shortcut: upload an existing invoice and we'll scrape their own details from it. This flow removes the "empty state tax" that kills most invoicing activations.

graph TD
    A[First-time merchant
opens invoices] --> B[Welcome screen:
3-step progress indicator]
    B --> C{Set-up shortcut}
    C -->|Upload existing invoice| D[Upload zone:
PDF, JPG, PNG up to 10MB]:::track
    C -->|Skip, enter manually| E[→ Journey 1 with
empty business details]:::track

    D --> F[AI scans document:
animated scan-line preview]:::track
    F --> G{Extraction quality}
    G -->|High confidence| H[Pre-fill all fields:
business name, VAT,
address, company no.]:::track
    G -->|Partial| I[Pre-fill confident fields,
flag uncertain ones
with 'please verify']:::assumed
    G -->|Failed| J[Show retry or
manual fallback]:::assumed

    H --> K[Review screen:
confidence tiers green/amber]
    I --> K
    J --> C

    K --> L{Merchant reviews
each field}
    L -->|Edit inline| M[Update field]:::track
    L -->|Accept| N[Keep as-is]
    M --> O{All fields reviewed?}
    N --> O
    O -->|No| L
    O -->|Yes| P[Save business profile]:::track

    P --> Q[Land in editor
with details pre-populated]:::track
    Q --> R[→ Journey 1
from line items step]

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Page Views

Upload Interactions

AI Extraction

Field Review Interactions

Navigation

Dismissals & Errors

---

1

New Invoice from Scratch

The core happy path. A merchant opens the invoice editor, fills in client details, adds line items with optional tax and discounts, previews the result, configures payment, and chooses a delivery channel. This is the most common flow and the one every other journey eventually merges into.

graph TD
    A[Merchant taps 'New Invoice'] --> B[Single-page editor loads
with smart defaults]
    B --> C{Client field}
    C -->|Type name/email| D{Client found?}
    D -->|Yes| E[Auto-fill billing address,
currency, language]
    D -->|No| F[Create new client inline]:::assumed
    F --> G{Client details valid?}:::assumed
    G -->|Yes| E
    G -->|No| H[Show validation error]:::assumed
    H --> F
    C -->|Skip for now| I[Continue without client]:::assumed

    E --> J[Add line items]
    I --> J

    J --> K{How to add items?}
    K -->|Manual entry| L[Type description, qty, rate]
    K -->|From catalogue| M[Search saved products/services]
    L --> N{Add tax/discount?}
    M --> N

    N -->|Yes| O[Configure inline tax rate
and/or discount per item]
    N -->|No| P[Running total updates]
    O --> P

    P --> Q{More line items?}
    Q -->|Yes| J
    Q -->|No| R[Review summary panel]

    R --> S{Live preview?}
    S -->|Open preview| T[Side-panel shows PDF /
Email / Payment Page tabs]:::track
    S -->|Skip preview| U[Configure payment methods]
    T --> U

    U --> V[Select accepted methods
— card, bank, PayPal, etc.]
    V --> W[Payment link auto-generated]:::track

    W --> X{Set due date}
    X -->|Smart shortcut
Net 15/30/60| Y[Due date set]
    X -->|Custom date| Y
    X -->|No due date| Z[Flag: no due date warning]:::assumed

    Y --> AA{Ready to send?}
    Z --> AA
    AA -->|Yes| BB[Confirmation modal:
recipient, total, due date, methods]:::track
    AA -->|Save as draft| CC[Invoice saved to drafts]:::track
    AA -->|Cancel| DD[Discard or keep draft?]:::assumed
    DD -->|Keep draft| CC
    DD -->|Discard| EE[Return to dashboard]:::assumed

    BB --> FF{Delivery channel}
    FF -->|Email| GG[Send via email]:::track
    FF -->|Shareable link| HH[Generate and copy link]:::track
    FF -->|SMS| II[Send via SMS]:::track
    FF -->|PDF download| JJ[Download PDF]:::track
    FF -->|Schedule send| KK[Pick date/time, queue]:::track

    GG --> LL[Success screen +
next actions]:::track
    HH --> LL
    II --> LL
    JJ --> LL
    KK --> LL

    LL --> MM{Post-send prompts}
    MM -->|Set up reminders| NN[Configure auto-reminders]
    MM -->|Make recurring| OO[Set recurring schedule]
    MM -->|Done| PP[Return to invoice dashboard]

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Page Views & Screen Loads

Client Field Interactions

Currency & Localization

Invoice Number

Due Date Interactions

Line Item Interactions

Running Total & Summary

Preview Panel

Payment Configuration

Advanced Settings (collapse/expand)

Discount (Invoice-Level)

Auto-Save

Confirmation Modal

Draft Saving

Navigation & Drop-off

---

2

Invoice from Existing Context (Job / Contract / Project)

The merchant has prior work context — a completed job, an active contract, or a project — and wants to generate an invoice from it. Most fields are pre-populated, so the flow is about reviewing and adjusting rather than filling in from scratch.

graph TD
    A{Entry point} --> B[From job/project list]
    A --> C[From contract dashboard]
    A --> D[From 'New Invoice' +
select source]

    B --> E[Select completed job
or uninvoiced project]
    C --> F[Select active contract
with billing period]
    D --> G{Source picker:
job, contract, or blank}
    G -->|Job/project| E
    G -->|Contract| F
    G -->|Blank| H[→ Journey 1:
New from scratch]

    E --> I[Auto-populate:
client, line items,
amounts from job]:::track
    F --> J[Auto-calculate:
working days, rates,
amounts from contract terms]:::track

    I --> K[Single-page editor loads
with pre-filled data]
    J --> K

    K --> L{Review client details}
    L -->|Correct| M[Keep as-is]
    L -->|Update needed| N[Edit inline —
address, currency, etc.]:::assumed
    N --> M

    M --> O{Review line items}
    O -->|All correct| P[Keep pre-filled items]
    O -->|Adjust amounts| Q[Edit qty, rate,
or description]
    O -->|Remove items| R[Delete uninvoiced items
not yet ready to bill]:::assumed
    O -->|Add items| S[Add manual items
on top of pre-filled]:::assumed
    Q --> T{More adjustments?}
    R --> T
    S --> T
    T -->|Yes| O
    T -->|No| P

    P --> U{Partial invoice?}:::assumed
    U -->|Invoice all| V[Full amount from source]
    U -->|Invoice subset| W[Select which items /
amount to bill now]:::assumed
    W --> X[Remaining flagged as
uninvoiced for next time]:::assumed

    V --> Y[Running total updates]
    X --> Y

    Y --> Z[Configure tax / discount
if not inherited from source]:::assumed
    Z --> AA[Live preview]:::track
    AA --> BB[Configure payment +
delivery — same as Journey 1]:::track
    BB --> CC[Success screen]:::track

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Source Selection

Job/Contract Selection

Auto-Population

Review & Adjustment

Partial Invoicing

Source Linking

Continuation to Delivery

---

3

AI-Powered Invoice Creation

The merchant uploads an existing document — a PDF, photo, or screenshot — and AI extracts the invoice details. The merchant reviews, corrects, and sends. This flow (inspired by Wise) replaces manual data entry with verification, but requires trust-building through transparency about what the AI extracted vs. what it guessed. The "Upload (AI extract)" entry point is surfaced as a prominent yellow-tinted button with an "AI" badge inside the line-items section of the editor, making it discoverable mid-flow, not just at the very start.

graph TD
    A[Merchant taps 'New Invoice'] --> B{Creation method}
    B -->|Manual| C[→ Journey 1]
    B -->|From job/contract| D[→ Journey 2]
    B -->|Upload document| E[Upload screen]

    E --> F{File type}
    F -->|PDF| G[Upload PDF]
    F -->|Image / photo| H[Upload or take photo]:::track
    F -->|Screenshot| I[Paste or upload screenshot]

    G --> J[AI extraction service
processes document]:::track
    H --> J
    I --> J

    J --> K{Extraction quality}
    K -->|High confidence
all fields extracted| L[Pre-fill editor with
all extracted data]:::track
    K -->|Partial extraction
some fields uncertain| M[Pre-fill known fields,
highlight uncertain ones]:::assumed
    K -->|Extraction failed| N[Show error:
'Could not read this document']:::assumed

    L --> O[Show AI disclaimer:
'Extracted by AI — please review']:::track
    M --> O

    N --> P{Retry options}:::assumed
    P -->|Try different file| E
    P -->|Enter manually| C
    P -->|Cancel| Q[Return to dashboard]

    O --> R{Merchant reviews
extracted data}
    R --> S{Client correct?}
    R --> T{Items correct?}
    R --> U{Amounts correct?}
    S --> W{Field correct?}
    T --> W
    U --> W
    W -->|Yes| X[Keep as-is]
    W -->|No / uncertain| Y[Edit inline]:::track

    X --> Z{All fields reviewed?}
    Y --> Z
    Z -->|No| R
    Z -->|Yes| AA[Merchant confirms
extracted invoice]:::track

    AA --> BB[Editor loads with
confirmed data —
same as Journey 1 Step 5+]
    BB --> CC[Preview → Payment →
Delivery → Success]:::track

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Screen Views

Upload Initiation

File Upload

AI Extraction

Data Review & Field Interactions

Confidence Metrics

Extraction Failure Path

Confirmation

Continuation to Invoice Creation

---

4

Repeat Invoicing for Returning Customer

A merchant invoices the same client regularly. The flow leverages auto-complete, saved items, and optionally previous invoice templates to minimize repetitive data entry. This is a variation of Journey 1 where most friction is removed by memory and defaults.

graph TD
    A[Merchant taps 'New Invoice'] --> B[Editor loads with
smart defaults]
    B --> C[Start typing client
name or email]
    C --> D[Auto-complete suggests
matching contacts]:::track
    D --> E[Select returning client]

    E --> F[Auto-fill: billing address,
currency, language,
preferred payment method]:::track

    F --> G{Use previous invoice
as template?}:::assumed
    G -->|Yes| H[Load line items from
most recent invoice
for this client]:::track
    G -->|No| I[Start with blank
line items]

    H --> J{Review pre-loaded items}
    J -->|Adjust amounts / dates| K[Edit line items]
    J -->|All correct| L[Keep as-is]
    K --> L

    I --> M[Add line items
— manual or catalogue]
    M --> L

    L --> N[Running total updates]
    N --> O{Tax / discount
inherited from template?}:::assumed
    O -->|Yes| P[Review inherited rates]
    O -->|No| Q[Configure inline]
    P --> R[Preview + Payment +
Delivery — same as Journey 1]
    Q --> R
    R --> S[Success screen]:::track

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Client Auto-Complete

Client Autofill

Template Suggestion

Template Loading

Template Review & Modification

Repeat Customer Signals

Continuation to Delivery

---

5

Draft Management

A merchant starts an invoice but isn't ready to send. They save it as a draft and return later to finish and send. This journey covers the save, resume, and edit cycle.

graph TD
    A{Entry point} --> B[Mid-edit: merchant
navigates away]
    A --> C[Merchant taps
'Save as Draft']
    A --> D[Auto-save triggers
in background]:::assumed

    B --> E{Unsaved changes?}:::assumed
    E -->|Yes| F[Prompt: save draft
or discard?]:::assumed
    E -->|No| G[Exit editor cleanly]
    F -->|Save| H[Invoice saved to drafts]:::track
    F -->|Discard| I[Changes lost,
return to dashboard]:::assumed

    C --> H
    D --> H

    H --> J[Draft badge visible
with timestamp]:::track

    K[Later: merchant opens
invoice dashboard] --> L[Drafts section visible
with count badge]:::track
    L --> M[Select a draft]
    M --> N[Editor loads with
all saved data intact]:::track

    N --> O{Resume editing}
    O --> P[Add / edit line items]
    O --> Q[Update client details]
    O --> R[Change payment config]

    P --> S{Ready to send?}
    Q --> S
    R --> S
    S -->|Yes| T[Confirmation modal +
delivery — same as Journey 1]:::track
    S -->|Not yet| U[Save draft again]
    U --> H

    S -->|Delete draft| V{Confirm delete?}:::assumed
    V -->|Yes| W[Draft permanently deleted]:::track
    V -->|No| N

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Auto-Save

Unsaved Changes Detection

Manual Draft Save

Navigation Away with Unsaved Changes

Draft List & Discovery

Resuming a Draft

Editing Resumed Draft

Draft Operations

Draft Expiration & Cleanup

---

6

Multi-Channel Delivery

After an invoice is finalized, the merchant chooses how to deliver it. This journey focuses on the delivery decision and the channel-specific flows — it's the tail end of every other journey.

graph TD
    A[Invoice finalized —
confirmation modal] --> B{Select delivery channel}

    B -->|Email| C[Pre-fill recipient email
from client record]
    C --> D{Customize email?}
    D -->|Yes| E[Edit subject line +
message body]:::assumed
    D -->|No| F[Use default template
with dynamic subject]
    E --> G[Send email with
invoice attached + payment link]:::track
    F --> G

    B -->|WhatsApp — 'Popular'| WA1[Pre-fill phone number
from client record]:::track
    WA1 --> WA2{Number on file?}
    WA2 -->|Yes| WA3[Preview WhatsApp message
with invoice # + amount +
payment link]:::track
    WA2 -->|No| WA4[Enter WhatsApp number]
    WA4 --> WA3
    WA3 --> WA5[Send via WhatsApp Business API]:::track

    B -->|Shareable link| H[Generate unique
payment link URL]:::track
    H --> I[Copy to clipboard +
show QR code option]:::assumed
    I --> J{Share via}:::assumed
    J -->|Copy link| K[Merchant pastes
link manually]
    J -->|QR code| L[Display QR code
for in-person use]:::track

    B -->|SMS| M[Pre-fill phone number
from client record]:::assumed
    M --> N{Number on file?}:::assumed
    N -->|Yes| O[Send SMS with
payment link]:::track
    N -->|No| P[Enter phone number]
    P --> O

    B -->|PDF download| Q[Generate PDF]:::track
    Q --> R[Download to device]
    R --> S[Merchant distributes
manually — print, attach, etc.]

    B -->|Schedule send| T[Pick date and time]
    T --> U{Delivery channel
for scheduled send}:::assumed
    U -->|Email| V[Queue email
for scheduled time]:::track
    U -->|WhatsApp| VW[Queue WhatsApp
for scheduled time]:::track
    U -->|SMS| W[Queue SMS
for scheduled time]:::track

    G --> X[Success screen]:::track
    WA5 --> X
    K --> X
    L --> X
    O --> X
    R --> X
    V --> X
    VW --> X
    W --> X

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Delivery Channel Selection

Email Delivery

SMS Delivery

WhatsApp Delivery

Shareable Link / Payment Page

PDF Download

Scheduled Send

Multi-Channel Batch Send

Delivery Confirmation

Post-Delivery

---

7

Post-Send Automation — The Recurring + Autopilot Flywheel

After sending the first invoice, the system prompts the merchant to set up automations — payment reminders, recurring reissue, and autopilot collection. Crucially, recurring (reissue on schedule) and autopilot (auto-collect on due date) are presented as complementary primitives under a unified "Set & forget — reissue and auto-collect" section. When both are enabled, the merchant has created a true subscription. When only recurring is on, the UI nudges them toward adding autopilot for the flywheel. And when the system detects the same customer being invoiced repeatedly, it surfaces a merchant-facing insight card inviting the customer to save a card on their next payment page — closing the flywheel from the recipient side.

graph TD
    A[Success screen after
invoice sent] --> B{Automation prompts}

    B --> C[Set up payment reminders?]
    B --> AUTO[Set & forget:
reissue + auto-collect]
    B --> F[Done — return to dashboard]

    C --> G{Reminder config}
    G --> H[Before due date:
3 days, 1 day, day-of]
    G --> I[After overdue:
1 day, 7 days, 14 days]
    G --> HC[Channel: Email, SMS,
WhatsApp, or all channels]
    H --> J[Save reminder schedule]:::track
    I --> J
    HC --> J

    AUTO --> D[Toggle: Make recurring]
    AUTO --> E[Toggle: Autopilot payments]

    D --> K{Recurring config}
    K --> L[Frequency: weekly,
monthly, quarterly, custom]
    L --> M[End condition: never,
after N invoices, on date]
    M --> N{Auto-send or
draft for review?}
    N -->|Auto-send| O[Recurring invoice
sends automatically]:::track
    N -->|Draft| P[Recurring draft created
for manual review each cycle]:::track

    O --> STATE{Also enable
autopilot?}
    P --> STATE
    STATE -->|Not yet| NUDGE[Inline nudge:
'Turn this into a true subscription —
pair with Autopilot below']:::track
    STATE -->|Yes| E

    E --> Q{Autopilot config}
    Q --> R[Select payment method
on file: card, DD, VRP]
    R --> S{Charge timing}
    S -->|On due date| U[Charge on exact due date]
    S -->|Smart — skip weekends| T[Charge on Friday
if due date is weekend]
    T --> FH[Failure handling:
retry in 3 days, notify, or both]
    U --> FH
    FH --> V[Save autopilot config]:::track

    V --> FLYWHEEL{Both recurring
AND autopilot on?}
    NUDGE --> W
    FLYWHEEL -->|Yes| SUBSCRIPTION[🎉 Subscription banner:
'You've turned this into a subscription —
Teya will issue AND auto-charge']:::track
    FLYWHEEL -->|No| W
    SUBSCRIPTION --> W

    J --> W{Set up more automations?}
    W -->|Yes| B
    W -->|No| X[Return to invoice dashboard
with automation badges visible]:::track

    F --> X

    classDef assumed fill:#fff3cd,stroke:#ffc107
    classDef track fill:#d4edda,stroke:#28a745

Payment Reminders

Recurring Invoicing

Autopilot Collection

Subscription State (Recurring + Autopilot)

Repeat-Customer Flywheel (Recipient Side)

Scheduled Invoice Management

Automation Prompt Lifecycle

Automation Badges on Dashboard

---

8

Invoice List & Dashboard

The invoice list is the merchant's home base for all invoicing activity. It surfaces every invoice across its full lifecycle — from scheduled and draft, through sent, viewed, and paid, to overdue — and gives the merchant a single place to triage, filter, and drill in.

flowchart TD
    Start([Merchant opens Invoices tab]) --> Landing[Invoice list landing page]
    Landing --> Summary[Summary bar:
Outstanding · Overdue · Paid this month]
    Landing --> Filters[Filter chips:
All · Scheduled · Draft · Sent · Viewed · Paid · Overdue]
    Landing --> Search[Search by client, number, or amount]
    Landing --> NewBtn[+ New invoice CTA]

    Filters --> List[Filtered invoice list
grouped by status]
    List --> ScheduledGroup[Scheduled · upcoming
clock icon + days until send]
    List --> DraftGroup[Drafts · needs review]
    List --> ActiveGroup[Sent / Viewed / Overdue]
    List --> PaidGroup[Paid · recent]

    ScheduledGroup --> Row[Invoice row:
client · number · amount · status pill · date]
    DraftGroup --> Row
    ActiveGroup --> Row
    PaidGroup --> Row

    Row --> Detail[Invoice detail page]
    Row --> QuickActions[Row actions:
Remind · Duplicate · Cancel · Mark paid]

    NewBtn --> Editor[Invoice editor]

    Detail --> End([Merchant takes action])
    QuickActions --> End
    Editor --> End

Page Views

Summary Bar

Filters

Search & Discovery

Invoice List Rows

Invoice Row Quick Actions

Grouped List Sections

New Invoice CTA

AI Upload Quick Access

Pagination & Infinite Scroll

List Refresh & Sync

Empty State

---

9

Invoice Detail Page

The merchant opens a single invoice to review, share, remind, or take action. The detail page surfaces the full invoice data, client information, payment status, delivery history, and quick actions (remind, duplicate, share, cancel, mark paid, recurring/autopilot config).

Page Views

Invoice Header & Summary

Client Information Section

Line Items Section

Payment Information

Delivery & Communication History

Action Bar & Quick Actions

Automation Status & Configuration

Flywheel & Insight Cards

Related Invoices & History

Export & Integrations

Navigation

---

Global Tracking Events

Session & User

Navigation

Help & Onboarding

Errors & Issues

Performance Metrics

Feature Flags & A/B Tests

Permissions & Consent

Product Interactions (Cross-Cutting)

Sharing & Social

System Events (Emitted by Backend/Teya Platform)

---

User Journeys: Invoice Creation UX • Generated from benchmark · Last updated 2026-04-09