Tantangan
Informasi pekerjaan, progres, biaya, DP, dan sisa tagihan perlu terbaca dalam satu alur. Tantangannya adalah menyederhanakan pekerjaan administrasi yang saling berkaitan tanpa membuat dashboard terasa padat atau membingungkan.
Web Development · 2026
Betang Home’s — Project Studio
- Klien
- Betang Home’s · Palangka Raya
- Peran saya
- Freelance Web Developer
- Layanan
- UI/UX Design · Dashboard Design · Web Application Development · Responsive Web Design
- Tahun
- 2026
Klik gambar untuk melihat detail · Geser untuk menjelajahi galeri
Ringkasan
Desain dan pengembangan Betang Home’s Project Studio, aplikasi web untuk membantu usaha konstruksi dan pemasangan baja ringan mengelola proyek, perhitungan biaya, pembayaran, serta invoice. Sebagai Freelance Web Developer, saya menyusun alur kerja dari gambaran usaha hingga rincian pekerjaan dalam antarmuka yang konsisten. Studi kasus ini menampilkan versi demo interaktif dengan data simulasi.
Hasil
Hasilnya berupa aplikasi web demo yang menghubungkan perencanaan pekerjaan, pemantauan progres, perhitungan biaya, dan dokumentasi tagihan. Dokumentasi memperlihatkan tampilan desktop serta mobile. Angka proyek dan transaksi merupakan simulasi; data demo tersimpan di browser dan bukan laporan keuangan atau hasil kinerja usaha.
Konsep
Menggunakan warna hijau tua, latar putih hangat, dan aksen sage yang mengikuti identitas Betang Home’s. Kartu ringkasan, indikator progres, tabel terstruktur, dan formulir bertahap membentuk hierarki informasi yang mudah dipindai.
Solusi
Mengembangkan dashboard ringkasan usaha, daftar proyek dengan pencarian dan filter status, kalkulator luas serta tarif per meter persegi, pencatatan pembayaran, dan pratinjau invoice dengan opsi cetak ke PDF. Navigasi serta kartu ringkasan menyesuaikan layar desktop dan ponsel. Alur demo dapat dijelajahi melalui tautan proyek.
01 / PROJECT STUDIO
Dari pekerjaan lapangan ke ruang kerja digital.
Satu antarmuka menyatukan gambaran usaha, daftar pekerjaan, dan status pembayaran. Ringkasan utama diletakkan di bagian atas, diikuti progres pembayaran serta pekerjaan yang perlu ditindaklanjuti.
Tampilan desktop dan mobile Betang Home’s Project Studio. Seluruh angka dalam dashboard adalah data demo.
02 / ALUR PROYEK
Setiap tahap punya tempat.
Daftar proyek mempertemukan status pekerjaan, nilai proyek, sisa tagihan, dan progres. Kalkulator menyusun perhitungan berdasarkan ukuran serta tarif, lalu menampilkan biaya tambahan, diskon, DP, dan sisa pembayaran dalam ringkasan yang terpisah.
Daftar proyek dengan pencarian, filter status, dan indikator progres — menggunakan data simulasi.
Perhitungan biaya & pembayaran
03 / DOKUMENTASI
Rincian yang siap dibaca dan dibagikan.
Pratinjau invoice menyusun identitas usaha, pekerjaan, harga satuan, volume, serta transaksi terkait dalam format dokumen yang rapi. Versi demo menyediakan pilihan cetak atau simpan PDF melalui browser.
Dokumen simulasi — contoh pratinjau invoice, bukan tagihan asli.
Akses demo & tampilan mobile
Ada proyek
serupa?
Ceritakan kebutuhanmu. Kita bisa mulai dari ide, tujuan, dan visual yang ingin kamu bangun.