UI/UX Case Study — Mendesain Fitur Cash Flow Pada Aplikasi Krealogi

Ams Rahul
7 min readNov 30, 2021

--

Cash Flow Feature UI

Disclaimer

Proyek ini merupakan bagian dari Skilvul Virtual Internship(https://skilvul.com/challenges/krealogi-uiux-challenge) yaitu suatu program dari Kampus Merdeka yang diadakan oleh Kementerian pendidikan, kebudayaan Riset dan teknologi Republik Indonesia dengan Skilvul dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Krealogi.

Latar Belakang

Saat ini saya berkesempatan mengikuti Program Skilvul Virtual internship yang diselenggarakan oleh Skilvul. Program ini merupakan program dari kampus merdeka yaitu Magang dan Studi Independen Bersertifikat oleh Kementrian Pendidikan, Kebudayaan Riset dan Teknologi bekerjasama dengan platform Skilvul sebagai media pembelajarannya. Dalam Program ini saya diberi kesempatan untuk memilih satu dari beragam challenge partner yang telah disediakan. Saya memilih challenge partner Krealogi karena menurut saya aplikasi tersebut masih sulit digunakan karena memiliki tampilan yang kurang baik dan alur yang membingungkan.

Overview

Krealogi adalah platform digital oleh Du Anyam terkait supply chain yang bertujuan untuk mempercepat pertumbuhan UMKM. Krealogi merupakan sebuah ekosistem yang didasari oleh pengalaman Du Anyam dalam menjalankan bisnis kriya di Indonesia.

Pada Kesempatan Ini saya akan menjelaskan mengenai design proses saat mendesain fitur cash flow pada aplikasi krealogi. Fitur cash flow merupakan fitur yang sangat penting dimiliki oleh aplikasi

Objektif

Terdapat tiga fitur yang diminta pada challenge ini yaitu (Simple CRM, Cash Flow Feature dan Integration with Logistic and Marketplace) namun kami memutuskan untuk memilih salah satu dari ketiga fitur tersebut yaitu Cash Flow Feature dengan objektive sebagai berikut :

  1. Membuat Desain yang user-friendly
  2. Membuat pengguna agar selalu mencatat setiap aktivitas usaha (pemasukan, pengeluaran, hutang-piutang) yang di lakukan
  3. Mempermudah pengguna dalam melihat laporan peforma usaha

Peran Dalam Tim

Pada studi kasus kali ini, saya berkolaborasi dengan 2 anggota tim lainnya yaitu Ferra Junian Wahidna dan Nur Fahri Muamar untuk mengerjakan challenge ini dengan role yang sama yaitu UI/UX Designer. Tanggung jawab yang kami lakukan adalah :

  1. Melakukan Brainstorming ide
  2. Memvisualisasikan ide dengan crazy8
  3. Membuat user flow dan wireframe
  4. Menyusun UI Style guide
  5. Membuat UI design(Hi-fi) dan Prototyping
  6. Mempersiapkan dokumentasi untuk dilakukan Usability Testing(user stimulus research document)
  7. Melakukan Usability Testing dan Iterasi

Design Process

Design Thinking — Image From Stepnesia.com

Dalam kasus ini kami menggunakan menggunakan Framework Design Thinking sebagai metode design process yang kami lakukan. Karena metode ini sudah sangat umum dan mudah digunakan. Kami memulai dari tahap define karena objektif challenge dan user persona sudah ditentukan dari awal oleh karena itu kami melewati tahap emphatize.

Phase 1 — Emphatize

Pada fase ini, kami mendapatkan informasi dari di brief proyek yang telah ditentukan, oleh karenanya kami hanya perlu memahami informasi yang telah dinyatakan dalam brief.

Dari brief tersebut terdapat informasi yaitu :

Target Pengguna

  • Umur : Semua Umur
  • Profesi : Pemilik usaha kecil, mikro, ultra mikro
  • Bahasa : Indonesia
  • Rentang Geografis : Tidak Spesifik

Krealogi memiliki tiga tipe user yakni Vendor, Producer dan juga Seller. Vendor dan Seller merupakan pengguna yang ingin melakukan penjualan produk anyaman melalui platform Du Anyam dan platform online lainnya. Sedangkan Producer adalah pelaku produksi.

Permasalahan 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.

Saat ini aplikasi Krealogi memiliki beberapa fitur yang telah tersedia dan fitur yang akan tersedia nantinya :

  • Production Planning and Monitoring
  • Sales recording
  • Expense report
  • Inventory management
  • Simple CRM (Belum didesain dan belum tersedia)
  • Cash Flow Feature (Belum didesain dan belum tersedia)
  • Integration with Logistic and Marketplace (Belum didesain dan belum tersedia)

Phase 2— Define

Fase selanjutnya yaitu define, di fase ini saya bersama rekan tim yang lain sebelumnya sepakat untuk menentukan fitur apa yang akan didesain nantinya fitur tersebut yakni cash flow. Selanjutnya kami mengumpulkan permasalahan yang dialami oleh user(listing pain point). Kami menggunakan sticky notes pada aplikasi figma untuk berkolaborasi dalam mengumpulkan pain points.

Pain Points by SVI — UIX 19 — Kelompok 6 on Figma

Setelah melakukan listing pain point kemudian dilanjutkan untuk menentukan HMW(How Might We) untuk membantu user mengatasi masalahnya.

How Might We by SVI — UIX 19 — Kelompok 6 on Figma

Phase 3 — Ideate

Pada tahap ideate, kami melakukan brainstorming ide berdasarkan tujuan yang kami tentukan pada tahap empathize.

Solution Idea by SVI — UIX 19 — Kelompok 6 on Figma

Setelah itu, kami mengelompokkan ide-ide yang memiliki konsep yang sama ke dalam Affinity Diagram.

Affinity diagram by SVI — UIX 19 — Kelompok 6 on Figma

Setelah itu kami menyusun kelompok tersebut berdasarkan prioritas

Prioritization Idea by SVI — UIX 19 — Kelompok 6 on Figma

Selanjutnya yaitu masing masing dari kami melakukan crazy8 method untuk visualiasi solusi ide diatas.

Crazy 8 — UIX 19 — Kelompok 6 on Figma

Phase 4 — Prototype

Langkah pertama dalam tahap prototype adalah membuat user flow(alur pengguna). user flow yang saya buat yaitu : Transaksi, Hutang Piutang, Budgeting, Laporan

Userflow : Transaksi
Userflow : Jatuh Tempo dan laporan
Userflow :Budgeting

Langkah selanjutnya setelah membuat user flow adalah wireframing. wireframe adalah tampilan low fidelity yaitu design yang tingkat presisi nya masih rendah. Tingkat presisi ini bisa dilihat dari segi warna, ukuran teks dan tombol, jarak antar elemen, dll.

Wireframe : Transaksi
Wireframe : Pengingat dan Jatuh Tempo
Wireframe : Budgeting
Wireframe : Laporan

Langkah selanjutnya yaitu membuat UI styleguide yang akan digunakan dalam mendesain tampilan high fidelity.

UI Style Guide Preview
Icon

Kemudian setelah membuat tampilan low fidelity dan UI Styleguide saya melanjutkan untuk mendesain tampilan high fidelity berdasarkan wireframe yang telah dibuat.

Halaman Input Pembelian
Halaman Input Penjualan
Halaman Hutang Piutan
Halaman jatuh tempo dan pengingat Pelanggan
Halaman Budgeting
Halaman Laporan

Setelah seluruh desain halaman aplikasi sudah dibuat selanjutnya saya menambahkan interaksi serta animasi antar komponen dan halaman. Silahkan di coba pada prototype berikut :

Phase 5 — Testing

Pada tahap ini merupakan tahap menguji desain aplikasi prototype yang telah dibuat kepada real user dengan menggunakan metode Single Ease Question(SEQ). Pengujian tersebut dilakukan dengan cara meminta user untuk mencoba prototype sesuai task dari userflow.

Task yang akan dilakukan oleh user yaitu :

  1. Input Penjualan dan Pembelian
  2. Input Pemberian dan Penerimaan Hutang Piutang
  3. Mengatur jatuh tempo dan menghubungi pelanggan
  4. Mengunduh dan membagikan Laporan Usaha
  5. Input Budgeting
  6. Mengenduh dan Membagikan Laporan Budgeting

Sebelum melaksanakan User Testing, kami mempersiapkan dokumen stimulus User Research yang isinya terdiri dari Research Objective, Respondent Criteria, List of Questions, dan Research Scenario

Berikut merupakan dokumen yang dapat anda lihat pada google drive :

Setelah menyusun dokumen tersebut kami mencari partisipan yang bersedia untuk dilakukan usability testing, saat itu kami mendapatkan 1 user dengan profil sebagai berikut :

User Profile

Hasil Testing

Ketika User telah menyelesaikan masing — masing task kami menyakan nilai dari rentang 1 sampai 7 untuk kemudahan setiap task tersebut. hasilnya adalah sebagai berikut :

Hasil Testing

Pada gambar tersebut dapat dilihat bahwa nilai yang didapatkan adalah 6.5 yang berarti telah melewati nilai kelulusan sebesar 5.5

Hasil Testing Dela

Kesimpulan

  1. Flow dan tampilan sudah cukup baik ditandai dengan nilai yang diberikan oleh user sebesar 6.5
  2. Pada saat Prototyping masih terdapat banyak button yang belum bisa ditekan
  3. Desain tersebut masih harus dilakukan tahap iterasi untuk lebih memaksimalkan kepuasan pengguna dan dapat memenuhi kebutuhan pengguna saat menggunakan aplikasi nantinya

untuk melihat keseluruhan projek dapat dilihat pada link berikut :

https://www.figma.com/file/LI5k2Uv2qYvszC3VwrGDXN/KEL-6---SVI-19---KREALOGI?node-id=113%3A769

--

--