UI/UX Case Study Fitur Integrasi Logistik Krealogi

Nadia Khairunnisa
6 min readNov 27, 2021

--

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

  1. Merumuskan masalah berdasarkan pain point
  2. Membuat solusi design berdasarkan HMW
  3. Memvisualisasikan ide dengan metode crazy’8
  4. Membuat user flow
  5. Membuat wireframe
  6. Membuat UI style guide
  7. Mengembangkan wireframe menjadi hi-fi design
  8. Membuat prototype design
  9. Menyusun stimulus user research dan mempersiapkan record data user research
  10. 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
  1. Untuk mempermudah user dalam mengakses logistik untuk pengiriman
  2. Mencari tahu tingkat kesulitan user dalam mengkalkulasi biaya pengiriman
  3. Mencari tahu tingkat tersedia konfirmasi pengiriman pada pesanan masuk
  4. 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

  1. Flow yang telah dibuat sudah cukup jelas bagi user dengan nilai metric yang diterima yaitu 6.
  2. Menambah lebih banyak jasa ekspedisi untuk memudahkan konsumen memberikan pilihan ekspedisi yang bervariasi.
  3. 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.

--

--

Nadia Khairunnisa
Nadia Khairunnisa

Written by Nadia Khairunnisa

Hello! A learner based on experience and seeing the surrounding environment. Trying to do & give my best in every step, because I know it's worth it in the end.