Redesign dan Pengembangan Fitur CRM Aplikasi Krealogi — UX Case Study
Proyek ini merupakan bagian dari program pelatihan UI/UX yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia bekerjasama dengan Skilvul. Krealogi merupakan Challenge Partner. Saya TIDAK bekerja atau dikontrak secara profesional oleh Krealogi.
Pendahuluan
PT Karya Dua Anyam yang lebih dikenal dengan sebutan Du Anyam mempersembahkan aplikasi untuk membantu UMKM dalam manajemen kegiatan produksi sampai penjualan, aplikasi ini diberi nama krealogi. Krealogi bisa dimanfaatkan oleh berbagai macam usaha, seperti pengusaha kriya, online shop, penjual makanan, pengrajin, dan sebagainya. Fitur yang telah ada yaitu pencatatan produksi, pesanan, keuangan. Pengguna krealogi dapat memanajemen proses produksi, pesanan, sampai keuangan lewat gawainya.
User Persona
Fitur yang Diinginkan
Fitur yang diinginkan oleh partner adalah
- Simple Customer Relationship Management
Fitur catat pesanan masuk baru memprovide catatan pesanan masuk
Kartu Nama
- Cash Flow Feature
Fitur rangkuman usaha (arus kas sederhana) yang meliputi performa bisnis dan produksi
- Integration with Logistic and Marketplace
Catat pesanan masuk akan lebih mudah digunakan jika terintegrasi langsung dengan logistik sehingga baik user maupun konsumen dapat melakukan monitoring yang lebih tepat atas pesanannya
Proses Pengerjaan Proyek
Pengerjaan proyek ini merupakan hasil dari kolaborasi seluruh anggota tim. Tim terdiri dari 5 orang yaitu Aji Hady Chandra, Rhezka Yoga, Hardisal, Maratussholikhah Nurazizah, dan Dewi Puspitasari. Tugas dan tanggungjawab seluruh anggota tim terhadap proyek ini, yaitu:
- Mengumpulkan ide-ide solusi,
- Membuat User Flow dan Wireframe,
- Membuat tampilan antar-muka pengguna,
- Membuat Prototype, dan
- Melakukan Usability Testing.
Proses UI UX Design
Proses ui ux merupakan alur yang dinamis sesuai dengan kebutuhan user. Sehingga setiap proses dapat kembali ke proses sebelumnya, apabila terjadi ketidaksesuaian saat pengerjaan.
Tahap 1 — Empathize
Tahap pertama dalam proses Design Thinking adalah Empathize. Empathize digunakan untuk memahami kebutuhan pengguna melalui riset. Metode riset yang dilakukan melalui competitor analysis, feedback user play store, rekaman sesi AMA, dan mendalami produk yang diinginkan challenge partner.
Berdasarkan hasil diskusi kelompok, maka dipilihlah fitur Customer Relationship Management (CRM). Permasalahan yang dihadapi oleh pengguna krealogi yaitu user kebingungan tujuan dan alur penggunaan aplikasi, user terlalu memakan banyak waktu dalam menghubungi pelanggan dan pencatatan pesanan karena dilakukan melalui dua aplikasi.
Tahap 2— Define
Setelah mengetahui dan mendapatkan informasi mengenai hal yang dibutuhkan oleh pengguna, proses dilanjutkan ke tahap selanjutnya, yaitu Define. Pada tahap ini, ditentukan Pain Points dari pengguna, kemudian dikelompokkan dalam Affinity Diagram. Kemudian, topik utama permasalahan akan dibuat menjadi satu ide tujuan untuk dapat menyelesaikan permasalahan tersebut.
Pain Points
Untuk mengumpulkan Pain Points pengguna, dilakukan pemahaman terhadap informasi pengalaman pengguna, dan disimpulkan menjadi kemungkinan-kemungkinan poin kesulitan pengguna.
Affinity Diagram
Setelah didapatkan pain points, kemudian dikelompokkan berdasarkan topik utama permasalahan.
How-Might-We
Untuk setiap topik utama permasalahan, diajukan sebuah tujuan untuk menyelesaikan masalah dalam topik tersebut. Diagram ini disebut How-Might-We.
Tahap 3— Ideate
Setelah seluruh target tujuan ditentukan pada How-Might-We dalam tahap Define, proses dilanjutkan ke tahap Ideate. Pada tahap ini akan dibuat ide-ide solusi terhadap target tujuan. Kemudian, ide-ide solusi tersebut akan diklasifikasi ke dalam diagram prioritas berdasarkan efek pada pengguna dan usaha yang diperlukan untuk membuatnya.
Solusi Ide
Seluruh anggota tim mengumpulkan ide-ide solusi terkait fitur atau fungsi yang dapat menyelesaikan target tujuan pada sticky notes. Beberapa ide yang mirip akan dikelompokkan menjadi satu.
Diagram Prioritas
Ide-ide solusi kemudian dikelompokkan ke dalam diagram prioritas. Diagram prioritas adalah diagram cartesius, dengan sumbu x merepresentasikan usaha yang diperlukan untuk membuat solusi tersebut, dan sumbu y merepresentasikan efeknya terhadap pengguna. Sehingga dalam diagram terbagi menjadi 4 kuadran, kuadran “Lakukan Sekarang” pada bagian atas kiri dengan efek pengguna tinggi dan usaha kecil, kuadran “Lakukan Setelahnya” pada bagian atas kanan dengan efek pengguna besar dan usaha besar, kuadran “Lakukan Nanti” pada bagian bawah kiri dengan efek pengguna kecil dan usaha kecil, dan kuadran “Lakukan Terakhir” pada bagian bawah kanan dengan efek pengguna kecil dan usaha besar.
Tahap 4— Prototype
Pada tahap Prototype akan dilakukan pembentukan fitur secara nyata dengan membuat Task Flow. Task Flow mendefinisikan proses yang dilalui oleh pengguna ketika melakukan suatu proses. Kemudian, Task Flow akan divisualisasi melalui pembuatan Wireframe. Selanjutnya, Wireframe akan dibuat menjadi sebuah desain antar-muka pengguna yang high-fidelity, dan dibuat interaksi antar komponennya, sehingga menjadi sebuah rangkaian tampilan yang dapat diuji pada pengguna. Dalam pembuatan tampilan antar-muka, perlu didefinisikan sebuah UI Styleguide yang berisi komponen-komponen yang digunakan secara berulang. Pembuatan UI Styleguide membantu untuk menjaga konsistensi keseluruhan tampilan antar-muka pengguna.
Task Flow
Task flow atau bisa saja disebut dengan user flow berdasarkan solusi ide yang ingin dikembangkan pada proyek ini.
Task Flow Tambah Produk Baru
Menggambarkan proses yang dapat dilakukan oleh pengguna pada fitur tambah produk.
Task Flow Tambah SubKategori
Menggambarkan proses yang dapat dilakukan oleh pengguna dalam menambahkan subkategori produk yang diproduksi.
Task Flow Sorting dan Filtering Data Produk
Menggambarkan proses untuk mempermudah user dalam menemukan produk sesuai kebutuhan.
Wireframe
Kemudian, Wireframe dibuat sesuai dengan Task Flow. Proses-proses yang terdapat pada Task Flow divisualisasikan ke dalam Wireframe dalam bentuk umum.
UI Styleguide
Setelah membuat Wireframe, maka dapat terlihat komponen-komponen yang digunakan berulang. Komponen-komponen ini harus dibuat menjadi komponen pada UI Styleguide, yang kemudian akan digunakan pada pembuatan tampilan antar-muka pengguna.
Komponen UI Styleguide terbagi menjadi 2, yaitu atom dan molekul. Pada tahap atom, komponen yang dibuat adalah warna, typography, iconography, tombol, dan text field. Beberapa jenis komponen yang sama digabungkan menjadi satu variant.
Warna
Typography
Tombol
Text Field
Header Halaman
Tampilan Antar-Muka Pengguna
Tampilan antar-muka pengguna dibuat oleh masing-masing anggota tim berdasarkan Task Flow yang dibuatnya. Namun, konsistensi desain juga tetap harus terjaga dengan dilakukannya pertemuan secara rutin untuk mendiskusikan keterhubungan masing-masing desain. Beberapa perubahan perlu dilakukan pada komponen UI Styleguide, untuk menyesuaikan penggunaannya selama pembuatan tampilan antar-muka pengguna.
Akhirnya, hasil akhir dari tampilan antar-muka telah lengkap dan siap untuk disematkan interaksi pada komponen-komponen yang berfungsi untuk menghubungkan ke halaman atau proses tertentu.
Prototyping
Prototype dibuat dengan menghubungkan komponen-komponen tertentu yang dapat berfungsi sebagai pemicu interaksi ke komponen atau halaman lain. Prototype menghubungkan keseluruhan fitur yang dibuat pada proyek ini.
Tahap 5— Test
Setelah melewati tahap pembuatan tampilan secara menyeluruh, perlu dilakukan User Research sebagai indikator keberhasilan pengembangan fitur. User Research dilakukan dengan metode In-depth Interview dan Usability Testing pada prototype.