UI/UX Cash Flow Aplikasi Krealogi

Iindra Iriyanti
5 min readOct 24, 2021

--

www.peluangusaha.kontan.co.id
peluangusaha.kontan.co.id

Disclaimer : Project ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementrian Komunikasi dan Informatika dengan Skilvul dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Krealogi.

Hai semua… Kali ini saya akan memberikan informasi mengenai cara merancang UI/UX berbasis mobile untuk fitur Cash Flow pada aplikasi Krealogi. Krealogi sendiri merupakan 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 app Krealogi terdapat fitur cash flow untuk membantu penjual (seller) atau vendor dalam mencatat transaksi keuangan.

Rancangan cash flow ini dibuat oleh tim yang terdiri dari tiga anggota. Selain untuk mempercepat proses pengerjaan, semakin banyak anggota yang terlibat akan semakin banyak ide kreatif yang dapat dituangkan dalam merancang UI/UX pada sebuah aplikasi.

“Ada kekuatan yang sangat besar ketika sekelompok orang dengan minat yang sama berkumpul untuk bekerja menuju tujuan yang sama.” — Idowu Koyenikan

Kami menggunakan Design Thinking sebagai UX Design Process. Berikut adalah tahapan yang kami lakukan dalam merancang UI/UX Cash Flow pada app Krealogi untuk seller dan vendor yang kami tuangkan menggunakan App Figma :

skilvul.com
  1. EMPATHIZE

Tujuan dari tahapan Empathize adalah mencari tahu pandangan & kebutuhan dari target usernya dengan research sebelum mendefisinikan problem statement dan melakukan ideation. Saat ini app Krealogi belum memiliki fitur untuk cash flow sehingga tim kami membuat rancangan UI/UX fitur cash flow pada app krealogi. Yang kami lakukan pada tahap ini:
a. Menganalisis data analitis
b. Melakukan survey pengguna
c. Melakukan In-depth Interview (IDI)
d. Melakukan FGD

Dari tahapan tersebut kami menambahkan fitur :

  • Pencatatan Stok Barang
  • Pencatatan Aliran Kas
  • Halaman Statistik / Download Laporan

2. DEFINE

Pada tahap Define, kami melakukan :

a. Pain Point yang terdiri dari kategori : Help & Support, Design, & Unfamiliarity

b. How Might We. Pada tahap ini diperoleh rencana untuk :

  • Menambahkan fitur yang belum ada pada app Krealogi
  • Membuat fitur yang mudah untuk seller dan vendor

3. IDEATE

Pada tahap Ideate yang dilakukan adalah :

a. Memulai brainstorming ide berdasarkan How-Might We
b. Brainstorming ide solusi yang akan diberikan
c. Membuat gambaran kasar (wireframe) dengan Crazy-8’s

Crazy ‘8s Kelompok 2

Pada tahap Ideate kami membuat : User flow, Wireframe, Design System, dan User Interface.

3.1 User Flow

User Flow adalah diagram langkah-langkah yang harus dilakukan user
untuk menyelesaikan sebuah task. User flow dibentuk sesuai dengan alur
bisnis dari sebuah perusahaan. Berikut adalah user flow yang kami buat pada App Figma :

User Flow Kelompok 2

3.2 Wireframe

Selanjutnya adalah pembuatan Wireframe. Wireframe yang kami buat adalah sebagai berikut :

Wireframe Kelompok 2

3.3 Design System

Design System merupakan sebuah komponen yang dapat digunakan kembali untuk keperluan perancangan & pengembangan produk baik dari sisi desain
maupun code programming. Fungsi dari Design System adalah :

  1. Konsistensi hasil desain UI & code Front-end
  2. Mempercepat proses kerja UI Design & Developer
  3. Dapat mengakomodir kebutuhan product design di masa depan

Berikut adalah UI Styleguide yang kami buat untuk menunjang konsistensi hasil desain UI :

UI Styleguide Kelompok 2

3.4 User Interface

Tahap berikutnya setelah membuat wireframe dan design system adalah membuat rancangan User Interface. Berikut adalah pembuatan user interface yang telah kami buat :

Kelompok 2

4. PROTOTYPING

Adalah bentuk 1:1 dari tampilan produk yang akan di-develop namun belum nyata. Prototype digunakan untuk mencoba & mensimulasikan solusi desain yang telah dibuat untuk mengetahui apakah fitur dan fungsi dalam program berjalan sesuai dengan kebutuhan yang telah direncanakan. Dengan demikian team dapat mengetahui kekurangan dan kesalahan lebih awal sebelum mengimplementasikan fitur lain ke dalam produk yang akan dibuat. Berikut adalah prototyping UI/UX case flow yang kami buat pada app Figma :

Prototype Kelompok 2
https://www.figma.com/proto/QjTl92EjSv37zwvVKTEKfH/WIREFRAME?node-id=180%3A1399&scaling=scale-down&page-id=136%3A211&starting-point-node-id=180%3A1399&show-proto-sidebar=1

5. TESTING

Proses akhir dari design thinking adalah testing, ini untuk melihat sejauh mana kesesuaian antara desain user interface yang dibuat dengan kebutuhan pengguna. Proses pengujian ini kami ujikan ke 3 responden dengan teknik interview secara online menggunakan aplikasi zoom.

User Testing (Kelompok 2)

Kami membuat Research Scenario terlebih dahulu dengan pertanyaan sebagai berikut :
Berikan salam saat bertemu dengan responden

  1. Perkenalkan diri dan jelaskan maksud tujuan kegiatan yang akan dilakukan
  2. Jelaskan alur proses kegiatan dari awal sampai akhir
  3. Meminta responden untuk memperkenalkan diri mulai dari Nama, Pekerjaan, dan Domisili
  4. Melakukan wawancara berdasarkan Question List
  5. Menjelaskan singkat tentang aplikasi Krealogi — Duanyam
  6. Memberikan link Figma kepada responden dan minta responden untuk Share Screen
  7. Menjelaskan singkat tentang apa yang harus dilakukan dan cara mengoperasikan Figma Prototype oleh responden
  8. [TASK 1] Meminta pengguna untuk melakukan pendaftaran dan login ke dalam aplikasi (berhenti di halaman Home) dan observasi apa yang dilakukan oleh responden
  9. [TASK 2] Meminta pengguna untuk melakukan penggantian password jika lupa hingga berhasil (berhenti di halaman Login) dan observasi apa yang dilakukan oleh responden
  10. [TASK 3] Meminta pengguna untuk melihat mencatat stok barang dan observasi apa yang dilakukan oleh responden
  11. [TASK 4] Meminta pengguna untuk melihat mencatat aliran kas dan observasi apa yang dilakukan oleh responden
  12. [TASK 5] Meminta pengguna untuk melihat halaman statistik dan men-download laporannya dan observasi apa yang dilakukan oleh responden
  13. Menanyakan tingkat kegunaan, kemudahan dan kepuasan dari responden setiap menyelesaikan alur Pendaftaran, Penggantian Password jika lupa, Pencatatan Stok Barang, Aliran Kas, dan Download Laporan dengan skala Likert
  14. Menanyakan tentang tingkat Single Ease Question kepada responden
  15. Penutup dan sampaikan terima kasih

KESIMPULAN

Berdasarkan hasil penelitian pada salah satu calon pengguna, ditemukan bahwa pengguna menginginkan platform yang “super efisien dan mudah” untuk merekam kebutuhan pengguna dengan lebih mudah.

Kelemahan yang dialami pengguna saat menggunakan platform krealogi adalah fitur yang belum ada pada platform, apalagi platform hanya menyediakan beberapa fitur, kegiatan lain seperti Perencanaan dan Pemantauan Produksi, Pencatatan Penjualan, Laporan Pengeluaran, Manajemen Persediaan. Krealogi tidak memiliki beberapa fitur yaitu Simple CRM, Cash Flow, dan Integrasi dengan Logistik dan Marketplace.

Dengan menambahkan fitur pada Krealogi diharapkan dapat membuat pengguna lebih nyaman dalam menggunakan aplikasi dalam pencatatan dan penjualan barang di platform serta memiliki catatan penjualan yang baik.

--

--