UX Case Study — Krealogi Fitur CRM
Proyek ini merupakan bagian dari program pelatihan UI/UX oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kemendigbud Ristek. Krealogi merupakan Challenge Partner. Saya berasal dari kelas 14 dari kelompok 79. Skilvul memberi saya tugas untuk membuat tampilan aplikasi berdasarkan Challenge Partner yang dipilih dalam kelompok kami yaitu tentan CRM.
Latar Belakang
Krealogi merupakan sebuah bagaian dari revolusi digital untuk UMKM Indonesia. Aplikasi Krealogi dibuat dengan tampilan simple, sehigga dapat digunakan oleh pelaku usaha dari berbagai kalangan. Fitur yang dibuat juga bertujuan untuk menjawab permasalahan yang dihadapi pelaku usaha. yaitu mencangkup pencatatan pembukuan usaha, yang memfasilitasi beberapa fitur yaitu Pengelolaan Inventaris, Rencana Produksi, Pencatatan Pesanan Masuk, Pencatatan. Selain itu, Krealogi juga merupakan sebuah wadah untuk mengembangkan kemampuan dan keterampilan pelaku UMKM.
Dalam proses pengembangannya, sebagian user mengalami beberapa kesulitan, karena tampilan antar-muka terlalu asing bagi pengguna yang belum tau tentang aplikasi ini, dan kekurangan beberapa fitur lainnya. Oleh karena itu, Krealogi memberikan tantangan bagi peserta Studi independent untuk membuat beberapa fitur baru dalam pengembangan aplikasi Krealogi. Saya dan tim memilih untuk mengembangkan fitur Customer Relationship Management (CRM). Krealogi memberikan beberapa ketentuan terkait pengembangan fitur-fitur CRM, yaitu termasuk fitur Kartu Nama dan Basis Data Kontak Pelanggan, Pencatatan Pesanan Masuk.
Sasaran
- Mengembangkan fitur CRM untuk memungkinkan jangkauan pelaku usaha ke pelanggan-pelanggan dengan mudah.
- Mengembangkan tampilan yang ramah dan mudah untuk digunakan.
- Mengembangkan fungsional aplikasi agar dapat mempermudah dalam komunikasi antar pelaku usaha dan pelanggan dengan mudah.
Peran dalam Tim
Untuk menyelesaikan tantangan, kami kelompok 79, yang beranggotakan 4 orang yaitu saya sendiri Ramadhan Kurniawan, Daffa Firmansyah, Mahadewi Putri, Luthfiyah Afra M.
Sebagai UI/UX Designer yang berkolaborasi kami memiliki tanggung jawab dan tugas yang sama, yaitu:
- Melakukan penelitian riset pengguna
- Brainstorm ide.
- Membuat Userflow, Wireframe, dan Design Sistem, UI Design.
- Merancang dan membuat prototype.
- Menguji dan mengevaluasi prototype.
- Melakukan wawancara untuk riset pengguna kepada satu responden.
Proses UX Design
Pada proyek ini, digunakan metode Design Thinking sebagai pendekatan Proses UX Design. Metode ini dipilih karena fleksibilitasnya, karena Design Thinking membantu kami dalam memecahkan masalah dengan melakukan langkah langkah sistematis dimulai dari menciptakan ide atau solusi dalam brainstorming hingga menerapkan pendekatan langsung ke prototype dan pengujian aplikasi. 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.
Untuk memenuhi kebutuhan tersebut kami menggunakan beberapa tools untuk mendukung Design Process yaitu :
- Figma → Untuk brainstorming and prototyping
- Google Docs → Untuk dokumentasi stimulus user research
- Google Sheets → Untuk dokumentasi data user research
- Zoom Meeting → untuk interview responden
Tahap 1 — Empathize
Pada proses Empathize ini, dilakukan pencarian dan pengumpulan informasi dari pengalaman pengguna aplikasi ini pada pengembangan awal. Informasi-informasi ini dapat memberikan gambaran jelas terkait 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 proses ini kami memilih pengembangan fitur CRM yang dimana sebagai pengguna merasa kesulitan dalam melakukan pencatatan pesanan dan menghubungi pelanggan secara bersamaan dan tidak dalam aplikasi yang sama, dan pada aplikasi Krealogi belom menyediakan fitur untuk basis data yang berisikan kontak pelanggan, sehingga hubungan dengan pelanggan harus dilakukan manual melalui WhatsApp.
Tahap 2 — Define
Setelah mendapatkan informasi yang dibutuhkan oleh pengguna maka dilakukan proses Define, yang dimana Pada tahap ini ditentukan Paint Points dari pengguna kemudian dikelompokkan. dan setelah selesai dikelompokan didapatkan topik utama permasalahan yang akan dibuat menjadi sebuah id dalam menyelesaikan permasalahan pengguna.
Paint points
Dalam proses ini dilakukan pemahaman terhadap informasi pengalaman pengguna dan disimpulkan menjadi kemungkinan poin kesulitan dari pengguna. dalam proses pengerjaan kami menggunakan FigmaJam untuk berkolaborasi dalam mengumpulkan ide kesulitan yang mungkin dialami oleh pengguna terhadap fitur CRM.
Paint Point
Affinity Diagram
Setelah seluruh Pain Points dituliskan pada sticky notes, maka dilakukan pengelompokkan terhadap sticky notes yang berhubungan dengan masalah yang sama. Sehingga, terciptalah sebuah topik utama yang spesifik dari kumpulan beberapa Pain Points. Serta setiap kelompok topik diberi nama yang sesuai, sehingga menggambarkan keseluruhan masalah yang sudah ditemukan.
Setelah dilakukan pengelompokan ditemukan 3 topik utama yaitu Database Pelanggan, Kartu Nama, Statistik Pelanggan.
How-migh-we
Untuk setiap topik permasalahan diajukan sebuah tujuan untuk menyelesaikan masalah pada topik tersebut maka diuatlah diagram How-might-we.
Dari topik yang sudah ada tim kami menyimpulkan bahwa topik Integrasi Database Pelanggan memiliki tujuan untuk membuat aplikasi yang memungkinkan untuk melakukan pengecekan dan mengelola catatan penjualan dan komunikasi dengan pelanggan. Topik Kartu Nama bertujuan untuk memudahkan pelaku usaha melakukan promosi bisnis melalui Kartu Nama Bisnis. Topik Statistik Pembeli bertujuan untuk memungkinkan penjual mengetahui statistik pembeli.
Tahap 3 — Ideate
Setelah seluruh penyelesaian masalah sudah ditemukan pada How-Might-we dalam proses Define, maka dilanjutkan ke tahap Ideate. Pada tahap ini akan dibuat sebuah ide-ide atau solusi terhadap tarket tujuan. kemudian ide tersebut akan di klarifikasikan kedalam prioritas berdasarkan urgensi kegunaan pada pengguna.
Ide Solusi
Disini semua anggota tip mengumpulkan ide solusi terhadap fitur atau fungsi yang dapat menyelesaikan permasalahan target tujuan pada how-migh-we sebelumnya.
Diagram Prioritas
Setelah ide solusi di temukan maka kemudian dikelompokkan kedalam diagram prioritas. di sini prioritas diagram terdapat 4 kuadram yaitu Lakukan Sekarang, Lakukan Setelahnya, Lakukan Nanti dan Lakukan Terakhir. pada proses ini dilakukan vote terhadap stycky note pada ide solusi dan setelah voting selesai keputusan voting tersebut dimasukan kedalam sebuah Diagram Prioritas berdasarkan voting tertinggi hingga voting terendah.
Tahap 4 — Prototype
Pada tahap ini dilakukan pembuatan fitur secara nyata dengan cara membuat Task Flow, kemudian Task Flow yang dibuat divisualisasikan kedalam sebuah Wireframe. disini Wireframe berisi virtualisasi umum tampilan antar muka pada aplikasi, kemudian Wireframe akan dibuat menjadi sebuah desain dan dibuat interaksi antar komponen didalamnya sehingga terciptalah sebuah rangkaian tampilan yang dapat diujikan kepada pengguna. Dalam pembuatan tampilan antar muka perlu didefiniskan sebuah Design System yang berisikan komponen yang akan digunakan secara berulang. Pembuatan Design System ini dapat membantu untuk menjaga konsistensi dari seluruh tampilan antar muka pengguna.
Task Flow
Disini seluruh anggota tim berkontribusi dalam pembuatan Task Flow untuk mengemukakan interpretasi dan pemahaman masing masing tentang fitur CRM. Kemudian dilakukan sebuah forum diskusi untuk mendiskusikan penyusunan Task Flow yang telah di setujui oleh seluruh anggota tim.
Task Flow Kartu Nama
Disini menggambarkan beberapa proses yang dapat dilakukan pengguna pada fitur Kartu Nama.
Task Flow Data Base Kontak
Disini menggambarkan beberapa proses yang dapat dilakukan pengguna pada fitur Kontak.
Task Flow Pilih Kontak
Disini menggambarkan beberapa proses yang dapat dilakukan pengguna pada saat melakukan pencatatan pesanan.
Wireframe
Pada tahap ini Wireframe dibuat berdasarkan dengan Task Flow. yang dimana proses pada Task Flow divisualisasikan kedalam sebuah Wireframe dalam bentuk umum.
Wireframe Halaman Beranda
Yang dimana disini memuat informasi pada beranda header berisikan icon krealogi icon kontak dan notifikasi, pada feed berisikan konten catat pesanan pesanan masuk, riwayat pesanan, pada bottom navigasi berisikan navigasi home, gudang, pesanan, keuangan dan akun.
Wireframe Halaman Kontak
Yang dimana disini memuat informasi pada kontak header berisikan icon kembali dan keterangan menu serta icon pencarian, pada feed berisikan menu semua kontak, favorit kontak serta daftar kontak mencangkup Foto Profil, Nama, Nomor Telp, pada bottom navigasi berisikan navigasi home, gudang, pesanan, keuangan dan akun.
Wireframe Halaman Pesanan
Yang dimana disini memuat informasi pada Pesanan header berisikan icon kembali dan keterangan menu serta icon help, pada feed berisikan menu tambah berdasarkan kontak baru atau memilih kontak yang sudah ada, lalu nanti akan menuju pada progres ke 2 yaitu berisikan informasi pesanan, pada bottom navigasi berisikan navigasi home, gudang, pesanan, keuangan dan akun.
Wireframe Halaman Akun, Kartu Nama
Yang dimana disini pada form kartu yang berisikan kartu nama dan informasi dari kartu nama, lalu pada halaman akun berisikan infromasi kartu nama yang di buat dan menu informasi lain nya yang berisikan pendukung untuk pengguna. pada bottom navigasi berisikan navigasi home, gudang, pesanan, keuangan dan akun.
Design System
Setelah pembuatan wireframe maka selanjutnya di identifikasi komponen yang memiliki peluang untuk digunakan secara berulang. maka komponen tersebut harus dibuat menjadi komponen pada Design System yang kemudian nantinya akan digunakan pada pembuatan tampilan antar muka pengguna.
Warna
Typograph
Header Navbar
Text Field
Button
Card
UI Design
Tampilan ini dibuat oleh masing masing anggota tim berdasarkan Task Flow yang sudah dibuat.
Prototyping
Prototype dibuat dengan cara menghubungkan komponen komponen terntetu yang dapat berfungsi sebagai pemicu interaksi antara komponen satu dengan komponen lain. Prototype menghubungkan keseluruhan fitur yang sudah dibuat pada Aplikasi Krealogi
Tahap 5— Testing
Setelah melewati serangkaian tahap pembuatan tampilan sampai prototyping, selanjutnya yaitu dilakukan testing. Pada tahap ini, kami mencari responden untuk di ujicobakan prototype yang sudah dibuat. Setelah kami menemukan responden yang bersedia diwawancarai oleh kami. kami langsung melakukan proses wawancara melalui zoom meeting dengan metode In-depth Interview dan Usability Testing. wawancara ini dilakukan kepada satu responden, seorang Pengusaha Pakaian berusia 21 tahun, yang berdomisili Di Jawa Barat (Bekasi). In-depth Interview yang dilakukan menghasilkan informasi kebiasaan dan kendala responden terkait aplikasi pencatatan. Dapat disimpulkan bahwa, responden merasa kesulitan dari segi tampilan yang ribet serta Aplikasi Berat dan hasil dari Usability Testing yang dilakukan menghasilkan informasi dari setiap Task yang di berikan sebagai berikut :
Task 1 — Launching App
Task 2— Menu Home
Task 3— Pencatatan Pesanan
Task 4— Tambah Pesanan Melalui Kontak Baru
Task 5— Tambah Pesanan Melalui Pilih Kontak
Task 6— Tambah Kontak
Task 7— Akun
Task 8— Kartu Nama
Kesimpulan
Dalam Challenge ini, kami telah berusaha semaksimal mungkin dalam melakukan semua tahapan yang ada mulai dari proses Empathize Hingga tahapan Testing dengan sukses dan kami telah menghasilkan desain yang simple dan ramah pengguna. Hal ini dapat dikonfirmasi dari hasil usability testing. Responden yang kami wawancarai memberi kami respons yang sangat positif terhadap desain yang sudah di buat. Berdasarkan pengujian yang sudah dilakukan didapati bahwa desain yang kami buat sudah berhasil mencapai tujuan akan tetapi terdapat sedikit kekurangan utuk perbaikan selanjutnya.
Rekomendasi Lanjutan
Sudah cukup bagus mungkin untuk sedikit menambahkan user guide saat pertama kali membuka applikasi agar dapat mempermudah pengguna pada saat observasi.