NeatInvoice adalah produk SaaS yang saya bangun di Harun Studio: invoicing workspace untuk freelancer dan tim kecil di pasar global. Bukan invoice generator sekali pakai, bukan software akuntansi enterprise, dan sengaja bukan dashboard AI generik.
Kalau Anda pernah membangun produk web, mungkin Anda paham rasanya: fitur bisa ditambah terus, tapi tanpa positioning yang jelas, produk mudah terlihat “sama saja” dengan yang sudah ada.
NeatInvoice justru saya mulai dari pertanyaan sebaliknya: masalah apa yang belum cukup baik dijawab oleh alat invoicing yang sudah ada?
Di artikel ini, saya akan ceritakan bagaimana produk ini dirancang: masalah yang ingin diselesaikan, positioning yang dipilih, keputusan desain, fitur yang dibangun beserta alasannya, serta pendekatan teknis di baliknya.
Sebelum masuk detail, ini poin utama yang ingin saya tekankan:
Ingin membangun produk SaaS dengan pendekatan serupa? Diskusikan dulu via konsultasi gratis.
Sebelum menulis satu baris kode, saya petakan tiga keluhan yang konsisten muncul di pasar invoicing untuk freelancer:
| Keluhan | Kenapa ini penting |
|---|---|
| ”I sent the invoice three days ago. Did they even open it?” | Setelah invoice terkirim, tidak ada sinyal apa pun |
| ”I have to manually remind clients every time a payment is late.” | Penagihan ulang repetitif, tidak terotomasi |
| ”My invoicing tool takes longer to learn than my actual work.” | Navigasi terlalu rumit, nilai produk kalah dari kompleksitasnya |
Di balik ketiganya, ada pola yang lebih dalam: alur billing freelancer sering 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.
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 saya arahkan ke 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 ada setelah invoice terkirim: tidak tahu harus follow-up atau menunggu, tidak punya satu tempat untuk melihat semua yang masih unpaid.
| NeatInvoice | Alternatif umum |
|---|---|
| Free forever workspace | Free trial 7 sampai 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 |
| Batas jujur (25 inv/mo free) | “Unlimited” marketing yang misleading |
Yang sengaja tidak saya klaim: “AI-powered invoicing”, “all-in-one accounting”, “enterprise-grade ERP”.
Freelancer dan tim kecil (1 sampai 3 orang) di pasar global: designer, developer, consultant, writer. UI dan copy produk dalam bahasa Inggris karena pasarnya global.
Job to be done yang saya rancang:
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).
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 puluhan menu.
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 saya parafrase sembarangan.
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.
Fitur inti di sini:
/inv/[id]) sebagai halaman read-only untuk klien tanpa akunPDF 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.
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 saya rancang agar tidak terasa spam.
Overview menampilkan:
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 saya rancang supaya user langsung tahu langkah berikutnya, bukan sekadar feed notifikasi generik.
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.
Chart billed vs paid over time melengkapi Overview tanpa membuatnya terlalu padat. Freelancer bisa melihat pola cash flow tanpa spreadsheet terpisah.
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.
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.
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.
| 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 |
| Resend | Pengiriman invoice & reminder dari app | |
| Billing | Polar.sh | Subscription Pro (Founding & standard) |
| 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.
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 saya putuskan manual.
User bayar Pro untuk delivery dan automation, bukan dekorasi. Free tier adalah workspace nyata, bukan demo terbatas.
Overview dan view tracking di Free adalah keputusan positioning, bukan fitur yang sengaja dikunci untuk memaksa upgrade.
Positioning lebih penting dari jumlah fitur. NeatInvoice menang di sudut post-send clarity, bukan di jumlah fitur.
Pisahkan brand dari funnel SEO. /invoice-generator dan workspace adalah dua produk dalam satu domain. Identitasnya tidak boleh tertukar.
Dua layar cukup untuk billing harian. Lebih banyak navigasi tidak otomatis berarti lebih baik.
Publish dan Sent adalah dua konsep berbeda. Keduanya harus dirancang dan dikomunikasikan dengan jelas karena langsung mempengaruhi ekspektasi reminder dan tracking.
Local-first masuk akal untuk editor harian. Responsivitas UI lebih penting dari sync agresif real-time.
Free tier yang jujur membangun trust. Pasar invoicing sudah cukup muak dengan trial fatigue.
Desain tenang adalah fitur. Untuk dokumen finansial, kepercayaan datang dari ketenangan, bukan dari dekorasi.
NeatInvoice menunjukkan bagaimana saya mendekati pembangunan produk SaaS di Harun Studio: mulai dari masalah yang jelas, positioning yang tegas, desain yang disiplin, lalu eksekusi teknis yang tidak over-engineered.
Kalau Anda punya ide produk web atau platform internal, kami bisa bantu dari tahap audit kebutuhan sampai eksekusi:
Produk live: neatinvoice.app. Roadmap publik ada di neatinvoice.app/roadmap.
Founder Harun Studio & web developer, blogger, serta hosting reviewer. Telah membantu pemilik bisnis meraih kesuksesan dengan design, development dan maintenance sejak 2021.
Baca juga insight lain yang masih relevan dengan topik ini.
STUDI KASUS Pengalaman membangun ImageTools.pro, aplikasi pengolah gambar online dengan teknologi Next.js, Sharp.js, dan Shadcn UI, serta bagaimana AI mengubah cara saya membangun aplikasi web.
Baca Artikel
STUDI KASUS Studi kasus migrasi Penasihat Hosting: dari WordPress yang sebenarnya sudah solid ke Next.js 16 + PostgreSQL demi fleksibilitas jangka panjang, CMS kustom, tool pages, dan fondasi produk yang lebih scalable.
Baca Artikel
STUDI KASUS Bagaimana ICV Training memodernisasi website dengan Astro, Sanity, dan Cloudflare Workers untuk menangani 4.905 dokumen pelatihan secara dinamis, cepat, dan nyaris tanpa biaya platform bulanan.
Baca Artikel