UI/UX Case Study | Krealogi: Fitur Customer Relationship Management (CRM)
Disclaimer ⚠️
Proyek ini bagian dari program Kampus Merdeka dengan Skilvul yaitu program Virtual Internship: UI/UX Challenge dan Krealogi sebagai challenge partner. Saya menyatakan bahwa saya tidak diikat secara langsung memiliki kontrak sebagai intern di Krealogi.
Perkenalan 👋
Halo semua, kali ini saya ingin sharing seputar proses desain yang telah saya lakukan bersama dengan tim saya yaitu Almas Sabrina Annisah yang nantinya fokus menangani fitur Catat Pesaanan, A. Fandi Akbaryang fokus menaangani fitur kartu nama, dan saya sendiri yang berfokus menangani fitur Kontak Klien pada proyek aplikasi Krealogi. Merupakan kesempatan yang sangat berharga dapat bekerjasama dengan tim yang hebat seperti mereka.
Proses desain ini dilakukan mulai dari proses brainstorming ide fitur, pembuatan userflow dan wireframe, perancangan UI Kit, Prototype, hingga melakukan interview dan testing.
Mari kita jelajahi prosesnya 🧑🏻🚀
Tentang Krealogi
Krealogi merupakan platform digital oleh Du Anyam yang berfokus pada supply chain yang bertujuan untuk mempercepat pertumbuhan UMKM. Krealogi berdasar dari pengalaman Du Anyam dalam menjalankan bisnis kriya di Indonesia.
Memahami Permasalahan 🤔
Awalnya aplikasi Krealogi didirikan sebatas untuk menangani permasalahan supply chain bagi para pengrajin tenun di NTT saja. Tetapi setelah dilihat, ternyata penggunanya beragam tidak hanya pengrajin dari NTT saja, karena hingga UMKM bidang lain pun memakai aplikasi ini pula. Dari situ akhirnya terdapat perombakan fitur-fitur untuk menyesuaikan dengan keperluan UMKM lain.
Krealogi berharap melalui aplikasinya ini dapat memecahkan kendala pada UMKM Indonesia dalam hal supply chain yang mencakup proses produksinya, pencatatan inventori, catatan masuk hingga pelaporan. Berdasarkan permasalahan dan tujuan yang ingin dicapai, maka Krealogi ingin menambahkan beberapa fitur, diantaranya adalah fitur Simple CRM, Cash Flow, dan Integrasi dengan Logistik dan Marketplace. Namun pada pembahasan kali ini, saya akan membahas lebih dalam fitur Customer Relationship Management (CRM), beserta dengan solusi yang saya dan tim berikan untuk sub fitur dari fitur tersebut.
Berikut adalah gambaran persona pengguna yang telah saya dan tim ajak wawancara untuk mengetahui permasalahannya lebih dalam
Tujuan Pemecahan Masalah 💡
Tujuan pemecahan masalah ini dapat dijelaskan melalui fitur yang akan di implementasikan yaitu
Fitur Customer Relationship Management (CRM)
Mengapa Krealogi menginginkan fitur CRM?
Berdasarkan research yang sudah dilakukan oleh pihak Krealogi, terdapat kondisi dan kebutuhan yang mengharuskan terdapat fitur CRM tersebut, dan diantara kondisi tersebut seperti
- User tidak memiliki database pelanggan
- Catatan kontak masih harus manual
- User menemui kendala untuk melakukan dua aktivitas sekaligus, seperti mengecek penjualan dan menghubungi konsumen
- Penyimpanan data konsumen pada aplikasi. Karena dengan begitu diharapkan dapat membaantu pengguna dalam mengetahui siapa saja konsumennya untuk melakukan penjualan berdasarkan data penjualan yang sudah tercatat.
Sedangkan kebutuhannya seperti
- Fitur catat pesanan masuk baru memprovide catatan pesanan masuk, namun database klien belum dapat tersimpan.
- Kartu nama
Tahapan Design Thinking 🧠
Dalam memperdalam pemahaman tentang kebutuhan dan kendala yang dialami oleh pengguna sehingga solusi yang akan dibuat sesuai dengan kebutuhaan tersebut, maka dilakukanlah tahapan Design Thinking. Tahapan tersebut dapat digambarkan sebagai berikut
Empathize
Tahap pertama dalam design thinking adalah melakukan empathize. Pada tahap ini dilakukan metode Secondary Research, yaitu metode riset yang dilakukan dengan mengumpulkan dan menganalisis data dari informasi mengenai challenge partner Krealogi beserta fitur yang akan menjadi fokus utama tim saya yaitu fitur CRM. Informasi yang saya dan tim kumpulkan diantaranya adalah data analisis kompetitor, referensi case terkait, ulasan pengguna dari playstore baik itu ulasan mengenai Krealogi maupun kompetitor, data analitik dari artikel dan data dari beberapa informasi yang sudah didapat dari partner Krealogi. Berikut adalah gambaran proses Secondary Research dengan menggunakan media spredsheet yang saya lakukan bersama dengan tim.
Setelah melalui tahap Secondary research, kesimpulan yang didapat melalui referensi fitur yang ada sehingga memungkinkan dapat diimplementasikan pada ide kami mengenai CRM adalah
- Dari segi Competitor Analysis
- Terdapat fitur kartu nama digital, beserta fitur sharing kartu nama tersebut
- Dapat menyimpan data pelanggan (memudahkan penagihan)
- Kemungkinan untuk mengirim sms, email, dan sejenisnya, karena pengguna tidak semua menggunakan whatsapp
- Dapat mendefinisikan si klien ini tipe pembayarannya bagaimana (cash, after purchasing, etc)
- Dapat mendefinisikan klien menggunakan tipe pembayaran dengan bank apa
- Dari segi Feedback User
- Jejak memori yang besar (flow nya tidak mudah diingat)
- Dari informasi AMA session bersama Krealogi
- Pengguna menemui kendala untuk melakukan dua aktivitas sekaligus: mengecek catatan penjualan dan menghubungi konsumen
- Tidak bisa menyimpan database klien
- Dari referensi case terkait
- Terdapat Segmentasi Klien (berdasar sdaerah, perilaku membeli)
Define
Pada tahap define, dijabarkan permasalahan yang dialami oleh pengguna ketika menjalani kegiatan sehari-hari yang berhubungan dengan pencatatan menggunakan aplikasi Krealogi. Permasalahan atau keluhan pengguna tersebut dapat di cantumkan dalam pain points. Berikut adalah hasil diskusi yang telah saya dan tim lakukan mengenai pain points yang dialami oleh pengguna ketika menggunakan platform Krealogi sebelum dilakukan perbaruan.
Setelah pain points dijabarkan, selanjutnya saya beserta tim melakukan brainstorming untuk menghasilkan solusi dengan melakukan how-might-we. Saya dan tim saling memberi solusi atas pain points dalam batas waktu yang ditentukan.
Kemudian hasil awal how might we yang didapat diseleksi kembali berdasarkan kemiripannya dijadikan satu. Setelah diseleksi saya bersama tim memilih how might we yang kemungkinan berpotensi dapat dilanjutkan dengan cara melakukan vote , dimana vote yang paling banyak, ide tersebut akan dilanjutkan untuk menentukan tahap solusi ide. Berikut gambarannya
Ideate
Tahap Ideate dibagi menjadi dua yaitu Solution Idea dan Affinity Diagram. Pertama-tama berdasarkan hasil vote how-might we, maka dapat di jabarkan kembali secara lebih detail ide hmw yang sudah dipilih, berikut gambaran solution idea
Berdasar hasil vote solution idea, dapat dikelompokkan ide yang sudah dipilih tersebut dan memilih sebuah judul untuk setiap kelompok ide tersebut sebagai fitur yang nantinya dapat diimplementasikan ke dalam affinity diagram. Dalam hal ini, judul untuk setiap ide kami adalah berupa Informasi klien, kartu nama, komunikasi, dan pengingat. Berikut hasil dari affinity diagram
Kemudian, langkah terakhir tahap ideate ini adalah saling mengelompokkan ide yang sudah terpilih menjadi solusi berdasarkan tingkat prioritas, yaitu
- Yes, Do It Now
- Do Next
- Do Last
- Later
Berdasar pengelompokan tersebut, setelah saya dan tim melakukan diskusi terkait prioritization idea maka didapat hasil diskusi sebagai berikut
Setelah menentukan prioritization idea saatnya melakukan crazy 8’s untuk memvisualisasikan secara cepat desain tampilan halaman berdasarkan fitur-fitur yang sudah ditentukan tadi. Langkah ini berfungsi untuk memberi gambaran awal rancangan sketsa kasar tampilan halaman fitur yang akan dibuat untuk mempermudah mendapat bayangan untuk membuat userflow di langkah berikutnya. Berikut hasil crazy 8’s saya dan tim
Prototype
Selanjutnya, setelah melalui serangkaian proses diskusi dengan tim hingga tahap ideate dan menghasilkan solusi, langkah berikutnya adalah melanjutkan ke proses design dan prototype. Sebelum dilanjutkan ke tahap implementasi ke prototype, maka kami membuat user flow terlebih dahulu untuk memperjelas langkah-langkah yang akan di lalui oleh pengguna ketika menggunakan aplikasi untuk menyelesaikan satu atau beberapa task. Pada fitur CRM ini, kami membagi user flow menjadi 3 bagian, yaitu
- Flow Catat Pesanan
- Fitur Kartu Nama
- Fitur Kontak
Dalam proses ini saya dan tim melalui 4 tahap yaitu
1. Membuat User Flow
2. Membuat Low Fidelity Prototype
Pada tahap pembuatan wireframe atau Low fidelity prototype, dilakukan pembuatan sketsa kasar baik dilakukan melaui media kertas untuk mempermudah maupun langsung dengan tools pembuatan wireframe, dalam hal ini kami membuat wireframe menggunakan figma. Berikut tampilan wireframenya
- Fitur Catat Pesanan
- Fitur Kartu Nama
- Fitur Kontak
3. Membuat UI Kit
- Color & Text Style
- Button Style
- Text Field
- Navbar & Header
- Interaction
- Icon Style
4. Membuat High Fidelity Prototype
Pada tahap High Fidelity Prototype, desain UI sudah memiliki tampilan visual yang dapat dinikmati oleh pengguna. Desain UI yang sudah jadi tersebut dapat di beri suatu interaksi sehingga menjadi prototipe.
Berikut ini adalah beberapa gambaran desain UI berdasarkan fitur-fitur yang ada
- Fitur Login dan Daftar
- Halaman Beranda dan Catat Pesanan
- Fitur Pembuatan Kartu Nama
- Fitur Tambah dan Impor Kontak
Testing
Setelah prototype jadi, maka dapat dilanjutkan untuk testing prototype tersebut kepada pengguna. Pada tahap ini saya beserta tim telah membuat dokumen stimulus testing beserta record data yang berisi berbagai instruksi bagi pengguna untuk menyelesaikan task tertentu untuk mencapai goal yang diinginkan. diantara instruksi tersebut adalah
- Mencoba melakukan pendaftaran hingga login dan membuat Kartu Nama UMKM
- Melakukan tambah kontak klien hingga berhenti di halaman kontak berhasil disimpan.
- Meminta pengguna untuk melakukan edit kontak klien yang telah tersimpan.
- Meminta pengguna untuk melakukan hapus kontak hingga berhenti di halaman kontak berhasil di hapus
- Melakukan impor kontak hingga berhenti di halaman impor kontak dari ponsel pengguna.
- Meminta pengguna untuk membuka halaman Beranda dan melakukan Catat Pesanan hingga berhenti di halaman Beranda.
Dari testing tersebu, pengguna menanggapi dengan positif fitur CRM yang sudah dibuat sehingga dapat lebih mempermudah pengguna dalam memanajemen pencatatan penjualannya dengan lebih baik. Tetapi terdapat pula beberapa tanggapan, iterasi dan tambahan dari pengguna terhadap fitur yang sudah saya dan tim buat, sehingga dapat menjadi perbaikan bagi kami, diantaranya
- Pada halaman kartu nama bagian template, pengguna tidak mengetahui bahwa bagian itu bisa di scroll secara horizontal. Dari situ dapat disolusikan dengan memberi tombol chevron right, yang bisa dipencet ataupun di scroll untuk melihat lebih banyak template. Hasil iterasinya dapat dilihat seperti dibawah ini
- Pada halaman hapus kontak, menurut pengguna lebih baik lagi jika ditambahkan interaksi ketika menghapus kontak, seperti slide ke kiri untuk menghapus kontak, jadi tidak harus membuka detail kontak untuk menghapus kontak. Hasil iterasinya dapat dilihat seperti dibawah ini
Terdapat perubahan posisi pula pada tombol tambah baru dan impor kontak, dikarenakan, fitur tambah baru lebih diutamakan bagi pengguna. Selain itu pada gambar diatas, tidak terlalu terlihat perbedaannya, karena perbedaannya terdapat pada interaksinya ketika dijalankan pada prototype, berikut adalah proses untuk membuat interaksi hapus kontak tersebut
Hasil System Usability Scale
Berdasarkan hasil diatas, jika dihitung berdasarkan rumus dari metode perhitungan SUS, maka didapatkan hasil score per nomor mulai dari nomor 1 sebagai berikut:
3+4+3+4+4+4+4+4+3+2 = 35
Final Score -> 35 x 2,5 = 87,5 (Lulus)
Berdasarkan hasil SUS diatas, didapat score sebesar 87,5.
Menurut gambar yang bersumber dari UIUXTrend seperti dibawah ini
Maka dapat disimpulkan bahwa prototype yang sudah saya dan tim buat termasuk dalam kategori Excellent atau sangat baik.
Kesimpulan
Setelah dilakukan testing , didapatkan nilai SUS sebesar 87,5 sebagai metode pengukuran usability atau menilai tingkat kemudahan suatu fitur produk berdasarkan pengalaman pengguna. Maka dapat disimpulkan bahwa prototype yang sudah saya dan tim buat termasuk dalam kategori Excellent atau sangat baik.
Walaupun begitu, masih terdapat beberapa perbaikan kecil berdasarkan dari saran dan tanggapan pengguna. Melalui tanggapan tersebut, akhirnya kami lakukan iterasi desain, untuk dapat memberi kepuasan dari segi pengaalaman pengguna dalam menggunakan aplikasi nantinya.
