UX Case Study : Pengembangan Fitur Laporan Usaha & Utang Piutang pada Aplikasi Krealogi

Muhammad Syarif
9 min readOct 13, 2022

--

Cover Slide Deck A30 Kelompok 5
Cover Slide Deck A30 Kelompok 5

Disclaimer : Proyek ini adalah bagian dari pelatihan Program Digital Talent Scholarship - Professional Academy (DTS-PROA) UI/UX Design Batch 3 2022 yang diadakan oleh Kementrian Komunikasi dan Informatika dan Skilvul sebagai mitra pelaksana.

Krealogi merupakan Challenge Partner yang kami pilih. Kami bukan bagian dari Krealogi dan tidak terikat kontrak profesional dengan Krealogi. Semua konten konten pembelajaran berupa icon, ilustrasi dan lain-lain adalah free licence.

Latar Belakang

Selain sebagai aplikasi pencatatan kegiatan operasional usaha, Krealogi juga menjadi tempat untuk komunitas — sebagai wadah berjejaring dengan pelaku usaha lain — dan pelatihan untuk mengembangkan kemampuan dan keterampilan pelaku UMKM.

krealogi.com

Saat ini Krealogi memiliki masalah berupa desain aplikasi mereka yang tidak ramah pengguna (user friendly) untuk target pengguna mereka. Krealogi membutuhkan desain aplikasi yang ramah pengguna yang bisa membantu pengguna Krealogi dalam melakukan pencatatan kegiatan operasional mereka, membuat strategi dan menjaga alur operasional mereka.

Beberapa Fitur yang dikembangkan Krealogi :

  • Production Planning and Monitoring
  • Sales Recording
  • Expense Report
  • Inventory Management
  • Simple CRM (Not Available)
  • Cash Flow Feature (Not Available)
  • Integration with Logistic and Marketplace (Not Available)

Objektif

Dalam program ini, kami sebagai tim bekerja sama untuk mengembangkan Fitur Laporan usaha dan Fitur Hutang Piutang sebagai bagian dari Cash Flow Feature.

Peran dalam Tim

Kami kelompok 5 dari kelas A30 beranggotakan 4 orang sebagai berikut :

  1. Erdian Aditiarna
  2. Silvira Asterifolia
  3. Muhammad Syarif
  4. Fricilia Ayu Saputri

Secara keseluruhan, kami mengerjakan tugas di setiap tahap bersama-sama, tidak ada pembagian tanggung jawab khusus untuk setiap orang.

Di antara tanggung jawab kami sebagai UI/UX Designer adalah:

  • Melakukan Secondary Research berdasarkan brief permasalahan dari Challange Brief sebagai proses Empathize dalam Design Thinking.
  • Melakukan proses Define & Ideate dari hasil Secondary Research.
  • Membuat User Flow dan Wireframe sesuai dengan hasil Define & Ideate.
  • Membuat UI Styleguide dan UI Design.
  • Membuat Prototype dari UI Design.
  • Membuat dokumen Stimulus User Research & Record Data sebagai persiapan untuk melakukan User Research.
  • Melakukan tahapan User Research dengan survei sebagai metode riset.
  • Membuat UX Case Study sesuai dengan alur proses kerja yang kami lakukan.

Durasi

Durasi pengerjaan selama 10 pekan dari 1 Agustus sampai 9 Oktober 2022.

Mentoring

Selama program berlangsung kami dipandu oleh mentor mas Dendy Adi Nirwana. Mentor bertugas untuk membimbing mantee selama program. Adapun kegiatan yang kami lakukan bersama mentor diantaranya:

  • Mengikuti live sesi setiap hari sabtu selama 10 pekan.
  • Mengkuti (Ask Me Anything) AMA sesi selama 8 pekan di hari yang ditentukan berdasarkan vote.
  • Melakukan diskusi di Server Discord yang disediakan Kominfo.

Design Process

Dalam kasus ini kami menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Kami menggunakan metode ini mengikuti arahan dari mentor.

5 Tahapan dalam Design Thinking. Image Source: Interaction Design Foundation

Ada 5 Tahapan dalam Design Thingking, yaitu:

  1. Empathize
  2. Define
  3. Ideate
  4. Prototype
  5. Test

1 — Empathize

Langkah empathize adalah proses untuk meneliti dan menganalisis perspektif dan kebutuhan target pengguna dalam fitur kami. Kami melakukan pendalaman produk yang diinginkan oleh Challenge Partner. Yaitu pada Fitur Cash flow belum adanya Fitur Laporan Usaha dan Fitur Pencatatan Utang Piutang.

Kami tidak melakukan tahapan Empathize, namun kami menggunakan brief yang disediakan Challenge Partner sebagai referensi.

Kemudian kami melakukan Secondary Research berupa:

  • Competitor analysis.
  • Referensi case terkait di medium dan sumber lainnya.
  • Feedback user di aplikasi serupa di appstore dan playstore.
  • Mendalami produk yang diinginkan dari Challenge Partner.
  • Pengalaman pribadi menggunakan aplikasi Krealogi.

2 — Define

Di tahapan Define, kami melakukan analisis untuk mengidentifikasi masalah. Ada dua komponen yang dilakukan di tahap Define, yaitu :

  1. Pain points
  2. How Might We

Pain Points

Kami mengidentifikasi pain points berdasarkan secondary research berupa pengalaman kami pribadi, dari feedback user di appstore & playstore aplikasi Krealogi dan aplikasi serupa.

Beberapa Pain Points yang kami highlight.

How Might We

Setelah melalui tahapan pain points, kami kemudian melakukan brainstorming dengan mengelompokkan pain points yang serupa kemudian membingkai ulang ke dalam pertanyaan yang dapat menjadi langkah konkrit.

Beberapa HMW yang kami highlight

3 — Ideate

Di tahap Ideate kami melakukan proses kreatif berupa menghasilkan ide-ide untuk menjawab How-Might-We.

Komponen tahap Ideate:

  1. Solution Idea
  2. Affinity Diagram
  3. Prioritization Idea
  4. User Flow
  5. Wireframe

Solution Idea

Pada tahapan Solution Idea ini, kami melakukan brainstorming ide berdasarkan apa yang sudah didapatkan dari proses How Might We. Kemudian dari ide-ide tersebut didapatkan solusi yang akan dikelompokkan ke dalam Solution Idea.

Beberapa Solution Idea yang kami highlight

Affinity Diagram

Pada tahap Affinity Diagram ini kami melakukan pengelompokkan ide yang serupa dari tahap Solution Idea.

Affinity Diagarm — Pengelompokkan ide dari tahap Solution Idea

Dari pengelompokkan ide tersebut kami menyimpulkan ada 4 kategori ide yang bisa kami kembangkan, yaitu

  • Fitur Logistik
  • Fitur Cash Flow
  • Dasboard
  • Invoice

Prioritization Idea

Setelah menentukan Affinity Diagram, kami melakukan Prioritization Idea berupa memprioritaskan ide-ide menurut value dan effortnya.

Selanjutnya, kami berfokus di bagian “Yes, Do It Now” dengan pertimbangan value yang didapat akan lebih tinggi hanya dengan effort yang rendah.

Kemudian kami berfokus ke dua fitur berikut:

  1. Fitur Laporan Usaha, meliputi Rangkuman, Ringkasan Penjualan, Laporan Penjualan Per Produk, Laporan Penjualan Per Kategori, Laporan Utang Piutang.
  2. Fitur Utang Piutang, berupa flow pencatatan utang barang kepada supplier dan beban lainnya, dan pencatatan piutang penjualan barang yang belum lunas (kasbon).

User Flow

Saat membuat user flow, kita sebagai designer sesungguhnya sedang memikirkan bagaimana cara memandu user dalam menggunakan solusi yang kita rancang.

Dikutip dari artikel “Memahami User Flow” Oleh Dwinawan.

Dari kutipan tersebut, kami lalu merumuskan userflow sebagai langkah-langkah yang yang memandu user untuk mengerjakan task dari fitur yang ingin kami kembangkan.

Berikut User Flow dari task yang kami kembangkan.

  • User Flow 1 — Laporan Usaha
User Flow Awal Fitur Laporan Usaha
  • User Flow 2 — Utang Piutang
User Flow Awal Fitur Utang Piutang

Wireframe

Wireframe ini sebenarnya frame yang ada wirenya.

Itulah satu kalimat penjelasan singkat dari mentor yang saya ingat ketika live sesi dengan mentor membahas tentang wireframe.

Di tahap ini, kami membuat wireframe berdasarkan userflow yang telah dibuat sebelumnya. Wireframe berguna sebagai kerangka yang memberikan gambaran kasar (Low-Fidelity / Lo-Fi) yang akan sangat berguna saat pengerjaan UI Design (High-Fidelity / Hi-Fi) agar pada tahap ini kami sudah ada gambaran desain seperti apa yang akan kami buat.

Setiap frame memiliki bagian yang dapat diklik seperti button yang mengarah ke frame berikutnya yang dihubungkan dengan tanda panah.

Berikut Wireframe dari pengembangan User Flow:

  • Wireframe 1 — Laporan Usaha
Wireframe Awal Fitur Laporan Usaha
  • Wireframe 2 — Utang Piutang
Wireframe Awal Fitur Utang Piutang

Pada tahapan wireframe kami menemukan beberapa penambahan flow yang diperlukan dari User Flow yang sudah dibuat sebelumnya.

4 — Prototype

Sebelum masuk ke tahapan prototype, kami membuat :

  • Design System
  • UI Design

Design System

Berikut beberapa Design System yang kami buat sebelum masuk ke tahapan UI Design. Design System berguna untuk memudahkan kami dalam tahap UI Design. Dengan Design System, hasil desain kami akan konsisten dan lebih seragam di tiap flow.

Berikut beberapa Design System yang kami buat:

Logo

Varian Logo

Color Style

Color Style

Type Scale

Type Scale

Button

Varian Button

Input

Varian Input Field

UI Design

Berikut UI Design dari tiap task:

Login Page

UI Design Login Page

Fitur Laporan Usaha

UI Design Fitur Laporan Usaha

Fitur Utang Piutang

UI Design Fitur Utang Piutang
Link dan QR code menuju Prototype

5 — Test

Kami menggunakan metode survei kuantitatif pada tahap Usability Testing dengan menggunakan Google Form yang diisi oleh responden sebagai bentuk wawancara kepada responden.

Kami juga menyiapkan Stimulus User Research sebagai acuan untuk membuat form survei yang berisi:

  • Research Objective : target yang ingin dicapai dalam melakukan riset.
  • Respondent Criteria : kriteria responden yang akan diminta untuk menjadi narasumber, berupa kelompok umur, domisili, dan kepemilikan usaha kecil / mikro.
  • List of Questions : berisi pertanyaan-pertanyaan yang akan diajukan kepada responden.
  • Research Scenario : berisi skenario yang akan kami jalankan dalam melakukan riset, berupa pemilihan responden yang sesuai kriteria, penyebaran survei, penjabaran tiap pertanyaan, dan pengumpulan data.

Berdasarkan Respondent Criteria di Stimulus User Research yang kami buat, kami memngambil responden dari teman yang beberapa di antaranya memiliki usaha mikro / kecil, dengan kriteria sebagai berikut :

  1. Berusia 22–51 tahun.
  2. Pemilik usaha mikro / kecil berupa penyedia barang
  3. Berdomisili di seluruh wilayah Indonesia
  4. Memiliki smartphone dan koneksi internet
  5. Terbiasa menggunakan aplikasi di smartphone
  6. Memiliki kemampuan Bahasa Indonesia sebagai native language

Research Objective yang kami targetkan :

  1. Responden mampu menemukan dan memahami fitur Laporan Usaha (Cash Flow) untuk mendapatkan informasi mengenai laporan kegiatan usaha yang dicatat di aplikasi Krealogi.
  2. Responden mampu menemukan, memahami dan menggunakan fitur Utang Piutang untuk dapat melakukan pencatatan utang piutang yang terjadi dalam kegiatan usaha.

Kami menggunakan Skala Likert dan Single Ease Question (SEQ) yang didapat dari rata-rata setiap pertanyaan dari setiap user sebagai skala keberhasilan.

Dari hasil survei yang telah kami lakukan, berikut data yang dapat kami rangkum dengan merata-ratakan nilai dari total 5 user:

Skala Likert — Skala 1–5

  • Task 1 — Fitur Laporan Usaha — skala 1–5

Dari sisi kegunaan, memperoleh rata-rata nilai 3,6

Dari sisi kemudahan, memperoleh rata-rata nilai 4

Dari sisi kepuasan, memperoleh rata-rata nilai 3,6

Dari sisi kelengkapan, memperoleh rata-rata nilai 3

  • Task 2 — Fitur Utang Piutang — skala 1–5

Dari sisi kegunaan, memperoleh rata-rata nilai 3,4

Dari sisi kemudahan, memperoleh rata-rata nilai 4

Dari sisi kepuasan, memperoleh rata-rata nilai 4

Dari sisi kelengkapan, memperoleh rata-rata nilai 3,3

Single Ease Question (SEQ) Skala 1–7

Task 1 — Fitur Laporan Usaha mendapat nilai 5.5 yang berarti passed.

Task 2— Fitur Utang Piutang mendapat nilai 5.8 yang berarti passed.

Beberapa feedback dari responden:

Cukup informatif dalam penjelasan dan demo penggunaan setiap menu2nya.

simpel dan menarik mudah dipelajari.

Dari saya yg sudah melihat demo dan sekilas menggunakan demonya, saat ini sudah cukup baik dalam experience penggunaannya.

Beberapa feedback mengenai kendala yang dialami responden:

detail seperti no rek tdk ada, informasi tanggal terlalu kecil

Tombol tambah saja sempat cari2 letaknya

tidak ada laporan berapa pcs barang yg terjual

Kesimpulan

Melihat dari hasil survei dan penilaian Skala Likert & SEQ, UI Design yang kami buat masih sangat sederhana, walaupun hasilnya sudah diatas ambang minimal. Dengan begitu sebenarnya sudah memenuhi standar yang kami tetapkan di awal.

Ketersediaan waktu dan kerjasama tim dalam pengerjaan tugas juga sangat berpengaruh dalam pengerjaan desain ini.

Walaupun begitu, saya sangat senang dapat menyelesaikan desain ini sebagai protofolio pertama saya.

Rekomendasi Selanjutnya

Masih banyak yang dapat dikembangkan dalam aplikasi Krealogi, seperti Fitur Laporan Performa Usaha yang termasuk dalam Cash Flow Feature, Fitur Pengelompokan & Kontak Pelanggan lewat simple chat box di aplikasi Krealogi langsung yang termasuk dalam Simple CRM, dan Fitur Kirim Barang & Tombol Pesan Lewat Marketplace yang termasuk ke dalam Integration with Logistic and Marketplace.

Tentunya dengan waktu yang sangat terbatas kami tidak dapat mengerjakan semua fitur yang ada di tahap Ideate, namun akan sangat menyenangkan rasanya bila dapat melanjutkan pengerjaan fitur-fitur itu di kesempatan berikutnya.

Penutup

Demikian UX Case Study yang saya susun sebagai tugas untuk medapatkan sertifikat dari program ini. Saya senang sekali dapat terpilih untuk mengikuti dan menjalani program ini sampai akhir. Saya harap ada semakin banyak talenta muda yang mau mau mulai belajar UI/UX design dan mendapatkan kesempatan terjun berkarir di dunia UI/UX design, dan saya harap saya dapat termasuk di dalamnya.

--

--