Studi Kasus UI/UX — Penambahan Fitur CRM di Krealogi
⚠️“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 adalah Challenge Partner. Saya tidak bekerja atau dikontrak secara profesional oleh Krealogi .”
Apa itu aplikasi “Krealogi” ?
Aplikasi Krealogi merupakan aplikasi yang diluncurkan oleh Du Anyam untuk semua pelaku usaha mikro, kecil, dan menengah atau UMKM. Aplikasi ini membantu pelaku UMKM kreatif untuk dapat melakukan digitalisasi rantai pasok seperti membantu pencatatan kegiatan operasional, seperti mengelola dan mengecek pesanan, produksi, biaya, dan stok yang dapat membantu UMKM menjadi pemasok andal.
Mengapa Fitur CRM?
Pada Challenge Partner ini Saya, Siti Masyithoh, Bima Gusti Pratama, dan Wiranata Limantara sebagai tim memilih untuk membuat fitur CRM. Sebelum memilih untuk membuat fitur CRM ini saya dan tim berdiskusi tentang apa yang mau kita buat fiturnya, ada beberapa pilihan fitur untuk Challenge Partner ini seperti Cash Flow Feature & ntegration with Logistic and Marketplace. Kenapa fitur CRM? karena fitur CRM ini sangat dibutuhkan user untuk mempermudah komunikasi kepada klien, membagikan kartu nama untuk mempromosikan bisnisnya, melihat siapa saja kliennya dan tersimpan dalam database.
Goals dari penambahan fitur CRM ini adalah agar lebih membantu pelaku UMKM pada saat pencatatan pesanan lebih mudah dilakukan, pencatatan kontak klien sudah otomatis dan tidak manual lagi, dan mudah untuk menghubungi klien.
Role in Team
Dalam pembuatan rancangan Fitur CRM ini saya menjadi UI sekaligus UX Designer, namun semua tahap pembuatan rancangan ini dibuat bersama-sama dengan 3 rekan saya: Bima Gusti Pratama, Wiranata Limantara dan Masyithohs. Saya membuat Desain Halaman Kontak sebagai berikut :
- Membuat daftar kontak
- Membuat detail kontak klien
- Membuat daftar alamat
Design Process
Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Mengapa? karena pendekatan pada Design Thinking ini berpusat kepada user yang berfokus membantu user menyelesaikan masalahnya dan mencapai apa yang diinginkan oleh user itu sendiri.
1—Define
Pada tahap define ini adalah untuk mendefinisikan permasalahan user dan menempatkan user sebagai pusat objek permasalahan karena yang mengalami masalah adalah user kami harus berfikir bagaimana pandangan user terhadap pencatatan data pelanggan, pencatatan kegiatan operasional, seperti mengelola dan mengecek pesanan, produksi, biaya, dan stok.
Pain Points
Di pain points ini saya dan tim menemukan beberapa permasalahan spesifik dalam berbagai aspek di dalam aplikasi krealogi dan menempatkannya di sticky notes FigJam pada Figma.
Permasalahan yang kita temui dalam Pain Points ini adalah user kesulitan pada saat pencatatan data klien seperti kontak atau masih manual, cara mengkomunikasikan lewat apa, tidak adanya promosi bisnisnya, kesulitan mencari data kliennya.
Affinity Diagram
Yang selanjutnya dilakukan setelah menemukan permasalahan user adalah mendefinisikan secara berurutan sesuai kategorinya masing-masing dan yang biasa disebut Affinity Diagram.
Kategori yang kami susun adalah sebagai berikut :
- Integrasi Database Pelanggan
- Kartu Nama
- Statistik Pembeli
- Customer Engagement
How-Might We
Setelah menyusun sesuai kategorinya pada Affinity Diagram adalah selanjutnya menentukan How-Might We yaitu menemukan solusi dari kategori yang telah dibuat pada Affinity diagram, tetapi belum spesifik pada permasalahannya.
2 — Ideate
Hal yang dilakukan pada tahap Ideate ini adalah saya dan tim memulai brainstorming ide berdasarkan How-Might We, brainstorming ide yang akan diberikan dan membuat gambaran kasar (wireframe) denga Crazy-8's.
Solution Idea
Pada Solution Idea ini adalah brainstorming ide dan memberikan ide berdasarkan How-Might We yang telah di buat sebelumnya secara spesifik permasalahannya.
Prioritization Idea
Selanjutnya yang dilakukan setelah memberikan solusi ide yang spesifik dan menjelaskannya adalah melakukan voting untuk memprioritaskan solusi ide yang memiliki User Value tinggi dan Effort yang rendah.
Setelah melakukan voting, voting terbanyak adalah membuat fitur kartu nama yang bisa memilih template yang sudah disediakan.
Crazy 8's
Sehabis melakukan voting, selanjutnya adalah membuat Crazy-8’s yaitu gambaran kasar dari solusi ide yang kita voting atau prioritaskan terlebih dahulu.
3 — Prototype
Yang dilakukan pada tahap Prototype ini adalah membuat User Flow, membuat Wireframe dari User Flow, membuat UI Style Guide, membuat User Interface dari User Flow dan Wireframe, dan membuat UI Prototyping.
User Flow
User Flow yang digunakan pada saat membuat rancangan ini adalah jenis Task Flow yaitu sebuah flow chart diagram untuk diselesaikan oleh user pada tugas tertentu.
Wireframing
Selanjutnya adalah membuat Wireframe dari Task Flow yang telah dibuat.
Wireframe Halaman Beranda
Wireframe Halaman Akun
Wireframe Halaman List Kartu Nama
Wireframe Halaman Detail Kartu Nama
Wireframe Halaman Kontak
Wireframe Halaman Daftar Kontak Baru
Wireframe Halaman Kontak Klien
Wireframe Halaman Form Detail Pesanan (Otomatis&Manual)
Wireframe Halaman Pesanan Masuk
UI Style Guide
Setelah membuat wireframe selanjutnya adalah membuat User Interface dari wireframe atau wireflow yang dibuat sebelumnya. Tapi sebaiknya yang dilakukan sebelum membuat User Interface adalah membuat UI Style Guide terlebih dahulu seperti komponen text styles, icon, logo, color pallete, header, buttons, text field, dropdown, dll agar mempermudah saat mendesain UI nantinya.
Typography
Color Palette
Button
Text Field
Header
Bottom Navigation
User Interface
Selanjutnya setelah membuat UI Style Guide adalah membuat UI atau mendesain antarmuka pengguna menggunakan UI Style Guide dan Component yang telah dibuat sebelumnya. Pembuatan UI ini sangatlah menarik dan menyenangkan karena penuh tantangan pada saat membuatnya.
Tampilan Antar-Muka Pengguna Halaman Beranda
Perombakan Desain halaman Beranda adalah bertujuan agar user lebih mudah untuk mengetahui informasi-informasi apa saja yang ada. Dan ada satu fitur baru pada halaman Beranda ini yaitu Daftar Kontak yang ada pada Header.
Tampilan Antar-Muka Pengguna Fitur Kartu Nama
Pada halaman Akun ini menggunakan Desain yang sudah ada, hanya menambahkan satu fitur baru yaitu Kartu Nama yang berada di samping Lihat Detail. Fitur Kartu Nama ini dibuat untuk memudahkan user atau pelaku UMKM untuk mempromosikan Usaha/Bisnisnya.
Tampilan Antar-Muka Pengguna Fitur Kontak
Kenapa menambahkan fitur Daftar Kontak? Karena user atau pelaku UMKM nantinya akan lebih mudah untuk melihat siapa saja konsumennya, konsumen yang sering memesan dan akan memudahkan untuk melakukan pengisian pesanan masuk.
Tampilan Antar-Muka Pengguna Fitur Pilih Kontak
Kenapa menambahkan fitur Pilih Kontak pada pengisian Pesanan Masuk? karena lebih memudahkan user atau pelaku UMKM untuk mengisi form tersebut, ada pilihan untuk mengisi Pesanan Masuk, Tambah Baru adalah untuk klien yang baru memesan, sedangkan Pilih Kontak adalah klien yang sudah pernah memesan sebelumnya dan datanya tersimpan pada Fitur Kontak. Dan pada pengisian Pesanan Masuk Pilih Kontak form akan terisi otomatis.
Tampilan Antar-Muka Pengguna Fitur Menghubungi Pelanggan
Desain fitur Menghubungi Pelanggan ini bertujuan agar user atau pelaku UMKM lebih mudah untuk menghubungi klien dengan menggunakan Whatsapp
Prototyping
Yang selanjutnya dilakukan setelah membuat desain UI adalah pembuatan UI Prototyping sesuai dengan alur proses Task Flow yang dibuat sebelumnya. Pada tahap ini saya memberikan banyak sekali interaksi pada button, bottom navigation, dropdown, dll, dan itu sangat menyenangkan karena bisa membuat suatu interaksi/animasi pada UI itu sendiri.
4 — Test
Pada tahap Test ini yaitu melakukan User Research dan Usability Testing kepada Respondent yang saya undang sebelumnya. Hal pertama yang harus dilakukan ada menyiapkan dokumen Stimulus User Research untuk memudahkan nantinya pada saat melakukan User Research dan juga membuat Record Data User Research untuk me-Record aktivitas pada saat User Research dilakukan. Research Method yang digunakan adalah In-Depth Interview dan Usability Testing, pada In-Depth Interview yaitu bertanya jawab kepada responden tentang UMKM, pencatatan data klien, pencatatan kegiatan operasional, seperti mengelola dan mengecek pesanan, produksi, biaya, dan stok.pada tahap Usability Testing saya membagikan prototype yang telah saya buat dan di coba langsung oleh Respondent.
Respondent Criteria
- Berusia 20–40 tahun.
- Pelaku UMKM dengan skala bisnis mikro.
- Berdomisili di seluruh wilayah Indonesia.
- Memiliki motivasi untuk mempelajari teknologi baru yang sederhana
- Bersedia menyediakan waktu untuk mempelajari teknologi baru
Pelaksanaan User Research & Usability Testing
Pelaksanaan User Research dilakukan pada seorang Mahasiswa yang berusia 21 tahun dan berdomisili di Jakarta, Responden menjalani usaha Bakery rumahan bersama ibunya. In-Depth Interview yang telah dilakukan menghasilkan informasi tentang kebiasaan responden saat melakukan pencatatan pesanan masuk, seperti responden melakukan pencatatan hanya untuk pembeli yang melakukan pemesanan PO(Pre-Order). Namun pada saat responden mendapatkan pesanan mendadak dia kesulitan untuk mencatat pesanan tersebut dan apakah sisa stok cukup atau tidak, dan dia hanya melakukan pencatatan menggunakan Note HP karena sudah ada di ponselnya dan tidak perlu menginstall aplikasi lagi dan alasan dia tidak menggunakan aplikasi pencatatan adalah memori HPnya tidak cukup.
Hasil Usability Testing yang telah dilakukan menghasilkan informasi berikut :
Task — 1 Membuat Kartu Nama
Task — 2 Membuat Kartu Nama
Task — 3 Membuat Kartu Nama
Task — 4 Membuat Kartu Nama
Kesimpulan dari Usability yang telah dilakukan adalah seluruh task yang diberikan memiliki nilai kemudahan 6,75. Dan responden memberi masukan atas kesulitan yang dia hadapi pada saat melakukan tasknya.
Iterasi Desain Antar-Muka
Setelah melakukan Usability Testing dan mendapatkan masukan dari responden tersebut, maka saya dan tim melakukan Iterasi Desain Antar-Muka untuk lebih memenuhi kebutuhan pengguna dan memudahkan saat menjalankan Aplikasi Krealogi ini.
Iterasi Fitur Kartu Nama
Iterasi Fitur Pilih Kontak
Iterasi Fitur Menghubungi Pelanggan
Penutup
Terimakasih untuk saya dan seluruh tim (Siti Masyithoh, Wiranata Limantara, Bima Gusti Pratama) karena telah bekerja sama untuk menyelesaikan penambahan fitur baru yaitu CRM. Proyek ini dibuat untuk rekomendasi Desain kepada pihak Krealogi agar bisa mengembangkan aplikasinya bisa lebih baik untuk kemudahan penggunanya.
