Prototipe backoffice Merdeka
Tiruan konsol operasional yang bisa diklik, dipakai untuk me-review workflow baru sebelum dibangun.
Studi kasus · Product designer dan prototyper · 8 Oktober 2026 · 1 menit baca
Backoffice Merdeka adalah tempat tim operasional mengelola lead, tahapan proyek, dokumen yang kurang, dan pengaturan. Workflow baru di sana perlu persetujuan beberapa tim sebelum dibangun. Mockup statis nggak cukup, jadi saya bikin prototipe yang bisa diklik.
Tujuannya
Terasa seperti aplikasi aslinya, supaya review fokus ke workflow, bukan ke tampilannya. Aman dibagikan: semua orang dan angka di dalamnya fiktif.
Isinya
38 layar, dibangun dalam sekitar tiga bulan:
- Home untuk sales manager, dengan lead yang mulai dingin
- Halaman proyek dengan tahapan, upload, dan pengganti peran
- Pengaturan admin: aturan notifikasi, import CSV, peran lead, webhook
- Marketplace tempat partner menawar proyek yang sudah siap
- Course builder dan dua layout mobile berdampingan
- Proposal untuk pelanggan: pilih layanan, lihat pembiayaan, tanda tangan
Keputusan desain
- Demo dengan panduan. Tur langkah demi langkah di atas halaman aslinya, jadi siapa pun bisa menjalankan demo sendiri.
- Perubahan tersimpan, lalu bisa di-reset. Kamu bisa bikin aturan atau import file dan hasilnya tetap ada. Tombol "Reset demo" membersihkannya untuk orang berikutnya.
- Opsi berdampingan. Kalau tim belum sepakat, prototipenya menampilkan dua-duanya.
- Mirip produksi. Sidebar dan komponennya sama. Menu yang belum punya halaman tetap tampil tapi nggak bisa diklik.
Dibangun dengan Next.js, Tailwind CSS, dan shadcn, lengkap dengan test dan lint supaya perubahan mingguan nggak bikin rusak.