UX Case Study — Krealogi Fitur Cash Flow Dan Performa
Latar Belakang
Hallo guys, pada kesempatan kali ini saya ingin menunjukkan hasil UX Case Study kedua saya. Proyek ini merupakan bagian dari UI/UX Skilvul Virtual Internship Program yang diadakan oleh Kementrian Pendidikan “Kampus Merdeka” dengan Skilvul dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau terikat dalam kontrak professional oleh Krealogi.
Saya disini akan menjelaskan keseluruhan UX Design Process yang telah saya lakukan untuk sebuah challenge dari Krealogi untuk Fitur Cash Flow dan Performa. Aplikasi Krealogi yaitu aplikasi supply chain untuk digunakan oleh UMKM. Di aplikasi ini pengguna dapat mencatat, merencanakan, memantau rencana produksi untuk semua pesanan yang masuk. Di aplikasi ini juga ada pencatatan keuangan mulai dari pencantatan biaya yang dilakukan oleh pengguna. Saat ini aplikasi Krealogi sedang membutuhkan fitur baru yang bernama Cash Flow dan Performa.
Pada fitur Cash Flow dan Performa memiliki kondisi dan kebutuhan masing-masing yaitu sebagai berikut:
Kondisi :
- Tidak ada catatan rangkuman performa usaha.
- Tidak ada catatan hutang.
- Tiap pengguna memiliki syarat dan kondisi berbeda untuk transaksi.
- User sulit dalam memantau rangkuman proses produksi (harus scroll satu-satu, 1 bulan harus mengerjakan apa aja ini belum ada)
Kebutuhan :
- Fitur rangkuman usaha (arus kas sederhana) yang meliputi performa bisnis dan produksi
Objektif Research
- Mempelajari dan mengetahui kebutuhan pengguna dalam menggunakan aplikasi supply chain dan pencatatan keuangan.
- Memahami tipe pengguna dalam menjalankan bisnis UMKM.
- Memahami kesulitan pengguna dalam monitoring performa bisnis UMKM.
- Mencari tahu kompetitor aplikasi Krealogi.
Peran dalam Tim
Sebagai UI/UX Designer yang berkolaborasi dengan 2 anggota tim, Merlyn Muchtar dan Sonangsurokusumo. Dalam tim ini, tanggung jawab saya adalah
- Brainstroming ide
- User Interview
- Membuat UI Kit
- Membuat design UI
- Membuat prototype
Design Process
Pada proses UI/UX Desain studi kasus ini kami memilih menggunakan metode Design Thinking sebagai kerangka kerja dalam perancangan UI/UX Designnya. Alasannya adalah karena metode ini merupakan metode pendekatan yang digunakan untuk pemecahan masalah secara praktis dan kreatif dengan fokus utama pada users atau pengguna.
Tahap 1 — Emphatize
Tim kami menentukan kebutuhan pengguna dari aplikasi Krealogi, dan kami menemukan kriteria user yang akan menggunakan aplikasi seperti sesorang yang memiliki usaha ataupun bisnis dalam bidang apa saja yang membutuhkan pencatatan keuangan dan pencatatan produksi. Berikut kriteria user yang harus kami cari :
- Memiliki usaha atau bisnis.
- Rentang Umur 21–55 tahun.
- Berdomisili di seluruh wilayah Indonesia
- Pernah ataupun tidak pernah menggunakan aplikasi sejenis dengan Krealogi.
- Familiar dengan teknologi masa kini.
- Berbahasa Indonesia.
Setelah kriteria pengguna berhasil didefinisikan maka tahap selanjutnya yang saya lakukan yaitu membuat dokumen Stimulus User Research dan mencari 1 responden yang sesuai dengan kriteria. Saya mendapatkan responden bernama Salsabilla Rizki, 21 tahun, pengusaha bidang pembuatan gift custom, menjualan barang melalui marketplace.
Berdasarkan hasil dari wawancara bersama kak Salsa, yang saya lakukan selanjutnya adalah melakukan Define, dan Ideate di fase berikutnya.
Tahap 2 — Define
Pada tahap ini dilakukan secara bersama — sama dengan tim, kami mendefinisikan permasalahan user dari tahap sebelumnya. Kami juga membuat ‘How-Might-We’ sebagai pemilihan kans dan kemudian di voting untuk kans mana yang paling sesuai dengan permasalahan user. “Pain Points” atau permasalahan yang biasanya dihadapi pengguna yaitu sebagai berikut.
Berikut merupakan how might we yang telah kami temukan. Kemudian disini kami mengvoting kans mana yang paling sesuai dengan fitur Cash Flow dan Performa.
Tahap 3 — Ideate
Di tahap ini kami mencurahkan ide-ide liar kita masing masing, setelah itu kami mengvoting ide-ide mana yang terbaik dan sesuai dengan permasalahan user. Setelah selesai di voting, kami mengelompokkan setiap ide yang mirip.
Kemudian ide yang sudah kami kelompokkan, kami kelompokkan lagi sesuai dengan prioritas pertimbangan user valuenya tinggi dan effort yang dikeluarkan tidak begitu besar, ada ‘Yes, do it now’, ‘Do next’, ‘Do last’, dan terakhir ‘Later’. Apa itu ‘yes do it now’? yaitu bagian ide yang harus kami segera eksekusi menjadi ui design dan ide disini memiliki nilai tinggi yang sesuai dengan permasalahan user. Berikut merupakan yes do it now dari tim kami.
Selanjutnya masing-masing tim membuat design Crazy 8’s. Crazy 8’s merupakan 8 screen sketsa kasar berdasarkan fitur-fitur yang ada di prioritas Yes do it now kita. Berikut merupakan Crazy 8’s dari kami.
Setelah itu tahap terakhir dari fase ini adalah kami berkelompok membuat userflow. Userflow adalah hal yang penting karena dari sini kita akan paham apa saja yang akan kita kerjakan di tahap selanjutnya yaitu wireframe. Kami membuat dua buah userflow yaitu flow user untuk fitur Cash Flow dan Performa. Dalam mebuat userflow kami juga memikirkan bagaimana nantinya perjalanan user dalam menggunakan aplikasi dan mendapatkan apa yang diinginkan oleh user.
Berikut merupakan kedua userflow dari kami.
Tahap 4 — Prototype
Pada tahap ke 4 ini yaitu prototype, kami bersama-sama membuat wireframe dari userflow kita, membuat design UI mockup hingga membuat animasi interaksi di dalam prototypenya sehingga siap untuk dipresentasikan di User Research. Dalam pembuatan UI Design kami memiliki aturan-aturan jarak yang sudah kami tentukan demi pengguna yang memiliki usia sudah tidak muda.
Berikut merupakan Wireframe dari kami.
Dalam pembuatan design UI tentunya kami membuat Design System juga yang sesuai dengan warna kombinasi dari logo Krealogi. Design system yang kami buat awalnya mencakup Color, Iconography, Typography, Button dan Input Field, namun selama proses design UI kami juga menambahkan komponen lain seperti Card, App Bar, Nav Bar, dll ke design system agar memudahkan kami dalam mendesain. Design System juga berperan dalam membuat tampilan agar selalu konsisten.
Typography yang kami pilih merupakan pilihan yang sudah disediakan oleh Krealogi yaitu font Gotham, Typography yang kami gunakan menggunakan pengaturan perkalian 4pt. Icon yang kami gunakan adalah icon dari Material Design Icons dari Figma Community. Ada dua style icon yang diambil yaitu Outlined dan Rounded.
Kami juga menggunakan illustrasi yang kami gunakan untuk tampilan empty data atau ketika data masih kosong. Kami menggunakan illustrasi dari Undraw.co yang dibuat oleh Katerina Limpitsouni. Menurut penjelasan License dari illustrasi ini yaitu illustrasi ini bersifat gratis atau open license, dan dapat digunakan di berbagai project personal maupun komersial.
Dalam membuat UI Design kami memikirkan bagaimana membuat sebuah komponen yang semudah dan sesimple untuk dipahami. Contohnya kami menggunakan komopnen Accordion yang menurut kami sangat cocok untuk digunakan sebagai card agar memudahkan dan membuat simple tampilan bagi user, jadi user tidak perlu melihat detail dari card tersebut, hanya membuka atau expand saja sudah bisa melihat informasi yang dibutuhkan.
Coba prototype dibawah ini, di prototype ini anda bisa melakukan fitur penambahan catatan biaya dengan memberikan status pembayaran hutang, dp ataupun lunas. Anda juga bisa melihat fitur performa yang lengkap terdapat unduh laporan keuangan, melihat rangkuman proses produksi, dan terakhir melihat catatan hutang.
Tahap 5 — Testing
Sebuah Prototype design UI tidak lah lengkap jika tidak di coba ke user, disini saya menyebutnya User Interview.Kami menguji hasil desain ke real user menggunakan penilaian Single Ease Question. Pengujiannya user diminta untuk mengoperasikan prototype sesuai dengan task flow yang sudah kami buat. Dikarena sedang terjadi global pandemi, jadi kami menggunakan platform gmeet dalam melakukan user interview.
Task flow yang diberikan yaitu ada 4
- Flow Mencatat Biaya dengan Asumsi Hutang
- Flow Melihat Laporan Keuangan
- Flow Melihat Catatan Hutang
- Flow Melihat Rangkuman Produksi
Masing-masing dari dari flow memiliki pertanyaan yang mirip jadi disini saya langsung menanyakan keseluruhan dari kemepat flow ini tentang bagaimana tingkat kepuasan user dengan prototype ini, dari nilai 1 sampai 7, user memberikan nilai 6, karena menurut user sudah hampir sempurna, tinggal diperbaiki saja yg kurang-kurang, tombol-tombol di aplikasi sudah memudahkan dan tidak membingungkan.
Iterasi Design
Selama user interview kami juga mendapatkan feedback berupa revisi yang dapat kami lakukan untuk membuat ui design kami menjadi lebih bagus. Berikut merupakan iterasi design dari kami.
Pada iterasi design pertama user ingin menambahkan modal awal nya dan bisa dimasukkan di laporan keuangan, jadi kami menambahkan input field untuk menambahkan modal yang digunakan. Laporan keuangan nya nanti akan menjadi total pengeluaran dikurangi modal kamudian sisa modal dikurangin dengan total pendapatan, maka mendapatkan Laba dalam kurun waktu yang sudah dipilih.
Pada iterasi design kedua user menemukan bahwa dia tidak tahu kalau dua tombol pemasukan dan pengeluaran dibawah chart bisa di tekan, karena mengira itu hanya sebuah tanda saja. Jadi kami membuat design dua tombol itu memiliki stroke agar sama seperti tombol dibawahnya, ini bisa disebut dengan “The law of similarity”.
Pada iterasi ketiga merupakan pada saat user membuka atau expand card di halaman Semua Produksi user mengira tombol detail produksi bisa di tekan dan user juga ingin melihat detail produksi. Jadi kami membuat tampilan baru untuk Detail Rencana Produksi yang isinya seperti gambar dibawah, jadi halaman nya panjang bisa di scroll kemudian jika user ingin memperbarui produksi ataupun pengecekan maka akan muncul layer open overlay dari bawah untuk menginput tanggal dan jumlah item yang ingin di tambahkan.
Kesimpulan
Berdasarkan dari UX Design proses diatas dapat disimpulkan bahwa suatu product desain harus dilakukan sebuah testing ke real user dan dilakukan perbaikan terus menerus sesuai dengan berjalannya waktu baik dari segi design trend maupun segi usability user. Hal ini bertujuan untuk membuat pengalaman pengguna yang lebih baik lagi.
Rekomendasi Selanjutnya
Rekomendasi yang saya berikan untuk selanjutnya dari project fitur cash flow dan performa ini adalah
- Melanjutkan design untuk fitur lain saperti koneksi dengan marketplace dan Logistic, dan terakhir fitur Simple CRM
- Saya sudah memikirkan fitur Simple CRM ini nantinya akan ada di bagian Halaman Profil.
- Cara pengkoneksian dengan marketplace yaitu dengan cara koneksi dari halaman profile juga. Lalu untuk halaman Gudang nanti sudah ada pembagian untuk marketplace satu dengan marketplace yang lain jadi pengaturan stok bisa di koneksikan juga menggunakan aplikasi ini.
Terimakasih untuk Skilvul, Krealogi dan Kampus Merdeka. Tidak lupa saya berikan terimaksih banyak juga untuk mentor saya Kak Anastania Melinda dan teman-teman satu tim saya Merlyn dan Sonang. Terimakasih atas ilmu dan pengalaman yang tak terlupakan ini, ‘What a journey’.
