Membangun NeatInvoice: Positioning, Desain, dan Keputusan Produk

NeatInvoice adalah produk SaaS yang saya bangun di Harun Studio — invoicing workspace untuk freelancer dan small team di pasar global. Bukan invoice generator sekali pakai, bukan software akuntansi enterprise, dan sengaja bukan dashboard AI generik.

Artikel ini adalah studi kasus pembangunan produk: masalah yang ingin diselesaikan, positioning yang dipilih, keputusan desain, fitur yang dibangun beserta alasannya, serta pendekatan teknis di baliknya.

Ringkasan Singkat & Key Takeaways

Ingin membangun produk SaaS dengan pendekatan serupa? Diskusikan dulu via konsultasi gratis.

Masalah yang Ingin Diselesaikan

Sebelum menulis satu baris kode, saya memetakan tiga pain point yang konsisten muncul di pasar invoicing untuk freelancer:

Pain	Kenapa ini penting
”I sent the invoice three days ago. Did they even open it?”	Post-send anxiety — tidak ada sinyal setelah invoice terkirim
”I have to manually remind clients every time a payment is late.”	Chase payment repetitif, tidak terotomasi
”My invoicing tool takes longer to learn than my actual work.”	Kompleksitas navigasi mengalahkan nilai produk

Di balik ketiganya, ada pola yang lebih dalam: alur billing freelancer terfragmentasi — PDF di satu tempat, tracking di spreadsheet, reminder di kalender manual. Tidak ada satu billing home yang menyatukan semuanya.

Kompetitor yang ada sering jatuh ke dua ekstrem: terlalu sederhana (generator PDF tanpa tracking, tanpa status, tanpa overview) atau terlalu kompleks (software akuntansi enterprise dengan onboarding panjang). Celah di tengah itulah yang ingin NeatInvoice isi.

Positioning: Workspace, Bukan Generator

Keputusan positioning paling kritis di awal proyek: homepage menjual workspace, bukan generator PDF.

	Brand (neatinvoice.app)	Route terpisah (/invoice-generator)
Peran	Identitas utama — invoicing workspace	Funnel SEO — PDF cepat tanpa akun
CTA	Start free workspace	Generate PDF
Tujuan	Billing home jangka panjang	Entry point, konversi ke sign up

Hero copy brand sengaja memilih sudut yang jarang disentuh kompetitor:

Your invoice was sent. Now what?

Bukan “free invoice generator in 30 seconds”. Masalah yang ingin diselesaikan bukan membuat invoice — itu sudah bisa dilakukan banyak alat. Masalahnya adalah setelah invoice terkirim: tidak tahu harus follow-up atau menunggu, tidak punya satu tempat untuk melihat semua yang masih unpaid.

Wedge positioning vs kompetitor

NeatInvoice	Alternatif umum
Free forever workspace	Free trial 7–14 hari lalu paywall
Finance overview + needs attention di Free	Overview hanya di tier mahal
Live link + view tracking	PDF attachment tanpa open tracking
Local-first editor	Cloud-only, lag saat offline
Calm, finance-grade UI	Template ramai / AI dashboard aesthetic
Honest caps (25 inv/mo free)	“Unlimited” marketing yang misleading

Yang sengaja tidak diklaim: “AI-powered invoicing”, “all-in-one accounting”, “enterprise-grade ERP”.

Target pasar

Freelancer dan small team (1–3 orang) di pasar global — designer, developer, consultant, writer. UI dan copy produk dalam bahasa Inggris. Job to be done yang dirancang:

1. Buat invoice profesional dengan cepat
2. Share via live link atau email — tampilan client-ready
3. Lacak sent / viewed / paid; follow-up otomatis saat Pro
4. Kelola klien, item, dan business workspace tanpa kehilangan data antar device

Keputusan Desain

Personality: Calm · Accountable · Professional

NeatInvoice sengaja tidak mengikuti aesthetic SaaS generik — purple gradient, glass cards, badge “AI-powered” di mana-mana.

Referensi visual internal saya sebut “The Trusted Desk”: warm off-white shell, dokumen invoice di tengah sebagai hero, chrome yang tenang. Indigo accent hanya untuk sinyal Share, sent, dan viewed. Tujuannya sederhana: angka terasa reliable, invoice document tetap menjadi hero, dan keseluruhan UI terasa familiar seperti produk finance-grade (Stripe, Linear, Mercury).

Dua layar, bukan dashboard besar

Keputusan arsitektur informasi yang paling menentukan UX:

Layar	Route	Fungsi
Editor	/workspace	Membuat, mengedit, preview invoice
Overview	/workspace/overview	Finance pulse, needs attention, revenue trend

Navbar workspace hanya dua tab: Editor dan Overview. Overview bukan slide-over panel — ini destination route sendiri. Alasannya praktis: freelancer yang menagih rutin sering berganti konteks antara “sedang edit invoice” dan “cek apa yang masih unpaid”. Dua konteks itu cukup berbeda untuk layar terpisah, tapi tidak perlu navigasi 47 menu.

Voice & copy

Direct, understated, finance-grade. Copy menjelaskan what happens next — save, publish, send, remind — bukan superlative startup. Istilah resmi produk (Workspace, Overview, Live link, Needs attention) tidak diparafrase sembarangan.

Fitur yang Dibangun dan Alasannya

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

Editor memakai split layout di desktop: dokumen invoice 760px di kiri, inspector 380px di kanan. Sidebar menampung library invoices, recurring, clients, dan items. Ada Client Preview — tampilan single-column persis seperti yang dilihat klien di live link. Dukungan 40+ mata uang dan 12 locale untuk label invoice. PDF diekspor client-side. Status lifecycle: Draft → Sent → Viewed → Paid, dengan Overdue dan Cancelled sebagai terminal states.

Saya pilih pendekatan local-first karena editor adalah tempat kerja harian dan harus responsif. Edit tidak menunggu network; sync cloud berjalan di background dengan indikator yang jujur (idle, saving, saved, error). Guest di /invoice-generator menyimpan di browser; user yang sign in sync via Supabase. Client Preview mengurangi risiko invoice terlihat berbeda saat sampai ke klien. Library clients dan items mempercepat invoice berulang tanpa input ulang.

2. Live link & view tracking

Fitur inti di sini: publish live link (/inv/[id]) sebagai halaman read-only untuk klien tanpa akun, view counter dan timestamp di panel Share, serta opsi PDF download dan payment links (Stripe, PayPal, Wise) di public viewer.

PDF attachment tidak bisa dilacak. Live link adalah diferensiasi utama — jawaban langsung untuk “Did they even open it?” Satu hal yang perlu dipahami user: publish live link tidak sama dengan status Sent. Draft boleh dipublish untuk preview klien; reminder otomatis (Pro) butuh status Sent atau Overdue. Memisahkan kedua konsep ini mencegah ekspektasi salah.

3. Share & delivery

Di plan Free, user bisa copy live link dan membagikannya lewat email, Slack, atau kanal apa pun. Plan Pro menambahkan kirim email dari app dengan live link di body — bukan PDF attachment — plus payment reminder terjadwal 3, 7, atau 14 hari setelah due date, satu kali per invoice.

Plan Free tetap berguna tanpa email dari app; copy link sudah cukup untuk mayoritas use case. Pro memonetisasi delivery dan automation, bukan dekorasi UI. Reminder satu kali per invoice dirancang agar tidak terasa spam.

4. Finance Overview — billing home

Overview menampilkan finance pulse (Paid bulan ini, Still owed, Overdue), antrian needs attention untuk invoice yang overdue, belum dibuka klien, atau masih draft, collection timing (aging past-due dan coming due 30 hari ke depan), revenue trend billed vs paid (6 / 12 / 24 bulan), serta ranking clients dan services. Setiap baris bisa deep link ke editor (?invoice=id) atau share intent (?share=1).

Ini yang membuat produk terasa seperti workspace, bukan sekadar editor invoice. Needs attention dirancang actionable — bukan feed notifikasi generik.

5. Invoice activity — ledger penuh

Ledger semua invoice dengan filter status, client, aging, dan search — terhubung dari Overview tanpa pindah aplikasi. Overview untuk ringkasan harian; activity untuk audit dan pencarian mendalam.

6. Revenue trend

Chart billed vs paid over time melengkapi Overview tanpa membuatnya terlalu padat — freelancer bisa melihat pola cash flow tanpa spreadsheet terpisah.

7. Business workspace — multi-brand

Setiap workspace punya identitas pengirim sendiri: logo, sender details, payment fields, prefix, currency, bahasa default. Free mendapat 1 workspace; Pro hingga 10. Switch dari navbar; library dan metrics di-scope ke workspace aktif.

Banyak freelancer punya lebih dari satu nama bisnis. Scoped workspace mencegah data klien dan invoice tercampur antar brand.

8. Recurring schedules (Pro)

Blueprint di canvas berfungsi sebagai master schedule. Schedule baru mulai paused sampai user Activate setelah checklist lengkap. Occurrence invoices adalah invoice anak; edit di occurrence tidak mengubah blueprint.

Retainer bulanan adalah use case Pro yang jelas. Memisahkan blueprint dari occurrence mencegah edit recurring yang tidak sengaja merusak jadwal master.

9. Invoice generator (funnel terpisah)

Route /invoice-generator menawarkan PDF di browser tanpa sign-up, 10 invoice/bulan lokal. Setelah sign in, draft bisa merge ke cloud workspace.

Ini entry point SEO dan onboarding ringan — bukan identitas brand, tapi jembatan ke workspace penuh.

Pendekatan Teknis

Layer	Pilihan	Alasan
Frontend	Next.js App Router, React, Tailwind CSS v4	Routing file-based, server components, ekosistem matang untuk SaaS
Database & Auth	Supabase (Postgres, Auth, Storage, RLS)	Auth + data relational tanpa membangun backend dari nol
Hosting	Vercel	Deploy cepat, integrasi GitHub, edge-friendly
Email	Resend	Pengiriman invoice & reminder dari app
Billing	Polar.sh	Subscription Pro (Founding & standard)
PDF	Client-side generation	Tanpa biaya server per export

Email saat ini via Resend; ke depan saya pertimbangkan Unosend untuk efisiensi biaya saat volume pengiriman bertambah.

Peran AI dalam development

NeatInvoice dibangun dengan bantuan AI — pola yang sudah saya terapkan di ImageTools.pro dan Penasihat Hosting. Cursor untuk development utama, Codex untuk kode repetitif dan refactoring, Antigravity untuk iterasi UI front-end.

AI mempercepat iterasi UI dan boilerplate, tapi keputusan produk — schema data, lifecycle invoice, publish vs sent, monetisasi — tetap deliberate dan manual.

Monetisasi: Free yang Jujur, Pro untuk Otomasi

User bayar Pro untuk delivery dan automation, bukan dekorasi. Free tier adalah workspace nyata, bukan demo terbatas.

Free — $0 / forever

• 25 invoice/bulan · 1 workspace · 3 live links aktif
• Live link tracking, finance overview, invoice activity, PDF export, cloud sync
• Tanpa kartu kredit. Bukan trial.

Pro

• Email dari app (200/bulan) · reminder otomatis · recurring schedules
• 3.000 invoice/bulan · unlimited live links · 10 workspaces
• Founding Pro: $49/tahun (50 kursi) — locked while subscribed, bukan lifetime deal

Overview dan view tracking di Free adalah keputusan positioning — bukan fitur yang sengaja dikunci untuk memaksa upgrade.

Pelajaran dari Pembangunan Produk

1. Positioning lebih penting dari feature count. NeatInvoice menang di sudut post-send clarity, bukan di jumlah fitur.

2. Pisahkan brand dari funnel SEO. /invoice-generator dan workspace adalah dua produk dalam satu domain — identitasnya tidak boleh tertukar.

3. Dua layar cukup untuk billing harian. Lebih banyak navigasi tidak otomatis berarti lebih baik.

4. Publish dan Sent adalah dua konsep berbeda — harus dirancang dan dikomunikasikan dengan jelas karena langsung mempengaruhi ekspektasi reminder dan tracking.

5. Local-first masuk akal untuk editor yang dipakai setiap hari. Responsivitas UI lebih penting dari sync agresif real-time.

6. Free tier yang jujur membangun trust di pasar yang sudah muak trial fatigue.

7. Desain tenang adalah fitur. Untuk dokumen finansial, kepercayaan datang dari ketenangan — bukan dari dekorasi.

Ingin Membangun Produk Serupa?

NeatInvoice menunjukkan bagaimana Harun Studio mendekati pembangunan produk SaaS: mulai dari masalah yang jelas, positioning yang tegas, desain yang disiplin, lalu eksekusi teknis yang tidak over-engineered.

Jika Anda punya ide produk web atau platform internal:

• Jasa pembuatan aplikasi web
• Jasa pembuatan website
• Konsultasi gratis

Produk live: neatinvoice.app — roadmap publik di neatinvoice.app/roadmap.

FAQ Singkat

Apa bedanya NeatInvoice dengan invoice generator di situs yang sama?
Generator adalah tool PDF cepat tanpa akun (funnel SEO). Workspace adalah billing home penuh dengan library, live links, overview, dan sync.

Apakah NeatInvoice software akuntansi?
Tidak. Fokus pada create, send, track, dan follow-up — bukan ledger atau ERP.

Fitur apa yang membedakan dari kompetitor?
Live link + view tracking dan finance overview tersedia di Free; positioning workspace (bukan generator); desain calm dan finance-grade.

Siapa yang membangunnya?
Tim kecil di Harun Studio. Pertanyaan produk: hello@neatinvoice.app.