UI/UX Case Study : Krealogi Du Anyam

Nurulfathiahad
6 min readNov 28, 2022

--

Redesign Aplikasi Krealogi, Aplikasi rantai pasok ramah pengguna bagi UMKM Kriya & Fashion

Latar Belakang

Krealogi merupakan sebuah bagaian dari revolusi digital untuk UMKM Indonesia. 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. Dari pengalaman menjalankan UMKM kriya sejak 2015, Du Anyam sangat memahami kendala UMKM dalam manajemen pesanan, produksi, persediaan sampai pengiriman.

Disclaimer :

Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementrian Komunikasi dan Informatika dengan Skilvul dan Krealogi sebagai Challenge Partner.

Objektif

  1. Mengetahui pendapat user terhadap tampilan baru aplikasi Krealogi
  2. Mengetahui kesiapan aplikasi Krealogi dalam fitur cash flow dan performa
  3. Mengetahui kesesuaian user flow oleh user terhadap aplikasi Krealogi
  4. Mengetahui tingkat keberhasilan single ease question untuk aplikasi Krealogi

Peran dalam Tim

Sebagai Trainee UI/UX Designer yang berkolaborasi dengan 4 anggota tim : Muhammad Arya Nurarif sebagai ketua kelompok, Aminah Khansa, Nurul Fathiah Annisa D, dan Vernando Tobing. Dalam setiap tahapnya, kami pun dibantu mentor Hitnes Muharram. Dan dalam tim ini, tanggung jawab saya dan tim adalah

  1. Riset terhadap aplikasi Krealogi.
  2. Merencanakan dan mendiskusikan fitur apa saja yang akan ditambahkan ke dalam aplikasi.
  3. Merancang userflow aplikasi.
  4. Merancang wireframe low-fi hingga hi-fidelity.

Adapun pembagiannya sebagai berikut:

  • Muhammad Arya Nurarif mengerjakan bagian Catat Transaksi Pengeluaran, Catat Transaksi Pemasukan, Catat Transaksi Hutang, dan Gudang Produk.
  • Aminah Khansa mengerjakan bagian Menu Keuangan, Ringkasan, Profile, dan Ubah Informasi.
  • Nurul Fathiah Annisa D mengerjakan bagian Home, Notifikasi, Unduh/Cetak, Quote Penyemangat, Quote Apresiasi, Rencana Produk(PO), dan Produksi Berjualan.
  • Vernando Tobing mengerjakan bagian Pesanan, Detail Pesanan, Pesanan, dan Statistik Keuangan.

5. Membuat design High-Fidelity.

Pada pengerjaan UI Design mengikuti pembagian tugas saat perancangan Wireframe

6. Membuat Prototype aplikasi.

7. Membuat Research Script dan Brief.

8. Melaksanakan Usability Testing dan Research ulang kepada narasumber.

Design Process

Sebelum kami melakukan hal dalam mendesain ada beberapa yang perlu diperhatikan. Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan, karena design thinking ini memberikan evolusi dari proses human centered untuk menciptakan inovasi.

Design Thinking adalah sebuah human yang ter-uproach yang kalau desainer sebagai toolkit to integrate the need of people, teknologi dan bisnis.

— Tim Brown IDEO

Design Thingking

1 — Empathize

Dalam proses ini kami mencari tahu pandangan dan kebutuhan dari target user dengan research sebelum mendefinisikan sebuah problem statement dan melakukan redesign terhadap aplikasi Krealogi.

2 — Define

Pada tahap selanjutnya, kami melanjutkan untuk mencari beberapa point permasalahan.

How Might We. atau ‘Bagaimana Jika’ adalah salah satu cara mengidentifikasi pain points atau problem apa saja yang ingin di pecahkan. Pertanyaan akan berisi beberapa saran atau ide dari tim yang tepat untuk segera mendapatkan solusi yang potensial untuk problem yang sudah dijabarkan.

3 — Ideate

Tahap selanjutnya kami memulai brainstorming ide berdasarkan How-Might We.

Kemudian kami melakukan Prioritization Idea.

4 — User Flow

Pada bagian ini kami membuat sebuah diagram langkah-langkah yang harus kami lakukan untuk menyelesaikan sebuah task.

5 — Wireframe

Setelah membuat userflow, kami membuat wireframe sebagai payout dalam versi low-fidelity (Lo-fi) yang dapat membantu kami saat membuat mockup UI Design.

Berikut link Wireframe

6 — Design System

Lanjut setelah membuat wireframe, kami juga membuat design system yang mana ini adalah kumpulan komponen desain yang akan digunakan saat pengeditan UI Design seperti Text Style, Warna Style, Icon, Header, Navigation Bar dan masih banyak lainnya.

7 — Prototyping

Setelah membuat Design System, kami membuat Mockup UI Design kemudian kami lakukan prototyping agar kami melihat apakah design kami dapat berjalan dengan baik setelah di programkan.

Prototyping kami dimulai dari flows play. Berikut link prototyping

8 — Testing

Untuk menguji prototype kami melakukan usability testing secara remote dengan satu orang terpilih yang sesuai dengan user persona. User persona yang kami tentukan adalah:

Responden Kriteria

  1. Berusia 18–30 tahun
  2. Mengerti tentang UI Design
  3. Mempunyai akal dan pikiran
  4. Berdomisili di seluruh wilayah Indonesia
  5. Memiliki kemampuan Bahasa Indonesia sebagai native language
  6. Bersikap aktif dan responsif
  7. Memiliki pendapat yang sejalan
  8. Memahami topik yang sejalan
  9. Mampu memberikan feedback secara jujur
  10. Mempunyai Smartphone dan Koneksi Internet

Kami melakukan usability testing terhadap tujuh task:

[TASK 1] Meminta responden untuk memasuki aplikasi dan memulai prototype pada menu Home

[TASK 2] Meminta responden untuk uji testing pada fitur arus kas dengan memasuki aplikasi dan memulai prototype pada menu Keuangan

[TASK 3] Meminta responden untuk membuka setiap komponen yang ada pada Catat Transaksi di menu Keuangan

[TASK 4] Meminta responden untuk membuka setiap komponen yang ada pada menu Pesanan

[TASK 5] Meminta responden untuk membuka setiap komponen yang ada pada menu Gudang

[TASK 6] Meminta responden untuk membuka setiap komponen yang ada pada Catat Produk di menu Gedung

[TASK 7] Meminta responden untuk membuka setiap komponen yang ada pada menu Akun

Setiap task selesai dilakukan kami menanyakan:

  1. Apakah ada kendala saat memulai prototype?
  2. Apakah informasi ini sudah sesuai dengan kebutuhan pengguna?
  3. Apakah terdapat kekurangan pada saat membuka setiap komponen?
  4. Apakah pada tampilan ini mudah untuk dipahami?
  5. Single Ease Question

Single ease question adalah Post Task Questionnaire, sebuah kuesioner yang digunakan dalam mengukur tingkat kemudahan pada suatu fitur produk berdasarkan pengalaman user saat melakukan sebuah task dengan menggunakan satu pertanyaan saja. Pilihan jawaban merupakan skala 1–7. 1 sangat sulit dan 7 sangat mudah. Hasil SEQ setiap task dijumlahkan kemudian dihitung nilai rata-rata.

Hasil Wawancara

Secara garis besar, kami berhasil menyelesaikan semua task sesuai dengan user flow. Form yang ada dirasa user sudah sesuai dengan kebutuhan. Tampilan Dashboard sudah dirasa cukup dan navigasi sudah cukup jelas.

Kesimpulan

Hasil testing terhadap prototype berhasil melewati angka SEQ minimal dan memenuhi kebutuhan pengguna.

Rekomendasi

Untuk informasi selanjutnya, tidak ada kekurangan dalam meredesign ini semuanya cukup puas dalam aplikasi krealogi ini, untuk di ukur dari nilai 1–10 nilainya 8. Setelah semua tahap di selesaikan, kemudian kita meredesign pada bagian Wireframe(UI Design) dan dilanjut ke tahap UI Design (Prototyping).

Sekian case study dari saya. Semoga case study ini dapat bermanfaat bagi pembaca.

Saya ucapkan Terima Kasih kepada:

  • Partner kelompok
  • Mentor kak Hitnes Muharram
  • Para pembaca

Terima kasih telah meluangkan waktu untuk membaca!

--

--