UI/UX Case Study Krealogi : Integrasi Logistik

Rabiatul Adawiyah
9 min readNov 28, 2021

--

Disclaimer

Proyek ini merupakan bagian dari program training UI/UX yang dilaksanakan oleh Skilvul untuk program Kampus Merdeka yang di selenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi adalah Challenge Partner. Saya tidak bekerja atau dikontrak secara profesional oleh Krealogi.

Latar Belakang

Saya berkesempatan mengikuti UI/UX Desaigner yang merupakan Program dari Kampus Merdeka di selenggarakan oleh Kementrian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Program ini bekerja sama by Skilvul Virtual Intership. Dalam SVI ini saya diperbolehkan memilih salah satu Challange Partner dari beragam challenge partner yang telah disediakan oleh pihak Skilvul. Saya memilih Krealogi karena krealogi merupakan kegiatan supplay chain management mulai dari perencanaan,pencatatan, dan pengiriman dalam bentuk android, sehingga saya tertarik untuk mengulik untuk lebih dalam aplikasi krealogi dan dengan harapan dapat memberikan perubahan pada aplikasi ini agar tambah lebih baik lagi.

Tentang Aplikasi

Krealogi Merupakan platform mobile user-friendly yang membantu pengguna khususnya pengrajin Kriya ataupun pelaku UMKM untuk merekam kegiatan operasional mereka. Krealogi terdapat alur proses manajemen yang sederhana mulai dari Pemesanan, Produksi, Persediaan, hingga Pengiriman. Untuk saat ini aplikasi kralogi masih belum ada fitur integrasi logistik yang langsung tersambung ke Marketplace untuk mempermudah para pelaku UMKM.

Objektive

  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

Peran Dalam Tim

Pada project kali ini role saya adalah sebagai seorang UI/UX Desaigner. Dalam pengerjaan project ini saya bersama 2 anggota team yaitu, Retno Eri Setyaningseh dan Nadia Khairunnisa dengan role yang sama yaitu sebagai UI/UX Desaigner. Adapun tanggung jawab yang kami lakukan antara lain :

  1. Merumuskan identifikasi 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. Mempersiapkan dokumentasi untuk user testing (user stimulus research document)
  10. Melakukan usability testing
  11. Melakukan Iterasi prototype

Tools : Figma

Desaign Process

Desain Thinking

Pada kasus ini saya dan team menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Metode ini yang paling sering digunakan dan sesuai dengan materi yang telah kami pelajari. Berikut tahapan-tahapan Desaign Thinking yang telah kami lakukan sebagai berikut :

1 — Empathize

Pada phase pertama, saya melakukan pendekatan dengan mencari beberapa referensi di internet untuk mengenal lebih dekat tentang krealogi dan melihat produk ataupun kompetitor lainnya. Saya juga mendapatkan informasi singkat tentang beberapa fitur yang mereka butuhkan untuk meningkatkan visibilitas data, kinerja bisnis, dan kepuasan pelanggan. Fitur-fitur yang akan perlu dikembangkan yaitu :

  • Fitur CRM
  • Fitur Cash Flow
  • Fitur Integrasi Logistik

Adapun alasan saya memilih fitur Integrasi Logistik untuk saya kembangkan lagi karena menurut saya fitur integrasi logistik masih sangat perlu dikembangkan dari segi demografi user.

2 — Define

Pada Phase kedua, saya mengidentifikasikan beberapa masalah atau kendala yang sering di alami saat menggunakan aplikasi Krealogi. Disini saya menganggap diri saya sebagai user atau pelaku usaha UKM yang sedang kebingungan untuk mengakses logistik pengiriman.

Pain Point & HMW

Setelah semua pain point saya tulis, selanjutnya saya membuat daftar how-meight we sebagai oppourtunity yang menjadi solusi dari permasalahan dari pain point. Pada phase HMW ini kami telah mengkategorikan dengan memberikan vote dan akhirnya mendapatkan solusi berdasarkan kesamaan solusi yang telah disepakati.

3 — Ideate

Pada phase ketiga, setelah saya menganalisis masalah dan mendapatkan solusi ide terkait pain point yaitu (Masalah utama yang oleh dirasakan user).

  • Solution Idea

Ide solusi yang telah di sesuaikan berdasarkan dari hasil HMW pada tahap define. Adapun solusi yang saya dapatkan yaitu :

Solution Idea

Setelah saya berdiskusi, maka mendapatkan beberapa ide untuk kemudian ide tersebut saya kategorikan agar mendapatkan solusi ide yang cocok.

  • Affinity Diagram

Setelah semua ide terkumpul, selanjutnya saya mengkategorikan ide tersebut berdasarkan ide yang memiliki kesamaan dan menjadikan ke dalam satu fitur.

Afinity Diagram
  • Prioritization Idea

Dari pengelompokkan ide yang telah di buat, maka langkah selanjutnya saya menyusun prioritas ide berdasarkan user value dan effort dalam proses pengerjaannya.

Prioritization Idea

Pada phase ini, saya dan team sepakat untuk memilih fitur “Integrasi Logistik’’ untuk sebagai prioritas utama karena menurut kami melihat dari latar belakang masalah dari user dimana kesulitan dalam memilih jasa ekspedisi,dan mengakumulasi biaya.

  • Crazy’8

Setelah mendapatkan ide yang dijadikan sebuah prioritas, maka saya membuat sketsa dengan menggunakan metode design sprint yang bisa disebut sebagai crazy’8 dengan cara 1 flow dan 8 screen sketsa yang menggambarkan tata letak kasar pada sebuah aplikasi mobile.

Crazy’8

Setelah itu, hasil dari masing-masing crazy’8 saya vote untuk menentukan screen mana saja yang akan di jadikan task untuk ke tahap user flow.

  • Userflow

Di tahap ini, saya membuat userflow sebagai flow atau alur yang dapat di ikuti user untuk menyelesaikan aplikasi dari awal sampai akhir.

Userflow

Dalam userflow ini saya membuat task integrasi logistik yang menunjukkan flow dari pesanan masuk sampai ke verifikasi data dan lacak pesanan.

  • Wireframe

Langkah selanjutnya setelah dari userflow, saya membuat wireframe sebagai layout interface untuk mempresentasikan informasi yang terdapat dalam interface nantinya.

Wireframe — Integrasi Logistik
  • UI Style Guide

Dalam membuat desaign high-fi maka diperlukan styleguide untuk menjadi acuan dalam proses desain.

Style Guide

Pada platfrom ini, kami memilih integrasi logistik untuk kami design dan dimana seperti Color, Typography, Iconography sudah disepakati bersama anggota kelompok.

UI (User Interface) Desaign

Dalam phase ini setelah melakukan brainstorming dari keseluruhan ide hinggan membuat styleguide, selanjutnya saya membuat UI Design dan prototype menggunakan Figma.

UI Desaign
  • Pesanan Masuk
Pesanan Masuk

Halaman ini ditampilkan sebagai proses pencatatan pesanan yang masuk. Pada halaman ini penjual atau pelaku usaha UKM dapat melihat pesanan apa saja yang telah masuk. Dan terdapat notifikasi angka yang telah saya highlight gunanya agar memudahkan user atau penjual jumlah total pesanan.

  • Verifikasi Data
Verifikasi Data

Pada halaman ini terdapat data user atau calon customer yang telah berhasil order pesanan, dengan isi kelengkapan data Identitas customer dan detail produk yang akan di order.

  • Alur Pengiriman
Atur Pengriman

Halaman ini di tampilkan sebagai proses pengiriman yang mana terdapat pilihan jasa ekspedisi, biaya pengiriman. Pada halaman ini juga customer atau calon pembeli dapat melihat akumulasi biaya pengiriman dan pada pemilihan jasa ekspedisi sebagai penjual dapat memilih jasa yang cocok untuk tempat tujuan customer mereka.

  • Informasi Pengiriman
Informasi Pengiriman

pada halaman ini penjual dapat melihat data customer, dan dapat mencetak resi pengiriman sebagai bukti pengiriman agar dapat melacak pesanan customer.

  • Detail Pengiriman
Detail Pengiriman

Halaman ini ditampilkan untuk melihat informasi pesanan yang telah masuk, di dalam tampilan detail pengiriman terdapat data customer, produk pesanan, dan informasi pengiriman. Dalam halamana ini juga sudah tersedia akumulasi biaya dan No. Resi.

  • Lacak Pesanan
Lacak Pesenan

Halaman ini ditampilkan untuk melihat status pemesanan dari proses pengemasan, barang di kirim dan barang telah diterima. Halaman ini masih menggunakan history sebagai tracking.

  • Pesanan sedang diproses

Pada halaman ini pengguna atau penjual dapat melihat pesanan apa saja yang masih belum di kirim, dan terdapat notif sebagai highlight untuk memudahkan penjual. Pada halaman ini juga terdapat nama penerima atau calon customer.

Pesanan sedang di proses

4 — Prototype

Prototyping sebagai bentuk dari design, atau layout interface pada tahap ideate yang dibuat secara lebih nyata dan dalam bentuk high-fi sehingga terlihat lebih konkrit/nyata.

  • Prototype link
Prototype

5 — Testing

Pada phase kelima ini, atau phase testing. Setelah saya memiliki prototype interaktif, saya dan teman kelompok melakukan usability testing dengan metode In-Dept Interview dan Single Ease Question(SEQ). Dalam sesi ini saya menguji kepada salah satu responden yang merupakan pelaku usaha UKM Paper bag.

Stimulus User Research

[Kelompok 8] -[SVI 19]-Stimulus Research — Google Dokumen

  • Research Objective
  1. Untuk mempermudah user dalam mengakses logistik untuk pengiriman
  2. Mencari tahu tingkat kesulitan 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
  • Respondent Criteria
  1. Berusia 22–30 tahun
  2. Pekerjaan sebagai pelaku bisnis
  3. Berdomisili di seluruh wilayah Indonesia
  4. Memiliki kemampuan Bahasa Indonesia yang baik
  5. Dapat berkomunikasi dengan baik
  6. Mempunyai tingkat pemahaman yang baik dalam teknologi
  • Research Scenario

Melakukan penjelasan singkat tentang aplikasi Krealogi dan Integrasi logistik kepada responden, bahwa terdapat 3 task yang perlu dilakukan oleh responden :

Task 1 Melakukan Verifikasi Identitas

Task 2 Melakukan memilih Jasa Ekspedisi

Task 3 Melihat Lacak Pesanan

  • Record Data User Research

Setelah dari menyusun Stimulus Research dan melakukan interview bersama responden yang telah sesuai kriteria, hasil dari interview mendapatkan feedback dari 3 task yaitu :

Setelah responden menjawab dari semua pertanyaan yang di berikan, maka dari keseluruhan flow aplikasi yang dibuat, responden memberikan feedback sebagai berikut :

Scala Likert UT

Dari Feedback yang diberikan setelah saya melakukan sesi In-Dept Interview, saya meminta responden untuk memberikan penilaian dengan menggunakan metode Single Ease Question dari keseluruhan flow yang tersedia. Responden juga telah memberikan feedback dan scala nilai yang sangat bagus untuk menjadi masukan bagi saya agar dapat memperbaiki.

6 — Iteration Prototype

Iteration Prototype merupakan proses hasil dari setelah melakukan sesi interview bersama responden. Setelah responden memberikan feedback kemudian saya memperbaiki desain ataupun prototype agar menjadi lebih baik.

Iterasi

Dari penjelasan feedback responden bahwa opsi ekspedisi , masih sedikit karena menurut respoden dengan pilihan ekspedisi yang cukup lengkap dapat memudahkan user dalam menentukan jasa ekspedisi dan setelah di iterasi maka hasilnya adalah dengan menambahkan point jasa ekspedisi Si Cepat, responden juga mengatakan jika font desain kita terlalu kecil,maka setelah dilakukannya iterasi dapat dilihat dari before dan after bahwa desain sudah cukup mengalami perubahan.

Kesimpulan

  1. Flow integrasi logistik cukup jelas untuk user, dengan nilai metric yang diperoleh 7.
  2. Menambahkan fitur integrasi logistik dengan demografi yang telah sesuai agar memudahkan pengguna tanpa harus menambah aplikasi lain.
  3. Dengan fitur-fitur yang tersedia semoga dapat menjadi nilai tambah bagi pengguna, memudahkan pengguna untuk mengatur logistik dan menjadi lebih efisien.

Rekomendasi Selanjutnya

Rekomendasi untuk dapat terhubung langsung ke marketplace, dan meningkatkan fitur-fitur tersebut sebagai berikut :

Menambahkan opsi untuk mengambil pesanan

Terhubung langsung dengan marketplace

Tambahkan opsi untuk mengunggah foto produk sebelum pengiriman sebagai bukti bahwa barang dalam kondisi baik.

Terima kasih telah membaca UX Case Study saya, dalam pembuatan UX Case Study ini tentu masih banyak seali kekurangan saya. Dan terima kasih untuk Nadia Khairunnisa & Retno Eri Setyaningseh atas kerja sama team yang sangat baik, terima kasih untuk mentor dan pihak skilvul untuk ilmu pembelajaran yang sangat menarik.

--

--