WorkStudioServicesContactStart a project
All work
Case study — Invoice Flow live product preview

From estimate to paid, without losing the job in between.

We designed and built a focused invoicing workspace for service businesses — connecting customers, reusable products, estimates, approvals, invoices, deposits, and payment records in one calm, responsive product.

Explore the live preview ↗
collinscrtv.com/invoice-flow/
Invoice Flow invoice builder for a wood fence replacement with customer, pricing, deposit, and total controls

Project type

Live Product PreviewCustom SoftwareWeb App

Industry

Service BusinessesField Operations

Capabilities

Product StrategyWorkflow DesignUX/UI DesignFront-end Development
The workflow, in motion

One product record.
Ready for the next document.

Invoice Flow · product motion

Reusable product workflow

1 / 2
0:000:00

Use the arrow keys to move between clips. Press Escape to close.

The challenge

The invoice is one document. The work around it is the real system.

For a service business, getting paid starts long before an invoice is sent. Customer details, scopes, products, pricing, approvals, deposits, due dates, and payment history all belong to the same job. When those pieces live across spreadsheets, accounting screens, inboxes, and memory, the office spends too much time rebuilding context.

Invoice Flow needed to keep that chain intact — and make the next action obvious without turning a small-business workflow into enterprise software.

The workflow

One record follows the work from quote to payment.

The product begins with the daily questions: what is waiting for approval, which deposits are due, what is unpaid, and what needs attention now. From there, customers, reusable products, estimates, invoices, approvals, and payment records stay connected instead of becoming separate files. It is the kind of connected process our custom software work is designed to support.

A dashboard for approvals, deposits, unpaid invoices, overdue balances, and recent payments Fast customer, product, estimate, invoice, payment, and action search A reusable estimate and invoice builder with templates, tax, discounts, deposits, and customer messages Customer-facing document previews, approval and signature states, and payment recording Import, backup, restore, and on-device persistence for a safe, explorable demo workspace
The working surface

Every state keeps the next move visible.

The product is intentionally calm even when the job is not. The workspace starts with what needs attention, then makes it easy to move through reusable products, estimates, document detail, and payment confirmation without rebuilding the same information at every step.

Workspace access
Daily dashboard
Reusable product context
Estimate builder
Invoice record
Payment receipt
The product boundary

A working prototype that is honest about what is connected.

The current release is an installable, local-first product preview. Demo records stay in the browser, and the full workflow can be explored without a production account. Authentication, hosted document delivery, and card processing are represented in the experience but are not presented as live production integrations.

That boundary keeps the prototype useful for testing the operating model, interaction design, document flow, and responsive behavior before durable cloud data and payment infrastructure are introduced.

The production blueprint

A cloud foundation built to keep the work connected.

The local-first preview is deliberate. The production plan pairs the same calm workflow with a durable, workspace-scoped architecture, so every estimate, approval, document, and payment has a reliable home without overstating what the public demo already connects.

React, TypeScript, and Vite for a fast, maintainable product interface Hono on Cloudflare Workers for the edge application layer Cloudflare D1 with Drizzle for workspace-scoped customers, documents, and payment records Private R2 document storage and Clerk-based tenant authorization for sensitive business data Stripe Connect direct charges and Checkout, with webhooks treated as the source of payment truth Outbox events, queues, workflow recovery, Resend, and Sentry for dependable handoffs and support
1
Connected workspace for customers, documents, approvals, and payments
4 stages
Estimate, approval, invoice, and payment in one visible lifecycle
Local first
An installable demo whose workspace stays on the device
The invoice is only one screen. The real product is the workflow around it.

Still rebuilding the same job in three different tools?

Start a project

Tell us what's slowing your team down.

Send us a note. We'll show you what a system built around your business could look like — no obligation, no jargon.