Pengembangan Fitur CRM Aplikasi Krealogi — UX Case Study
Proyek ini adalah bagian dari program pelatihan UI/UX oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi merupakan Challenge Partner. Saya TIDAK bekerja atau dikontrak secara profesional oleh Krealogi.
Aplikasi Pencatatan Pembukuan
Usaha Kecil Mikro dan Menengah (UMKM) adalah usaha produktif yang dimiliki perorangan atau badan usaha. Jenis UMKM diklasifikasikan menjadi beberapa kriteria berdasarkan omset, yaitu Usaha Mikro, Usaha Kecil, dan Usaha Menengah. Sebuah usaha yang baik tidak terlepas dari pembukuan yang baik. Untuk membuat sistem pembukuan yang baik, pelaku UMKM sering kali mendapati kesulitan, dan terkadang merepotkan. Sehingga, tidak jarang sebagian pelaku UMKM mengabaikan hal ini. Namun, seiring perkembangan teknologi dan dunia digital, beberapa aplikasi bantuan telah dibuat untuk memfasilitasi pembukuan UMKM, salah satunya adalah Krealogi.
Krealogi adalah sebuah aplikasi pencatatan pembukuan usaha, yang memfasilitasi beberapa fitur. Beberapa fitur utamanya adalah Pengelolaan Inventaris, Rencana Produksi, Pencatatan Pesanan Masuk, Pencatatan Pengeluaran/Pemasukan, dan Laporan.
Dalam pengembangannya, sebagian pengguna menghadapi kesulitan, karena tampilan antar-muka pengguna yang tidak ramah-pengguna, dan kekurangan beberapa fitur lainnya. Oleh karena itu, Krealogi memberikan tantangan bagi peserta magang Skilvul Virtual Internship, untuk membuat beberapa fitur baru untuk pengembangan aplikasi Krealogi. Saya dan tim memilih untuk mengembangkan fitur Customer Relationship Management (CRM).
Sebagai challenge partner, Krealogi menginginkan pengembangan fitur CRM agar dapat membuat jangkauan dan keterikatan yang lebih baik antara pelaku usaha sebagai pengguna aplikasi, dan pelanggan-pelanggannya. Krealogi memberikan beberapa ketentuan terkait pengembangan fitur-fitur CRM, termasuk fitur Kartu Nama dan Basis Data Kontak Pelanggan.
Sasaran
- Mengembangkan fitur-fitur terkait CRM untuk memungkinkan jangkauan pelaku usaha ke pelanggan-pelanggan dengan mudah.
- Mengembangkan tampilan antar-muka pengguna yang ramah dan mudah untuk digunakan.
Peran dalam Tim
Dalam seluruh proses pengerjaan proyek ini, saya berkolaborasi dalam sebuah tim berisikan 4 orang, yaitu saya, Ridwan Alwi Permana, Bima Gusti Pratama, dan Siti Masyithoh. Saya memiliki tanggung jawab sebagai koordinator tim, yang bertugas untuk memastikan keseluruhan proses berjalan tepat waktu dan hasil sesuai dengan harapan. Saya juga bertanggung jawab untuk mengumpulkan anggota tim untuk berdiskusi secara rutin. Selain itu, dalam pengerjaan proyek ini kami memiliki tanggung jawab dan tugas yang sama, yaitu:
- Melakukan riset pengguna,
- Mengumpulkan ide-ide solusi,
- Membuat User Flow dan Wireframe,
- Membuat tampilan antar-muka pengguna,
- Membuat Prototype, dan
- Melakukan Usability Testing.
Proses UX Design
Pada proyek ini, digunakan metode Design Thinking sebagai pendekatan Proses UX Design. Metode ini dipilih karena fleksibilitasnya, beberapa tahap pada proses Design Thinking tidak perlu dilakukan secara berurutan, bahkan dapat tidak perlu dilakukan, sesuai dengan kebutuhan. Maka, pengerjaan proyek dapat dilakukan dengan lebih fleksibel dan mudah.
Seluruh proses pengerjaan proyek dilakukan pada Figma, dengan menggunakan FigmaJam pada beberapa tahap untuk mengumpulkan ide secara berkolaborasi. Kemudian, seluruh proses desain dan kolaborasinya dilakukan pada Figma Design File.
Tahap 1 — Empathize
Tahap pertama dalam proses Design Thinking adalah Empathize. Pada tahap ini, dilakukan pencarian dan pengumpulan informasi dari pengalaman pengguna aplikasi ini pada pengembangan awal. Informasi-informasi ini dapat memberikan gambaran jelas tentang apa yang menjadi kesulitan pengguna, sehingga aplikasi perlu dikembangkan lebih jauh. Informasi pengalaman pengguna terhadap aplikasi Krealogi telah diberikan pada ringkasan proyek, sehingga perlu dipahami secara mendalam agar mendapatkan konteks yang jelas dari apa yang dibutuhkan oleh pengguna.
Pada fitur CRM yang kami pilih untuk dikembangkan, sebagian pengguna merasa kesulitan untuk melakukan pencatatan pesanan dan menghubungi pelanggan secara bersamaan dan tidak dalam aplikasi yang sama. Krealogi tidak menyediakan fitur untuk basis data yang berisi kontak-kontak pelanggan, sehingga hubungan dengan pelanggan harus dilakukan secara manual melalui WhatsApp. Hal ini mengakibatkan rumitnya proses yang dilakukan oleh pelaku UMKM untuk hanya menghubungi pelanggannya.
Selain itu, Secondary Research dilakukan untuk menambah wawasan mengenai ranah aplikasi pencatatan pembukuan dan analisis aplikasi lainnya yang sejenis. Beberapa percobaan singkat dilakukan terhadap aplikasi pencatatan pembukuan lainnya, untuk membandingkan beberapa hal yang menjadi kelebihan dan kekurangan aplikasi Krealogi dengan aplikasi lain. Kemudian, analisis dilakukan terhadap umpan balik dan ulasan terhadap aplikasi Krealogi di Google Play Store. Karena riset dilakukan dengan singkat dan sederhana, tidak ada data signifikan yang dapat dicantumkan.
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. Tim menggunakan FigmaJam untuk berkolaborasi mengumpulkan ide kesulitan-kesulitan yang mungkin dialami oleh pengguna, terhadap fitur CRM, dengan sticky notes. Beberapa anggota tim menemukan poin kesulitan yang sama, dan sticky notes terkait akan dikelompokkan.
Affinity Diagram
Setelah seluruh Pain Points dituliskan pada sticky notes, pengelompokkan dilakukan terhadap sticky notes yang berhubungan dengan masalah yang sama. Sehingga, muncul masing-masing topik utama yang spesifik dari kumpulan Pain Points. Setiap kelompok topik diberi nama yang sesuai, sehingga menggambarkan keseluruhan masalah yang ditemukan.
Setelah pengelompokan, ditemukan 4 topik utama terkait CRM, yaitu Integrasi Basis Data Pelanggan, Kartu Nama, Statistik Pelanggan, dan Jangkauan ke Pembeli.
How-Might-We
Untuk setiap topik utama permasalahan, diajukan sebuah tujuan untuk menyelesaikan masalah dalam topik tersebut. Diagram ini disebut How-Might-We. Tim menyimpulkan sebuah tujuan untuk merepresentasikan cara penyelesaian masalah pada masing-masing topik.
Tim menyimpulkan bahwa topik Integrasi Basis Data Pelanggan memiliki tujuan untuk memudahkan pelaku UMKM dalam memeriksa dan mengelola catatan penjualan dan berkomunikasi dengan pelanggan. Topik Kartu Nama bertujuan untuk memudahkan pelaku UMKM dalam mempromosikan bisnisnya. Topik Statistik Pembeli bertujuan untuk memungkinkan penjual mengetahui statistik pembelian oleh pelanggan. Topik Jangkauan ke Pelanggan bertujuan untuk meningkatkan keterikatan penjual ke pelanggan.
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. Terakhir, akan dibuat sketsa cepat dengan konsep Crazy 8.
Ide Solusi
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.
Setiap ide solusi yang terdapat pada kuadran “Lakukan Sekarang” akan diberikan vote oleh seluruh anggota tim. Anggota tim memiliki hak vote sebanyak jumlah ide pada kuadran “Lakukan Sekarang” ditambah 1.
Dua ide solusi yang memiliki vote tertinggi akan menjadi fokus utama dalam proses pengembangan fitur CRM, yaitu fitur Kartu Nama dan fitur Kontak Pelanggan.
Sketsa Cepat Crazy 8
Setelah ditentukan fokus utama pengembangan fitur, seluruh anggota tim akan membuat sketsa cepat dengan konsep Crazy 8. Sketsa akan dimuat pada kertas yang dilipat menjadi 8 bagian, atau menggunakan Figma Design File. Anggota tim harus membuat sebanyak-banyaknya sketsa tampilan dalam waktu 8 menit.
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. Wireframe akan berisi visualisasi umum tampilan antar-muka pada aplikasi. 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
Seluruh anggota tim membuat beberapa Task Flow untuk mengemukakan interpretasi dan pemahaman masing-masing mengenai beberapa proses terkait fitur CRM. Kemudian, sebuah pertemuan diadakan untuk mendiskusikan penyusunan Task Flow final yang disetujui oleh seluruh anggota tim. Hal ini diperlukan agar dapat menampung seluruh pemahaman anggota tim, dan menemukan pemahaman yang disepakati oleh tim.
Task Flow Kartu Nama
Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada fitur Kartu Nama.
Task Flow Basis Data Kontak
Menggambarkan proses yang dapat dilakukan oleh pengguna pada fitur Kontak.
Task Flow Pilih Kontak
Menggambarkan proses yang dapat dilakukan oleh pengguna saat memilih kontak untuk pencatatan pesanan.
Task Flow Hubungi Pelanggan — Pesanan Masuk
Menggambarkan proses yang dilakukan oleh pengguna saat ingin menghubungi pelanggan dari daftar pesanan masuk.
Wireframe
Kemudian, Wireframe dibuat sesuai dengan Task Flow. Proses-proses yang terdapat pada Task Flow divisualisasikan ke dalam Wireframe dalam bentuk umum.
Wireframe Halaman Beranda
Wireframe Halaman Akun
Wireframe Halaman Daftar Kartu Nama
Wireframe Halaman Detail Kartu Nama
Wireframe Halaman Kontak & Tabbing Kontak Favorit
Wireframe Halaman Daftar Kontak Baru & Overlay Konfirmasi Simpan Kontak
Wireframe Halaman Kontak Klien & Overlay Konfirmasi Hapus Kontak
Wireframe Halaman Form Detail Pesanan-Otomatis dan Manual
Wireframe Halaman Pesanan Masuk
Wireframe Halaman Pencarian Pelanggan
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
Pada tahap molekul, pembuatan komponen dilakukan bersamaan dengan pembuatan tampilan antar-muka pengguna. Komponen-komponen di antaranya adalah bottom navigation dan header halaman. Selain itu, masih banyak komponen lain yang dibuat, termasuk Search Bar, cards, dan lain-lain.
Bottom Navigation
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.
Tampilan Antar-Muka Halaman Beranda
Perubahan desain secara total dilakukan pada halaman beranda. Kini, halaman beranda memuat satu menu baru, yaitu Fitur Daftar Kontak Pelanggan yang terdapat pada bagian header halaman. Selain itu, ubahan tampilan diberikan pada seluruh sisi halaman beranda, mulai dari header, tombol-tombol ringkasan Pesanan Masuk, Rencana Produksi, dan PO Berjalan, dua buah tombol menu Catat Produksi dan Catat Pesanan, dan penggunaan card untuk menampung daftar pesanan. Seluruh ubahan ini diharapkan dapat membuat tampilan menjadi lebih mudah untuk digunakan oleh pengguna.
Tampilan Antar-Muka Pengguna Fitur Kartu Nama
Fitur ini disematkan halaman Akun Krealogi yang sudah ada sebelumnya, karena halaman ini merupakan halaman yang paling relevan dengan fitur Kartu Nama, tanpa harus membuat sebuah menu baru pada Bottom Navigation atau header halaman.
Fitur Kartu Nama adalah sebuah fitur yang memungkinkan pengguna aplikasi membuat kartu nama sederhana untuk bisnisnya. Pengguna dapat membuat beberapa kartu nama, dan setiap kartu nama ini dapat dibagikan melalui media sosial, dihapus, ataupun diubah informasinya. Beberapa overlay untuk mengonfirmasi operasi pada kartu nama dibuat untuk mencegah kesalahan saat menghapus atau mengubah informasi pada kartu nama. Setiap kartu nama berisi informasi personal atau bisnis pengguna, seperti nama lengkap, nomor telepon, email, dan alamat. Selain itu, kartu nama memiliki beberapa pilihan desain latar belakang untuk menambah variasinya.
Tampilan Antar-Muka Pengguna Fitur Basis Data Kontak Pelanggan
Fitur ini memiliki poin akses baru pada header halaman beranda, tepat berada pada sisi kiri menu notifikasi. Hal ini dilakukan karena fitur ini benar-benar baru dan tidak ada hubungannya dengan fitur-fitur lain yang sudah ada sebelumnya.
Fitur Basis Data Kontak Pelanggan memungkinkan pengguna untuk menyimpan kontak pelanggannya di dalam aplikasi Krealogi. Sehingga, proses untuk melakukan pencatatan pesanan dan menghubungi pelanggan menjadi beberapa langkah lebih cepat. Hal ini diharapkan dapat memudahkan pengguna untuk mengelola pencatatan sekaligus menjaga hubungan dengan pelanggan.
Setiap kontak yang tersimpan dirancang untuk dapat memiliki beberapa alamat pengiriman. Hal ini ditujukan untuk mengakomodasi pelanggan yang memiliki beberapa tempat usaha, sehingga tidak perlu dibuat kontak baru untuk memuat alamat yang berbeda. Pengguna dapat mengatur beberapa kontak sebagai favorit, dan akan muncul pada tabbing favorit untuk memudahkan pencarian kontak-kontak tertentu yang ingin diakses lebih cepat.
Tampilan Antar-Muka Pengguna Halaman Pilih Kontak pada Pencatatan Pesanan
Fitur ini disematkan pada tengah-tengah proses Catat Pesanan yang telah ada sebelumnya pada aplikasi Krealogi. Kini, terdapat pilihan catat pesanan dengan memasukkan informasi pelanggan secara manual, atau dengan memilih kontak yang telah tersimpan sebagai pelanggan.
Fitur Pilih Kontak pada Catat Pesanan memungkinkan pengguna untuk mengisi informasi pelanggan pemesan dengan lebih mudah menggunakan informasi kontak yang telah tersimpan sebelumnya. Ketika pengguna telah memilih kontak sebagai pelanggan, maka seluruh informasi kontak akan digunakan sebagai data pelanggan. Alamat pengiriman dapat diganti, sesuai dengan alamat yang tersimpan sebelumnya, atau menambahkan alamat baru. Fitur ini diharapkan dapat memudahkan pengguna untuk melakukan pencatatan pesanan sesuai dengan pelanggan tertentu, tanpa harus mengingat informasi lengkap pelanggan, dan meminimalkan kesalahan input. Selain itu, proses pemilihan kontak sebagai pelanggan juga mempercepat proses pencatatan pesanan karena pengguna tidak harus mengisi informasi satu per satu secara manual.
Tampilan Antar-Muka Pengguna Fitur Menghubungi Pelanggan dari Daftar Pesanan Masuk
Fitur ini disematkan pada halaman Daftar Pesanan Masuk yang sudah ada sebelumnya di aplikasi Krealogi, dengan menambahkan tombol Hubungi Pelanggan pada setiap card Pesanan Masuk. Pengguna dapat menekan tombol ini, dan kemudian diarahkan secara otomatis ke halaman obrolan kontak terkait di aplikasi WhatsApp. Fitur ini diharapkan dapat memudahkan pengguna untuk menghubungi pelanggan yang melakukan pemesanan, dari daftar pesanan masuk.
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 — Testing
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.
User Research dilakukan kepada satu responden, seorang mahasiswa berusia 21 tahun, yang menjalankan usaha bakery rumahan bersama ibunya. In-depth Interview yang dilakukan menghasilkan informasi kebiasaan dan kendala responden terkait pencatatan pembukuan. Dapat disimpulkan bahwa, responden merasa kesulitan untuk melakukan pencatatan hanya dengan note pada ponselnya. Terlebih ketika pelanggan yang melakukan pembelian secara langsung, tanpa memesan terlebih dahulu, karena transaksi berlangsung secara cepat dan terus-menerus dalam jangka waktu tertentu. Sehingga, responden tidak dapat mengingat seluruh pembelian yang dilakukan.
Hasil Usability Testing yang dilakukan menghasilkan informasi untuk setiap task yang diberikan, sebagai berikut:
TASK 1 — Membuat Kartu Nama
TASK 2 — Membuat Kontak Pelanggan
TASK 3 — Membuat Pilih Kontak - Catat Pesanan
TASK 4 — Menghubungi Klien - Pesanan Masuk
Dapat disimpulkan, berdasarkan seluruh hasil Usability Testing, keseluruhan task mendapatkan hasil PASSED, dengan nilai di atas minimum passing grade 5,5. Selain itu, responden memberikan beberapa masukan dan informasi tambahan yang dapat dimanfaatkan untuk melakukan iterasi UI Design.
Iterasi UI Design
Setelah mendapatkan hasil yang layak dari Usability Testing, tim melakukan beberapa ubahan pada tampilan antar-muka pengguna untuk memenuhi kebutuhan pengguna. Ubahan dilakukan berdasarkan Pain Points yang diungkapkan oleh responden.
Iterasi pada Fitur Kartu Nama
Iterasi pada Fitur Catat Pesanan
Iterasi pada Ringkasan Pesanan
Iterasi pada Fitur Pesanan Masuk
Penutup
Setelah melalui seluruh proses, fitur CRM untuk aplikasi Krealogi telah terbentuk dan memiliki gambaran yang jelas terkait cara kerja fitur-fitur CRM, serta keseluruhan tampilannya. Proyek ini dibuat sebagai rekomendasi desain kepada tim Krealogi untuk pengembangan aplikasi Krealogi di masa mendatang.
