UI/UX / Pengembangan WebMagang2026

Digi Money Manager

Sistem keuangan yang menggantikan reimbursement lewat WhatsApp dan spreadsheet dengan satu alur persetujuan yang terlacak untuk lima peran pengguna. Saya mendesain setiap layar di Figma dan membangun sebagian front end.

Peran: UI/UX Designer dan Programmer
Tahun: 2026
Tim: Tim 7 mahasiswa, Rapid Application Development (RAD)
Platform: Web
Perangkat: Figma, Next.js, TypeScript, Tailwind CSS

Layar masuk dengan panel hijau berisi tiga fitur di kiri dan formulir email dan kata sandi di kanan. — Masuk: panel kiri memperkenalkan tiga gagasan, kuitansi yang diisi AI, jurnal debit dan kredit otomatis, dan anggaran real-time.

Layar karyawan untuk mengajukan reimbursement: bilah kemajuan empat langkah dan area unggah foto kuitansi. — Karyawan: mengajukan reimbursement dengan mengunggah kuitansi. Empat langkah: unggah, AI membaca data, tinjau dan kirim, terkirim.

Panel detail riwayat pengajuan yang menampilkan status, jumlah, level pos anggaran, status anti-fraud, dan linimasa persetujuan. — Karyawan: detail pengajuan dengan pos anggaran (Main, Sub, Keterangan), status anti-fraud, dan linimasa persetujuan.

Antrean persetujuan project manager dengan daftar permintaan dan panel detail yang menampilkan realisasi anggaran serta tombol Reject dan Forward. — Project manager: antrean persetujuan dengan realisasi anggaran di samping setiap permintaan, dan aksi untuk menolak atau meneruskan ke finance.

Antrean pencairan finance dengan panel detail dan pratinjau jurnal akuntansi yang dibuat otomatis. — Finance: antrean pencairan dengan pratinjau jurnal debit dan kredit yang dibuat otomatis.

Dashboard eksekutif dengan kartu ringkasan, diagram batang arus kas 12 bulan, ringkasan pengajuan dan cicilan, serta tabel proyek aktif. — Direktur: dashboard eksekutif dengan total, diagram arus kas, ringkasan pengajuan dan cicilan, serta proyek aktif.

Layar manajemen proyek dengan kartu proyek yang disaring berdasarkan status: perencanaan, aktif, selesai, dibatalkan. — Direktur: manajemen proyek dengan pencarian, filter status, dan satu kartu per proyek.

Gambaran umum

Digi Money Manager adalah sistem keuangan proyek berbasis web untuk PT Metanouva Informatika yang memusatkan reimbursement dan catatan keuangan proyek. Sebelumnya, reimbursement berjalan lewat pesan WhatsApp dan spreadsheet, sehingga data tersebar, status persetujuan sulit dilacak, serta pencatatan dan pelaporan lambat.

Sistem ini melayani lima peran: Superadmin, Direktur, Project Manager, Finance, dan Karyawan. Karyawan mengajukan reimbursement, project manager menyetujuinya, dan finance mencairkannya. Direktur menyetujui permintaan pos anggaran dari project manager, dan superadmin mengelola akun serta Chart of Accounts. Sistem ini juga membaca kuitansi dengan vision language model, mengekspor ke Excel, dan menyertakan Smart Chat, asisten AI yang menjawab pertanyaan keuangan sesuai peran yang sedang masuk.

Konteks

Aplikasi ini bermula dari mata kuliah Proyek Komputasi bersama mitra yang sama. Saya melanjutkannya selama magang dari Juni sampai Agustus 2026, dalam tim beranggotakan tujuh orang dengan metode Rapid Application Development (RAD).

Alur persetujuan

Setiap reimbursement ditampilkan kepada pengguna dalam empat langkah: diajukan, divalidasi project manager, diverifikasi finance, dan dicairkan. Layar-layar di atas mengikuti jalur itu, dan layar finance menampilkan pratinjau jurnal akuntansi yang dibuat saat permintaan dicairkan.

Kontribusi saya

Saya mendesain semua layar di Figma sendiri, untuk kelima peran. Saya juga membangun modul front-end dan endpoint pendukung bersama anggota tim lain, memperbaiki temuan QA di modul saya, dan menulis buku panduan pengguna bersama tim.

Status

Aplikasi ini dipakai di perusahaan.