Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul (skilvul.com) dan (Krealogi) sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh (Krealogi).
Penulis adalah bagian dari penerima Digital Talent Scholarship, suatu program Kominfo yang bertujuan meningkatkan kemampuan digital masyarakat Indonesia. Bersama Gerry BK, dan mentor Erricson Hardiansyah (praktisi UI/UX Designer sekaligus mentor dari Skilvul, sebuat platform pembelajaran IT di Indonesia) penulis mengerjakan case study yang merupakan bagian dari proyek akhir bersama challenge partner, Krealogi.
Artikel ini penulis akan menggunakan implementasi aktivitas desain UI/UX dalam suatu studi kasus, studi kasus aplikasi krealogi, suatu aplikasi supply chain management yang menyasar pelaku bisnis kategori UMKM di Indonesia.
Aplikasi krealogi ini secara harfiah merupakan suatu aplikasi pencatatan transaksi keuangan, dengan latar belakang pengguna aplikasi ini adalah praktisi UMKM dimana hingga saat ini di Indonesia terdapat 62.9 juta unit. Namun, untuk digitalisasinya masih pada angka 13% atau sekitar 8 juta saja. sehingga peluang kajian UX untuk masalah rendahnya penggunaan digitalisasi menjadi sangat relevan. Oleh karenanya, suatu case study aplikasi Krealogi ini dibuat.
https://www.sirclo.com/melihat-peran-umkm-di-indonesia-bagaimana-perkembangannya/
Metodologi
Pendekatan desain UI/UX yang kami lakukan dalam kasus krealogi ini adalah design thinking process dimana terdapat lima tahap yang dilalui meskipun sifatnya tidak sistematis 1–5 secara urutan namun bisa saja proses ini berjalan secara acak. untuk tahap empathize tidak dilakukan secara terstruktur karena hambatan waktu dan fokus pembelajaran.
Problem Statement
Proses penggalian masalah atau adalah melalui tahapan brainstorming pada titik titik hambatan yang mungkin dihadapi user dalam menjalankan aplikasi Krealogi. Beberapa pain points didapatkan sebagai berikut
Beberapa pain points yang dapat atau berhasil dikumpulkan ini kemudian dilanjutkan dengan penggolongan sesuai makna atau benang merah yang dapat disimpulkan. Proses pengelompokan atau penggolongan ini kemudian diakomodir dalam suatu affinity diagram/mapping.
Affinity Mapping
Affinity mapping merupakan suatu proses kristalisasi dari tahap empathize yang menghasilkan beberapa pain points. Mapping pada kasus ini mengerucut pada isu guidance, functionality dan motivation.
Nah pada tahap berikutnya, kami mulai memunculkan peluang — peluang perbaikan yang mungkin dapat disajikan atau disebut how-might -we . Peluang — peluang perbaikan ini hendaknya bersifat umum, dan menghindari ide ide yang bersifat teknis. kenapa demikian? karena proses ini hendaknya dapat memicu solusi yang beragam dan tidak tertutup pada 1–2 solusi saja sebagaimana ditemui ketika output peluang — peluang perbaikan ini bersifat teknis atau berorientasi pada pembuatan fitur aplikasi. Semakin banyak atau semakin beragam maka akan semakin baik eksekusi ide ide yang dihasilkan.
semakin liar ide, semakin baik
Output proses ideate hendaknya bersifat umum sehingga terhindarkan dari mental blocking atau tertutupnya solusi solusi lain yang mungkin dapat diambil. Mapping pada kasus ini mengerucut pada isu guidance, functionality dan motivation. Pada studi kasus ini yang akan diangkat adalah isu guidance
Design Solutions
Isu guidance atau how-to untuk user yang belum mengerti atau pengguna baru merupakan prioritization matrix,
Wireframes
Menginjak proses keempat, tahapan ini dimulai dengan menuangkan ide solusi ke dalam suatu metode wireframing yaitu Crazy 8. Crazy 8 ini suatu metode sketching atau wireframing di atas 8 potong kertas. Gambar hasil crazy 8’s ini sifatnya masih kasar sehingga tidak dijadikan acuan utama untuk langkah selanjutnya melainkan untuk memberikan gambaran desain yang mungkin akan dituangkan.
Langkah crazy 8’s ini kemudian dilanjutkan dengan pembuatan desain low fidelity wireframe menggunakan design tools yang ada, diantaranya Figma. Pada langkah ini yang perlu diingat bahwa wireframe meskipun bersifat low fidelity namun sedianya dibuat dengan jelas sehingga dapat memberikan gambaran yang nyata. Oleh karenanya, komponen yang digunakan sedianya tidak menggunakan dummy text semacam Lorem Ipsum atau komponen kotak kotak tanpa penjelasan.
User Flow
Setelah semua siap, langkah berikutnya adalah menyusun user flow. Pada proses ini difokuskan pada alur Happy Flow atau alur yang ditempuh user sesuai dengan peruntukannya
Design System
Setelah tahap wireframe selesai, sebelum memulai perancangan atau high fidelity design hendaknya menentukan terlebih dahulu apa yang disebut dengan desain sistem. Desain sistem adalah semacam pedoman atau acuan dalam melakukan desain. Pedoman apa saja yang perlu ditetapkan, diantaranya adalah tipografi, warna, icon serta komponen. Penentuan ini penting sekali karena akan menentukan konsistensi perancangan atau desain user interface. Berikut adalah desain sistem yang digunakan
Tipografi
Warna
Komponen
Salah satu best practice penentuan desain sistem ini dapat mengacu dari material design yang dibuat oleh google.
Berikut hasil desain high fidelity yang berhasil dibuat
Usability Testing
Pada tahap uji coba yang dilakukan pada 1 responden mendapati hasil sebagai bahwa prototype yang dihasilkan pada aktivitas login-registration-user guide ini berhasil dilakukan. Namun masukan yang diberikan adalah penggunaan navigasi titik pada bagian bawah layar hendaknya perlu bersifat clickable.
Kesimpulan
hendaknya pada proses desain, seorang desainer memperhatikan serta berorientasi pada detail. Hal ini penting karena pengguna berasal dari latar belakang sosial yang berbeda beda. Dan juga suatu proses desain UI/UX adalah suatu proses perbaikan yang terus menerus. Demikian semoga bermanfaat.