UI/UX Case Study Fitur Integrasi Logistik Krealogi
Disclaimer
Projek ini merupakan bagian dari UI/UX training program yang diselenggarakan oleh skilvul, pada program Kampus Merdeka yang diadakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi merupakan Challenge Partner. Saya tidak bekerja secara terikat kontrak professional oleh Krealogi.
Introduction
Project Overview
Pada program UI/UX training ini, terdapat challenge yang harus dilakukan oleh tiap peserta. Challenge ini bekerjasama dengan partner yang sudah bermitra dengan skilvul, yaitu salah satunya ialah krealogi. Krealogi menjadi salah satu partner yang saya pilih karena platformnya menarik dan sangat bermanfaat bagi pelaku usaha, khususnya UMKM.
Challenge yang diberikan oleh krealogi yaitu salah satunya membuat Fitur Integrasi dengan Logistik, sebagaimana fitur ini diperlukan untuk memudahkan pelaku usaha dalam mengakses logistik untuk pengiriman dan memudahkan dalam mengakumulasi biaya pengiriman, sehingga baik user maupun konsumen dapat dengan mudah memonitoring pesanan secara real-time.
Peran dalam Tim
Dalam mengerjakan project ini, saya mengerjakannya secara berkelompok sebagaimana pengelompokkan yang telah dibentuk ketika awal kegiatan berlangsung. Pada project ini saya berkolaborasi dengan Retno Eri Setyaningseh dan Rabiatul Adawiyah dalam mengerjakan challenge partner dengan role sebagai UI/UX Designer. Tanggung jawab kami adalah
- Merumuskan masalah berdasarkan pain point
- Membuat solusi design berdasarkan HMW
- Memvisualisasikan ide dengan metode crazy’8
- Membuat user flow
- Membuat wireframe
- Membuat UI style guide
- Mengembangkan wireframe menjadi hi-fi design
- Membuat prototype design
- Menyusun stimulus user research dan mempersiapkan record data user research
- Melakukan usability testing
Timeline
18 oktober — 10 desember 2021
Tools
Figma
Design Process
Empathise
Pada tahap ini, kami merumuskan masalah yang menjadi kesulitan bagi konsumen dalam mengatur logistik pesanan. Kami menyusun Pain Points berdasarkan hasil yang kami temui dalam beberapa artikel dan sumber lainnya yang sudah kami simpulkan mengenai fitur integrasi logistik.
Define
Setelah menyusun Pain Points, kami kategorikan masalah-masalah tersebut berdasarkan yang sekiranya berkolerasi. Dari hasil pengelompokkan tersebut, lalu ditemukan beberapa point yang kami dapat untuk dikembangkan yaitu terkait jasa ekspedisi, tracking pesanan, database, serta notifikasi dan tampilan. Point-point yang kami dapatkan dari masalah ini kemudian dibuatkan how-might we sebagai opportunity untuk menyelesaikan masalah.
Ideate
Pada tahap ideate, kami melakukan brainstorming ide berdasarkan how-might we yang sudah dibuat sebelumnya. Disini kami menemukan ide solusi atas hasil brainstorming bersama tim. Pada tahap ini, terdapat beberapa tahap yang dilakukan untuk kemudian melanjutkan proses design.
- Solution Idea dan Affinity Diagram
Berikut ini solusi ide dan pengkategorian ide (affinity diagram) yang telah didiskusikan berdasarkan how-might we.
- Prioritization Idea
Ide yang telah disusun kemudian dibuat skala prioritasnya berdasarkan effort dan user value. Berikut ini diagram prioritas ide yang telah kami diskusikan.
- Crazy-8's
Pada tahap ini juga, kami visualisasikan hasil ide tersebut dengan metode crazy-8’s yang dimana metode ini menggambarkan wireframe dengan versi low fidelity. Berikut ini design crazy-8’s yang telah saya buat.
Prototyping
Setelah semua tahap pada ideate dilakukan, selanjutnya ialah menyusun flow process, membuat design interface dari hasil crazy-8’s, membuat UI design, hingga membuat prototype untuk testing.
- User Flow
User flow merupakan diagram langkah yang harus dilakukan user untuk menyelesaikan task. Tahap ini penting untuk mengetahui gambaran alur proses yang akan dilakukan pada interface yang akan dibuat.
Gambar diatas ialah langkah-langkah yang harus dilakukan user untuk monitoring pesanan berdasarkan integrasi logistik. User flow diatas mempermudahkan akses user mulai dari memilih jasa ekspedisi hingga tracking pesanan.
- Wireframe
Visualisasi design yang telah dibuat pada tahap sebelumnya, kemudian dibuatkan layout low-fidelity guna membantu mempresentasikan informasi dalam bentuk interface dan memberikan outline struktur dan layout pada interface.
- User Interface Design
- Prototype
Berikut ini link prototype untuk melihat hasil rancangan interface yang telah dibuat.
<iframe style=”border: 1px solid rgba(0, 0, 0, 0.1);” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FS5Y54wOo3bZXSUH8hGIwBF%2FUI-Styleguide%3Fnode-id%3D138%253A1422%26scaling%3Dscale-down%26page-id%3D64%253A818%26starting-point-node-id%3D138%253A1422" allowfullscreen></iframe
Testing
Setelah saya memiliki prototype interaktif, saya melakukan usability testing dengan metode in-dept interview dan single ease question. Kriteria user yang saya interview adalah seorang berusia 22–30 tahun dengan pekerjaan sebagai pelaku usaha bisnis yang berdomisili di seluruh Indonesia dengan tingkat pemahaman yang baik dalam teknologi.
Stimulus User Objective
- Research Objective
- Untuk mempermudah user dalam mengakses logistik untuk pengiriman
- Mencari tahu tingkat kesulitan user dalam mengkalkulasi biaya pengiriman
- Mencari tahu tingkat tersedia konfirmasi pengiriman pada pesanan masuk
- Dan, Mencari tahu keberhasilan SEQ untuk aplikasi integrasi & logistik pada krealogi
- Research Scenario
Setelah menjelaskan kepada responden mengenai maksud dan tujuan serta alur yang akan dikerjakan, kami membuat 3 task yang perlu dilakukan oleh responden.
[TASK 1] Meminta pengguna untuk membuka fitur integrasi dan logistik dan mengecek pesanan masuk di dalam aplikasi (berhenti di halaman verifikasi identitas)
[TASK 2] Meminta pengguna untuk melakukan pencarian pengiriman dan minta untuk melakukan transaksi hingga berhasil (berhenti di halaman Pilih ekspedisi)
[TASK 3] Meminta pengguna untuk melihat halaman lacak pesanan yang dilakukan oleh responden
- Record Data user Research
Setelah dilakukan proses interview kepada responden, didapatkan hasil sebagai berikut.
Setelah responden menjawab keseluruhan pertanyaan, kami meminta responden untuk memberi penilaian atas keseluruhan flow yang telah dibuat.
Dari skala 1–7, responden memberi penilaian 6 terhadap user interface design yang telah kami buat dan responden juga memberi feedback terhadap desain kami yaitu mengenai kuantitas jasa ekspedisi yang kurang banyak.
Iteration
Dari feedback yang didapat dari responden, maka kami membuat iterasi design atas hasil review responden yaitu sebagai berikut.
Kesimpulan
- Flow yang telah dibuat sudah cukup jelas bagi user dengan nilai metric yang diterima yaitu 6.
- Menambah lebih banyak jasa ekspedisi untuk memudahkan konsumen memberikan pilihan ekspedisi yang bervariasi.
- Fitur logistik ini sangat diharapkan user karena akan memudahkan untuk tracking pesanan dan memilih jasa ekspedisi yang sesuai dengan harga yang tersedia.
Terimakasih telah membaca UI/UX Case Study yang telah saya tulis. Tentu dalam penulisan ini masih banyak kekurangan yang perlu diperbaiki. Saya sangat menerima dan mengharapkan jika ada saran dan masukan, terima kasih.