UI/UX Case Study Krealogi — Integrasi Dengan Logistik(Ekspedisi)
Disclaimer : Proyek ini merupakan bagian dari Program Pelatihan UI/UX yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia (Kemendikbud RI) dengan Skilvul dan Krealogi sebagai Challenge Partners. Pada kasus ini kami tidak bekerja di bawah kontrak profesional yang terikat dengan Krealogi.
INTODUCTION
Hi! Perkenalkan nama saya Yohanes Tennary Rinto Pradhana atau palinggil saja Rinto, saya merupakan mahasiswa Informatika Universitas Kristen Duta Wacana Yogyakarta. Saat ini saya sedang mengikuti program magang yang diselenggarakan oleh Kampus Merdeka yang berkolaborasi dengan Skilvul. Program magang yang saya ikuti ini berjudul “SKILVUL VIRTUAL INTERNSHIP: UI/UX CHALLENGE” dimana kami diberikan pengetahuan seputar dunia UI/UX Designer, materi penunjang karir dalam dunia UI/UX, dan pada akhir kegiatan, kami akan diberikan tugas akhir berupa real project oleh Challenge Partner dari Skilvul.
OVERVIEW
Pada kesempatan kali ini, saya beserta kedua anggota tim lainnya yaitu Fransiskus Deli dan RUSEL ALEXANDER sedang mengerjakan project UI/UX Case Study pada aplikasi Krealogi. Kerealogi sendiri merupakan platform digital supply chain untuk membatu para pelaku Usaha Mikro Kecil dan Menengah (UMKM) untuk lebih mudah memanajemen kegiatan operasional usahanya.
Pada saat ini aplikasi Krealogi sudah tersedia berbagai fitur penunjang kegiatan UMKM seperti pencatatan pesanan dan persediaan, perencanaan dan alokasi produksi, serta pencatatan pemasukan/pengeluaran serta laporan keuangan. Meskipun begitu, masih ada beberapa fitur yang masih harus dikembangkan kembali. Fitur-fitur tersebut menjadi challenge dari kegiatan magang kami ini, dan berikut ini adalah fitur-fiturnya :
- Fitur Customer Relationship Management (CRM) → Belum didesain dan belum tersedia
- Fitur Cash Flow dan Performa → Belum didesain dan belum tersedia
- Fitur Integrasi dengan Logistik → Belum didesain dan belum tersedia
Dari ketiga fitur diatas, saya bersama kelompok memilih untuk mengembangkan desain untuk fitur integrasi dengan logistik. Target utama yang harus kami capai dari fitur ini adalah pengembangan dalam pengaksesan logistik dalam hal pengiriman, alternatif pilihan dalam pengiriman, dan pengkalkulasian biaya.
Oleh karena itu, dengan adanya fitur integrasi dengan logistik pada aplikasi Krealogi ini diharapkan dapat memudahkan pengguna dalam monitoring terhadap pesanan dan pengiriman usahanya.
Research Objective
- Mencari tahu kebiasaan, kebutuhan serta kesulitan pengguna dalam melakukan pencatatan kegiatan produksi lewat aplikasi Krealogi.
- Mencari tahu tingkat kegunaan, kemudahan dan kepuasan dari solusi ide yang ditawarkan pada alur proses pendaftaran dan login, review (gudang), ringkasan(detail pesanan) serta status pembayaran sudah selesai dan pengiriman sudah diterima.
- Memudahkan pengguna untuk melakukan pengiriman barang produksi melalui pilihan jasa kirim (ekspedisi) yang sesuai dengan kebutuhan.
Respondent Criteria
- Berusia 30–55 tahun
- Memiliki atau bekerja pada Usaha Mikro Kecil dan Menengah (UMKM)
- Menggunakan atau pernah menggunakan jasa kirim (ekspedisi) untuk melakukan pengiriman barang produksi
- Berdomisili di seluruh wilayah Indonesia
- Memiliki kemampuan Bahasa Indonesia sebagai native language
- Memiliki tingkat pemahaman teknologi yang cukup
- Dapat mengoperasikan komputer pribadi
OUR TEAM
Pada UI/UX Case Study Krealogi — Integration with Logistic (Expedition) ini saya berkolaborasi dengan beberapa anggota tim saya yaitu Fransiskus Deli dan RUSEL ALEXANDER. Didalam kelompok ini, saya bertanggung jawab atas beberapa hal berikut :
- Brainstorming pembuatan solusi ide berdasarkan fitur yang ingin dikembangkan
- Proses selama melakukan design thinking
- Membuat user flow dan wireframe dengan menggunakan ide yang sesuai dengan brainstorming bersama anggota kelompok
- Membuat UI Design
- Membuat Prototype
- Melakukan Usability Testing kepada responden (sebagai Moderator)
DESIGN PROCESS
UI/UX Case Study Krealogi Integrasi Pada Logistik (Ekspedisi) yang saya lakukan ini menggunakan salah satu metode design proccess yaitu Design Thinking. Metode Design Thinking ini berfokus pada pengguna yang dimana sebuah permasalahan yang ditemukan akan dipecahkan bersama dengan pengguna.
Dalam Metode Design Thinking ini terbagi oleh 5 tahapan yang harus dilakukan oleh peneliti, yaitu :
1. Empathize
Pada Empathize ini merupakan tahap pertama yang dimana peneliti mencari tahu keinginan dan kebutuhan dari pengguna secara langsung. Salah satu cara untuk mengetahui keinginan dan kebutuhan dari pengguna adalah melakukan User Research.
User Research ini sangat berguna dalam mengumpulkan informasi atau insight dari pengguna yang dapat mempermudah saya sebagai peneliti untuk memahami masalah atau kendala apa saja yang dialami oleh pengguna serta mengetahui tanggapan dari sudut pandang pengguna tentang suatu aplikasi. User Research pada penelitian ini menggunakan metode kualitatif In-depth Interview yaitu wawancara yang dilakukan secara langsung dan mendalam terhadap pengguna. Metode In-depth Interview ini dipilih karena dapat memberikan informasi atau insight yang lebih baik ketimbang metode kuantitatif yang berbentuk penilaian/angka.
In-depth Interview yang saya lakukan dengan anggota tim, kami sesuaikan dengan user criteria yang sebelumnya sudah ditentukan agar relevan dengan apa yang kami kerjakan.
2. Define
Pada tahap Define ini peneliti akan melakukan analisa kembali terhadap informasi atau insight yang telah didapatkan pada saat tahap empathize. Selain menganalisa, peneliti juga mulai merangkai dan mendefinisikan ide-ide solusi berdasarkan permasalahan yang ada.
Saya dan tim melakukan hal yang sama pada tahap ini, mencoba untuk merangkai dan mendefinisikan beberapa insight kedalam Pain Points. Pain Points ini merupakan permasalahan yang ditemukan pada saat melakukan pengujian sebuah aplikasi.
Dibawah ini merupakan beberapa Pain Points yang sudah saya dengan anggota tim definisikan:
Setelah Pain Points berhasil didefinisikan, selanjutnya saya dan tim membuat How-Might We yang merupakan sebuah cara untuk menyelesaikan permasalahan pada Pain Points. How-Might We akan mempermudah peneliti untuk menemukan ide solusi atas permasalahan yang sebelumnya telah ditemukan.
3. Ideate
Tahap yang ketiga adalah Ideate, peneliti akan mencari dan memikirkan ide solusi sebanyak mungkin yang diharapkan mampu untuk menyelesaikan permasalahan pada tahap sebelumnya.
Pada tahap ini, saya bersama tim menuangkan semua ide solusi untuk memecahakan permasalahan dan kemudian melakukan voting berdasarkan user value (pentingnya sebuah fitur bagi pengguna) dan effort (usaha atau tenaga yang dikelurkan dalam pengembangan sebuah fitur).
Dibawah ini merupakan beberapa ide solusi yang telah saya dengan anggota tim hasilkan :
Berdasarkan hasil voting, terdapat beberapa ide solusi yang saya dan tim sepakati untuk dikembangkan terlebih dahulu, yaitu :
- Fitur pemilihan pengiriman (ekspedisi) terpilih menjadi fitur yang paling diutamakan dan penting untuk dikembangkan.
- Fitur kalkulasi biaya, fitur notifikasi pengiriman, fitur input resi pengiriman, dan fitur history transaksi yang nantinya akan dikembangkan setelah fitur utama selesai dibuat.
- Fitur Live Map Tracking pada pengiriman instan dan fitur notifikasi perubahan status pengiriman akan dikembangkan paling terakhir setelah pengembangan pada fitur-fitur utama selesai dilakukan.
Ide solusi tadi kemudian dikelompokkan menjadi beberapa bagian berdasarkan prioritas dan akan dilanjutkan ke tahap pembuatan Crazy 8’s oleh tiap anggota tim. Crazy 8’s adalah tahapan dimana peneliti membuat desain kasar atau sketsa tampilan aplikasi dalam waktu 8 menit. Dengan adanya Crazy 8’s ini, dapat mempermudah peneliti untuk membuat gambaran dan perkiraan desain.
Dibawah ini merupakan hasil dari Crazy 8’s yang dilakukan oleh tim saya :
Dari hasil tahapan sebelumnya, kami pun membuat terlebih dahulu User Flow untuk memberi gambaran alur pengguna dalam menggunakan suatu aplikasi secara detail. Pembuatan User Flow ini nantinya akan mempermudah proses desain karena terbantu dengan adanya gambaran alur aplikasi.
Dibawah ini adalah User Flow yang telah saya dengan anggota tim buat :
Setelah selesai dalam pembuatan User Flow, selanjutnya saya bersama anggota tim lainnya membuat Wireframe yang merupakan gambaran visual dari User Flow yang sebelumnya telah dibuat. Gambaran visual ini berfokus pada desain dan struktur tiap-tiap halaman aplikasi yang telah ditentukan.
Dibawah ini merupakan Wireframe yang telah saya buat dengan anggota tim berdasarkan User Flow :
4. Prototyping
Tahap Prototyping ini merupakan pemembuatan desain tampilan hasil dari User Flow & Wireframe yang kemudian akan disempurnakan menjadi prototype aplikasi agar dapat digunakan pada saat tahapan pengujian. Hasil protoype ini masih dapat terus dikembangan setelah pengujian bila memang terdapat kritik dan saran oleh pengguna.
Pada tahap ini saya beserta anggota tim membuat UI Design dan diawali dengan pembuatan Design System atau bagian-bagian dan komponen (style) dari desain yang akan dibuat. Maka dari itu, berikut ini bagian-bagian dan komponen desain yang telah tim kami buat :
Setelah semua design system selesai dibuat, kemudian saya bersama tim membuat hasil akhir desain aplikasi berupa High Fidelity Design yang berfokus pada fitur yang telah kami pilih dan teliti di tahap-tahap sebelumnya yaitu fitur integrasi dengan logistik (ekspedisi).
Berikut ini merupakan hasil dari keseluruhan UI Design yang telah saya dan tim buat :
Dari keseluruhan UI Design diatas, kami pun selanjutnya membagi-bagi tiap halaman berdasarkan flow yang sekiranya membantu kami pada saat akan melakukan pengujian.
Berikut ini merupakan breakdown dari tiap-tiap flow tersebut :
- Pendaftaran dan Login
Bagian yang pertama adalah membuat tampilan mengenai flow pendaftaran hingga login kedalam aplikasi Krealogi. Kami membuat agar pengguna dapat memilih bagaimana untuk mendaftar dan masuk kedalam aplikasi, dari mulai menggunakan nomor handphone, alamat email, dan masuk menggunakan Google Account. Selain itu kami juga membuat fitur dimana bila pengguna lupa kata sandinya, penguuna tersebut akan dimudahkan untuk mengatur ulang kata sandi apabila sudah tidak ingat dengan kata sandi sebelumnya.
- Penambahan Stok Produk Jadi
Bagian kedua ada tampilan mengenai flow penambahan stok produk jadi yang berletak pada halaman gudang. Penambahan stok produk jadi dapat dilakukan hanya pada menu gudang, hal tersebut dibuat agar kegunaan dari fitur dapat lebih konsisten dan efisien serta mempermudah pengguna dalam mengatur produk jadi.
- Pencatatan Pesanan Baru
Bagian ketiga ini merupakan pencatatan pesanan baru yang dapat ditampilkan melalui halaman beranda dengan menekan tombol “Catat Pesanan”. Dalam pencatatan pesanan baru ini terdapat 3 tahapan yaitu pesanan (1), produk (2), dan ringkasan (3). Pada tahap pesanan (1), pengguna mengisi data secara lengkap informasi dari pemesan produk. Tahap produk (2), pengguna memilih barang apa yang dipesan oleh pemesan serta memilih jenis ekspedisi serta kurir yang akan digunakan dalam pengiriman. Tahap terakhir ringkasan (3), pengguna akan diberi tampilan keseluruan input dari tahap pesanan (1) dan produk (2) agar dapat meneliti kembali apa yang telah dibuat agar tidak terjadi kesalahan dalam pesanan dan pengiriman.
- Detail Pesanan Masuk
Pada bagian yang terakhir, terlihat bahwa status pengiriman serta status pembayaran dapat berganti apabila pengguna melakukan konfirmasi pada detail pesanan yang dipilih. Selain itu juga terdapat fitur input resi baik secara manual, scan barcode resi maupun scan QR code resi yang berguna untuk memantau proses pengiriman produk tersebut.
Setelah semua UI Design selesai dibuat, saya bersama dengan tim membuat prototype dari desain tersebut. Prototype ini berguna sebagai gambaran interaksi dan navigasi yang ada pada desain aplikasi.
Berikut ini prototype yang telah kami buat :
Berikut ini link Prototype bila tampilan diatas error atau tidak sesuai
5. Testing
Tahap yang terakhir adalah melakukan usability testing kepada pengguna. Testing ini dilakukan dengan cara pengujian terhadap pengguna tentang desain aplikasi yang sedang dikembangkan. Tahapan ini berguna untuk mendapatkan feedback dari pengguna tentang tanggapannya setelah mencoba menggunakan prototype aplikasi.
Pengujian ini saya dan tim akan melakukannya secara daring melewati Google Meet kepada pengguna tentang desain aplikasi yang telah dibuat dan dikembangkan berdasarkan permasalahan yang sebelumnya muncul. Dalam pengujian ini kami juga memberikan beberapa Task Flow kepada pengguna yang harus diselesaikan.
Berikut ini Task Flow yang telah kami buat :
Task 1 — Pendaftaran dan Login
Pengguna diminta untuk mendaftar sebagai pengguna baru dan melakukan login kedalam aplikasi Krealogi (Task akan berhenti pada saat pengguna berhasil sampai di halaman Beranda).
Task 2 — Penambahan Stok Produk Jadi
Pengguna diminta untuk menambahkan stok dari produk jadi yang terdapat pada halaman gudang (Task akan berhenti pada saat pengguna berhasil sampai di halaman Review (Gudang)).
Task 3 — Pencatatan Pesanan Baru
Pengguna diminta untuk membuatan catatan pesanan baru melewati halaman beranda (Task akan berhenti sast pengguna berhasil sampai di halaman Ringkasan (Detail Pesanan)).
Task 4 — Status Pembayaran dan Pengiriman
Pengguna diminta untuk melihat detail dari suatu pesanan dalam halaman pesanan masuk dan menyelesaikan prosesnya (Task akan berhenti saat pengguna berhasil membuat status pesanan menjadi pembayaran “sudah dibayar” dan pengiriman “sudah dikirim”).
Dibawah ini merupakan foto dokumentasi disaat kami melakukan Usability Testing bersama pengguna :
Untuk mengukur tingkat usabilitas dari desain aplikasi ini, kami menggunakan Single Ease Question (SEQ). SEQ ini berguna untuk mengukur presepsi pengguna pada saat menggunakan aplikasi yang diujikan berupa kuisioner pertanyaan dengan pilihan skala jawaban dari 1 sampai 7 yang bertime post-task. Pertanyaan berupa skala likert 1 sampai 7 akan diberikan setelah pengguna menyelesaikan tiap-tiapTask Flow.
Dibawah ini adalah hasil dari Usability Testing dengan menggunakan SEQ oleh tim kami bersama pengguna :
Hasil diatas dapat menyimpulkan bahwa desain aplikasi yang telah dibuat sudah memenuhi standar SEQ yaitu 5,5.
Meski sudah memenuhi standar, pada desain aplikasi Krealogi kami masih terdapat beberapa kekurang, antara lain :
- Pengguna sempat kebingungan terhadap tombol catat pesanan yang ada pada halaman pesanan masuk yang menyebabkan miss task pada awal percobaan
- Pengguna tidak mengetahui card pada pesanan masuk di bagian detail pesanannya dapat diklik
Kami pun melakukan iterasi desain setelah mendapati adanya kekurang tersebut. Iterasi desain ini kami lakukan untuk meperbaiki desain agar kedepannya dapat memberikan kemudahan bagi pengguna.
Dibawah ini merupakan iterasi desain yang telah saya lakukan dengan anggota tim :
Summary
Kesimpulan dari kegiatan UI/UX Case Study ini adalah meskipun desain yang dibuat memang sudah mendapatkan tanggapan dan skor yang cukup baik, namun masih terdapat berbagai kekurangan yang perlu diperbaiki dan dikembangkan. Saya bersama tim tetap harus melakukan perbaikan dan evaluasi terus-menerus agar hasil yang didapatkan sesuai dan memebuhi kebutuhan pengguna dan kegunaan aplikasi.
Personal Reflection
Refleksi yang dapat sampaikan adalah dalam perancangan sebuah desain aplikasi diperlukan persiapan yang benar-benar matang agar pada saat pengerjaan UI/UX Case Study seperti ini dapat siap karena permasalahan yang diberikan juga nyata. Kerjasama dan koordinasi antar anggota kelompok yang baik dan kompak juga sangat diperlukan agar hasil akhirnya memuaskan. Selain itu saya juga merasa berunung dan bangga karena dapat berpartisipasi serta mendapatkan pengetahuan dan pengalaman baru di bidang UI/UX.
Thanks To
- Erricson Hardiansyah dan Hafidz Noor Fauzi sebagai mentor yang telah membimbing dan mendampingi dalam penyelasian UI/UX Case Study ini.
- Fransiskus Deli dan RUSEL ALEXANDER sebagai tim yang sudah mau bekerjasama dengan kompak dalam menyelesaikan UI/UX Case Study ini.
- Pengguna (responden) yaitu Mbak Anita yang sudah mau terlibat dalam Usability testing UI/UX Case Study ini.
