UI/UX Case Study Krealogi: Pengembangan Fitur CRM
Disclaimer
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.
Latar Belakang
Saya berkesempatan mengikuti UI/UX Training Program yang diselenggarakan oleh Kementrian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Program ini dinamakan Skilvul Virtual Internship yang bekerjasama dengan platform Skilvul sebagai media pembelajarannya. Dalam Bootcamp ini saya diperbolehkan memilih satu dari beragam challenge partner yang telah disediakan. Saya memilih Krealogi karena menurut saya, pemberdayaan UMKM di Indonesia butuh support dan sumber daya yang besar.
Krealogi adalah sebuah aplikasi pencatatan pembukuan usaha, yang memfasilitasi beberapa fitur utama seperti Pengelolaan Inventaris, Rencana Produksi, Pencatatan Pesanan Masuk, Pencatatan Pengeluaran/Pemasukan, dan Laporan. Dan pada kesempatan ini saya diberi kesempatan untuk mengembangkan fitur baru yang dibutuhkan oleh Krealogi yaitu fitur CRM (Customer Relationship Management) dimana user needsnya adalah Krealogi ingin memprovide pesanan masuk bisa terhubung dengan database pelanggan, dan dengan harapan dapat memberikan perubahan pada aplikasi ini agar bertambah baik lagi.
Objektif/Sasaran
- Mengembangkan fitur CRM sesuai user needs untuk mendukung kemudahan penjualan produk oleh user.
- Mengembangkan User Interface yang lebih modern dan ramah sehingga lebih mudah untuk digunakan.
Peran Dalam Tim
Dalam seluruh pengerjaan proyek Challange Partner Krealogi ini saya tergabung dalam suatu tim berisikan 3 anggota, yaitu saya, Aulia Kinamulen, dan Sarlita Rizka Anggraeni. Dengan satu tim ini kami mengerjakan challenge dengan role yang sama yaitu UI/UX Designer. Tanggung jawab yang kami lakukan adalah
- Brainstorming ide dan memvisualisasikan menjadi crazy 8's
- Membuat user flow
- Membuat wireframe
- Membuat UI Styleguide
- Mengembangkan wireframe menjadi Hi-Fi Design
- Membuat prototype dari Hi-Fi Design yang telah dibuat
- Mempersiapkan dokumentasi user research
- Melakukan user testing
Design Process
Dalam proyek ini saya menggunakan metode Design Thinking sebagai pendekatan proses UX Design karena fleksibilitasnya. Dalam iterasi design metodi ini akan meningkatkan keefektifan dalam pengerjaan UX Design, hal itu karena proses dari design thinking ini tidak perlu dilakukan secara berurutan, tidak hanya itu salah satu prosesnya bisa saja dilewati dan bisa disesuaikan dengan kebutuhan. Pada proyek ini saya melewati tahap empathize dan memulai dari tahap define karena objektif challange sudah ditentukan dari awal.
1 — Define
Saya dan tim memulai dengan menuliskan beberapa masalah yang kami alami saat menggunakan aplikasi Krealogi, atau bisa juga dikatakan pada tahap define ini kami mencoba menjadi pengguna dan mengumpulkan beberapa masalah yang biasa disebut dengan Pain Points.
Setelah semua Pain Points dituliskan, lalu kami menentukan How Might We, atau tujuan untuk menyelesaikan masalah dari beberapa Pain Points di atas.
Dapat disimpulkan bahwa kami memilih tujuan penyelesaian masalah How Might We dengan poin utama yaitu “Mempermudah user dalam mengoraganisir database pelanggan (CRUD) yang terintegrasi dengan fitur chat dan kartu nama pelanggan”
2 — Ideate
Setelah beberapa How Might We disimpulkan, pada tahap ini kami mulai menulis ide-ide solusi terhadap tujuan penyelesaian tersebut. Kemudian setelah terkumpulnya ide-ide tersebut, nantinya akan diklasifikasi lagi ke dalam diagram prioritas atau bisa disebut dengan Affinity Diagram, dari affinity diagram tersebut sampailah pada hasil akhir dari ideate ini adalah Prioritization Idea dengan hasil sebagai berikut
Selanjutnya masing-masing dari anggota tim melakukan Crazy 8’s yaitu visualisasi cepat selama 8 menit dari solusi ide di atas.
3 — Prototyping
Pada tahap ini kami menuju pengerjaan yang akan menghasilkan prototype, adapun langkahnya yaitu membuat userf flow, wireframing, membuat hi-fi design dari wireframe hingga akhirnya adalah prototype.
User Flow
Setelah melakukan pembahasan kami mendapatkan 4 user flow yaitu kontak, membuat kontak baru, detail kontak(Edit dan Hapus), menghubungi pelanggan lewat aplikasi chat.
Wireframe
Selanjutnya adalah membuat wireframe atau memvisualisasikan secara Low-Fidelity berdasarkan dengan User Flow yang telah dibuat
UI Styleguide
Selanjutnya setelah membuat gambaran wireframe, akan terlihat komponen yang digunakan secara berulang, maka dari itu tahap selanjutnya adalah UI Styleguide yang akan merubah komponen-komponen yang digunakan secara berulang tersebut menjadi komponen pada UI Styleguide beserta varian-variannya untuk mempermudah dan mempercepat alur kerja designer.
Komponen UI Styleguide dibagi menjadi 3, yaitu Atom, Molekul, dan Organism. Pada komponen Atom terdapat warna, typography, iconography, button, dan input field. Lalu pada Molekul ada action list, header, dan tab bar. Dan yang terakhir Organism ada pop-up dan bottomsheet.
UI Design
Setelah UI Styleguide terbuat, saya lalu menerukan membuat High-Fidelity design dari design Low-Fidelity dari wireframe
Prototype
Prototype adalah simulasi jika design Hi-Fi dijalankan seperti di real app, dengan menghubungkan tiap-tiap framenya agar bisa digunakan simulasinya, berikut adalah keseluruhan prototype dari Hi-Fi Design
4 — Testing
Untuk menguji hasil dari keseluruhan design process yang telah dibuat oleh tim, kami melakukan user testing dengan kriteria
- Umur = 22–30 tahun
- Lokasi = Jawa Timur
- Jenis Kelamin = Perempuan
- Status Pernikahan = Sudah Menikah
- Jenis Usaha = Fashion
- Skala Usaha = Mikro
Research Objective
- Mencari tahu tingkat keberhasilan SEQ untuk fitur CRM
- Mencari tahu kebutuhan pengguna dalam menggunakan fitur CRM
List of Question & Research Scenario
Setelah itu kami menyusun dokumen-dokumen untuk keperluan research, dokumen itu adalah Stimulus Research dan Record Data Research, lalu kami mencari partisipan untuk bisa diajak menjadi responden research kami, dan hasilnya sudah tertera pada dokumen di bawah ini
https://drive.google.com/drive/folders/1JHwQRm4P5-vDRrqguumH6m8C-OpFyAPK?usp=sharing
Hasil Testing
Setelah semua sudah selesai dilakukan testing dengan partisipan, semua flow dicoba oleh partisipan, kami menanyakan berapa nilai yang didapatkan dari kerja tim kami dengan menggunakan metrik SEQ (Single Ease Question). Dan didapatkan lah nilai dari 1–7 kami mendapat nilai 6.
Lalu kami menanyakan apa yang harus kami lakukan untuk mendapatkan nilai 7, dan partisipan memberi saran untuk memperhalus UI Design agar lebih modern dan lebih ramah ke pengguna, dengan itu kami akan melakukan Iterative Design
Iterasi Design
Feedback dari user lalu kami terapkan dengan melakukan iterasi design yaitu mengulangi perancangan design untuk diperbarui lagi dan didapatkan lah UI Design sebagai berikut.
Hasil dari iterasi tersebut terlihat pada design beranda yang baru, lalu detail kontak yang lebih informatif, dan fitur CRM yang ada pada detail pesanan semakin memudahkan pengguna untuk terhubung dengan database klien. Dan final prototype sebagai berikut
Kesimpulan
Secara keseluruhan flow sudah cukup jelas untuk user, dengan nilai usability metric yang diperoleh adalah 6 tetapi kami tetap harus melakukan ekplorasi untuk memaksimalkan aplikasi ini dimasa depan.