UX Case Study — Marketplace & Logistics Integration (Krealogi: UI & UX Challenge)
Disclaimer — Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul.com dan Krealogi oleh Du Anyam sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Krealogi.
Perkenalan
Perkenalkan saya Mohamad Sukarno Umar. Story pertama ini saya buat untuk menyelesaikan salah satu assignment dari course di Skilvul. Saya baru saja menyelesaikan self-learning program magang ini sekaligus membuat project ini dengan teman-teman dari Tim 10 yang dibentuk oleh Skilvul yaitu Bambang Murwant dan Novredo Alifian.
Latar Belakang
Krealogi by Du Anyam merupakan aplikasi yang dibangun untuk membantu pencatatan kegiatan operasional dan membuat perencanaan strategis dari UMKM. Namun, permasalahan Krealogi saat ini adalah belum memiliki desain aplikasi yang user friendly untuk target pengguna mereka serta belum adanya fitur integrasi dengan marketplace dan logistik. Oleh karena itu, saya dan tim membuat desain tampilan aplikasi yang user friendly dari fitur yang belum ada tersebut serta improvisasi beberapa halaman aplikasi yang sudah ada.
Objektif
Tujuan dari UI/UX case study ini yaitu untuk mendesain tampilan aplikasi Krealogi dengan batasan hanya mendesain halaman integrasi marketplace dan logistik (fitur yang belum ada) serta beberapa redesign dari tampilan yang ada.
Peran Dalam Tim
Dalam melakukan UI/UX Design untuk Challenge Krealogi ini, saya berkolaborasi dengan Bambang Murwant dan Novredo Alifian yang memiliki peran yang sama dalam pengerjaan design process dengan metode Design Thinking dari tahap Empathize, Define, dan Ideate. Untuk Prototyping dilakukan pembagian tugas dari task yang ada dalam Userflow yang dibuat.
Design Process
Untuk menghasilkan UI/UX Design yang baik, kami menggunakan metode Design Thinking yang sering digunakan dalam pengembangan desain dari produk. Terdapat 5 tahap Design Thinking yaitu:
1 — Empathize
Dalam kasus yang kami hadapi, proses Empathize tidak dilakukan karena Challenge yang dipilih sudah memiliki gambaran terkait apa yang akan kami kerjakan dalam mendesain UI/UX
2 — Define
Selanjutnya ada tahap define, yaitu mendefinisikan apa saja permasalahan yang dihadapi user terkait pencatatan dan perencanaan dari UMKM serta dikelompokkan menjadi masalah utama. Proses yang dilakukan dengan membuat Pain Points, Affinity Diagram, dan How Might We pada file Figjam dari Figma.
Affinity Diagam ini merupakan pengelompokan dari Pain Points yang telah dibuat di atas. Dalam hal ini terdapat 3 bagian seperti pada gambar di bawah.
How Might We merupakan pertanyaan yang timbul dari masing-masing poin Affinity Diagram yang dibuat agar menjadi sebuah opportunity.
3 — Ideate
Tujuan dari Ideate adalah untuk mengeksplorasi ruang solusi yang luas — baik ide dalam jumlah besar maupun ide yang beragam. Dari gudang ide yang luas ini kita dapat membuat prototipe untuk diuji dengan user.
Tahap ini memiliki beberapa bagian yang akan dilakukan, yaitu Solution Idea, Prioritization Idea, dan Crazy 8’s.
Berdasarkan How Might We yang didapat, muncullah ide solusiyang digambarkan dalam Solution Idea di bawah ini.
Setelah ide solusi didapat, lalu dilakukan pengelompokan menggunakan Prioritization Idea untuk menentukan Minimum Viable Product atau MVP sehingga dapat memutuskan ide solusi yang difokuskan untuk dikerjakan terlebih dahulu. Prioritization Idea dibagi menjadi 4 bagian seperti pada gambar di bawah ini.
Dalam hal ini didapat ide utama yang akan dikerjakan terlebih dahulu berdasarkan value terbaik dengan Effort yang sedikit.
Langkah selanjutnya adalah membuat Crazy 8’s yang dapat dibuat dengan kertas A4 dan dibagi/dilipat menjadi 8 bagian. Namun, kami membuatnya menggunakan Figma. Seperti namanya, Crazy 8’s dibuat hanya dalam 8 menit, tiap halamannya selama 1 menit, sehingga dapat menghasilkan tampilan atau wireframe maksimal sebanyak 8 tampilan. Jangan takut salah saat pengerjaan tahap ini, buatlah seminimal mungkin namun merepresentasikan apa yang ingin dibuat nantinya, karena nantinya hasil Crazy 8’s dapat disempurnakan menjadi sebuah tampilan desain yang sebenarnya.
4 — Prototype
Tahap ini merupakan tahap yang penting, karena hasil dari proses empathize, define, dan ideate, dituangkan semua dalam tahap ini menjadi sebuah tampilan aplikasi yang dapat disimulasikan. Untuk membuat prototype, sebelumnya kami membuat style guide yang akan digunakan sehingga desain yang dibuat tetap konsisten. Style giude ini berisi color style, text style, component. Setelah tampilan dibuat berdasarkan proses design thinking sebelumnya, desain ini disimulasikan menjadi prototype pada figma seperti di bawah ini.
Link Prototype figma:
5 — Testing
Tahap ini dilakukan menggunakan metode In-Depth Interview dan Usability Testing terhadap responden yang sesuai dengan kriteria dari project ini.
Biodata Responden
- Nama : Bavian Adi
- Umur : 24 tahun
- Pekerjaan : Wirausaha Fashion (Berjualan Baju)
- Domisili : Malang
Task 1 (Integrasi marketplace) Single Ease Question : 6.2 (Alasan 2 marketplace sudah lebih dari cukup untuk diintegrasikan)
Task 2 (Integrasi Logistik) Single Ease Question : 6 (Alasan sempa kebingungan dimana letak integrasi logistiknya)
Task 3 (Catat Pesanan) Single Ease Question : 6.625(Alasannya opsi 1 dan 2 bisa saling melengkapi dan sama sama ada kelebihan dan kekurangan)
Task 4 (Gudang) Single Ease Question : 6 (Alasan karena bingung sedikit untuk nambah stok tidak ada field jumlah stoknya)
Penilaian keseluruhan dari responden:
Kesimpulan keseluruhan menurut saya, fitur utamanya yang dibutuhin sudah dapet, saran saya pencatatan barang keluar masuk bisa liat historynya. Saya kepikiran letak statistik penjualan. Lebih enak lagi kalau ada tutorial awal penggunaan aplikasi jadi bagi yang awam sekalipun akan terbantu. Tampilan aplikasi lebih bisa disesuaikan ukurannya agar tidak bingung membedakan bagian bagian pada halaman tersebut
Kesimpulan
Berdasarkan testing yang dilakukan, UI Desain yang kami buat sudah cukup bisa diterima oleh user pada saat test. Tentu masih banyak yang perlu kami benahi, entah itu dari ukuran font, atau tata letak beberapa button. Tetapi untuk keseluruhan user sudah merasa nyaman dengan UI Desain yang kami buat.
Rekomendasi Selanjutnya
Apabila terdapat rekomendasi atau pertanyaan maupun saran terkait project ini, Kalian bisa menulis komentar di story ini. Kami harap komentar dan feedback para pembaca dapat memberikan insight lebih kepada kami agar dapat memperbaiki dan mengembangkan project ini maupun project lainnya kedepannya.
Terima Kasih untuk menyempatkan hadir dan membaca story ini, Salam Kenal dan Salam Desain!