UI/UX Case Study: Krealogi Revamp by Du Anyam
hai hai hai, perkenalkan, saya Agam. Saat ini saya sedang menjadi salah satu peserta Bootcamp yang diselenggarakan oleh Digital Talent Scholarship Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia yang bekerja sama dengan platform Skilvul. Saat ini saya sedang berada di final step project.
Disclaimer: projek ini dirancang berdasarkan program dari DTS Kominfo yang bekerja sama dengan platform Skilvul. Krealogi merupakan Challenge Partner. Saya tidak bekerja atau dikontrak secara profesional oleh Krealogi.
Latar Belakang
Krealogi merupakan sebuah komunitas yang bertujuan sebagai wadah berkomunikasi dengan pelaku usaha lainnya, pelatihan untuk mengembangkan kemampuan, dan keterampilan UMKM (Usaha Mikro Kecil Menengah), 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.
Target Design
- Merancang tampilan UI (User Interface) yang mudah digunakan oleh para pelaku UMKM
- Mengembangkan fitur simple CRM (Customer Relationship Management) agar pengguna dengan mudah memantau seluruh aktivitas produksi serta distribusi
- Mengembangkan fitur manajemen gudang agar pengguna dapat memantau seluruh stok barang yang masih tersedia
Peran dalam tim
Pada proses penyusunan tampilan Krealogi ini, kami melakukan kolaborasi dengan 3 orang, yaitu Saya, Muhammad Nur Al Ghazali, serta Muhammad Sholihan. Saya memiliki beberapa tanggungawab seperti melakukan riset kebutuhan pengguna, mengumpulkan ide dan gagasan, menyusun user flow, melakukan design sprint, merancang wire frame, membuat tampilan UI (User Interface), menggabungkan seluruh design dalam bentuk prototype, serta melakukan usability testing.
Design Process
Dalam melakukan penyusunan case study ini, kami menggunakan pendekatan design thinking, dimana proses diawali dari empathize, define, ideate, prototype, dan terakhir testing. Kami membuat design thinking dan merancang UI dilakukan dengan menggunakan aplikasi Figma. Dengan memaksimalkan semua fitur yang ada dalam aplikasi ini, kami dapat melakukan kolaborasi bersama tim.
1. Empathize
Tahap yang pertama kali kami lakukan adalah empathize. Tahap ini kami melakukan beberapa riset dengan orang-orang yang ahli / mahir yang dapat membantu kita untuk memperoleh insight dari semua masalah yang ada. Tahapan ini, kami banyak mendengarkan orang yang menekuni dunia UMKM serta menjelaskan permasalahan yang terjadi dalam menjalankan bisnis, lalu menterjemahkan permasalahan yang ada untuk dicari solusi yang dapat membantu dalam menjalankan bisnis.
Untuk merancang sebuah solusi, kami menerapkan user centric, dimana seluruh kebutuhan ditujukan untuk mempermudah user. Selain itu, kami menanyakan terait beberapa solusi dari aplikasi serupa yang digunakan.
2. Define
Setelah melakukan tahap empathize, kami melanjutkan ketahap dua, yaitu tahap define. pada tahap ini, kami menyusun semua permasalahan yang ada, disusun ke dalam beberapa paint point:
- Design tampilan UI (User Interface) sulit dimengerti, pengguna tidak paham
- Belum ada fitur pencatatan piutang dan pajak
- Pengguna kesulitan dalam melakukan pemantauan bisnis
- Proses pencatatan stok masih kesulitan
Setelah melakukan list paint point yang ada, kami mencoba memberikan solusi dan peluang dari permasalahan yang ada, dengan melakukan “How Might We (HMW)”. Berikut hasil How Might We yang kelompok kami dapatkan
Supaya dalam penyusunan design lebih terarah, kami melakukan voting internal tentang Solution Idea apa saja yang akan disusun, dan dirancang kedalam bentuk tampilan antarmuka.
3. Ideate
Pada tahap ketiga ini, kami mengelompokan hasil voting How Might We yang telah dilakukan pada tahap sebelumya. Proses ini menyusun beberapa hasil voting ke dalam bentuk tabel yang disusun sesuai dengan prioritas kebutuhan dari paint point pengguna, serta kegunaan dari fitur itu sendiri. Dalam tim kami, menyusun voting ini kedalam tabel prioritas untuk mempermudah dalam menyusun solusi yang akan segera ditindak lanjuti.
Setelah menyusun tabel prioritas, langkah berikutnya setiap anggota dalam tim melakukan crazy 8’s. Kami membuat sketsa / gambaran kasar yang nantinya akan dibuat menjadi sebuah tampilan antarmuka pengguna.
4. Prototype
Setelah menyusun sketsa / gambaran kasar pada tahap sebelumnya, pada tahap keempat ini kami mulai menyusun tampilan dari sketsa yang telah dibuat. Namun, sebelum menyusun sketsa, terlebih dahulu tim kami menyusun wire flow supaya mempermudah dalam menentukan alur penggunaan aplikasi. Disini Kami mengembangkan fitur simple CRM, sehingga flow yang dibuat yang berhubungan dengan stok barang, keuangan, serta pesanan
Berikutnya, kami menyusun flow untuk menu gudang
Berikut ini flow dari keuangan
Berdasarkan user flow yang telah kami susun, langkah berikutnya kami menyusun low-fidelity (Lo-Fi) wire frame. Penyusunan Lo-Fi mengikuti flow yang sudah terbentuk sebelumnya
Setelah menyusun Low-Fi, berikut beberapa fitur yang berhasil kami rancang kedalam bentuk High-Fidelity (Hi-Fi):
- Tampilan menu home untuk fitur simple CRM (Customer Relationship Management). Fitur ini merupakan yang utama kami kembangkan, karena pengguna kesulitan memantau kegiatan produksi dan distribusi selama berlangsungnya bisnis
- Tampilan menu gudang. Fitur ini dibuat untuk memenuhi kebutuhan user yang kesulitan dalam memantau stok barang, apakah masih tersedia atau sudah cukup.
- Tampilan menu keuangan. Fitur ini dirancang untuk mempermudah user dalam memantau perkembangan keuangan. User dapat dengan mudah memantau dan mencetak hasil laporan keuangan.
Berikut hasil perancangan design Hi-Fi yang sudah kami susun untuk prototype. Klik disini
5. Testing
Setelah melalui proses prototype di tahap sebelumnya, tahap terakhir kami melakukan testing / pengujian. Pengujian dilakukan untuk mengecek apakah fitur dalam aplikasi bisa digunakan dengan baik, serta menerima feedback dari pengguna apakah sudah memenuhi kebutuhan permasalahan. Testing kami lakukan langsung kepada pengguna pelaku UMKM. Proses testing dilakukan melalui aplikasi virtual Zoom Meeting, dan mencoba langsung aplikasi ke pengguna.
berdasarkan hasil uji coba, pengguna merasa puas secara keseluruhan, baik dalam fitur penggunaan, kemudahan akses, serta kemudahan dalam memantau kegiatan bisnis.
Design System
Saat menyusun desain ke dalam sebuah final tampilan design, kami merancang terlebih dahulu komponen pendukung yang diperlukan agar design yang kami buat konsisten, cepat dalam penyusunan. Design system yang kami susun meliputi warna, typography, icon, header, text input, dan lain sebagainya. Berikut design system yang kami susun
Kesimpulan
Dalam mengikuti kegiatan online bootcamp ini, Saya mendapat tantangan dan insight baru. Saya bekerja sama dengan tim untuk melakukan beberapa pengumpulan data (memahami kebutuhan pengguna) yang sesuai dengan aplikasi yang nantinya akan disusun. Setelah melakukan pengumpulan data, melakukan diskusi dan memetakan dari permasalahan pengguna, Saya melanjutkan ke tahap menyusun wireflow. Tujuannya untuk mempermudah dalam menyusun sebuah tampilan aplikasi. Saat wireflow sudah terbentuk, penyusunan desain menjadi lebih terarah. Selain itu, Saya juga menyusun beberapa design system untuk mempermudah dalam proses mendesain tampilan aplikasi. Menggunakan design system sangat berguna, sebab desain yang kita buat akan konsisten, sama, dan rapih. Setelah mendesain tampilan aplikasi, tahap terakhir Saya melakukan uji coba aplikasi. Uji coba ini bertujuan untuk mengetes apakah fitur aplikasi yang dibuat dapat digunakan dengan maksimal atau tidak. Selain itu, tujuan melakukan uji coba (testing) untuk memperoleh masukan dari pengguna (dalam hal ini masukan dari pengguna pelaku UMKM).
Memang aplikasi yang Saya buat masih jauh dari kata sempurna, masih banyak yang perlu ditingkatkan, karena dalam menyusun keseluruhan design aplikasi berpacu dengan waktu yang terbatas. Harapan Saya, aplikasi ini dapat digunakan, dikembakan, serta menjadi bahan pengetahuan bagi semua orang.
Ucapan spesial terimakasih yang sebesar-besarnya kepada tim dalam kelompok Saya, Muhammad Nur Al Ghazali dan Muhammad Sholihan yang telah membantu, mensupport, serta memberi masukan dalam menyusun sebuah aplikasi Krealogi by Du Anyam ini.
Nah terimakasih sudah meluangkan sedikit waktunya untuk membaca case study Saya. Case study ini masih banyak perlu penambahan, karena ini merupakan posting pertama saya dalam UX writing case study. Saya sangat senang jika ada tambahan, masukan, atau pendapat yang bersifat membangun supaya kedepanya bisa merancang case study yang lebih baik lagi. Sampai jumpa lagi di posting berikutnya!