UI/UX Case Study: Design Process Fitur Cash Flow untuk Aplikasi Mobile Krealogi

Disclaimer: Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul (https://skilvul.com) dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh (Challenge Partner).

Pendahuluan

Permasalahan

Krealogi, sebuah aplikasi mobile untuk mengelola produksi, penjualan, dan inventaris bagi produsen serta distributor yang bergerak di bidang kriya, belum memiliki sebuah fitur terintegrasi untuk memantau kas sepanjang siklus proses bisnis.

Tujuan

Desain fitur cash flow terintegrasi untuk aplikasi mobile Krealogi. Fitur paling sedikit harus termasuk fungsionalitas seperti tertulis di bawah:

1. Menyediakan informasi pendapatan bulanan maupun harian bagi user.
2. Menyediakan informasi biaya bulanan maupun harian bagi user.
3. Menghasilkan dokumen excel untuk laporan cash flow.

The Team

1. Christien Marhandita, UI/UX Designer, Information Architecture
2. Jessica Stephanie Putri, UI/UX Designer, Visual Design
3. Krishna Govinda, UI/UX Designer, UX Researcher

Design Process

Research Stage

Kami memulai dengan melakukan pemahaman terhadap aplikasi mobile Krealogi untuk dapat mengetahui bagaimana proses bisnis dilakukan di dalam aplikasi. Kesimpulan yang kami dapat adalah fungsionalitas keuangan merupakan sebuah fitur tersendiri yang tidak terhubung dengan fitur keuangan lainnya seperti gudang, produksi, dan pesanan. Sementara itu menu produksi dan menu pesanan memerlukan aliran data dari menu gudang dalam bentuk jumlah barang, namun jika tidak ada jumlah barang tersedia maka proses pesanan dan proses produksi tidak dapat dilakukan.

Define Stage

Berdasarkan penilaian yang kami lakukan, kami menetapkan beberapa pain point berikut sebagai pain point yang paling memberatkan bagi user:

1. Form input untuk mencatat biaya terlalu rumit dan sulit untuk digunakan,
2. Tidak ada integrasi antara fungsionalitas biaya dengan produksi dan/atau manajemen inventori,
3. Tidak ada cara untuk menunjukkan sisa saldo yang tersedia,
4. Harus melakukan update secara manual untuk bahan baku setelah melakukan produksi,
5. Tidak dapat mencatat pesanan apabila stok di dalam gudang tidak ada. Hal ini tentu menjadi permasalahan bagi pelaku UMKM yang menerapkan sistem Pre-Order dalam menjalankan bisnisnya.

Selain itu juga terdapat beberapa pain point lainnya yang dapat dipertimbangkan sebagai opportunity:

How-Might-We

Berdasarkan pain point yang telah ditetapkan, kami merangkum permasalahan menjadi How-Might-We berikut:

1. Bagaimana kita dapat mengintegrasikan alur data dari pendapatan dan biaya, sehingga proses dari pengadaan bahan baku yang dilakukan user hingga menghasilkan laporan yang streamlined?
2. Bagaimana kita dapat menyederhanakan proses input untuk transaksi — transaksi yang ada sepanjang siklus proses bisnis, sehingga user dapat dengan mudah mendapatkan informasi saldo yang tersedia tanpa harus melakukan input data redundant?

Ideate Stage

Solution Ideas

Kami melakukan brainstorming untuk mendapatkan masukan — masukan yang dapat diimplementasikan terhadap How-Might-We yang telah didefinisikan sebelumnya.

Ide — ide yang telah kami dapatkan dikategorikan berdasarkan Value fungsionalitas tersebut bagi user, dan Effort yang diperlukan dalam implementasinya.

Kami memutuskan untuk menambahkan fitur yang berhubungan dengan cash flow dengan mempertimbangan Challenge dari partner.

Setelah itu kami melakukan penggalian lebih lanjut terhadap kemungkinan layout yang dapat diimplementasikan dengan melakukan Crazy 8's.

Proposed Data Flow

Untuk menyederhanakan proses, kami mendapatkan alur proses seperti terdapat pada gambar dibawah:

Proposed Data Flow.

1. Data Jumlah bahan baku yang diinput pada menu Gudang akan digunakan pada menu Produksi sebagai input validasi dalam melakukan produksi. Apabila stok bahan baku dalam gudang kosong, maka tidak dapat melanjutkan proses produksi.
2. Pelaksanaan produksi akan dapat menambah jumlah stok barang jadi yang ada pada menu Gudang, sekaligus mengurangi stok bahan baku yang ada.
3. Data pembelian bahan baku pada menu Transaksi Keluar akan dikirimkan ke menu Gudang untuk mengupdate stok yang ada di Gudang secara otomatis.
4. Nilai uang yang diinput pada menu Transaksi Pengeluaran akan digunakan untuk laporan cash flow apabila transaksi tersebut merupakan transaksi kas.
5. Nilai uang yang diinput pada menu Transaksi Pemasukan akan digunakan untuk laporan cash flow apabila transaksi tersebut merupakan transaksi kas.
6. Transaksi masuk yang digunakan akan digunakan untuk menu Pesanan apabila transaksi tersebut merupakan pendapatan dari Pesanan yang sudah ada.

User Flow

Berdasarkan alur data yang kami definisikan sebelumnya, kami menentukan alur yang dilakukan oleh user untuk menghasilkan laporan cash flow dalam keadaan ideal:

Proposed User Flow

Prototyping Stage

User melakukan input data barang yang dikelola (bahan baku, barang 1/2 jadi, barang jadi) pada menu Gudang. Data yang diisi terdapat nama barang, harga barang, kuantitas, dan nominal. User dapat menginput data barang yang jumlahnya 0.

Input Bahan Baku

User melakukan pembelian bahan baku, dan melakukan input pada menu Transaksi Keluar. Data yang diinput pada menu transaksi berupa dropdown jenis barang, dan kuantitas. Data dropdown jenis barang diambil dari data yang sudah diinput pada menu gudang, dan data kuantitas yang diinput pada menu Transaksi Keluar akan digunakan oleh menu Gudang sebagai update untuk kuantitas.

Input Transaksi Keluar

User merencanakan produksi dengan masuk ke menu +Produksi yang ada pada fitur default Krealogi. Diperlukan input data Kuantitas barang jadi untuk dapat mengupdate kuantitas bahan baku. Setelah produksi selesai dilakukan, maka stok barang jadi pada menu Gudang akan terupdate secara otomatis.

User mencatat pesanan yang masuk pada menu +Pesanan. Salah satu data yang perlu diinput user adalah data Jenis Barang dan Jumlah Produk yang merupakan data Barang Jadi yang ada pada menu Gudang. Pesanan atas Barang Jadi dengan kuantitas 0 akan tetap bisa dicatat, dan setelah pertama kali dibuat pesanan akan muncul dengan status ‘Belum Dikirim’ dan ‘Pembayaran belum diterima’.

Data Pesanan yang sudah diinput.

User mencatat pembayaran yang dilakukan oleh customer pada menu Transaksi, Transaksi Masuk. Setelah melakukan pencatatan, status pembayaran pada menu pesanan akan berubah menjadi ‘Sudah dilakukan pembayaran’

Cara Bayar Tunai untuk memasukkan data pada laporan Cash Flow.

User mengubah status pengiriman pada pesanan dengan mengklik tombol ‘Kirim’ yang ada pada list pesanan.

Tombol ‘Kirim’ untuk mengubah status barang menjadi ‘Sudah Terkirim’

Data yang diinput user pada menu Transaksi Masuk dan Transaksi Keluar akan digunakan pada menu Laporan.

Karena gambar lebih mudah dimengerti.

Figma Prototype:

Try to play around!

Testing Stage

Langkah yang terakhir yang kami lakukan adalah melakukan pengujian terhadap satu orang responden. Responden adalah pelaku UMKM yang bergerak di bidang perhiasan wanita dari bahan baku tanah liat. Pengukuran dilakukan terhadap tiga dari empat Elements of a Good User Experience by Google, Usability, Usefulness, dan Enjoyability. Kami tidak dapat melakukan pengukuran terhadap aspek Equity, disebabkan karena keterbatasan waktu yang hanya memungkinkan untuk melakukan In-Depth Interview terhadap satu responden. Kriteria hasil (threshold) adalah lebih besar dari 3 dari skala likert 1–5. Hasil yang kami dapatkan sebagai berikut:

Pass semua, nih!

Lima dari lima task yang diukur menghasilkan nilai rata — rata diatas threshold yang ditentukan (3), responden sudah cukup puas secara Overall dengan tambahan beberapa saran dan masukan untuk terus menyesuaikan dengan kebutuhan user.