Studi Kasus UX Krealogi
Proyek ini adalah bagian dari program pelatihan UI/UX oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. dan Krealogi merupakan Challenge Partner yang saya ambil untuk Studi Kasus ini. Saya TIDAK bekerja atau dikontrak secara profesional oleh Krealogi.
Background story
Studi kasus ini bertujuan untuk menjawab challenge yang diberikan DTS (Digital Talent Scholarship)dan Skilvul sebagai partnership sebagai proses pembelajaran UI/UX, dan sekaligus pembelajaran untuk saya mengenai proses-proses dalam membuat user Interface. Mulai dari proses research hingga prototype.
Pengenalan Aplikasi
Krealogi adalah aplikasi pencatatan pembukuan usaha digital berbasis aplikasi mobile yang dirancang untuk memudahkan para pelaku UKMM. Diantara fitur yang terdapat pada Krealogi ini adalah untuk pengelolaan inventaris, memonitoring rencana produksi, mencatat pesanan masuk dan pencatatan pemasukan/pengeluaran.
Latar Belakang Permasalahan
Krealogi saat ini sebagian pengguna mengalami beberapa kesulitan. diantara kesulitan nya itu adalah tampilan antar-muka yang tidak user friendly dan beberapa kekurangan fitur lainnya. dalam pengembangannya Krealogi masih membutuhkan beberapa fitur, yaitu fitur CRM (Customer Relationship Management) yang sederhana, fitur Cash Flow dan Integration with Logistic dan Marketplace.
pada kasus ini saya akan berfokus pada permasalahan
- Perubahan Tampilan Beranda /Home
- Mengembangkan fitur terkait integrasi dengan logistik, dimana saat ini pengiriman melalui logistik tidak tercatat di Krealogi.
- Mengembangkan fitur terkait CRM yang sederhana untuk mencatat pelanggan-pelanggan dari pelaku usaha.
Desain Proses
Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. karena untuk mencapai atau meningkatkan usability dan interface secara lebih optimal. Dari Design Thinking kita melewati beberapa proses. seperti mencari permasalahan dari aspek user/bisnis atau Empathise, mengumpulkan data dari user/bisnis atau defining kemudian ada tahapan brainstorming ide dari permasalahan yang ada atau istilah nya Ideating yang akan ditumpahkan ke dalam sebuah solusi desain yaitu Prototyping yang akan dites oleh user terkait.
1. Empathize
Tahapan pertama dalam metode Design Thinking adalah Empathize. Tujuan dari tapaham ini adalah untuk membantu designer dalam mencari tahu sudut pandang dari pengguna aplikasi, terutama kebutuhan nya dalam mengoperasikan aplikasi. ada beberapa cara dalam melakukan Empathize ini, diantaranya Observasi, Wawancara, Survey.
Untuk saat ini pada tahap Empathize kami hanya menganalisa secara pribadi hal hal yang sekiranya diperlukan sebagai pengguna aplikasi.
2. Define
Setelah melakukan tahap yang pertama maka dilanjutkan dengan tahap berikutnya, yaitu Define. Pada tahap Define ini adalah untuk mendefinisikan permasalahan user.
a. Pain Point
Untuk mendapatkan Paint Point, kami melakukan pendekatan dengan melakukan testing atau menggunakan aplikasi Krealogi secara langsung. kemudian mengambil kesimpulan-kesimpulan yang kami rasa menjadi kendala dari aplikasi Krealogi.
b. How-Might We
Setelah mendapatkan Paint Point, kami ke tahap How-Might We untuk mendapatkan tujuan dari masalah yang ada.
3. Ideate
Setelah semua target tujuan ditemukan pada How-Might-We, proses dilanjutkan pada tahapan Ideate. Pada tahap ini kami membuat atau mencari ide-ide untuk solusi yang diharapkan bisa menyelesaikan pemasalahan yang ada dan bisa mencapai tujuan yang diinginkan. ada beberapa tahapan dari metode Ideate, yaitu ide solusi kemudian dari ide solusi tersebut dikelompokkan pada tema yang sama yaitu Affinity Diagram dan terakhir membuat Crazy 8' sebagai sketsa awal dari ide yang terbentuk.
a. Ide Solusi
Berikut kumpulan ide-ide terkait solusi dari fitur terkait.
b. Affinity Diagram
Setelah semua ide solusi dijabarkan, kemudian kami mengelompokkan ide-ide tersebut ke dalam beberapa kategori berdasarkan fitur yang akan dibuat. ide yang bertemakan sama atau mirip akan dikelompokkan ke dalam satu fitur.
c. Priority Diagram
Setelah semua ide solusi dikelompokkan, kemudia kami melakukan pengelompokkan pada diagram prioritas. Diagram prioritas adalah seperti diagram cartesius, dengan sumbu x merepresentasikan usaha/effort yang diperlukan dalam pengerjaan fitur tersebut, usaha/effort ini juga memperhitungkan kemungkinan atau usaha yang dilakukan oleh developer. kemudian sumbu merepresentasikan efek terhadap pengguna. Sehingga dalam diagram ini terbagi menjadi 4 kuadran yaitu;
- Yes, Do it now
- Do next
- Later
- Do last
d. Crazy 8'
Setelah ditentukan fokus utama dalam pengembangan fitur, kami membuat sketsa kasar atau sketsa cepat dengan konsep Crazy8'. Crazy8' adalah metode menggambar di kertas yang dibagi menjadi 8 bagian, setiap bagian menggambarkan tampilan-tampilan fitur2 yang diperlukan dan diselesaikan dalam waktu 8 menit.
4. Prototype
Pada tahap Prototype akan dilakukan pembuatan fitur dengan pendekatan alur dari hulu ke hilir dengan pembuatan Task Flow. Task flow mendefinisikan proses yang dilalui oleh pengguna ketika melakukan suatu proses pada fitur yang akan digunakan nantinya. Task Flow tersebut kemudian akan dibuat secara visual melalui pembuatan Wireframe. Wireframe tersebut berupa purnarupa yang lebih tinggi dari sketsa Crazy8'. Selanjutnya Wireframe akan dibuat menjadi sebuah desain antar-muka pengguna yang high-fidelity dan akan dibuat interaksi antar komponen yang diperlukan.
a. Task Flow
Task Flow berikut ini adalah Proses-proses berdasarkan fitur yang kami kembangkan
- Logistik
Pada fitur ini kami asumsikan bahwa pada backend/API telah terintegrasi
2. Simple CRM
Menggambarkan proses penambahan Customer
3. Inventory
Menggambarkan proses Inventory barang yaitu terdapat fungsi Tambah, Edit, Hapus, Detail dari barang.
b. Wireframe
Pada tahapan ini, Wireframe diusahakan dibuat sesuai dengan Task Flow. sebagai Disclaimer, secara pribadi lebih terbiasa dengan membuat UI terlebih dahulu karena dengan begitu lebih terlihat alur yang diperlukan. Sehingga bisa saja terjadi perbedaan antara Wireframe yang dibuat dengan Taskflow / Crazy 8' yang telah dibuat sebelumnya.
- Wireframe halaman Beranda
2. Wireframe Logistik via Akun
3. Wireframe Simple CRM
C. UI Styleguide
Sebelum ke proses pembuatan UI,tahap pertama adalah membuat sebuah library yang berisikan komponen-komponen desain yang akan dipakai dalam pembuatan UI. Hal ini diperlukan untuk memperoleh konsistensi dalam membuat sebuah desain UI. Karena komponen-komponen tersebut akan digunakan secara berulang kali.
Komponen Styleguide terdiri dari Logo, Warna, Typhograph, Input Box dan Button. Selain itu terdapat komponen utama yaitu Navigation Bar;
d. Tampilan User Interface
- Tampilan UI Beran da
Perubahan pertama yaitu pada desain ulang tampilan Beranda/Home. Hal ini bertujuan untuk menampilkan informasi yang lebih terpusat.
dari gambar menu Beranda/Home di atas, dapat dijelaskan beberapa komponen.
- Konten yang berisikan informasi keuangan. yakni Jumlah Keuntungan berdasarkan periode yang telah diatur, Total Pendapatan, Total Pengeluaran dan Balance Target.
- Icon menu Akun. Pada desain sebelumnya, Menu Akun berada pada Navigation Bar. Sekarang menu Akun berada di atas dan menampilkan poto profil.
- Desain ulang menu pencatatan seperti Catat Pesanan, Catat Transaksi, Catat Produk dan Rencana Produksi.
- Fitur Cust yang berisikan Simple CRM.
2. Tampilan Logistik
Fitur pengaturan Logistik bisa diakses melalui 2 proses.
- Akses melalui fitur Akun
- Akses pada saat melakukan proses tambah pesanan
Pada fitur Logistik ini pengguna akan memilih Kurir yang tersedia atau yang dekat dengan tempat usaha nya. Fitur ini menampilkan list kurir yang telah terintegrasi di backend developer. Setiap Kurir memiliki produk-produk yang ditawarkan, sehingga pengguna bisa leluasa memilih produk mana yang dibutuhkan.
3. Tampilan Simple CRM
Fitur Simple CRM ini dapat diakses melalui menu Cust pada Navigation Bar. dengan berbagai pertimbangan, alasan meletakkan fitur Cust di Navigation Bar sebagai pengganti fitur Akun, karena pada Navigation Bar semua terkait dengan proses bisnis, sehingga menu Akun dipindahkan ke bagian luar pada menu Beranda.
Pada Gambar 1 posisi kiri menampilkan antar muka awal dimana kondisi menu Cust belum memiliki data Pelanggan/Customer.
pada Gambar 1 posisi kanan menampikan antar muka saat kondisi menu Customer telah menambahkan beberapa Customer.
pada Gambar 2 menampilkan form pengisian data Customer dan detail dari Pelanggan /Customer. untuk lebih dipahami, akan dijelaskan pada prototype dibawah ini.
e. Prototyping
Prototype dibuat untuk menghubungkan fungsi-fungsi atau komponen-komponen sebagai interaksi untuk menggambarkan tahapan suatu proses fitur.
Penutup
Sebagai penutup, penulis mengetahui terdapat berbagai kekurangan. salah satunya belum adanya Usability Testing dan Iterasi Desain sebagai acuan bahwa UI/UX tersebut apakah sudah memenuhi kebutuhan utama pengguna. Karena satu dan lain hal Usability Testing belum terlaksana, dan semoga pada waktu kedepan penulis bisa melewati proses tersebut. Semoga Proses dari awal hingga Prototype bisa menggambarkan sebagian besar projek ini, dan bisa dibuat sebagai rekomendasi desain kepada tim Krealogi dalam pengembangannya dikemudian hari. Akhir kata saya ucapkan Mohon Maaf dan Terima Kasih.