UI/UX Case Study: Krealogi by Du Anyam

Aji Hady Candra
7 min readSep 28, 2022

--

DTS UIX-A 32 Kelompok-1

Disclaimer: Proyek ini merupakan bagian dari program pelatihan UI/UX Design di Skilvul untuk Program Digital Talent Scholarship yang diselenggarakan oleh Kementerian Komunikasi dan Informatika. Krealogi merupakan Challenges Partner yang memberikan dukungan teknis dalam proyek ini. Perlu dicatat bahwa tim saya tidak terikat kontrak dengan Krealogi. Proyek ini akan berlangsung selama tiga bulan, mulai dari bulan Juni hingga Oktober 2022.

Pengantar

Halo, saya Aji Hady Candra, seorang pemula yang tertarik dengan UI/UX Design. Saya antusias mengikuti Program Digital Talent Scholarship di Skilvul, untuk memperdalam pengetahuan dari mentor-mentor berpengalaman. Saya berharap program ini dapat meningkatkan kemampuan desain dan mempersiapkan diri untuk terjun ke industri yang berkembang. Program ini berlangsung selama enam bulan dengan topik seperti user research, wireframing, prototyping, dan user testing.

Studi kasus yang saya ambil berasal dari Krealogi. Tujuannya adalah untuk membuat desain aplikasi yang lebih user-friendly untuk tipe pengguna Krealogi, yaitu vendor, produsen, dan penjual. Dengan aplikasi ini, diharapkan dapat membantu pengguna Krealogi dalam mencatat kegiatan operasional, membuat strategi, dan menjaga alur operasional mereka.

Dalam pengerjaan studi kasus ini, kami menggunakan kerangka kerja berbasis metode design thinking sebagai pendekatan proses UX design. Metode design thinking memberikan pendekatan berbasis solusi untuk menyelesaikan masalah yang dihadapi oleh pengguna. Dengan menggunakan metode ini, kami berharap dapat merancang desain aplikasi yang lebih efektif dan efisien untuk memenuhi kebutuhan pengguna Krealogi.

Tahapan Design Thingking

Sumber: https://visme.co/blog/wp-content/uploads/2020/03/what-is-design-thinking.gif

Tahap 1 — Empathize

Pada tahap ini, kami melakukan penelitian sekunder yang meliputi tiga hal, yaitu: mengumpulkan informasi dan melakukan analisis pesaing, mendalami produk yang diinginkan oleh Challenge Partner, dan mengumpulkan informasi mengenai pengalaman pengguna aplikasi.

Pertama, kami melakukan pencarian dan pengumpulan informasi mengenai pesaing dan aplikasi serupa melalui internet dan sumber-sumber lainnya, untuk memberikan gambaran dan perspektif terhadap pasar dan aplikasi sejenis yang sudah ada. Kedua, kami mendalami produk yang diinginkan oleh Challenge Partner untuk memahami tujuan dan kebutuhan aplikasi yang dibutuhkan.

Terakhir, kami melakukan analisis pengalaman pengguna aplikasi melalui pengumpulan informasi tentang kesulitan dan permasalahan yang dihadapi oleh pengguna, melalui artikel dan studi kasus, serta menjelajahi aplikasi pesaing sebagai perbandingan. Dari proses ini, kami berharap mendapatkan informasi yang cukup untuk memahami kesulitan yang dihadapi oleh pengguna dan menentukan arah pengembangan aplikasi yang dibutuhkan.

Tahap 2 — Define

Setelah melakukan penelitian dan observasi atas masalah-masalah yang dihadapi pengguna, langkah selanjutnya adalah menentukan pain point atau masalah utama yang paling dirasakan oleh pengguna. Pain point ini kemudian dapat dikelompokkan menggunakan affinity diagram untuk menghasilkan ide-ide yang dapat membantu menyelesaikan masalah-masalah tersebut. Tahap ini sangat penting karena ide-ide yang dihasilkan akan menjadi landasan untuk merancang solusi yang tepat dan efektif bagi pengguna.

  • Paint Poin
Paint Poin — DTS UIX-A 32 Kelompok-1
  • How-Might We
How-Might We — DTS UIX-A 32 Kelompok-1
  • Affinity Diagram
Affinity Diagram — DTS UIX-A 32 Kelompok-1

Berdasarkan hasil pembuatan affinity diagram, terdapat beberapa topik yang menjadi fokus dalam perancangan solusi UI/UX untuk aplikasi Krealogi. Beberapa topik tersebut antara lain Proses Pesan Barang, Finalisasi Pesanan, Tips & Trick Penggunaan, serta Dasboard Statistik. Ide-ide yang dihasilkan dari topik-topik tersebut akan menjadi landasan dalam merancang solusi yang tepat dan efektif bagi pengguna Krealogi.

Tahap 3 — Ideate

Pada tahap ideate dalam design thinking, kami menciptakan beragam ide-ide solusi untuk mengatasi masalah yang telah diidentifikasi. Ide-ide tersebut kemudian dikelompokkan dan diprioritaskan berdasarkan dampaknya pada pengguna dan tingkat usaha yang diperlukan untuk merealisasikannya. Proses pemilihan dan prioritisasi ide-ide ini akan membantu kami menentukan solusi yang paling efektif dan layak untuk diimplementasikan dalam perancangan UI/UX aplikasi Krealogi.

  • Ide Solusi

Pada tahap ideate, kami mengumpulkan ide-ide solusi berdasarkan pertanyaan how-might-we, yaitu: Bagaimana kita dapat membantu pengguna mengelola pesanan, pembayaran, dan customer dengan lebih efisien? Bagaimana kita dapat membuat pengguna lebih mudah untuk mengoperasikan aplikasi dan memahami tujuannya? Bagaimana kita dapat mempermudah pengguna dalam menganalisis penjualan produk dan meningkatkan kinerja bisnis mereka? Dari ide-ide ini, kami kemudian mengklasifikasikan ide-ide solusi ke dalam diagram prioritas berdasarkan efek pada pengguna dan usaha yang diperlukan untuk membuatnya.

Ideation— DTS UIX-A 32 Kelompok-1
  • Diagram Prioritas

Ide solusi kemudian dikelompokkan ke dalam diagram prioritas, di mana akan dipilih yang akan dilakukan terlebih dahulu dan yang akan dilakukan setelahnya.

Prioritization Idea— DTS UIX-A-32 Kelompok-1

Dari tahap ini, akan menjadi fokus utama dalam pengembangan fitur untuk pengelolaan produk dan fitur menu statistik terlebih dahulu untuk dilakukan sekarang. Setelahnya akan dilakuakan dalam pengembangan fitur kontak serta dan tips & trik.

Tahap 4 — Prototype

Pada tahap ini mendefenisikan proses yang akan dilakukan oleh pengguna ketika melakukan suatu proses, kemudian dari user flow akan divisualisasikan kedalam pembuatan wireframe. Pada wireframe berisikan tampilan antarmuka pada halaman aplikasi, selanjutnya akan dibuat UI styleguide yang berisikan komponen. Tiap kompenen nantinya akan saling berinteraksi menjadi sebuah rangkaian tampilan yang dapat diuji oleh pengguna. Di tahap ini akan melakukan 3 hal, yaitu:

  1. User Flow
  2. Wireframe
  3. Prototyping
  • User Flow

Pada studi kasus ini, kami membuat 4 alur pengguna, yaitu Penambahan Produk Baru, Penambahan Subkategori Produk, Filter Produk, dan Statistik.

User Flow — UIX-A-32 Kelompok-1
  • Wireframe

Berdasarkan dari proses yang terdapat pada user flow, selanjutnya membuat visualisasi ke dalam wireframe untuk seluruh user flow.

  1. Wireframe Halaman Beranda, Produk, Detail, Filter, Tambah Produk, Tambah Subkategori, dan Hapus Produk
Wireframe — UIX-A-32 Kelompok-1

2. Wireframe Statistik

Wireframe (Statistik) — UIX-A-32 Kelompok-1
  • UI Styleguide

Sebelum memulai menyelesaikan keseluruhan desain, terlebih dahulu untuk membuat komponen UI Styleguide yang nantinya dapat digunakan secara berulang dalam pembuatan desain antarmuka pengguna.

UI Styleguide — UIX-A-32 Kelompok-1
  • Tampilan Antar Muka Pengguna

Tampilan antar muka pengguna yang kami buat dengan beberapa penyesuaian dari wireframe yang telah dibuat sebelumnya.

Tampilan Antar Muka — UIX-A-32 Kelompok-1
  1. Tampilan Antar Muka Beranda, Produk, Filter, Detail, Edit Harga/Stok, dan Hapus Produk
Tampilan Antar muka — UIX-A-32 Kelompok 1

2. Tampilan Antar Muka Tambah Produk dan Subkategori

Tampilan Antar Muka Halama Tambah Produk — UIX-A-32 Kelompok 1

3. Tampilan Antar Muka Halaman Statistik

Tampilan Antar Muka Halama Statistik— UIX-A-32 Kelompok 1
  • Prototyping

Kami membuat prototyping dengan Figma dan memberikan interaksi antar komponen. Prototype ini menguhubungkan menghubungkan dari keseluruhan fitur yang dibuat. Berikut untuk tampilan prototyping yang kami buat:

Prototyping— UIX-A-32 Kelompok 1

Tahap 5 — Testing

Pada tahap akhir ini bertujuan untuk menguji aplikasi, apakah aplikasi dalam bentuk prototype mudah dimengerti atau tidak dari pengguna. Dalam pengujian ini dilakukan user research sebagai indikator keberhasilan pengembangan fitur. User research dilakukan dengan metode In-depth interview dan usability testing pada prototype.

Kami mengadakan sesi In-depth interview dan usability testing dengan satu responden, seseorang yang dulu pernah punya usaha toko pakaian dan saat ini sedang rehat karna beberapa hal. Respondan diarahkan untuk melihat bagaimana pengalaman mereka saat menggunakan aplikasi dalam bentuk prototype. Karna cukup efektif untuk mengumpulkan wawasan dari pengguna.

Respon dari pengguna untuk aplikasi ini cukup bagus, dari usability testing yang kami lakukan responden menyarankan pada menu statistik agar bisa dilengkapi lagi untuk grafik minimal mewakili dari fungsi masing-masing.

Perbaikan

Karena dari masing-masing ide kami masih ada responden yang belum memberikan nilai dalam rentang lulus, maka kami perlu melakukan perbaikan desain antarmuka, diantaranya:

  • Memastikan bahwa pada fungsi dasar seperti tombol navigasi ‘kembali’ dan tombol-tombol vital lainnya (pilihan jenis statistik) dapat digunakan pada prototype
  • Membuat seragam letak tombol ‘tambah’, terutama pada desain antarmuka penambahan produk dan subkategori produk
  • Memberikan keterangan ‘preview’ pada saat mengunduh hasil statistik
improvment — UIX-A-32 Kelompok 1

Penutup

Setelah melalui proses awal sampai akhir proyek ini dapat diselesaikan. Tentunya begitu banyak ilmu dan pembelajaran yang saya dapatkan. Saya mengucapkan terima kasih kepada Kementerian Komunikasi dan Informatika yang sudah memfasilitasi Program Digital Talent Scholarship, Skilvul sebagai platform belajar online yang telah memberikan materi pembelajaran yang sangat baik dan bermanfaat.

Terima kasih telah meluangkan waktu untuk membaca studi kasus ini. Saya menyadari masih banyak kekurangan, dan masih harus lebih banyak belajar. Untuk itu silahkan dapat tinggalkan umpan balik yang membangun pada bagian komentar. Terima kasih!

--

--