UI/UX Case Study — Krealogi Fitur Integrasi Marketplace dan Logistik
Disclaimer — Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul.com dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Krealogi.
Latar Belakang
DU Anyam menciptakan Krealogi sebagai platform atau wadah dari komunitas yang mendukung UMKM, sangat paham mengenai kebutuhan yang diinginkan oleh penggunanya. Krealogi hadir untuk membantu kegiatan operasional usaha dalam manajemen pesanan, statistik, keuangan sampai pengiriman. Sebagai digital supply Krealogi terus berimproviasi dalam berbagai fitur. Pada kali ini fitur yang kami improvisasi adalah Integrasi dengan logistik dan marketplace.
Apa yang dimaksud dari integrasi dengan marketplace dan logistik? berpikir jauh ke depan, bahwasannya dalam aplikasi Krealogi memungkinkan seller untuk memonitoring dan mencatat pesanan masuk dari akun marketplace yang terhubung dengan aplikasi Krealogi. Pada fitur integrasi logistik bertujuan untuk menentukan jasa ekspedisi mana yang akan digunakan seller pengiriman, tentu tidak semua ekspedisi, hanya jasa ekspedisi yang sudah bekerjasama dengan Krealogi yang nantinya muncul pada pengaturan pengiriman untuk diaktifkan.
Objektif
Fokus utama dari fitur integrasi marketplace dan logistik adalah sebagai berikut:
- Memudahkan pengguna mencatat pesanan dari marketplace dengan mudah
- Dapat menentukan jasa ekspedisi yang akan digunakan untuk pengiriman
- Dapat memonitoring pesanan masuk dari marketplace
Roles
Pada kasus ini saya sebagai berkolaborasi dengan 2 anggota tim, kami memiliki roles yang sama sebagai UI/UX Designer:
— Bambang Murwantoro (saya)
— Muhamad Sukarno Umar
— Novfredo Alfian
Deliver: Kami mengerjakan design process secara berkelompok atau bersama-sama, kecuali pada tahap pembuatan prototyping dibagi pengerjaannya per-task.
Design Process
Sebuah fase yang sangat penting, kami memilih menggunakan pendekatan design thinking dan menggunakan konsep divergent thinking untuk mengumpulkan ide sebanyak-banyaknya, kemudian melakukan affinity mapping untuk menentukan prioritas ide yang akan dibuat ke dalam UI mockup.
— Empathize
Di tahap ini kami mengalami beberapa kendala, yaitu waktu pengerjaan yang terbatas sehingga tidak mampu menghadirkan responden. Sebagai gantinya kami melakukan brainstorming untuk mengumpulkan permasalahan dari fitur yang akan dibuat.
— Define
Tahap kedua, kami mengumpulkan insight berupa poin permasalahan untuk menentukan apa yang menjadi kebutuhan pengguna dan dikelompokkan kedalam beberapa tahap seperti gambar dibawah ini.
Goals: Di fase ini kami mendapat tiga ini dari pokok permasalahan user, yaitu:
— Bagaimana cara memilih jasa ekspedisi yang paling aman dan terpercaya?
— Bagaimana cara user mengetahui tracking realtime paket dengan jasa ekpedisi?
— Bagaimana cara memilih marketplace untuk menjual?
— Ideate
Setelah mengetahui ini dari permasalah pada fase define. Di tahap ini, pada stage solution idea kami mengumpulkan ide/solusi sebanyak-banyaknya untuk memecahkan permasalahan dari pain points. Ide yang akan dibuat di kelompokkan kembali berdasarkan prioritization idea dengan mengukur tingakt kebutuhan user, efektifitas waktu, kemudahan dan kesulitan pengerjaannya.
Goals: Ide yang terkumpul, kami mapping ulang pada stage prioritization idea “Yes, do it now” itulah ide yang akan kami implementasikan sekarang. sebagai berikut:
— Memilih jasa ekspedisi yang sudah mempunyai brand yang kuat atau sudah terkenal
— Mengaktifkan fitur integrasi marketplace dan fungsinya
User Flow
Di fase ini kami membuat diagram alur sebagai kerangka untuk membuat sebuah design agar alurnya jelas dan user friendly. Kami membagi menjadi empat task per-flow, seperti berikut:
— Task integrasi marketplace
Goals: User dapat mengaktifkan fitur integrasi marketplace, dengan ini seller akan mendapat notifikasi pesanan dari marketplace
— Task integrasi logistik
Goals: User dapat mengatur jasa ekspedisi mana yang akan digunaka untuk pengiriman, kedepannya bisa memudahkan proses retur.
— Task catat pesanan
Goals: User dapat merasakan manfaat dari fitur integrasi marketplace dan logistik untuk mempermudah proses pencatatan
— Task Gudang
Goals: User bisa menambahkan, menghapus dan mengedit produk dengan mudah.
Crazy 8's
Sesuai namanya fase ini benar-benar crazy sih menurut saya pribadi, dengan waktu 8 menit kita membuat lo-fi 8 page. Untuk pertama kali rasa ngasal aja sih.
Biasanya sih crazy 8’s dibuat pada kertas, tapi kami coba lakukan pada figma. Kami masing-masing membuat crazy 8’s dan melakukan voting frame mana yang sekiranya cocok untuk dibuat mockupnya.
Wireframe
Membuat wireframe kurang lebih sama dengan crazy 8’s masih berupa low fidelity, proses ini kami lakukan untuk memperhalus dan memperjelas agar bisa menjadi acuan membuat mockup. Walaupun pada realita saat mendesain hi-fi, kami tidak 100% berpatokan pada wireframe, yang penting alurnya dapat seperti user flow.
Mockup UI
Fase ini adalah skema yang paling kompleks, pertama mengimplentasikan user flow ke dalam bentuk UI yang sudah memiliki warna dan konteks sesungguhnya secara jelas dengan menggunakan design system yang sudah dibuat agar desain terlihat konsiten.
Hal pertama yang kami lakukan membuat design system berupa style guide dari component atomic, moleculs dan organisms yang nanti digunakan untuk memudahkan dan mempercepat proses desain. Seperti pemilihan warna, teks style, iconography, logo, buttons dll.
- Style Guide
Di fase ini kami menentukan pemilihan warna, teks style, iconography, logo, buttons, card dan lainnya sesuai elemen yang dibutuhan pada saat mendesain.
- Design
Masuk ke tahap implentasi desain, beginilah desain yang kami buat. Akan saya jelaskan selayang pandang saja.
— Fitur Integrasi Marketplace
Pada gambar disamping seller yang sudah menghubungkan dengan button toogle, kemudian login ke akun marketplace. lalu akan muncul button di homepage, manfaatnya seller bisa memonitoring pesanan yang masuk dari marketplace.
— Fitur Integrasi Logistik
Di samping ini adalah fitur untuk mengaktifkan logistik nantinya akan muncul pada alur catat pesanan untuk pembelian diluar marketplace/offline. Dengan fitur tersebut pada detail pesanan seller dapat mengetahui berapa tarif kirim sesuai jenis paketnya.
Prototype
Setelah mendesain mockup UI, dilanjut dengan connecting the dots antar elemen sesuai dengan user flow-nya. Fungsinya UI desain yang sudah dibuat terlihat seperi real yang sudah ternavigasi dengan baik, nantinya akan digunakan untuk fase testing.
link protoype dapat di akses di sini: Prototype
Test
Pada tahap inilah prototype diuji kepada pengguna, apakah desain yang kita buat sudah sesuai dengan kebutuhan pengguna atau belum?
Selanjutnya kami mempersiapkan stimulus reasearch, menentukan kriteria responden dan menyusun skenario agar saat in depth interview menjadi terarah. Testing kali ini kami lakukan secara virtual, namun tidak membatasi untuk mendapat insight yang bagus.
Responden:
Nama Responden : Bavian Adi
Umur : 24th
Pekerjaan : Wirausaha Fashion (Berjualan Baju)
Domisili : Malang, Jawa Timur
Tahap testing ini dilakukan dengan metode SEQ (Single Ease Question} menanyakan tingkat fleksibilitas penggunaan kepada responden dengan skala likert 1- 7. berikut adalah hasil SEQ pertasknya:
Feedback 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
Desain yang kami buat sudah cukup bisa diterima oleh user pada saat test. Tentu masih banyak yang perlu saya perbaiki beserta tim, baik itu dari typography, layout dan beberapa button serta konteks yang masih belum jelas. Tetapi untuk keseluruhan user sudah merasa nyaman dengan UI Desain yang kami buat.
Boleh mampir juga liat-liat showcase desainku di Dribble/Bamurwant.
