UI/UX Case Study Krealogi — Integration With Logistic (Expedition)

12 min readNov 27, 2021

DISCLAIMER : Proyek yang dibuat merupakan bagian dari program Skilvul Virtual Internship : UIUX Challenge dan KREALOGI sebagai Challenge Partner. Tidak ada kontrak profesional yang terikat oleh KREALOGI.

Introduction

Perkenalkan, nama saya Fransiskus Deli Sunarso, biasa dipanggil Deli. Saya merupakan mahasiswa di Universitas Kristen Duta Wacana, Yogyakarta. Saat ini saya sedang mengikuti kegiatan magang “SKILVUL VIRTUAL INTERNSHIP: UI/UX CHALLENGE”. Kegiatan magang ini merupakan suatu program yang dibuat oleh Kampus Merdeka x Skilvul, dimana peserta magang ini akan diberikan segala pengetahuan mengenai dunia UI/UX Designer, baik itu berupa materi-materi pembelajaran yang diberikan maupun real project yang harus diselesaikan di akhir masa magang ini.

Pada kesempatan kali ini, saya akan memperkenalkan pada kalian mengenai UIUX Case Study yang sudah saya kerjakan bersama dengan anggota kelompok saya yaitu Yohanes Rinto dan RUSEL ALEXANDER. Nama aplikasi yang didesain yaitu Krealogi. Krealogi ini merupakan suatu aplikasi supply chain management bagi pelaku Usaha Mikro Kecil dan Menengah(UMKM), dimana aplikasi ini akan mencatat segala bentuk kegiatan operasional milik Usaha Mikro Kecil dan Menengah(UMKM) itu sendiri.

Saat ini, sudah terdapat beberapa fitur yang disediakan dalam aplikasi Krealogi itu sendiri yaitu seperti inventori, rencana produksi, catatan pesanan masuk, catatan pemasukan/pengeluaran serta laporan keuangan. Meskipun begitu, ada beberapa fitur yang masih harus dikembangkan kembali dimana beberapa fitur ini merupakan challenge dari kegiatan magang kami. Berikut ini merupakan beberapa 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 challenge tersebut, kelompok saya memilih untuk mengembangkan desain fitur mengenai integrasi dengan logistik. Fitur ini perlu dikembangkan karena memiliki latar belakang seperti sulitnya mengakses logistik untuk pengiriman, pilihan alternatif logistik yang belum mencukupi serta biaya pengiriman yang belum bisa dikalkulasi.

Maka dari itu, dengan adanya fitur integrasi dengan logistik pada aplikasi Krealogi ini diharapkan akan mampu memudahkan pengguna dalam melakukan monitoring terhadap pesanan yang berjalan.

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

Team Role

Pada UI/UX Case Study Krealogi — Integration with Logistic (Expedition) ini saya berkolaborasi dengan beberapa anggota kelompok saya yaitu Yohanes Rinto 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 Notetaker)

Design Process

Pada UI/UX Case Study Krealogi — Integration With Logistic (Expedition) kali ini saya menggunakan pendekatan design process dengan menggunakan metode Design Thinking. Metode Design Thinking merupakan suatu metode yang berfokus kepada pengguna, karena segala permasalahan yang ditemui akan dipecahkan bersama dengan pengguna itu sendiri melalui berbagai tahapan pada Design Thinking itu sendiri. Metode ini sendiri sangat cocok untuk digunakan karena diawali dengan empati, dimana peneliti akan mecnari tahu segala kebutuhan, keinginan serta perspektif pengguna untuk memahami permasalahan apa yang ada pada pengguna itu sendiri. Setelah peneliti mengerti permasalahn-permasalahan yang ada, lalu dilanjutkan dengan pencarian solusi permasalahan, dimana solusi-solusi tersebut dapat ditemukan melalui brainstorming ide bersama dengan tim peneliti lainnya. Ide-ide yang ditemukan tersebut lalu dituangkan kedalam solusi desain yang dibuat, dimana setelah itu dilakukan pengujian kepada pengguna untuk mencari tahu apakah solusi yang diberikan benar-benar sudah mampu menyelesaikan permasalahan sebelumnya atau masih kurang.

Berikut ini merupakan 5 tahapan yang harus dilakukan peneliti dalam menggunakan metode Design Thinking :

1 — Emphatize

Emphatize ini merupakan tahap dimana peneliti akan mencari tahu masalah yang akan diselesaikan melalui pendekatan terhadap pengguna secara langsung. Peneliti akan melakukan pengamatan secara langsung, salah satunya seperti wawancara dengan pengguna karena dengan begitu maka peneliti akan mendapatkan berbagai insight baru tentang apa saja yang dibutuhkan dan diinginkan oleh penggunanya.

Pada tahap pertama ini, saya selaku peneliti akan melakukan pencarian mengenai segala permasalahan yang melatar belakangi pengguna sehingga apa yang diinginkan serta dibutuhkan oleh pengguna dapat diketahui dengan jelas. Cara yang saya lakukan dalam mendapatkan berbagai insight penting tersebut dilakukan melalui User Research.

User Research sendiri merupakan suatu kegiatan yang akan meneliti secara menyeluruh mengenai segala kebutuhan dari penggunanya. Selain itu User Research ini sendiri juga akan berfokus untuk memahami, mendapatkan masalah yang dialami oleh pengguna, serta mendapatkan konteks dari pengguna mengenai suatu aplikasi.

Pada User Research kali ini, saya menggunakan metode kualitatif seperti In-depth Interview. In-depth Interview merupakan suatu kegiatan wawancara secara langsung dengan pengguna secara mendalam dan menggunakan pertanyaan terbuka dengan tujuan untuk mendapatkan insight berdasarkan perspektif pengguna dalam memahami suatu permasalahan. Dengan menggunakan metode ini maka peneliti akan akan mendapatkan lebih banyak informasi dibandingkan dengan metode kuantitatif yang hanya berfokus kepada angka saja karena metode kualitatif seperti In-depth Interview akan mampu menemukan berbagai macam hal-hal yang tidak bisa digambarkan dengan suatu angka/nilai.

Pada In-depth Interview ini saya bersama tim melakukan penelitian dengan mewawancarai secara langsung responden, dimana responden ini sudah disesuaikan dengan user criteria yang sudah ditentukan sebelumnya.

2 — Define

Define merupakan suatu tahap pada Design Thinking dimana dalam tahap ini peneliti akan melakukan analisa terhadap segala insight yang sudah didapatkan dalam tahap sebelumnya. Peneliti juga akan mendefinisikan segala ide-ide solusi berdasarkan permasalahan yang ditemui.

Maka dari itu, saya bersama tim sudah mencoba untuk mendefinisikan insight dari responden kepada beberapa Paint Points. Paint Points merupakan suatu permasalahan-permasalahan yang ditemui dalam suatu aplikasi yang diteliti. Berikut ini merupakan beberapa Pain Points yang sudah didefinisikan bersama dengan kelompok saya :

Setelah berhasil menentukan Paint Points, langkah selanjutnya adalah dengan membuat How-Might We. Seperti namanya sendiri, How-Might We merupakan suatu cara “bagaimana kami mungkin” dalam menyelesaikan permasalahan-permasalahan yang ada pada Paint Points sebelumnya. Dengan membuat How-Might We, akan semakin membantu peneliti dalam menyelesaikan permasalahan yang ditemui diawal.

3 — Ideate

Ideate merupakan suatu tahapan dimana peneliti akan membuat segala bentuk ide-ide yang diharapkan mampu menyelesaikan permasalahan yang sudah ditemui. Hal yang sangat penting pada tahap ini yaitu diperlukan sebanyak mungkin ide-ide yang diciptakan.

Pada tahapan ini, saya bersama dengan tim mulai membuat ide-ide baru yang sesuai dengan permasalahan yang ditemui sebelumnya. Setelah seluruh anggota tim selesai membuat ide-ide solusi, selanjutnya akan dilakukan voting untuk menentukan ide solusi seperti apa yang akan diselesaikan terlebih dahulu dengan berdasarkan kepada User value (seberapa penting fitur tersebut berguna bagi pengguna) dan Effort (usaha yang dikeluarkan dalam mengembangkan fitur tersebut). Berikut ini merupakan beberapa ide yang dihasilkan dalam tahapan ideate :

Dari beberapa fitur tersebut, bisa dilihat bahwa terdapat beberapa ide yang sudah disepakati untuk dilakukan pengembangan terlebih dahulu seperti :

Fitur pemilihan pengiriman (ekspedisi) terpilih menjadi fitur yang paling penting dan diutamakan dalam pengembangannya
Fitur kalkulasi biaya, fitur notifikasi pengiriman, fitur input resi pengiriman, dan fitur history transaksi menjadi fitur-fitur solusi yang akan dikembangkan setelah fitur utama selesai dibuat.
Fitur Live Map Tracking pada pengiriman instan dan fitur notifikasi perubahan status pengiriman menjadi fitur yang bisa dikembangkan diakhir setelah pengembangan pada fitur-fitur utama selesai dilakukan.

Setelah semua ide-ide solusi berhasil dikelompokkan berdasarkan prioritas yang ditentukan, selanjutnya dilakukan dengan membuat Crazy 8’s pada tiap anggota tim. Crazy 8’s merupakan suatu tahapan dimana peneliti mencoba untuk membuat kurang lebih gambaran kasar suatu desain dalam waktu 8 menit. Dengan membuat Crazy 8’s terlebih dahulu maka akan memicu peneliti untuk mendapatkan perkiraan mengenai tampilan desain yang akan dibuat selanjutnya. Crazy 8’s yang dibuat ini khusus untuk fitur yang diutamakan saja. Berikut ini merupakan Crazy 8’s dari tim saya :

Sebelum lanjut kedalam tahap keempat, kami membuat User Flow terlebih dahulu. User Flow menggambarkan alur pengguna dalam menggunakan suatu aplikasi yang diteliti. Dengan membuat User Flow, maka akan semakin tergambarkan dengan jelas mengenai desain seperti apa yang akan dikembangkan selanjutnya. Dalam pembuatan User Flow, peneliti harus memperkirakan alur seperti apa yang akan dilakukan oleh pengguna dalam menggunakan aplikasnya. Berikut ini merupakan User Flow yang sudah dibuat bersama dengan anggota tim :

4 — Prototyping

Prototyping merupakan suatu tahap dimana peneliti akan melakukan pengembangan desain antarmuka terhadap fitur-fitur berdasarkan ide solusi yang sudah ditentukan sebelumnya. Hasil jadi dari prototype ini akan diperbaiki kembali apabila terdapat masukan dari pengguna yang menguji prototype yang dihasilkan.

Dalam tahapan ini, saya bersama tim membuat wireframe terlebih dahulu. Wireframe merupakan suatu kegiatan dimana peneliti membuat rancangan desain yang berfokus kepada struktur-struktur apa saja yang terdapat dalam screen desain tersebut. Wireframe dibuat sebelum desain final dikembangkan. Berikut ini merupakan Wireframe yang sudah dibuat oleh saya bersama tim :

Setelah membuat wireframe, langkah selanjutnya adalah memulai untuk membuat User Interface Design (UI Design) untuk mengaplikasikan ide-ide solusi yang sudah ditemukan sebelumnya. Meskipun begitu, wireframe yang sudah dibuat masih membutuhkan berbagai macam pengembangan terutama pada style nya. Maka dari itu, berikut ini merupakan Design System yang sudah ditentukan dari tim kami :

Berangkat dari design system yang sudah dibuat ini, selanjutnya adalah membuat High Fidelity Design aplikasi Krealogi yang berfokus kepada fitur integrasi dengan logistik (ekspedisi). Berikut ini merupakan keseluruhan UI Design yang sudah saya buat bersama kelompok :

Dari UI Design yang sudah dibuat seperti diatas, mari kita breakdown satu persatu sesuai dengan bagian-bagian yang sudah ditentukan oleh tim saya.

Bagian 1 : Pendaftaran dan login

Pada bagian ini, saya bersama tim mencoba membuat membuat UI Design mengenai pendaftaran hingga login kedalam aplikasi Krealogi. Terdapat pilihan untuk masuk kedalam aplikasi menggunakan nomor handphone dan juga alamat email serta masuk menggunakan Google Account. Selain itu juga terdapat fitur lupa kata sandi yang memudahkan pengguna untuk mengatur ulang kata sandi apabila sudah tidak ingat dengan kata sandi yang sebelumnya.

Bagian 2 : Penambahan Stok Produk Jadi

Bagian kedua ini berfokus kepada tampilan untuk penambahan stok produk jadi pada halaman gudang. Pada bagian ini, penambahan stok produk jadi hanya bisa dilakukan pada menu gudang dan tidak bisa ditambahkan melalui menu pada catatan pesanan masuk. Hal ini dibuat dengan tujuan agar fiturnya menjadi lebih konsisten serta mempermudah pengguna dalam mengatur stok produk jadi.

Bagian 3 : Pencatatan Pesanan Baru

Bagian ketiga ini berfokus kepada pencatatan pesanan baru yang terdapat pada halaman beranda dengan menu “Catat Pesanan”. Terdapat 3 tahapan dalam catat pesanan ini, yaitu dimulai dari tahap 1 (pesanan), tahap 2 (produk) dan juga tahap 3(ringkasan). Pada tahap 2 pengguna harus memilih produk pesanan terlebih dahulu yang sudah dibuat dsebelumnya pada gudang. Setelah menentukan produk yang dipilih, selanjutnya yaitu menentukan ekspedisi pengiriman produk tersebut. Ekspedisi pengiriman tersebut memiliki berbagai pilihan agar memudahkan pengguna dalam menentukan ekspedisi mana yang akan dipilih sesuai pertimbangan dari pengguna itu sendiri. Tidak lupa juga terdapat fitur untuk menentukan rencana pengiriman yang terdapat pada tahapan ketiga agar membantu pengguna dalam mengingat pesanan tersebut.

Bagian 4 : Detail Pesanan Masuk

Pada bagian ini dapat terlihat bahwa status pengiriman serta status pembayaran dapat berganti apabila sudah dilakukan 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 seluruh UI Design berhasil dibuat, saya bersama kelompok melanjutkan dengan prototyping dari desain tersebut. Dengan pembuatan prototype ini, diharapkan semakin menggambarkan interaksi serta navigasi yang ada dalam desain tersebut. Berikut ini merupakan prototype aplikasi Krealogi :

Prototype — Krealogi

5 — Testing

Testing merupakan tahap terakhir dalam metode Design Thinking ini, dimana peneliti akan melakukan pengujian terhadap pengguna secara langsung mengenai desain aplikasi yang dikembangkan. Tahapan ini berguna bagi peneliti karena peneliti akan mendapatkan feedback yang sangat berharga dari pengguna.

Pada tahapan ini, saya bersama tim akan melakukan pengujian secara langsung lewat Google Meet kepada pengguna mengenai desain aplikasi yang sudah dikembangkan berdasarkan permasalahan yang ditemukan sebelumnya. Selain itu, saya berikan beberapa Task Flow yang akan dikerjakan oleh pengguna sebagai bagian dari proses pengujian desain aplikasi ini. Berikut ini merupakan beberapa Task Flow yang sudah ditentukan :

Task 1 — Pendaftaran dan Login

Dalam task ini, pengguna diminta untuk melakukan pendaftaran akun dan login kedalam aplikasi Krealogi. (Task ini berhenti pada halaman Beranda)

Task 2 — Penambahan Stok Produk Jadi

Daam task ini, pengguna diminta untuk menambahkan stok produk jadi pada bagian gudang. (Task ini berhenti pada halaman Review di Gudang)

Task 3— Pencatatan Pesanan Baru

Dalam task ini, pengguna diminta untuk membuat catatan pesanan baru pada bagian beranda. (Task ini berhenti pada halaman Ringkasan di Detail Pesanan)

Task 4 — Status Pembayaran dan Pengiriman

Dalam task ini, pengguna diminta untuk melihat kedalam detail pesanan masuk dan menyelesaikan proses pada detail pesanan masuk tersebut. (Task ini berhenti ketika status pembayaran sudah dibayar dan pengiriman sudah dikirim).

Foto dibawah ini merupakan dokumentasi Usability Testing bersama tim dan pengguna :

Saya bersama dengan tim menggunakan Single Ease Question (SEQ) sebagai pengukur nilai usabilitas desain aplikasi kami. Single Ease Question (SEQ) ini sendiri merupakan suatu kuisioner yang berguna untuk mengukur persepsi pengguna dalam menggunakan aplikasi yang diujikan. Kuisioner pada Single Ease Question (SEQ) ini berupa pertanyaan dengan pilihan skala jawaban antara 1–7 untuk dijawab, dimana kuisioner ini bertipe post-task (pertanyaan berupa skala likert antara 1–7 akan diberikan setelah pengguna selesai menyelesaikan salah satu Task Flow yang diujikan).

Berikut ini merupakan hasil Usability Testing menggunakan Single Ease Question (SEQ) yang dilakukan bersama dengan tim dan pengguna :

Dari hasil skor tersebut, dapat dikatakan bahwa desain aplikasi ini sudah memenuhi standard yang ditetapkan dari Single Ease Question (SEQ)yaitu sebesar 5,5.

Meskipun penilaian sudah memenuhi standard, masih terdapat kekurangan pada desain aplikasi Krealogi kami. Berikut ini beberapa kekurangan yang berhasil ditemukan :

Pengguna kebingungan dengan tombol catat pesanan yang terdapat pada menu pesanan masuk
Pengguna tidak mengetahui bahwa card detail pesanan dapat diklik

Berdasarkan kekurangan yang ditemukan pada desain aplikasi kami, maka kami kembali melakukan iterasi desain dengan tujuan untuk memperbaiki desain agar semakin memberikan usabilitas yang lebih baik lagi kepada penggunanya berdasarkan kekurangan yang sudah ditemui. Berikut ini merupakan iterasi desain yang sudah saya lakukan bersama dengan tim :

Summary

Kesimpulan yang bisa diambil dari UI/UX Case Study ini adalah bahwa meskipun penilaian yang diberikan oleh pengguna setelah melakukan testing menunjukkan hasil yang cukup baik, tetapi masih ada kekurangan-kekurangan yang harus diperbaiki dari desain aplikasi ini. Saya bersama kelompok tetap harus melakukan evaluasi serta perbaikan kembali agar hasil dari desain aplikasi ini menjadi lebih maksimal terutama pada usabilitas aplikasinya.

Personal Reflection

Refleksi pribadi yang bisa saya utarakan yaitu bahwa diperlukan persiapan yang cukup baik dalam mengerjakan UI/UX Case Study seperti ini, apalagi case study ini berasal dari permasalahan yang nyata. Selain itu juga diperlukan koordinasi serta kerjasama yang cukup baik dari tim dalam menyelesaikan proyek ini. Saya merasa sangat bangga dan bersyukur karena mendapatkan banyak sekali pengalaman baru terutama pada bidang UI/UX ini.

Big Thanks To

Erricson Hardiansyah dan Hafidz Noor Fauzi sebagai mentor yang mendampingi dalam penyelesaian UI/UX Case Study ini.
Yohanes Rinto dan RUSEL ALEXANDER sebagai tim saya dalam menyelesaikan UI/UX Case Study ini.
Pengguna(responden) yang terlibat dalam melancarkan UI/UX Case Study ini.