UI/UX Case Study: Fitur Cash Flow dan Performa Krealogi

Audrey Ardelia
7 min readNov 28, 2021

--

Mock Up Hasil Ide Solusi Cash Flow Krealogi

Disclaimer

Projek ini merupakan bagian dari UI/UX training program yang dilaksanakan oleh Skilvul, salah satu program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Serta Krealogi sebagai pihak Challenge Partner yang saya pilih dan saya tidak bekerja untuk atau menjalankan masa kontrak dengan pihak Krealogi.

Latar Belakang

Aplikasi Krealogi sendiri merupakan aplikasi untuk mencatat evaluasi usaha tahunan, guna memudahkan pengguna dalam mengelola usahanya. Krealogi menawarkan solusi yang menyeluruh:

komunitas sebagai wadah berjejaring dengan pelaku usaha lainnya, pelatihan untuk mengembangkan kemampuan dan keterampilan UMKM, serta aplikasi ramah pengguna untuk membantu pencatatan kegiatan operasional dan membuat perencanaan strategis

Akan tetapi, 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)

Dari list fitur yang disebutkan di atas, kami memilih fitur yang akan dipilih dan didesain untuk ditambahkan ke dalam aplikasi(Simple CRM, Cash Flow Feature dan Integration with Logistic and Marketplace) menggunakan tools rekomendasi yaitu figma dengan penggambaran proses desain memakai metode yang sudah ada atau membuatnya sendiri.

Setelah membentuk kelompok yang terdiri dari tiga anggota, kelompok saya menyetujui untuk memilih menambahkan fitur Cash Flow Feature dan Performa dalam aplikasi challenge partner(Krealogi).

Peran Dalam Tim

Saya bekerja sama dengan kedua rekan tim saya yaitu Ghita Aulia dan Hafidza Safara. Saya mengambil posisi sebagai UX Designer selama projek berlangsung. Projek dikerjakan dengan durasi selama 8 minggu dan mengeluarkan output berupa desain high fidelity serta prototype yang bisa diklik di akhir. Timeline pengerjaan projek sendiri dimulai dari tanggal 25 Oktober hingga 28 November 2021.

Profil Pengguna

  • Gender : Tidak spesifik
  • Umur : Semua Umur
  • Profesi : Pemilik usaha kecil, mikro, ultra mikro
  • Rentang Geografis : Tidak Spesifik

Design Process

Kami sekelompok memilih menggunakan metode Design Thinking karena metode tersebut memang sudah pernah dipelajari dan dipraktikkan dalam projek sebelum projek ini.

1 — Define

Di tahap Define saya dan anggota tim menentukan beberapa Pain Points dan How Might We dari beberapa informasi yang kami dapatkan.

Hasil Brainstorming Pain Points dan How Might We

Beberapa list pain points yang sudah dituliskan dibuatkan point-point How Might We yang sesuai dan kami memutuskan untuk memilih hasil voting berupa:

“Mempermudah user dalam mengorganisir catatan dan performa usaha/penjualan”

2 — Ideate

Pada tahap Ideate, saya dan rekan-rekan saya menyusun beberapa ide solusi dari How Might We yang sudah ditentukan. Dalam tahap ini menghasilkan Solution Idea, Affinity Diagram, Prioritization Idea dan Crazy 8’s. Disini saya mengusulkan beberapa ide solusi seperti:

  • Fitur penambahan kategori pemasukan atau pengeluaran secara manual
  • Fitur pembagian kalkulasi jumlah atau total pemasukan atau pengeluaran tiap minggu/bulan/tahun
  • Pencetakan hasil kalkulasi pemasukan atau pengeluaran dalam bentuk file tertentu(png, pdf, doc, xls, dll)
  • Fitur pencarian pemasukan atau pengeluaran berdasarkan kategori
Hasil brainstorming Solution Idea dan Affinity Diagram

Setelah menyusun beberapa ide solusi, kami menyusun dan mengelompokkan beberapa ide solusi yang sekiranya dalam kategori yang sama dan menamakannya dalam tahap Affinity Diagram. Dalam Affinity Diagram, kami mengelompokkannya menjadi:

  • Reject and Refund
  • Perform
  • Report
  • Income and Outcome Recording
  • Guidance
  • Debt Recording
Hasil dari Tabel Prioritization Idea

Dalam Prioritization Idea, kami memecahkan kembali ide solusi yang sudah dikelompokkan menjadi bagian satuan sebelum menyusunnya berdasarkan tingkat prioritas kebutuhan dalam fitur yang kami buat mengikuti tingkatannya: Yes, do it now; Do Next; Do Last; dan Later.

Kami bersepakat untuk memasukkan beberapa ide solusi ke dalam kategori Yes, do it now seperti:

  • Pembuatan fitur kas para seller dan vendor
  • Grafik jumlah pemasukan & pengeluaran
  • Pencetakan hasil kalkulasi pemasukan/pengeluaran dalam bentuk file tertentu(png, pdf, doc, xls, dll)
  • Fitur pencarian pemasukan/pengeluaran berdasarkan kategori(Sort by date pemasukan & pengeluaran)
  • Fitur pengiriman invoice kepada customer. Fitur catat utang & piutang di bagian pemasukan
Hasil Brainstorming Crazy 8's

Setelah itu kami membuat crazy 8’s sebagai memberikan gambaran kasar tampilan masing-masing fitur dan ide solusi yang sudah diusulkan dalam waktu 8 menit.

3 — User Flow

User flow menggambarkan apa saja dan bagaimana proses sebuah task atau kegiatan dilakukan. Disini kami membuat beberapa user flow seperti:

  • Pencatatan Pemasukan/Pengeluaran Kas
User Flow Pencatatan Kas
  • Pencatatan Utang/Piutang, Penagihan Pelunasan Piutang, Catat Pelunasan Utang
User Flow Pencatatan Pelunasan Utang Piutang
  • Melihat Laporan & Performa
User Flow Pengamatan Laporan dan Performa Keuangan

4 — Prototype

Dalam proses prototype, terdapat beberapa hasil pengeluaran seperti wireframe, UI Styleguide, UI Mockup hingga Prototype-nya.

Wireframe

Wireframe sendiri ialah kerangka dasar dari tampilan sebuah UI Design. Berikut ialah hasil wireframe yang sudah kami buat sesuai dengan user flow yang sudah dibuat

Wireframe dari Figma

UI Styleguide

Beberapa UI Styleguide yang sudah saya buat bersama anggota tim saya seperti color pallete, icons, text/typeface, button, text field, navigation bar, dropdown, tab header, menu, hingga header.

Color Style dan logo Aplikasi
Text Style
Button
Input Field
Dropdown
Header dan Tabbing
Navigation Bar
Beberapa Card yang sudah dibuat dan disusun

UI Design

UI Design sendiri sudah membentuk desain tampilan aplikasi meskipun belum interaktif secara menyeluruh.

UI Design yang sudah disusun berdasarkan User Flow

Prototype

Prototype sendiri sudah meliputi high fidelity prototype dan sudah interaktif sehingga mendekati aplikasi yang akan dibuat.

Usability Testing

Sebagai bentuk pencapaian tingkat kebutuhan dan keberhasilan ide solusi yang sudah dibuat, kami melakukan usability testing dimana sebagian besar kami mengarahkan:

  • Mengenalkan projek, kegunaan serta tujuan dari projek
  • Menjelaskan skenario tugas yang dilakukan responden untuk menggunakan aplikasi
  • Menanyakan kendala dan kebutuhan informasi apakah sudah sesuai
  • Menanyakan tingkat kesulitan dan kemudahan serta masukan dari responden. Kemudian mengucapkan terima kasih untuk partisipasinya.

Kami mewawancarai satu responden dengan metode in-depth interview melalui platform google meet dan menggunakan SEQ(Single Ease Question) dalam mengukur tingkat keberhasilan ide solusi.

Responden mengaku jika:

  • Pada bagian utang pada kreditur belum adanya list kontak yang sama dengan piutang kepada user lain
  • Mengharapkan tetap adanya penambahan kategori secara manual pada alur pemasukan serta pengeluaran
  • Adanya fitur pengiriman invoice secara otomatis kepada pelanggan apabila mendekati tanggal pelunasan

Design Iteration

Berikut adalah hasil tampilan yang sudah saya perbaiki bersama rekan-rekan saya sesuai dengan hasil feedback yang diberikan dan disarankan oleh responden untuk semakin mempermudah proses permasalahan. Disini saya dan anggota tim saya melakukan iterasi pada permasalahan dimana:

Pada bagian utang pada kreditur belum adanya list kontak yang sama dengan piutang kepada user lain

Sehingga saya dan rekan-rekan saya menambahkan list kontak seperti tampilan piutang, agar dapat menghubungi kreditur lebih mudah.

Tampilan Detail Kreditur sebelum Iterasi
Tampilan Detail Kreditur setelah Iterasi

Kesimpulan

Fitur Cash Flow dan Performa yang kami buatkan dari ide solusi yang ada diharapkan dapat membantu memenuhi kebutuhan pengguna dalam mengelola usaha mereka dalam menggunakan aplikasi Krealogi. Hasil dari jawaban responden memperoleh nilai 6.857 dalam skala SEQ 1–7 sehingga memenuhi kriteria minim yan dibutuhkan. Tampilan yang simpel juga memudahkan responden dalam memahami penggunaan aplikasi. Sehingga responden berharap fitur dapat diimplementasikan dengan baik dalam aplikasi.

Tahap Selanjutnya

Beberapa detail fitur yang belum dicantumkan dalam kategori prioritas Yes, do it now seperti menambahkan kategori secara manual, masukan dari responden seperti dapat secara otomatis memberikan invoice kepada pengguna yang memiliki utang dan memasuki tanggal pengingat dan fitur lainnya dapat ditambahkan untuk semakin memudahkan pengguna dalam menggunakan aplikasi ke depannya.

Saya ucapkan terima kasih untuk mentor saya Kukuh Satria Putra yang sudah membimbing saya selama proses pengerjaan projek dan rekan-rekan saya yang sudah membantu serta men-support saya dalam pembuatan projek ini. Juga terima kasih untuk teman-teman yang sudah mau meluangkan waktunya untuk berkunjung dan menyempatkan diri untuk membaca UX Case Study saya

--

--