UI/UX Case Study : Krealogi — Fitur Integrasi dengan Logistik
Disclaimer : Saya mengikuti UI/UX Bootcamp di Skilvul yang bekerjasama dengan DTS KOMINFO Indonesia dan Krealogi sebagai Challenge Partners. Saya tidak bekerja atau terikat oleh kontrak profesional dengan Krealogi.
Latar Belakang
Beberapa tahun belakangan ini banyak sekali bermunculan Usaha Kecil Mikro dan Menengah atau singkatnya UMKM. Jenis usaha ini biasanya dikelola hanya oleh satu atau beberapa orang saja. Karena sumber daya manusia yang mengelolanya terbatas, tidak sedikit UMKM yang belum tertib administrasinya. Kehadiran berbagai aplikasi pendukung administrasi UMKM sedikit banyak membantu mereka terutama dari segi kemudahan pencatatan pesanan dan stok yang mereka miliki. Krealogi adalah salah satu dari aplikasi penunjang operasional UMKM tersebut.
Krealogi merupakan suatu aplikasi yang dibangun untuk membantu pelaku UMKM dalam administrasi pencatatan mereka. Aplikasi Krealogi mengakomodir berbagai kebutuhan pencatatan pada fitur-fitur yang disediakan yaitu simple CRM, Cash Flow dan Integrasi dengan Logistik. Seiring berkembangnya jumlah pengguna Krealogi ingin meningkatkan tampilan antar-mukanya agar lebih user friendly khususnya pada fitur Integrasi dengan Logistik.
Objektif
- Mengembangkan tampilan antar-muka fitur Integrasi dengan Logistik agar lebih user friendly dan membantu pengguna dalam operasional usahanya.
Peran dalam Tim
Proyek ini saya kerjakan bersama Tim saya yang terdiri dari saya, Ferdian Adhika K., dan Laily Wahyuti. Selama mengerjakan kami bertanggung jawab untuk :
- Melaksanakan riset pengguna,
- Mengumpulkan ide-ide solusi,
- Membuat User Flow dan Wireframe,
- Merancang tampilan antar-muka pengguna,
- Membuat Prototype, dan
- Melakukan Usability Testing.
Design Process
Pengerjaan proyek ini kami menggunakan Design Thinking sebagai pendekatan desain prosesnya. Kami memilih Design Thinking karena tahapannya yang tidak linier sehingga dirasa lebih fleksibel terhadap kemunculan ide-ide baru sesuai dengan permasalahan yang ada.
1 — Empathize
Tahapan pertama dari Design Thinking adalah Empathize. Pada tahap ini kami mencari tahu hal-hal seputar UMKM, aplikasi Krealogi dan aplikasi sejenisnya. Kami mencoba melihat dari perspektif pengguna tentang bagaimana mereka menggunakan aplikasi Krealogi sebagai media pencatatan operasional usaha mereka.
2 — Define
Pada tahap Define ini pertama-tama kami menginventaris Pain Points / masalah apa saja yang kami temukan. Berikut ini adalah Pain Points yang kami temukan.
Dari Pain Points yang ada, selanjutnya kami mencari hal-hal yang dapat dilakukan untuk menyelesaikan masalah tersebut atau dapat disebut How-Might We. Dari How-Might We yang ada kami juga melakukan voting terhadap poin-poin yang sekiranya paling potensial atau utama untuk diangkat dalam proyek ini. Berikut ini adalah How-Might We yang telah kami susun.
3 — Ideate
Pada tahap Ideate ini dilakukan brainstorming untuk mencati ide penyelesaian atau solusi berdasarkan dari How-Might We yang sudah dibuat sebelumnya. Berikut adalah ide solusi yang kami dapatkan
Setelah mendapatkan ide-ide solusi, tahap selanjutnya adalah mengelompokkan ide tersebut berdasarkan topik besarnya ke dalam suatu Affinity Diagram.
Setelah Affinity Diagram terbentuk, kami perlu menyortir kembali topik-topik besar yang ada berdasarkan User Value dan Effort menjadi 4 (empat) kategori prioritas. Proses ini disebut dengan Prioritization Idea. Berikut ini hasil Prioritization Idea kami.
Seperti yang dapat dilihat pada bagan Prioritization Idea di atas dapat dilihat ada 3 (tiga) ide solusi yang kami ambil untuk fokus kami rancang tampilan antar-mukanya, yaitu :
- Menyediakan pilihan ekspedisi yang tersedia pada saat input data pesanan;
- Menampilkan akumulasi biaya pengiriman;
- Fitur alur paket;
- Menyediakan estimasi waktu.
Dari ide-ide yang masuk ke kategori Yes, Do It Now kami membuat gambaran kasar atau biasa disebut dengan Wireframe menggunakan metode Crazy-8’s. Berikut ini adalah penggabungan Crazy-8’s dari kelompok kami.
4 — Prototyping
Tahapan Prototyping ini kami awali dengan membuat user-flow dari fitur yang akan kami buat tampilan antar-mukanya.
Dari ketiga user-flow di atas, kami merancang wireframe-nya terlebih dahulu seperti berikut ini.
Setelah pembuatan wireframe terselesaikan, kami mulai membuat UI Styleguide berdasarkan wireframe yang ada. Pembuatan UI styleguide ini mencakum penentuan Color Palette, Typography, Tombol, Text Field, Navigasi Menu, Header Halaman, dan Simbol.
Tahap selanjutnya, kami mulai merangcang tampilan antar-muka dengan mengacu pada wireframe yang ada. Berikut ini adalah hasil dari rancangan desain tampilan antar-muka yang kelompok kami buat.
UI Fitur Cek Ongkos Kirim
UI Pilih Ekspedisi pada Fitur Catat Pesanan
UI Fitur Track Pesanan
Dari tampilan antar-muka di atas kami membuat Prototype-nya sesuai alur yang telah ditentukan.
5 — Testing
Pada fase testing ini kami melakukan dengan cara in-depth interview kepada seorang pelaku UMKM sesuai dengan kelompok pengguna sasaran aplikasi Krealogi. Narasumber kami adalah Ibu Sulis sebagai seorang pelaku usaha Keripik Tempe yang berdomisili di daerah Jawa Timur.
Kami memperkenalkan beliau dengan aplikasi Krealogi dan kegunaan dari fitur yang antar-mukanya kami buat pada proyek ini. Setelah mencoba prototype yang kami berikan, berikut ini respon yang kami dapatkan dari beliau untuk tiap-tiap Task-nya
Kesimpulan & Penutup
Untuk menjawab permasalahan yang ada, melalui proyek ini kami mencoba menawarkan 3 (tiga) desain tampilan antar-muka Fitur Integrasi dengan Logistik. Ketiga tampilan tersebut kami rancang sedemikian rupa agar lebih dimengerti alurnya oleh para pengguna.
Kami merekomendasikan rancang desain tampilan antar-muka ini untuk pengembangan aplikasi Krealogi kedepannya. Bila ada saran dan masukan kami dengan senang hati menampungnya.
Terimakasih.