UI/UX Case Study — Pengembangan Fitur CRM pada Aplikasi Krealogi

Halo! kembali lagi dengan saya, Hasna Zakiyyah 😁 Masih berhubungan dengan program magang saya di Skilvul, kali ini saya akan menjelaskan secara runtut terkait pengerjaan UI/UX design berdasarkan mitra challenge yang saya pilih yaitu Krealogi. Sebagai disclaimer, saya tidak bekerja sama atau dikontrak secara langsung oleh Krealogi melainkan hanya mengerjakan challenge pelatihan yang diberikan oleh Skilvul dibawah program Kampus Merdeka.

Latar Belakang

Krealogi adalah sebuah aplikasi yang menawarkan solusi bagi para UMKM untuk mengembangkan kemampuan dan keterampilan usaha, membantu pencatatan kegiatan operasional dan membuat perencanaan strategis. Krealogi berawal dari pengalaman menjalankan UMKM kriya sejak 2015 yaitu Du Anyam, sehingga mereka sudah sangat memahami kendala UMKM dalam manajemen pesanan, produksi, persediaan, sampai pengiriman.

Setelah melalui banyak perkembangan, Krealogi akhirnya semakin banyak digunakan oleh para UMKM dengan tipe usaha yang beragam seperti dari bidang fashion dan kuliner. Dengan begitu, Krealogi perlu menyesuaikan aplikasi sehingga dapat digunakan oleh seluruh UMKM di Indonesia. Namun, terdapat kendala lain yang sering ditemui oleh Krealogi dimana para UMKM masih belum siap untuk melakukan “scale up”, misalnya kenaikan pesanan yang terlalu tinggi, produksi yang semakin banyak serta dapat mempengaruhi besar modal serta transaksi usaha. Sehingga, Krealogi ingin memberikan wadah bagi para UMKM untuk dapat mengelola semua pencatatan yang berkaitan dengan bisnis mereka.

Aplikasi krealogi pada saat ini memiliki 5 fitur utama yaitu inventori, rencana produksi, catat pesanan masuk, catat pengeluaran/pemasukan, dan laporan. Kelompok SVI kami diberikan tantangan untuk mengembangkan salah satu fitur yang belum tersedia pada aplikasi Krealogi diantaranya adalah CRM, Cashflow, dan Intergasi Logistik. Kami menentukan fitur yang akan dipilih melalui prioritas tingkat user value dan kemudahan effort. Dari hasil tersebut, diambil keputusan bahwa kami akan mengembangkan fitur-fitur CRM pada Aplikasi Krealogi.

Objective Goals

1. Mengembangkan fitur-fitur CRM (Customer Relationship Management) yang mudah dipahami oleh pengguna pada aplikasi Krealogi
2. Mengetahui kebutuhan pengguna dalam melakukan pengelolaan pesanan dan manajemen pelanggan
3. Mengetahui tingkat kemudahan pengguna dalam menggunakan aplikasi Krealogi dengan pengukuran SEQ (Single Ease Question)

Peran dalam Tim

Dalam menyelesaikan UI/UX case study ini, saya berkolaborasi dengan ketiga anggota tim lainnya yang terdiri dari Rahmat Ramadhan, Kofifah Naaliah Halim, dan Givar Elva Rizky H. Kami melakukan pendekatan Focus Group Discussion (FGD) untuk menyelesaikan setiap tahapan proses design thinking dimulai dari user problem research, brainstorming ide dan solusi, pembuatan user flow, wireframe, user interface, dan testing. FGD sendiri adalah teknik yang digunakan untuk mengumpulkan semua anggota dan membahas suatu topik tertentu yang spesifik dimana semua anggota dapat mengutarakan pendapat dan pada akhirnya dapat diambil suatu kesimpulan berdasarkan topik yang ditentukan.

Design Process

Pada studi kasus kali ini kami melakukan design process dengan menggunakan metode design thinking. Design thinking adalah proses memahami kebutuhan pengguna dan menyelesaikan masalah dengan solusi yang praktis dan kreatif. Terdapat beberapa tahapan dalam metode design thinking yaitu empathize, define, ideate, prototype, dan test.

Source: https://uxplanet.org/wondering-if-design-thinking-works-102e7b3a3604

Tahap 1 — Empathize

Tahap empathize adalah proses untuk memahami permasalahan yang dihadapi oleh pengguna dengan didasarkan pada rasa empati. Pada tahap ini, kami melakukan pencarian data informasi terkait permasalahan yang bersumber dari pengguna. Kami menggunakan beberapa metode secondary research untuk mengumpulkan informasi tersebut. Pertama, kami mengikuti sesi temu dengan mitra challenge dimana kami mendapatkan insight terkait bagaimana proses bisnis krealogi, tipe pengguna, kondisi aplikasi saat ini, dan kebutuhan pengguna berdasarkan riset oleh Krealogi sendiri. Terdapat 4 tipe pengguna yang didasarkan pada kondisi pengguna ketika dihadapkan dengan teknologi baru.

Kami juga mendapatkan beberapa informasi terkait kondisi aplikasi Krealogi dan kebutuhan pengguna yang berhubungan dengan fitur-fitur CRM yaitu sebagai berikut.

Condition:

• User tidak memiliki database pelanggan
• Catatan manual dan simpan kontak whatsapp
• User menemui kendala untuk melakukan dua aktivitas sekaligus: mengecek catatan penjualan dan menghubungi konsumen
• Penyimpanan data konsumen pada aplikasi diharapkan dapat membantu user dalam mengetahui siapa saja konsumennya untuk melakukan penjualan berdasarkan data penjualan yang sudah tercatat

Needs:

• Fitur catat pesanan masuk baru memprovide catatan pesanan masuk, namun database klien belum dapat tersimpan sehingga hal ini menjadi peluang sebagai fitur tambahan yang mendukung kemudahan penjualan produk oleh user
• Kartu Nama

Kedua, kami melihat review dari beberapa aplikasi serupa untuk menganalisis masalah pengguna. Ketiga, kami melihat beberapa aplikasi kompetitor yang sudah menggunakan fitur CRM untuk menganalisis peluang apa yang bisa kita gunakan untuk mengembangkan fitur CRM pada aplikasi Krealogi.

Tahap 2 — Define

Tahap define adalah proses dimana kita sudah mengetahui dan dapat menjelaskan permasalahan pengguna. Pada tahapan ini kami mengumpulkan semua permasalahan pengguna yang telah ditemukan pada tahap empathize. Permasalahan yang dialami pengguna disebut juga dengan pain points dimana dapat digunakan untuk brainstorming dalam menentukan solusi. Pain points kami tuliskan secara singkat menggunakan sticky notes dari tools Figjam.

Kemudian kami mengelompokkan setiap pain points sesuai dengan kategori permasalahan yang kami tuliskan pada Affinity Diagram. Affinity Diagram dapat membantu untuk memetakan kumpulan informasi menjadi kelompok yang lebih spesifik. Terdapat 5 kategori permasalahan yang ditemukan yaitu Logistik, CRM, Cashflow dan Performa, Gudang, dan Tampilan.

Berikutnya adalah menentukan masalah utama dari setiap kategori. Ditahap inilah brainstorming diperlukan. Untuk menentukan masalah utama tersebut kami menggunakan pendekatan How Might We (HMW) yaitu membuat pertanyaan yang akan memudahkan kami untuk menggali ide-ide solusi namun masih belum spesifik pada solusi yang ingin dibuat. Contohnya pada kategori CRM adalah “Bagaimana cara memudahkan pengguna agar dapat selalu terhubung dengan pelanggan atau vendor?”

Tahap 3 — ideate

Tahap ideate adalah proses dimana kita perlu berpikir secara out of the box untuk mencari solusi dari permasalahan pengguna. Pada tahapan ini masing-masing dari kami menuliskan ide-ide solusi yang ingin dibuat berdasarkan HMW yang telah dibuat sebelumnya. Kami melakukan brainstorming dengan cara bergantian menjelaskan solusi apa yang akan dibuat lalu untuk menetapkan beberapa solusi yang tepat untuk memecahkan setiap permasalahan dari HMW.

Setelah menetapkan ide solusi, kami memprioritaskan setiap ide dengan menggunakan Prioritization Idea Matrix dimana matriks dibagi menjadi 4 bagian, dengan variabel vertikal yaitu user value dan variabel horizontal yaitu effort. Semakin keatas maka semakin tinggi user value yang didapatkan dan semakin kekanan maka semakin tinggi usaha yang perlu dilakukan.

Pada kotak “Yes, do it now” atau kotak dengan user value paling tinggi dan usaha paling rendah berisikan 6 solusi terkait dengan fitur CRM. Oleh karena itu, kami memutuskan untuk mengembangkan beberapa fitur CRM pada aplikasi Krealogi.

Setelah itu kami masing-masing membuat tampilan crazy 8’s berdasarkan ide solusi akhir. Saya membuat crazy 8’s dengan flow mulai dari daftar kontak pelanggan, informasi kontak pelanggan, sampai integrasi kontak saat mencatat pesanan. Dilanjutkan dengan setiap orang menjelaskan setiap halaman yang telah dibuat lalu kami memberikan voting pada setiap halaman yang ingin kita gunakan pada tahapan berikutnya.

Tahap 4 — Prototype

Tahap prototype adalah proses mengubah ide solusi menjadi produk uji coba. Pada tahapan ini kami melakukan pembuatan user flow, wireframing, UI style guide, dan UI Interface dan UI prototype.

User Flow

User flow berguna dalam mendeskripsikan serangkaian langkah yang harus dilakukan oleh pengguna. Pada tahapan ini kami masing-masing membuat user flow berdasarkan solusi sebelumnya dan dari diskusi yang dilakukan, akhirnya kami mendapatkan 7 flow utama terkait dengan fitur kontak, kartu nama, dan integrasi catatan pesanan.

1. Menambahkan kontak pelanggan

2. Mengedit kontak dan menghubungi konsumen lewat kontak

3. Mencatat pesanan berdasarkan kontak dan alamat pelanggan

4. Menambah dan Membagikan kartu nama

5. Mengedit Kartu Nama

6. Menghubungi pelanggan saat pesanan sedang berjalan

7. Mengirimkan notifikasi tagihan pembayaran dan resi pengiriman

Wireframing

Setelah user flow dibuat, kami membuat wireframe yang dapat menjadi gambaran awal untuk desain user interface. Pada tahapan ini kami mengatur tata letak penempatan informasi, fitur, dan navigasi pada setiap halamannya sehingga akan mempermudah tahap pembuatan user interface.

UI Styleguide

Sebelum membuat user interface, kami membuat UI styleguide dan beberapa komponen terlebih dahulu sehingga dapat menghemat waktu dan memberikan kekonsistenan pada elemen-elemen UI. Pada aplikasi Krealogi terdapat beberapa komponen tetap seperti warna primary color yaitu deep magenta dan grey serta typeface menggunakan Gotham.

Lalu berikut beberapa komponen yang kami gunakan diantaranya yaitu input field dengan komponen variasi empty, active, filled, disable dan error serta tabbing dan button dengan komponen variasi regular, medium, dan small.

UI Interface

UI interface merupakan tampilan visual dari sebuah produk dengan memaksimalkan usability dan user experience. Dalam mendesain user interface kami memanfaatkan komponen styleguide yang telah dibuat sebelumnya. Berikut adalah tampilan dari fitur-fitur yang telah kami buat.

Pada tampilan beranda kami melakukan beberapa re-design. Notifikasi pada bagian atas dapat memberikan pengingat bagi pengguna seperti batas akhir produksi, pengiriman barang dan lain sebagainya. Berikutnya terdapat 3 fitur utama yang akan sering digunakan oleh pengguna yaitu Pesanan Masuk, Rencana Produksi, dan PO Berjalan. Di bawahnya lagi terdapat 4 fitur yaitu Produk untuk melihat informasi produk, Keuangan untuk melihat alur kas penjualan, riwayat untuk melihat pesanan yang telah selesai, dan kontak untuk melihat informasi pelanggan. Dilanjutkan dengan kartu event UMKM dimana pengguna dapat mengikuti pelatihan untuk meningkatkan profesionalisme usaha. Terakhir terdapat navigation bar yang terdiri dari Beranda, Gudang untuk melihat daftar produk tersedia maupun dalam produksi, Tambah Catatan untuk pesanan atau produksi baru, Performa untuk melakukan analisis penjualan, dan Profil. Penomoran pada gambar dimaksudkan untuk memberi tahu flow mana saja yang akan digunakan dan dikembangkan lebih lanjut.

Daftar kontak berisi database pelanggan dimana sebelumnya pengguna dapat melakukan sinkronisasi dengan kontak pada perangkat. Kami menambahkan Input pencarian dan filter Pelanggan atau Vendor sehingga pengguna dapat mencari pelanggan dengan mudah. Pada Informasi Kontak, kami menambahkan informasi kode nomor pelanggan atau vendor serta loyalitas untuk melihat seberapa penting pengaruh pelanggan tersebut terhadap usaha yang dimiliki. Pengguna dapat menghubungi pelanggan dengan mudah melalui icon whatsapp, email atau telepon. Kami juga memberikan tabbing sehingga pengguna dapat melihat informasi general, melihat pesanan pelanggan tersebut, dan dapat menambahkan catatan khusus.

Pada penambahan kontak, kami membagi halaman menjadi 3 langkah sehingga pengguna tidak perlu scroll terlalu jauh. Langkah pertama berisi informasi general terdapat foto profil, nama, status pelanggan atau vendor, nomor HP dan email. Langkah kedua berisi alamat kantor dan langkah ketiga berisi alamat kirim dimana pengguna dapat melakukan checklist jika alamat pengiriman sama dengan alamat kantor.

Pengeditan kontak bisa diakses melalui icon edit di kanan atas pada halaman informasi kontak. Pengeditan kontak berisi informasi yang sama seperti saat akan menambahkan kontak pelanggan baru.

Pada pencatatan pesanan, kami membagi halaman menjadi 3 langkah yaitu Pengiriman, Produk, dan Ringkasan. Pada langkah pengiriman, pengguna dapat langsung memilih kontak pada database pelanggan atau juga dapat menambahkan kontak baru. Ketika kontak sudah dipilih maka pengguna dapat memilih apakah alamat pengirim ingin disesuaikan dengan alamat kontak atau dapat menulis secara manual. Terakhir pengguna memilih tanggal pengiriman produk.

Pembuatan kartu nama dapat diakses melalui menu navigasi Profil dan Kartu Nama tersedia pada tab Informasi. Pengguna dapat memilih 2 cara untuk membuat kartu nama yaitu menuliskan informasi kartu nama secara manual atau mengupload kartu nama yang sudah tersedia pada perangkat HP. Kami memberikan preview gambar untuk memudahkan pengguna dalam memeriksa kartu nama yang baru dibuat.

Setelah kartu nama dibuat, maka pengguna dapat membagikan kartu nama tersebut ke pelanggan menggunakan API dari whatsapp atau email. Selain membagikan kartu nama, pengguna juga dapat mengunduh kartu nama ke dalam perangkat HP.

Pengeditan kartu nama dapat diakses melalui icon edit di kanan atas pada halaman Kartu Nama. Pengguna juga dapat memilih untuk mengupload kartu nama yang sudah dimiliki atau mengubah kartu nama secara manual.

Ketika pengguna selesai mencatat pesanan, maka daftar pesanan akan muncul pada catatan pesanan masuk. Pada kartu daftar pesanan terdapat nama pelanggan, produk, kuantitas produk, status pembayaran, status pengiriman, dan tanggal pengiriman. Kasus yang dapat terjadi adalah ketika pengguna melihat ada permasalahan pada salah satu pesanan lalu pengguna ingin menghubungi pelanggan tersebut maka pengguna dapat menghubungi pelanggan dengan cara memilih pesanan dan pada bagian paling bawah pengguna memilih salah satu metode hubungi melalui whatsapp atau email.

Ketika pengguna melihat terdapat pesanan yang belum lunas, maka pengguna dapat mengirimkan notifikasi kirim tagihan melalui whatsapp atau email dengan output berupa bot pesan teks kirim tagihan yang disesuaikan dengan nominal yang belum terbayar. Setelah pengguna mendapat bukti pembayaran maka dapat diunggah ke dalam aplikasi dan pengguna dapat melakukan konfirmasi pembayaran.

Setelah barang dikirm sesuai jadwal pengiriman, maka pengguna dapat melakukan konfirmasi pengiriman dengan memasukkan input nama ekspedisi dan nomor resi pengiriman untuk mempermudah pelacakan barang. Setelah konfirmasi pengiriman berhasil dilakukan, maka terdapat informasi bahwa nomor resi telah dikirimkan kepada pelanggan sehingga pelanggan dapat melacak barang tersebut tanpa perlu khawatir.

UI Prototype

UI prototyping adalah bentuk dari tampilan produk akhir namun belum secara nyata dimana dapat digunakan untuk mencoba dan mensimulasikan bagaimana user dapat berinteraksi dengan user interface.

Tahap 5 — Testing

Tahap testing adalah proses melakukan pengujian kepada user untuk menguji usability dan interface dari prototype yang telah dibuat. Metode yang kami gunakan yaitu dengan In-Depth Interview serta Usability Testing (UT). In-Depth Interview dilakukan untuk mengetahui apa saja kebiasaan dan kebutuhan responden dalam menjalani bisnis dan UT berguna untuk mengetahui apakah ada kendala pada prototype.

Sebelum melakukan testing, kami membuat stimulus user research dan template record data terlebih dahulu untuk mempermudah alur scenario testing serta pendataan hasil testing. Untuk pengukuran kami menggunakan nilai Single Ease Question (SEQ) yaitu penilaian 1–7 yang diberikan oleh user dalam mencerminkan tingkat kemudahan penyelesaian tugas pada prototype yang telah dibuat. Adapun 7 task yang perlu diselesaikan disesuaikan dengan ketujuh user flow yang telah dibuat.

Kriteria pengguna dari testing prototype kami adalah seorang wirausaha UMKM berumur 21–50 tahun yang mempunyai kemampuan yang cukup dalam menggunakan teknologi dengan tingkat ketergantungan minimal medium. Kami melakukan testing pada dua orang responden dimana responden pertama mengelola sebuah butik dengan owner berusia 33 tahun dibantu dengan asisten berusia 24 tahun serta responden kedua memiliki usaha dibidang kuliner dengan pemilik berusia 21 tahun. Dari ketujuh task sebelumnya kami mendapatkan nilai SEQ sebagai berikut.

Berdasarkan hasil SEQ tersebut, kami mendapatkan informasi dan feedback yang diberikan oleh responden yaitu pada task membuat kontak baru, responden kedua mengalami kebingungan karena mengira kontak terdapat pada bagian profile dan pada task membagikan kartu nama, responden kedua memberikan feedback untuk menambahkan fitur share ke instagram karena instagram dinilai sangat membantu untuk mengenalkan bisnis usaha pada era saat ini. Selain dari informasi dan feedback tersebut, responden mengatakan bahwa keseluruhan informasi yang diberikan pada setiap halaman sudah sesuai dengan kebutuhan.

Iterasi Desain

Dalam design thinking, terdapat tahapan yang dinamakan dengan iterasi atau pengulangan. Proses iterasi ini dapat dilakukan pada setiap tahapan design thinking, misalnya adalah setelah melakukan testing kita memperoleh feedback dari pengguna dimana dari feedback tersebut kita jadikan acuan untuk memperbaiki desain sehingga desain yang dibuat akan sesuai dengan kebutuhan pengguna.

Kesimpulan

Rata-rata SEQ dari keseluruhan prototype kami mendapatkan nilai 6,8 dimana fungsionalitas aplikasi sudah cukup mudah untuk digunakan bagi pengguna. Namun demikian, terdapat pula beberapa feedback sehingga perlu dilakukan proses perbaikan lagi untuk memaksimalkan usability dan meningkatkan pengalaman pengguna serta mendapatkan hasil yang lebih baik dari design yang telah dibuat sebelumnya. Dalam perkembangan selanjutnya, kami merekomendasikan studi kasus ini untuk dievaluasi lebih lanjut. Evaluasi yang dilakukan dapat terkait dengan analisis user research yang lebih sempurna sehingga kedepannya dihasilkan pengembangan fitur CRM yang lebih baik lagi.

Penutup

Akhirnya selesai untuk UI/UX Study Case kali ini 🎉 Terimakasih banyak untuk mentor saya dan juga tim partner saya yaitu tim 2 dari SVI-18. Terimakasih juga untuk para pembaca, semoga bisa menambah insight terkait aplikasi pencatatan usaha dan untuk Krealogi semoga dapat menjadi referensi untuk pengembangan fitur CRM kedepannya. See you~!