Building NeatInvoice: Positioning, Design, and Product Decisions

NeatInvoice is a SaaS product I built at Harun Studio — an invoicing workspace for freelancers and small teams in the global market. It is not a one-off PDF generator, not enterprise accounting software, and deliberately not a generic AI dashboard.

This article is a product build case study: the problem we set out to solve, the positioning we chose, design decisions, the features we built and why, and the technical approach behind them.

Short Summary & Key Takeaways

Want to build a SaaS product with a similar approach? Start with a free consultation.

The Problem We Set Out to Solve

Before writing a single line of code, I mapped three pain points that consistently show up in the freelancer invoicing market:

Pain	Why it matters
”I sent the invoice three days ago. Did they even open it?”	Post-send anxiety — no signal after the invoice goes out
”I have to manually remind clients every time a payment is late.”	Repetitive payment chasing, not automated
”My invoicing tool takes longer to learn than my actual work.”	Navigation complexity outweighs the product’s value

Behind all three is a deeper pattern: freelancer billing workflows are fragmented — PDFs in one place, tracking in a spreadsheet, reminders in a manual calendar. There is no single billing home tying it together.

Existing competitors often fall into two extremes: too simple (PDF generators without tracking, status, or overview) or too complex (enterprise accounting software with long onboarding). NeatInvoice is designed to sit in the gap between them.

Positioning: Workspace, Not Generator

The most critical positioning decision at the start of the project: the homepage sells a workspace, not a PDF generator.

	Brand (neatinvoice.app)	Separate route (/invoice-generator)
Role	Primary identity — invoicing workspace	SEO funnel — fast PDF without an account
CTA	Start free workspace	Generate PDF
Goal	Long-term billing home	Entry point, convert to sign up

The brand hero copy deliberately picks an angle competitors rarely lead with:

Your invoice was sent. Now what?

Not “free invoice generator in 30 seconds.” The problem is not creating an invoice — plenty of tools already do that. The problem is what happens after it is sent: not knowing whether to follow up or wait, and not having one place to see everything still unpaid.

Wedge positioning vs competitors

NeatInvoice	Common alternatives
Free forever workspace	7–14 day free trial, then paywall
Finance overview + needs attention on Free	Overview locked behind expensive tiers
Live link + view tracking	PDF attachments with no open tracking
Local-first editor	Cloud-only, laggy when offline
Calm, finance-grade UI	Busy templates / AI dashboard aesthetic
Honest caps (25 inv/mo free)	Misleading “unlimited” marketing

What we deliberately do not claim: “AI-powered invoicing”, “all-in-one accounting”, “enterprise-grade ERP”.

Target market

Freelancers and small teams (1–3 people) in the global market — designers, developers, consultants, writers. Product UI and copy are in English. The job to be done we designed for:

1. Create a professional invoice quickly
2. Share via live link or email — client-ready presentation
3. Track sent / viewed / paid; automate follow-up on Pro
4. Manage clients, items, and business workspaces without losing data across devices

Design Decisions

Personality: Calm · Accountable · Professional

NeatInvoice deliberately avoids generic SaaS aesthetics — purple gradients, glass cards, “AI-powered” badges everywhere.

The internal visual reference is called “The Trusted Desk”: a warm off-white shell, the invoice document as the hero in the center, quiet chrome. Indigo accent appears only for Share, sent, and viewed signals. The goal is straightforward: numbers feel reliable, the invoice document stays central, and the overall UI feels familiar in a finance-grade way (Stripe, Linear, Mercury).

Two screens, not a large dashboard

The information architecture decision that most shaped the UX:

Screen	Route	Function
Editor	/workspace	Create, edit, and preview invoices
Overview	/workspace/overview	Finance pulse, needs attention, revenue trend

The workspace navbar has only two tabs: Editor and Overview. Overview is not a slide-over panel — it is its own destination route. The practical reason: freelancers who bill regularly switch between “editing an invoice” and “checking what is still unpaid.” Those are different enough contexts for separate screens, without needing 47-menu navigation.

Voice & copy

Direct, understated, finance-grade. Copy explains what happens next — save, publish, send, remind — not startup superlatives. Official product terms (Workspace, Overview, Live link, Needs attention) are not paraphrased casually.

Features We Built and Why

1. Invoice Editor — local-first, client-ready

The editor uses a split layout on desktop: 760px invoice document on the left, 380px inspector on the right. The sidebar holds libraries for invoices, recurring schedules, clients, and items. Client Preview shows a single-column view exactly as clients see it on the live link. The editor supports 40+ currencies and 12 locales for invoice labels. PDF exports client-side. Status lifecycle: Draft → Sent → Viewed → Paid, with Overdue and Cancelled as terminal states.

I chose a local-first approach because the editor is daily work and must feel responsive. Edits do not wait on the network; cloud sync runs in the background with honest status indicators (idle, saving, saved, error). Guests on /invoice-generator store data in the browser; signed-in users sync via Supabase. Client Preview reduces the risk of an invoice looking different when it reaches the client. Client and item libraries speed up repeat invoices without re-entering data.

2. Live link & view tracking

Core capabilities here: publish a live link (/inv/[id]) as a read-only page for clients without an account, view counter and timestamp in the Share panel, plus PDF download and payment links (Stripe, PayPal, Wise) on the public viewer.

PDF attachments cannot be tracked. The live link is the main differentiator — a direct answer to “Did they even open it?” One thing users need to understand: publishing a live link is not the same as status Sent. Drafts can be published for client preview; automated reminders (Pro) require Sent or Overdue status. Keeping those concepts separate prevents wrong expectations.

3. Share & delivery

On the Free plan, users copy a live link and share it via email, Slack, or any channel they already use. Pro adds in-app email delivery with the live link in the body — not a PDF attachment — plus scheduled payment reminders 3, 7, or 14 days after the due date, once per invoice.

Free remains useful without in-app email; copy link is enough for most use cases. Pro monetizes delivery and automation, not UI decoration. One reminder per invoice is intentional — enough to nudge, not enough to feel spammy.

4. Finance Overview — billing home

Overview shows finance pulse (Paid this month, Still owed, Overdue), a needs attention queue for overdue invoices, unopened client links, or drafts still unsent, collection timing (past-due aging and coming due in the next 30 days), revenue trend billed vs paid (6 / 12 / 24 months), and client and service rankings. Each row deep links to the editor (?invoice=id) or a share intent (?share=1).

This is what makes the product feel like a workspace, not just an invoice editor. Needs attention is designed to be actionable — not a generic notification feed.

5. Invoice activity — full ledger

A ledger of all invoices with filters for status, client, aging, and search — connected from Overview without switching apps. Overview is for the daily summary; activity is for audit and deeper search.

6. Revenue trend

A billed vs paid over time chart complements Overview without overcrowding it — freelancers can see cash flow patterns without a separate spreadsheet.

7. Business workspace — multi-brand

Each workspace has its own sender identity: logo, sender details, payment fields, prefix, currency, default language. Free includes 1 workspace; Pro up to 10. Switch from the navbar; libraries and metrics are scoped to the active workspace.

Many freelancers operate more than one business name. Scoped workspaces prevent client and invoice data from mixing across brands.

8. Recurring schedules (Pro)

A blueprint on the canvas acts as the master schedule. New schedules start paused until the user Activates after a complete checklist. Occurrence invoices are child invoices; editing an occurrence does not change the blueprint.

Monthly retainers are a clear Pro use case. Separating blueprint from occurrence prevents accidental edits from breaking the master schedule.

9. Invoice generator (separate funnel)

The /invoice-generator route offers in-browser PDFs without sign-up, 10 invoices per month stored locally. After sign-in, drafts can merge into the cloud workspace.

This is an SEO entry point and light onboarding — not the brand identity, but a bridge to the full workspace.

Technical Approach

Layer	Choice	Reason
Frontend	Next.js App Router, React, Tailwind CSS v4	File-based routing, server components, mature SaaS ecosystem
Database & Auth	Supabase (Postgres, Auth, Storage, RLS)	Auth and relational data without building a backend from scratch
Hosting	Vercel	Fast deploys, GitHub integration, edge-friendly
Email	Resend	Invoice and reminder delivery from the app
Billing	Polar.sh	Pro subscriptions (Founding & standard)
PDF	Client-side generation	No per-export server cost

Email currently runs through Resend; I may move to Unosend later for cost efficiency as send volume grows.

AI’s role in development

NeatInvoice was built with significant AI assistance — a pattern I have used before on ImageTools.pro and Penasihat Hosting. Cursor for primary development, Codex for repetitive code and refactoring, Antigravity for front-end UI iteration.

AI sped up UI iteration and boilerplate, but product decisions — data schema, invoice lifecycle, publish vs sent, monetization — stayed deliberate and manual.

Monetization: Honest Free, Pro for Automation

Users pay for Pro for delivery and automation, not decoration. The Free tier is a real workspace, not a limited demo.

Free — $0 / forever

• 25 invoices/month · 1 workspace · 3 active live links
• Live link tracking, finance overview, invoice activity, PDF export, cloud sync
• No credit card. Not a trial.

Pro

• In-app email (200/month) · automated reminders · recurring schedules
• 3,000 invoices/month · unlimited live links · 10 workspaces
• Founding Pro: $49/year (50 seats) — locked while subscribed, not a lifetime deal

Overview and view tracking on Free are positioning decisions — not features deliberately locked to force upgrades.

Lessons from Building the Product

1. Positioning matters more than feature count. NeatInvoice wins on post-send clarity, not on having the most features.

2. Separate brand from SEO funnel. /invoice-generator and the workspace are two products on one domain — their identities must not blur.

3. Two screens are enough for daily billing. More navigation does not automatically mean a better product.

4. Publish and Sent are different concepts — they must be designed and communicated clearly because they directly affect reminder and tracking expectations.

5. Local-first makes sense for an editor used every day. UI responsiveness matters more than aggressive real-time sync.

6. An honest Free tier builds trust in a market tired of trial fatigue.

7. Calm design is a feature. For financial documents, trust comes from restraint — not decoration.

Thinking About Building Something Similar?

NeatInvoice shows how Harun Studio approaches SaaS product builds: start from a clear problem, hold positioning tightly, keep design disciplined, then execute technically without over-engineering.

If you have a web product idea or internal platform in mind:

• Web app development
• Website development
• Free consultation

Live product: neatinvoice.app — public roadmap at neatinvoice.app/roadmap.

Quick FAQ

How is NeatInvoice different from the invoice generator on the same site?
The generator is a fast PDF tool without an account (SEO funnel). The workspace is the full billing home with libraries, live links, overview, and sync.

Is NeatInvoice accounting software?
No. It focuses on create, send, track, and follow-up — not ledgers or ERP.

What sets it apart from competitors?
Live link + view tracking and finance overview on Free; workspace positioning (not generator); calm, finance-grade design.

Who built it?
A small team at Harun Studio. Product questions: [email protected].