UX Case Study : Cash Flow Featured for Krealogi
Disclaimer
Project ini merupakan bagian dari program pelatihan UI/UX yang dilaksanakan oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi adalah Mitra Challenge Partner. Saya tidak bekerja atau dikontrak secara profesional oleh Krealogi.
Apa itu Krealogi
Krealogi adalah aplikasi ramah pengguna untuk membantu pencatatan kegiatan operasional dan membuat perencanaan strategis untuk membantu UMKM.
Kenapa Krealogi
Krealogi saat ini adalah tidak memiliki desain aplikasi yang user friendly untuk target pengguna mereka. Saat ini Krealogi membutuhkan sebuah desain aplikasi yang user friendly dan tentunya bisa membantu pengguna Krealogi untuk mencatat kegiatan operasional mereka, membuat strategi dan menjaga alur operasional mereka. Krealogi juga belum memiliki fitur Cashflow yang memudahkan pengguna untukmelihat pengeluaran dan pemasukan.
Tujuan
Tujuan dari UI/UX case study ini adalah mendesain fitur Cashflow pada aplikasi Krealogi yang sesuai dengan kebutuhan bisnis, dan juga kebutuhan pengguna. Adapun Tujuan secara rinci sebagai berikut.
- Merubah tampilan pada fitur Performa agar lebih menarik dan user friendly.
- Membangun fitur Cashflow pada Aplikasi Krealogi.
- Membangun Fitur Hutang Piutang
Peran dalam tim
Sebagai UI/UX Designer yang berkolaborasi dengan 2 anggota tim Salsabila Izzati Syauqina & Salsabylla Nada Apsariny Dalam tim ini, tanggung jawab saya adalah :
- Brainstorming Idea
- User Flow
- Wireframing
- Hi-Fi Design
- Prototype
- User Interview
Design Process
Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. dengan metode ini, Kami dapat mendefinisikan pengguna, kebutuhan pengguna, dan permasalahan yang akan diolah menjadi solusi. Dalam Design Thinking terdapat Empathize, Define, Ideate, Prototype, Test.
1 — Empathize
Kami melakukan Empathize untuk mencari tahu pandangan & kebutuhan dari target user dengan research sebelum mendefisinikan problem statement dan melakukan ideation. pada tahap empathize, kami menggunakan metode Secondary Research, metode ini merupakan metode penelitian yang melibatkan penggunaan data yang sudah ada. Data yang ada dirangkum dan disusun untuk meningkatkan efektivitas penelitian secara keseluruhan. Disini kami melakukan Analysis Kompetitor, melihat Feedback Krealogi dari Playstore, mendalami Brief dari Challenge Partner. Hasil dari tahap empathize sebagai Berikut :
- Tidak ada Fitur Cashflow
- CTA tidak terlalu jelas
- Tidak ada Rangkuman Performa Usaha
- Tidak ada catatan hutang
- User kesulitan dalam memantau rangkuman proses produksi
2 — Define
Define bertujuan untuk mendefinisikan permasalahan user dan apa yang dibutuhkan. Pada tahap define kami menentukan pain poin permasalahan yang dihadapi pengguna, serta menentukan How Might We sebagai opportunity dalam memecahkan permasalahan.
User Persona
User Persona adalah karakter fiksi yang mewakili kebutuhan dari pengguna, tujuan dibuat user persona ialah agar designer bisa memahami pengguna. Setelah melakukan tahap empathize maka dibuat user persona sebagai berikut :
Pain Poin
kami menentukan permasalahan pengguna menggunakan pain poin. disini kami memasukkan semua permasalahan dari pengguna.
secara garis besar permasalahan utama dari user antara lain adalah :
- Pengguna kesulitan dalam memantau rangkuman proses produksi
- Tidak ada Catatan hutang
- Tidak ada laporan keuangan untuk memantau keuangan pengguna
How Might We
Setelah kita menentukan permasalahan dari pengguna ke dalam pain poin, selanjutnya kita membuat How Might We (HMW). How Might We disini bertujuan untuk sebagai opportunity dalam memecahkan masalah pengguna.
Setelah membuat How Might We, selanjutnya kami melakukan voting terhadap HMW yang telah kami buat. Voting ini bertujuan agar pemecahan permasalahan kami fokus ke satu atau dua tujuan. Tujuan Utama dari HMW kami adalah Membuat fitur cashflow yang user friendly untuk memudahkan pelaku UMKM dalam mengelola keuangan usahanya.
3 — Ideate
Pada tahap ideate kami melakukan brainstorming Ide berdasarkan How Might We, melakukan brainstorming ide yang akan diberikan. dalam tahap ideate kami menyusun Solution Idea, Affinity Diagram dan Prioritization Idea.
Solution Idea
Setelah menentukan tujuan utama dari HMW yaitu Membuat fitur cashflow yang user friendly untuk memudahkan pelaku UMKM dalam mengelola keuangan usahanya, kami mulai memberikan ide solusi dari masing-masing.
terdapat 15 ide solusi yang telah kami buat, kemudian kami melakukan voting terhadap ide solusi yang telah diberikan dan terdapat 7 solusi ide yang kami putuskan untuk di eksekusi.
Affinity Diagram
Affinity diagram ini merupakan pengelompokkan ide. setelah kami menyetujui 7 ide yang akan kami eksekusi kami mulai mengelompokkan ide tersebut.
Solusi ide tersebut kami kelompokkan menjadi 2 ide utama yaitu Cashflow & Performa (membuat fitur Cashflow dan Performa yang user friendly) dan Gamification (membuat gamification untuk meningkatkan Motivasi Pengguna).
Prioritization Idea
Prioritization idea ini adalah penentuan prioritas dari ide yang telah kami buat. kami mengelompokkan ide tersebut menjadi 4 kelompok, yaitu : DO IT NOW, DO NEXT, DO LAST, LATER. Pengelompokkan ini bertujuan agar designer dan developer mengetahui ide mana yang harus di eksekusi terlebih dahulu.
Dalam pengelompokkan ini kami mengeksekusi 1 ide yang ada di prioritas DO IT NOW terlebih dahulu yaitu membuat fitur Cashflow dan Performa. Hal ini karena fitur cashflow dan performa ini sangat akan membantu Pengguna untuk mengelola keuangan bisnis UMKM mereka.
4 — Prototyping
Prototyping bertujuan untuk menyusun UI menjadi sebuah flow proses yang sesuai dengan ide solusi, dan membuat Prototype yang digunakan untuk Testing. pada tahap ini dibagi menjadi 4 bagian, yaitu : User Flow, Wireframe, UI Design, Prototype.
User Flow
User Flow adalah diagram langkah-langkah yang harus dilakukan pengguna untuk menyelesaikan sebuah task. Pembuatan User Flow ini berdasarkan kebiasaan user dalam melakukan aktifitasnya. Kami membuat 3 User Flow berdasarkan ide dari Prioritization Idea, yaitu :
Wireframe
Setelah membuat userflow selanjutnya adalah membuat wireframe. Wireframe adalah sebuah layout dalam versi Low-Fidelity (Lo-Fi). Tujuan membuat wireframe adalah Mempresentasikan informasi dalam interface, Memberikan outline struktur dan layout interface, dan Mempercepat proses ideation. Berikut ini adalah salah wireframe yang telah kami buat:
UI Design
User Interface dalah desain antarmuka untuk software yang memaksimalkan usability dan user experience. Setelah membuat wireframe dalam bentuk Lo-Fi maka selanjutnya adalah mentranformasikan Lo-Fi tersebut kedalam Hi-Fi (High Fidelity). Dalam hal ini Hi-Fi berbentuk User Interface Desain. Kami membuat UI design dengan Figma.
Pertama-tama kami membuat UI Guidesyle terlebih dahulu, pembuatan UI guidestyle ini bisa membuat pekerjaan dalam membuat High-Fidelity Prototype menjadi lebih teratur dan lebih cepat. berikut ini adalah UI Guidestyle yang kami buat :
Setelah pembuatan UI Guidestyle telah selesai, selanjutnya saya membuat User interface dari hasil Wireframe kami. Pembuatan UI design kami sangat cepat dan teratur karena kami mengimplementasikan Design System (UI Guidestyle) yang telah kami buat. Berikut ini adalah UI design yang kami buat :
Prototype
5 — Testing
Testing merupakan salah satu bentuk validasi dari solusi ide yang telah kami desain, karena setiap asumsi, ide, atau perubahan tampilan perlu diklarifikasi dengan testing.
Proses Testing
Testing dilakukan dengan metode In-Depth Interview, pada testing kali ini kami menggunakan platform Google Meet dalam melakukan interview dan testing. Responden sangat aktif memberikan masukan dan pendapat sehingga banyak masukan yang diberikan.
Hasil Testing
Setelah melakukan Interview dan testing, responden tidak mengalami masalah saat menggunakan aplikasi. Menurut responden informasi yang di tampilkan sudah cukup jelas, alur aplikasi sangat mudah , penggunaan grafik pada tampilan cashflow sangat membantu responden. Namun, Kami memiliki beberapa masukan yang sangat berharga yang sangat membantu kami untuk Iterasi Desain selanjutnya.
Feedback
Berikut ini adalah beberapa masukan dan feedback yang diberikan oleh responden :
- Tombol selengkapnya pada halaman cashflow tidak terlalu terlihat, seharusnya ditambahkan tombol yang memudahkan pengguna untuk melihat data cashflow.
- Informasi Nominal Uang di fitur Hutang Piutang masih ambigu apakah itu informasi total hutang atau julah yang sudah dibayar atau sisa hutang.
- Pada tampilan Dasboard cashflow mungkin info pendapatan dan pengeluaran bisa di klik sehingga memudahkan untuk mencari informasi pendapatan ataupun pengeluaran.
Iterasi Desain
Setelah melakukan User interview dan mendapatkan feedback dari responden, kami selanjutnya melakukan iterasi desain. Iterasi desain ini bertujuan untuk mengevaluasi desain sebelumnya yang mendapatkan feedback dari responden sehingga desain bisa menjawab kebutuhan pengguna dan meningkatkan experience dan kenyamanan pengguna. Berikut ini adalah Iterasi desain yang telah di lakukan :
- Tombol selengkapnya pada halaman cashflow tidak terlalu terlihat, seharusnya ditambahkan tombol yang memudahkan pengguna untuk melihat data cashflow.
Pada proses iterasi ini kami mengubah tampilan pada desain, yaitu menghapus link button “selengkapnya” dan mengganti dengan Button Primary “Lihat Data”. Perubahan ini dilakukan agar pengguna dengan mudah bisa menemukan tombol untuk melihat semua data.
- Informasi Nominal Uang di fitur Hutang Piutang masih ambigu apakah itu informasi total hutang atau julah yang sudah dibayar atau sisa hutang.
Pada proses iterasi ini kami mengubah tampilan pada desain, yaitu dari yang sebelum iterasi hanya informasi jumlah total hutang saja yang ditampilkan, kami mengubahnya dengan menambahkan jumlah yang sudah dibayar. Sehingga pada tampilan terbaru berubah menjadi “Jumlah yang sudah dibayar / Total Hutang”. Perubahan ini akan memudahkan pengguna untuk memantau perkembangan hutangnya.
- Pada tampilan Dasboard cashflow mungkin info pendapatan dan pengeluaran bisa di klik sehingga memudahkan untuk mencari informasi pendapatan ataupun pengeluaran.
Pada proses iterasi ini kami menambah tampilan dan interaksi pada desain. pada tampilan dashboard cashflow yang sebelumnya informasi pendapatan & pengeluaran tidak ada interaksi ke halaman lain, kami menambahkan interaksi yaitu ketika pengguna meng-klik Pendapatan atau pengeluaran makan akan ada interaksi yaitu pengguna akan di alihkan ke halaman pendapatan atau pengeluaran. Iterasi ini akan memudahkan pengguna untuk melihat langsung pendapatan dan pengeluaran.
Kesimpulan
Ide solusi yang kami tawarkan ke pengguna sangat dibutuhkan oleh pengguna, pembuatan fitur cashflow dan hutang piutang sangat membantu pengguna dalam mengelola keuangan bisnis mereka. Terdapat beberapa Feedback dari pengguna yang sangat membantu dalam mengembangkan Fitur cashflow dalam iterasi selanjutnya.
Rekomendasi Selanjutnya
Rekomendasi selanjutnya adalah Feedback yang telah diberikan responden mungkin bisa dimasukkan dalam iterasi selanjutnya, melakukan Usability Tenting dengan dengan pengguna krealogi lainnya.
Penutup
Project Ini adalah project pertama kami, sehingga masukan anda akan sangat membantu kami. Beritahu saya pendapat anda tentang project ini, jangan ragu untuk menghubungi saya. Terima Kasih