Case Study
Due It - Jasanya AturUang
UI/UX CASE STUDY — DUE IT – Jasanya AturUang
Disclaimer : Case study ini merupakan proyek pengembangan produk digital yang diinisiasi dan digarap secara kolaboratif sebagai bagian dari program pengembangan produk oleh komunitas jasanya.tech. Seluruh tahapan riset, pembuatan konsep, perancangan antarmuka, hingga pengujian dilakukan untuk menghasilkan solusi nyata yang siap diimplementasikan.
1. Latar Belakang
Aplikasi manajemen keuangan yang memiliki konsep seperti prinsip Kakeibo. Kakeibo adalah salah satu cara orang Jepang mengatur keuangannya, yaitu dengan mencatat pemasukan dan pos-pos rencana pengeluaran per bulan serta menentukan jumlah uang yang akan ditabung dan/atau diinvestasikan.
Pencatatan dilakukan dengan tujuan untuk refleksi diri atas anggaran yang dibuat dan pembelanjaan yang telah dilakukan berdasarkan catatan yang ada, sehingga dapat mewujudkan pengelolaan keuangan yang seimbang.
2. Objektif
- Menyederhanakan Alur Kerja Finansial: Memangkas proses input transaksi harian agar dapat dilakukan secara instan, cepat, dan minim friksi (effortless).
- Meningkatkan Kesadaran Finansial Pengguna: Menyajikan visualisasi data pengeluaran dan pemasukan yang komunikatif serta mudah dipahami sekilas pandang.
3. Peran dalam Tim
Product Manager :
- Laila Alfi Syah
Technical Leader :
- Sahrul Syaifullah
Tim UI/UX terdiri dari 5 orang diantaranya :
- Muhammad Ridwan (Koordinator)
- Atikah Rahmawati
- Firli Aurelia
- Della Atikah
- Ratna
Tim Programmer terdiri dari 7 orang diantaranya :
- Rahmat Fauzi
- Syaiban Rama
- Wildan
- Valen
- Farel
- Iwan
- Bregsi
Dalam tugas ini, saya berperan sebagai Koordinator UI/UX Design dengan tanggung jawab utama sebagai berikut :
- Manajemen Alur Kerja: Menyusun rencana kerja, menetapkan timeline, dan mendistribusikan tugas (wireframing, design system, prototyping)
- Supervisi & Quality Control: Meninjau hasil kerja tim dan memberikan umpan balik untuk menjaga konsistensi visual (design system) serta kualitas pengalaman pengguna (UX).
- Fasilitator Komunikasi: Menjadi jembatan antara divisi UI/UX dengan Product Owner (keselarasan visi) serta Tim Programmer (kesiapan teknis aset desain).
- Pengarah Strategi: Memimpin brainstorming, memfasilitasi pengambilan keputusan kritis, dan memastikan seluruh anggota tim bekerja dengan arah yang sama.
4. Tools
Berikut beberapa tools/technology yang kami gunakan saat membuat project ini diantaranya :
- Trello (Project Management/Workflow)
- GDocs (Documentation)
- Gather (Meeting Online)
- Figma (Desain UI/UX)
- Vue Js (Frontend Website)
- Flutter (Frontend Mobile)
- Golang (Backend)
- Postgresql (Database)
5. Metode Project
- Design Thinking (Fokus pada Solusi): Digunakan sebagai kompas untuk memastikan kami membangun solusi yang tepat sasaran yaitu berakar pada empati mendalam untuk menjawab friksi dan kebutuhan nyata pengguna.
- Scrum (Fokus pada Proses): Digunakan sebagai mesin penggerak untuk memastikan kami membangun produk dengan cara yang benar yaitu cepat, terstruktur, dan adaptif melalui siklus kerja (Sprint) yang kolaboratif antara tim UI/UX dan Programmer.
5. 1. Project Planning & Collaboration
Pada tahap awal, tim melakukan diskusi bersama Product Owner, tim UI/UX, dan tim programmer untuk menyusun arah pengembangan produk, menentukan kebutuhan fitur, serta membagi alur kerja proyek secara terstruktur.
5. 2. Page Specification
Tahap ini dilakukan untuk mendefinisikan kebutuhan setiap halaman aplikasi, termasuk tujuan halaman, komponen utama, serta fungsi yang akan digunakan pengguna.
5. 3. Product Backlog
Seluruh kebutuhan fitur dan task project disusun ke dalam product backlog sebagai acuan prioritas pengerjaan selama proses sprint berlangsung.
5. 4. User Flow
Pembuatan user flow bertujuan untuk memetakan perjalanan pengguna saat menggunakan aplikasi agar alur interaksi menjadi lebih jelas, sederhana, dan mudah dipahami.
5. 5. Logo Design
Pada tahap ini dilakukan eksplorasi identitas visual dan perancangan logo sebagai representasi karakter serta nilai utama dari aplikasi Due It. Saya yang merancang desain logo tersebut dengan representasi sederhana mengambil bagian masing-masing huruf yaitu “due it”, penggunaan warna dalam logo sudah di tentukan oleh product manager warna hitam dan kuning.
5. 6. Design System
Tim menyusun design system untuk menjaga konsistensi visual, mulai dari penggunaan warna, typography, komponen, hingga guideline antarmuka aplikasi.
5. 7. Wireframe Design
Wireframe dibuat sebagai gambaran awal struktur layout dan penempatan elemen antarmuka sebelum masuk ke tahap visual desain.
5. 8. High-Fidelity Design
Setelah wireframe disetujui, proses dilanjutkan ke tahap high-fidelity design untuk menghasilkan tampilan antarmuka yang lebih detail, interaktif, dan mendekati produk final.
6. Kesimpulan
Meskipun proyek Due It masih berada pada tahap pengembangan dan belum sepenuhnya dirilis secara publik, proses perancangannya telah berhasil membangun fondasi produk finansial yang lebih sederhana, ramah pengguna, dan berfokus pada kenyamanan pengguna sehari-hari.
Melalui pendekatan Human-Centered Design, Design Thinking, dan Scrum, tim mampu mengembangkan konsep serta pengalaman pengguna yang lebih interaktif, mudah dipahami, dan relevan dengan kebutuhan pengguna modern. Proyek ini juga menjadi pengalaman kolaboratif yang memperkuat proses perancangan produk digital secara terstruktur, mulai dari riset hingga eksplorasi desain. Adapun tahap prototyping lanjutan dan testing secara menyeluruh belum dilakukan dalam project ini.
7. Kelebihan
- Antarmuka Sederhana dan Mudah Dipahami
- Proses Input Transaksi Lebih Cepat
- Visualisasi Finansial yang Informatif
- User Experience yang Lebih Nyaman
8. Kekurangan
- Fitur Masih Berfokus pada MVP
- Belum Memiliki Implementasi Production
- Pengujian Pengguna Masih Terbatas
- Ketergantungan pada Input Manual
- Prototype yang tidak tersedia
9. Penutup
Melalui proyek Due It, kami memahami bahwa aplikasi keuangan tidak hanya harus fungsional, tetapi juga nyaman dan mudah digunakan. Case study ini menjadi bentuk eksplorasi kami dalam merancang solusi digital yang lebih humanis dan diharapkan dapat terus dikembangkan menjadi produk yang bermanfaat bagi banyak pengguna.