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.

If you have ever built a web product, you probably know the feeling: features keep getting added, but without clear positioning, the product starts to look like everything else already on the market.

With NeatInvoice, I started from the opposite question: what problem do existing invoicing tools still not solve well enough?

In this article, I will walk through how the product was designed: the problem I wanted to solve, the positioning I chose, design decisions, the features I built and why, and the technical approach behind it.

Short Summary

Before going into detail, here are the main points I want to emphasize:

• Positioning: invoicing workspace, not a PDF generator
• Problem angle: clarity after the invoice is sent (Now what?)
• UI architecture: Editor + Overview, two screens only
• Differentiation: live link + view tracking available on the Free plan
• Stack: Next.js, Supabase, Vercel
• Monetization: Free forever; Pro for delivery and automation

Want to build a SaaS product with a similar approach? Talk it through in a free consultation.

The Problem I Wanted to Solve

Before writing a single line of code, I mapped three complaints that kept showing up in the freelancer invoicing market:

Complaint	Why it matters
”I sent the invoice three days ago. Did they even open it?”	After the invoice goes out, there is no signal at all
”I have to manually remind clients every time a payment is late.”	Follow-ups are repetitive and not automated
”My invoicing tool takes longer to learn than my actual work.”	Navigation is too complex; the product’s value gets lost in the complexity

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 generator with no tracking, no status, no overview) or too complex (enterprise accounting software with long onboarding). NeatInvoice is meant to fill the gap in the middle.

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

I deliberately aimed the brand hero copy at an angle competitors rarely touch:

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.

Positioning vs competitors

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

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

Target market

Freelancers and small teams (1 to 3 people) in the global market: designers, developers, consultants, writers. Product UI and copy are in English because the market is global.

The job to be done I designed for:

1. Create a professional invoice quickly
2. Share via live link or email, client-ready presentation
3. Track sent / viewed / paid; automated 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.

Internally I call the visual reference “The Trusted Desk”: warm off-white shell, the invoice document centered as the hero, calm chrome. Indigo accent only for Share, sent, and viewed signals. The goal is simple: numbers feel reliable, the invoice document stays the hero, and the overall UI feels familiar like finance-grade products (Stripe, Linear, Mercury).

Two screens, not a big dashboard

The most important information architecture decision for UX:

Screen	Route	Function
Editor	/workspace	Create, edit, 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 dozens of menu items.

Voice and 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 I 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. There is Client Preview, a single-column view exactly as the client sees it on the live link. Support for 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 indicators (idle, saving, saved, error). Guests on /invoice-generator save 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 and view tracking

Core features here:

• Publish live link (/inv/[id]) as a read-only page for clients without an account
• View counter and timestamp in the Share panel
• 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 Sent status. Drafts can be published for client preview; automated reminders (Pro) require Sent or Overdue status. Keeping those concepts separate prevents wrong expectations.

3. Share and 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)
• Needs attention queue for overdue invoices, unopened by client, or still draft
• Collection timing (aging past-due and coming due in the next 30 days)
• Revenue trend billed vs paid (6 / 12 / 24 months)
• Client and service rankings

Each row can deep link to the editor (?invoice=id) or share intent (?share=1).

This is what makes the product feel like a workspace, not just an invoice editor. Needs attention is designed so you know the next step, not just 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 gets 1 workspace; Pro up to 10. Switch from the navbar; libraries and metrics are scoped to the active workspace.

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

8. Recurring schedules (Pro)

Blueprints on the canvas act as master schedules. New schedules start paused until the user activates after the checklist is complete. 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 recurring edits from breaking the master schedule.

9. Invoice generator (separate funnel)

The /invoice-generator route offers in-browser PDF without sign-up, 10 invoices/month 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 ecosystem for SaaS
Database & Auth	Supabase (Postgres, Auth, Storage, RLS)	Auth + relational data without building a backend from scratch
Hosting	Vercel	Fast deploy, GitHub integration, edge-friendly
Email	Resend	Invoice and reminder delivery from the app
Billing	Polar.sh	Pro subscription (Founding and standard)
PDF	Client-side generation	No server cost per export

Email currently goes through Resend; I may consider 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 stacking 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 better.

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 a daily editor. UI responsiveness matters more than aggressive real-time sync.

6. An honest Free tier builds trust. The invoicing market is already 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 I approach SaaS product builds at Harun Studio: 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, we can help from needs audit through execution:

• Web app development
• Website development
• Free consultation

Live product: neatinvoice.app. Public roadmap at neatinvoice.app/roadmap.