UI/UX Case Study Krealogi: Fitur Integrasi dengan Logistik Aplikasi Krealogi by Du Anyam
“Proyek ini merupakan bagian dari program pelatihan UI/UX yang dilaksanakan oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi sebagai Challenge Partner. Saya tidak bekerja atau dikontrak secara profesional oleh Krealogi.”
Latar Belakang
Saya berkesempatan mengikuti UI/UX Skilvul Virtual Internship Challenge (SVI) yang bekerja sama Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Di awal program ini Skilvul memberikan pilihan kepada peserta untuk memilih Challenge Partner yang menjadi fokus mereka hingga akhir program. Saya memilih Krealogi sebagai challenge partner karena tertarik dengan aplikasi yang berkaitan dengan penjualan suatu produk. Harapan saya adalah dapat memberikan beberapa perubahan pada tampilan aplikasi Krealogi agar menjadi lebih baik lagi.
Krealogi
Krealogi menawarkan solusi yang menyeluruh: komunitas sebagai wadah berjejaring dengan pelaku usaha lainnya, pelatihan untuk mengembangkan kemampuan dan keterampilan UMKM, serta aplikasi ramah pengguna untuk membantu pencatatan kegiatan operasional dan membuat perencanaan strategis.
Akan tetapi, permasalahan Krealogi saat ini adalah tidak memiliki desain aplikasi yang user friendly untuk target pengguna mereka. Saat ini Krealogi membutuhkan sebuah desain aplikasi yang user friendly dan tentunya bisa membantu pengguna Krealogi untuk mencatat kegiatan operasional mereka, membuat strategi dan menjaga alur operasional mereka.
Objektif
Dari permasalahan yang ada, tugas kami sebagai peserta SVI adalah:
- Membuat tampilan aplikasi Krealogi yang user-friendly untuk target pengguna mereka saat ini.
- Membuat solusi berupa desain untuk fitur mereka yang belum tersedia (Integration with Logistic).
Peran dalam Tim
Sejak awal, peserta program pelatihan ini dibagi menjadi beberapa kelompok di dalamnya. Tiap kelompok beranggotakan 2–3 orang yang dipilih secara random oleh pihak Skilvul. Dalam kesempatan ini saya berkolaborasi dengan 2 anggota lainnya yaitu Fernando Trisno Swandi & Zalfa' As Syifa'. Kami berteman dan berdiskusi terkait tugas yang diberikan dalam pelatihan ini. Tanggung jawab yang dimiliki dalam kelompok ini adalah:
- Membuat UX Design Process (Design Thinking)
- Visualisasi Crazy 8's
- Membuat User Flow
- Merancang Wireframe
- Membuat Design System (UI Styleguide)
- Membuat Mockup (UI Design)
- Menerapkan UX Writing
- Menyelesaikan UI Design dengan Prototyping
- Melakukan User Research (Usability Testing)
- Melakukan Iterasi UI Design
Design Process
Seperti yang sudah saya spoiler di atas, kami menggunakan Design Thinking sebagai pendekatan dalam UX design process yang kami lakukan. Metode ini cukup efektif dalam menemukan solusi desain yang sesuai dengan challenge yang diberikan oleh Krealogi. Sejak awal program SVI ini kami juga dibekali dengan materi design thinking sebagai salah satu design process yang dapat digunakan.
Seluruh tahapan design thinking ini kami lakukan pada platform Figma. Beberapa fitur FigmaJam dan Figma Design File menjadi sarana kami dalam berkolaborasi dan bertukar ide di dalamnya.
1 — Empathize
Tahap awal dalam dalam Design Thinking adalah Empathize. Proses empathize diawali dengan mengosongkan diri seakan-akan kami berposisi sebagai pengguna aplikasi Krealogi. Tujuannya adalah untuk mencari tahu pandangan dan kebutuhan dari target user sebelum mendefinisikan problem statement dan menentukan ide solusi.
Karena ini merupakan challenge dari partner, maka pihak Krealogi sendiri telah memberikan tantangan yang sekaligus menjadi kebutuhan user yang harus diselesaikan. Terdapat 3 tantangan yang harus dipilih oleh peserta diantaranya adalah Simple CRM, Cash Flow Feature, Integration with Logistic and Marketplace.
Dari ketiga challenge tersebut, fitur Integration with Logistic menjadi pilihan kami dalam mengembangkan solusi desain nanti. Beberapa point juga diberikan dari Krealogi sebagai deskripsi kebutuhan user target yang sekaligus menjadi tujuan utama pada tahap empathize ini.
2 — Define
Pada tahap ini, kami mulai menganalisis dan berdiskusi mengenai beberapa kebutuhan user yang telah diberikan oleh partner. Tujuan dari tahap define adalah menemukan solusi dari kebutuhan user pada tahap empathize.
Pain Point
Tahap ini diawali dengan pembuatan Pain Point berdasarkan data yang sudah ada. Kami mencoba membuat beberapa pain point user pada halaman FigmaJam yang kami gunakan sebagai sarana berkolaborasi.
How-Might We
Selanjutnya kami membuat How-Might We untuk menuliskan ide-ide mengenai solusi dari pain point. Tiap anggota menuliskan idenya masing-masing pada sticky notes yang ada dalam FigmaJam.
Setelah itu dilakukan voting untuk memilih salah satu hasil how-might we yang akan digunakan untuk tahap selanjutnya. Dari hasil voting yang dilakukan, diperoleh how-might we: Mempermudah User Terhubung dengan Logistik untuk Pengiriman Pesanan.
3 — Ideate
Selanjutnya pada tahapan ini kami memulai brainstorming ide berdasarkan hasil How-Might We pada tahap define. Tujuan dari brainstorming adalah untuk menghasilkan ide solusi dengan output berupa visualisasi Crazy 8's.
Solution Idea
Tiap anggota menuliskan ide solusi sesuai dengan hasil voting how-might we yaitu Mempermudah User Terhubung dengan Logistik untuk Pengiriman Pesanan.
Affinity Diagram
Dari hasil Solution Idea, kami mengelompokkan ide tersebut pada bagian Affinity Diagram. Beberapa solusi pada sticky notes yang kami anggap linear, akan dijadikan ke dalam satu kelompok sehingga terdapat 7 pengelompokkan seperti gambar di bawah ini.
Prioritization Idea
Pada Prioritization Idea, kami menentukan dan menyusun Affinity Diagram pada 4 kategori yang ada yaitu yes do it now, do next, do last dan later.
Crazy 8’s
Akhir pada bagian Ideate yang juga menjadi solusi desain pada ini adalah pembuatan Crazy 8’s. Tiap anggota membuat kreasi tampilan crazy 8’s nya masing-masing sesuai dengan proses yang telah dilakukan sebelumnya. Hasil crazy 8’s akan diupload pada frame yang tersedia pada FigmaJam dan dilakukan voting untuk menentukan hasil desain yang dipilih pada setiap halaman crazy 8’s.
4 — Prototyping
Pada tahapan ini kami mencoba menerapkan hasil crazy 8’s menjadi desain yang lebih detail, lebih nyata dan interaktif. Terdapat beberapa proses yang dilakukan dalam tahapan ini dimulai dari pembuatan User Flow, Wireframe, UI Styleguide, UI Design dan Prototype. Seluruh proses tersebut dibuat pada Design File dalam aplikasi Figma.
User Flow
Dari hasil diskusi yang dilakukan, kami membuat 4 user flow yang diadaptasi berdasarkan hasil ide pada tahap ideate.
Wireframe
Proses selanjutnya adalah membuat wireframe berdasarkan hasil voting crazy 8’s. Pembuatan wireframe kami bagi menjadi 4 sesuai dengan user flow yang ada. Wireframe tersebut dibuat pada Figma Design File yang akan menampung UI Styleguide, Prototype dll.
Sebelum membuat mockup atau UI Design, terlebih dahulu kami merancang Design System pada halaman Figma Design File. Design system yang kami gunakan seperti color, typography, button, text field sebagian besar mengikuti design system yang dimililki oleh Krealogi.
UI Design
Dalam membuat tampilan yang lebih nyata, kami merancang UI Design yang mengacu pada wireframe dan UI styleguide. Diawali dengan membuat tampilan Home hingga halaman tambahan yang kami gunakan untuk keperluan fitur integrasi dengan logistik.
Secara keseluruhan tampilan masih sama dengan tampilan yang ada pada aplikasi Krealogi. Kami mengubah tata letak dan menambah komponen baru yang disesuaikan dengan fitur yang kami pilih.
Catat Pesanan
Halaman Home masih sama dengan halaman Home pada aplikasi Krealogi saat ini. Kemudian pada Pesanan Masuk kami menambahkan Tab Bar pada bagian atas yang sekaligus berfungsi sebagai filter pada pesanan sesuai dengan progres yang berjalan pada pesanan tersebut. Perubahan juga terdapat pada Step Progress Bar (halaman Detail Pesanan) yang sebelumnya terdapat 3 step dan sekarang menjadi 4 step. Satu-satunya step yang kami tambahkan adalah step untuk mengisi bagian estimasi ongkos kirim yang dimana step tersebut menjadi salah satu implementasi pada fitur integrasi dengan logistik.
Form Logistik
Seperti yang telah dijelaskan sebelumnya, gambar di atas merupakan flow atau proses yang dilakukan pada bagian form logistik. Atribut yang kami gunakan dalam form ini adalah tanggal kirim pesanan, nama ekspedisi yang akan digunakan, nama layanan ekspedisi dan estimasi biaya yang dikeluarkan.
Konfirmasi Pengiriman
Sebagian besar UI Design yang terdapat flow Konfirmasi Pengiriman masih sama dengan aplikasi Krealogi saat ini. Perubahan yang kami lakukan terdapat pada urutan data atau informasi yang disajikan. Contohnya seperti bagian card pengiriman yang kami letakkan di atas. Selain itu, desain card pengiriman yang kami buat lebih menyesuaikan dengan desain card-card lainnya. Pada bagian pengiriman juga kami tambahkan fitur tracking yang berguna untuk melacak pesanan yang telah dikirim.
Prototype
Untuk menghasilkan desain yang lebih interaktif lagi, kami membuat prototype dari hasil UI design. Hasil prototype dapat dilihat pada embed berikut:
5 — Testing
Untuk menguji hasil prototyping, kami melakukan Usability Testing demi mengetahui tingkat kegunaan fitur integrasi dengan logistik pada rancangan tampilan aplikasi Krealogi yang kami buat.
Research Objective
Sebelum itu kami menentukan Research Objective dalam testing ini. Beberapa research objective yang telah ditentukan adalah:
- Mencari tahu tentang kebutuhan user dalam melakukan pencatatan pesanan.
- Mencari tahu tentang kebutuhan user dalam melakukan pelacakan pesanan.
- Mencari tahu tingkat kepuasan pengguna pada rencana fitur integrasi dengan logistik.
- Mencari tahu tingkat keberhasilan dari SEQ untuk fitur integrasi dengan logistik pada Aplikasi Krealogi.
Respondent Criteria
Selanjutnya adalah menentukan kriteria responden, berikut kriteria yang telah kami tentukan sebelum melakukan user interview:
- Berusia 18–55 tahun.
- Pekerjaan sebagai pemilik usaha/UMKM.
- Usaha/UMKM melayani pengiriman barang dengan pihak logistik.
- Berdomisili di seluruh wilayah Indonesia.
- Memiliki kemampuan berbahasa Indonesia.
- Dapat mengoperasikan Android.
Research Scenario
Dalam pengujian ini, kami membuat 4 task yang harus diselesaikan oleh responden. Keempat task tersebut cukup membantu kami dalam mendapatkan nilai ukur pada prototype yang diuji. Berikut task yang harus dilakukan responden:
- [TASK 1] Meminta responden untuk membuat pesanan baru (catat pesanan) dan melakukan pengisian form logistik pada bagian catat pesanan (berhenti di halaman detail pesanan — ringkasan) dan observasi apa yang dilakukan oleh responden.
- [TASK 2] Meminta pengguna untuk melakukan konfirmasi pengiriman pada halaman pesanan masuk. Kemudian minta responden untuk melakukan konfirmasi pesanan dan observasi apa yang dilakukan oleh responden.
- [TASK 3] Meminta pengguna untuk melihat halaman lacak pesanan, melakukan konfirmasi pembayaran dan menyelesaikan pesanan (selesaikan pesanan) pada halaman detail pengiriman. Kemudian observasi apa yang dilakukan oleh responden.
- [TASK 4] Meminta pengguna untuk melihat riwayat pesanan (detail invoice) pada salah satu pesanan yang telah selesai. Kemudian observasi apa yang dilakukan oleh responden.
Respondent
Wawancara dilakukan kepada responden yang berprofesi sebagai dosen di salah satu universitas di Magelang dan juga sebagai pemilik UMKM pada bidang kuliner makanan ringan. Beliau berusia 27 tahun dan sudah menekuni usaha kuliner sejak tahun 2014.
Hasil Testing
Kami telah mengajukan beberapa pertanyaan sederhana untuk mengetahui informasi dan pendapat responden. Selanjutnya responden diminta untuk menyelesaikan 4 task yang telah ditentukan sebelumnya. Di akhir wawancara kami juga menanyakan nilai dari keseluruhan task yang ada. Disini kami menggunakan SEQ (Single Ease Question) sebagai user metric dalam pengujian ini. Dari skala 1–7, responden memilih 6 sebagai nilai dari keseluruhan task.
Beberapa hal yang harus digaris bawahi dari pendapat responden terkait penilaian menggunakan SEQ ini. Responden menyebutkan bahwa informasi pembeli, produk, lacak lokasi pesanan sudah detail. Namun terdapat beberapa hal yang perlu diperbaiki atau ditambah seperti:
- Fitur pencarian nomor resi pada halaman Home
- Penggunaan nomor resinya lebih ditonjolkan lagi
- Tampilan produk terlihat penuh pada layar
- Validasi pembayaran seperti bukti transfer (sudah valid atau belum)
- Validasi pesanan diterima sebelum mengakhiri pesanan
Iterasi UI Design
Dari hasil user research yang dilakukan, kami kembali berdiskusi untuk menemukan solusi dari catatan responden. Salah satu fitur yang kami tambah pada iterasi desain ini adalah fitur validasi pesanan diterima. Untuk melihat perbedaan sebelum dan sesudah menambahkan fitur validasi pesanan dapat dilihat pada gambar di bawah ini.
Perbedaan terdapat pada tombol Bukti Terima yang terletak di bawah tombol Lacak Pesanan. Tombol tersebut memiliki button style: outline karena kami menganggap tombol ini dapat digunakan sebagai opsional jika pengguna ingin menambah dokumen berupa pesanan diterima. Selain itu, kami juga menambahkan halaman baru untuk melengkapi fungsi dari fitur validasi pesanan.
Halaman Bukti Terima sebagai fitur tambahan untuk menyimpan dokumentasi berupa foto yang mendukung sebagai validasi pesanan telah diterima oleh client.
Iterasi desain juga terdapat pada bagian tombol Selesaikan Pesanan dan Hubungi Pembeli. Kedua tombol tersebut terletak pada bagian paling bawah halaman Detail Invoice yang membuat user harus melakukan scoll hingga paling bawah halaman tersebut. Untuk mengatasi hal tersebut, kami membuat kedua tombol tadi menjadi fixed pada halaman Detail Invoice dan juga terdapat perubahan ukuran dan tata telah kedua tombol. Tombol hubungi pembeli kami buat menjadi persegi dengan ukuran yang lebih kecil dan perubahan teks menjadi icon.
Kesimpulan
Project ini dilakukan selama kurang lebih 2 bulan mulai dari membuat UX Design Process hingga melakukan iterasi pada UI Design. Brainstorming antar anggota kelompok menjadi kunci utama untuk menemukan ide solusi desain dalam menyelesaikan Challenge Partner ini. Hasil user research dengan SEQ menunjukkan nilai yang cukup baik untuk UI Design dan Prototype yang kami rancang. Nilai 6 (skala 1–7) dari responden membuat kami sedikit melakukan iterasi desain yang sesuai dengan fitur Integrasi dengan Logistik yang kami pilih.
Program SVI ini sangat menarik dan membantu bagi saya sebagai seseorang yang baru terjun ke dalam dunia UI/UX. Materi dan proses yang diberikan menjadi bekal saya dalam mengembangkan kemampuan diri. Harapan saya untuk kedepannya adalah agar program ini dapat terus dilaksanakan dan perbanyak kolaborasi dengan partner-partner lainnya.
“Terimakasih kepada Kampus Merdeka, Skilvul, teman serta mentor yang selalu membimbing dan membagikan ilmu selama program ini berjalan.”