UI/UX Case Study: Designing Simple CRM Features — Krealogi

9 min readMay 31, 2022

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 Krea logi.

Latar Belakang

krealogi merupakan sebuah platform aplikasi di bawah develop Du Anyam yang bergerak di bidang Supply Chain Management. platform ini dibuat

Sasaran

menyediakan fitur CRM yang aksesbilitasnya mudah dan bermanfaat serta sesuai dengan kebutuhan user saat ini.
Mengembangkan UI platform krealogi yang ramah dan mudah untuk digunakan.

Peran Dalam Tim

Dalam pengerjaan proyek ini, saya berkolaborasi dalam tim yang beranggotakan 5 orang, yaitu saya sendiri,Agung Ribowo, Fahmi Nasir Pohan, Muhaemin Iskandar, dan Yupiter Aryo. Dalam pengerjaan proyek ini saya memiliki tanggung jawab yaitu:

Melakukan Secondary Research
Mengumpulan ide-ide solusi
Membuat Crazy 8's
Membuat Userflow
Membuat Wireframe
Membuat Design System
Membuat Mockup
Membuat Prototype
Melakukan Usability Testing

Tools

Dalam pengerjaan proyek ini saya memakai beberapa tools yang mendukung saya untuk menyelesaikan proyek ini, antara lain;

Figma
Digunakan untuk brainstorming ide dengan anggota tim dan juga untuk membuat design keseluruhan proyek ini.
Google Sheet
Digunakan untuk Secondary Research dan juga untuk Record Data User Research.
Google Docs
Digunakan untuk membuat Stimulus User Research.
Zoom
Digunakan untuk In-Depth Interview dengan responden.

Design Process

Metode yang digunakan

Pengerjaan proyek ini saya dan tim sepakat untuk menggunakan metode Design Thinking. Metode ini dipilih karena fleksibilitasnya yang tidak berpatokan terhadap urutan-urutan tahapannya. Design Thinking sendiri merupakan metode pemecahan masalah yang berfokus pada user, sehingga dapat memahami apa saja yang dibutuhkan oleh user.

Design Thinking. dikutip dari Murni Telaumbanua

1 — Empthasize

Pada tahap ini kami melakukan Secondary Research yaitu mengumpulkan data terkait aplikasi Krealogi. Kami melakukan riset dengan cara melakukan pengamatan terhadap aplikasi Krealogi itu sendiri.

Krealogi sendiri memiliki permasalahan yaitu tidak memiliki desain aplikasi yang user friendly untuk target pengguna mereka. Saat ini Krealogi membutuhkan sebuah desain aplikasi yang user friendly dan tentunya bisa membantu pengguna Krealogi untuk mencatat kegiatan operasional mereka, membuat strategi dan menjaga alur operasional mereka.

Kami menemukan beberapa temuan dari hasil riset kami yang bisa dijadikan acuan untuk mengembangkan aplikasi Krealogi. Berikut hasil temuan kami:

Belum ada fitur chat untuk menghubungkan langsung antara user dengan pembeli.
Belum ada database pelanggan yang dapat membantu user untuk menawarkan ulang produk yang sudah pernah dibeli oleh pembeli.

2 — Define

Setelah mendapatkan hasil secondary research, selanjutnya masuk ke tahap Define. Pada tahap ini kami mendefinisikan permasalahan yang telah kami dapatkan dari hasil secondary research sebelumnya. Tahap define dimulai dengan mengumpulkan Pain Point terlebih dahulu. Tujuan pada tahap Define ini sendiri adalah untuk menemukan hasil dari kebutuhan user pada tahap Emphatise.

Pain Poin

Untuk pembuatan Pain Point ini kami menggunakan FigmaJam sebagai tools untuk brainstorming. Pain Point diatas kami dapatkan dari hasil menganalisa aplikasi Krealogi dan menempatkan posisi sebagai pengguna aplikasi Krealogi.

Setelah mendapatkan Pain Point selanjutnya kami membuat kemungkinan-kemungkinan yang bisa dijadikan solusi atas Pain Point tersebut atau yang biasa disebut How-Might We.

How Might We (HMW)

How-Might We sendiri merupakan ide-ide solusi dari Pain Point. Tiap anggota menuliskan ide-ide apa yang bisa dijadikan solusi atas pain point-pain point yang telah dibuat.

Setelah menuliskan How-Might We, kami berlima melakukan voting untuk memilih ide solusi mana yang akan digunakan untuk tahap selanjutnya. Dari hasil voting yang kami lakukan, kami memperoleh How-Might We:

Membuat Fitur Info Card User Agar User Mengetahui Data Pembeli,
Membuat Fitur Chating Agar User Dengan Pembeli Dapat Terhubung.
Membuat Fitur Statistik Penjualan / Pembeli Agar Dapat Menentukan Target Campaign Selanjutnya.

3 — Ideate

Selanjutnya pada tahapan ini kami melakukan brainstorming ide terhadap How-Might We yang didapat pada tahap sebelumnya. Tujuan dari brainstorming pada tahap ini adalah untuk menghasilkan Crazy 8's.

Solution Idea

Tahap Ideate dimulai dengan Solution Idea. Dimana masing-masing anggota kelompok menuliskan solusi dari How-Might We yang didapat, yaitu Membuat Fitur Info Card User Agar User Mengetahui Data Pembeli, Membuat Fitur Chating Agar User Dengan Pembeli Dapat Terhubung, dan Membuat Fitur Statistik Penjualan / Pembeli Agar Dapat Menentukan Target Campaign Selanjutnya.

Affinity Diagram

Dari hasil Solution Idea yang didapat, selanjutnya kami melakukan pengelompokan terhadap Solution Idea tersebut kedalam Affinity Diagram. Solution Idea yang memiliki maksud atau tujuan yang sama kami jadikan satu kelompok sehingga terdapat 3 kelompok sebagai berikut.

Prioritization Idea

Pada Prioritization Idea ini kami membagi Affinity Diagram kedalam 4 bagian yang ditentukan berdasarkan User Value dan Effort. Ke 4 bagian itu adalah:

Yes Do It Now, untuk fitur yang memiliki User Value yang tinggi dan Effort yang rendah.
Do Next, untuk fitur yang memiliki User Value yang tinggi namun Effort juga tinggi.
Do Last, untuk fitur yang memiliki User Value yang rendah dan Effort yang rendah.
Later, untuk fitur yang memiliki User Value yang rendah namun Effort yang tinggi.

Setelah Affinity Diagram dibagi menjadi 4 bagian, selanjutnya kami melakukan voting untuk menentukan fitur apa yang ingin dibuat Crazy 8’s nya. Hasil voting kami adalah membuat 2 fitur yaitu:

Info Card Pelanggan.
Interaksi User Dengan Pelanggan.

Crazy 8's

Setelah selesai voting pada tahap Prioritization Idea, selanjutnya masuk ke bagian akhir di tahap Ideate yaitu Crazy 8’s. Pada tahap Crazy 8’s ini masing-masing anggota membuat gambaran kasar terkait tampilan dari fitur yang dipilih pada tahap Prioritization Idea dan kemudian dilakukan voting untuk menentukan gambaran mana yang akan dibuat menjadi Wireframe.

4 — Prototyping

Tahapan ini adalah tahap dimana saat untuk menerapkan hasil Crazy 8’s menjadi desain yang lebih baik, yang bisa dimengerti oleh orang lain. Terdapat beberapa proses yang dilakukan pada tahap ini, dimulai dari pembuatan Userflow, Wireframe, Design System, UI Design, dan Prototype.

Userflow

Proses pertama yaitu membuat Userflow yang diambil dari tahap Ideate sebelumnya.

Favorit Pembelian Pelanggan

Riwayat Pembelian Pelanggan

Wireframe

Proses selanjutnya adalah membuat Wireframe berdasarkan hasil voting Crazy 8’s. Wireframe yang dibuat sedikit berbeda dengan Userflow yang telah dirancang. Pada Wireframe ini saya menyatukan flow Riwayat Pembelian Pelanggan dan Favorit Pembelian Pelanggan menjadi satu dengan flow Detail Informasi Pelanggan.

Design System

Setelah membuat Wireframe, proses selanjutnya adalah membuat Design System. Design System bertujuan agar UI Design yang nantinya dibuat akan konsisten, tidak berbeda style UI Design nya. Krealogi sudah memberikan contoh Design System mereka, jadi Design system yang saya buat disini adalah sebagian besar mengikuti dari Design System Krealogi.

UI Design

Setelah Design System selesai dibuat, proses selanjutnya adalah membuat UI Design. UI Design yang dibuat mengacu kepada Wireframe dan Design System yang telah dibuat sebelumnya. Proses pembuatan UI Design dimulai dari membuat halaman Home Krealogi sampai halaman-halaman tambahan yang berhubungan dengan fitur yang dibuat.

Tampilan UI Design yang dibuat sebagian besar sama dengan tampilan yang ada pada aplikasi Krealogi. Saya mengubah beberapa tata letak form pada Catat Pesanan dan menambahkan beberapa halaman tambahan terkait fitur Chat dan Detail Informasi Pelanggan.

Catat Pesanan & Chat

Halaman home pada design yang kami buat merupakan tampilan home pada aplikasi Krealogi yang terbaru. pada halaman catat pesanan, saya mengubah tampilan krealogi yang sebelumnya menggunakan 3 Steps (Progress Bar) menjadi 4 Steps. Dengan memisahkan rencana pengiriman yang sebelumnya berada satu Step dengan pembeli. Kami juga menambahkan Button Chat pada halaman Detail pesanan masuk dengan tujuan memudahkan pengguna untuk langsung dapat menghubungi calon pembeli.

Detail Informasi Pelanggan

Halaman Home di atas adalah Home ketika selesai mencatat pesanan. untuk Flow detail informasi pelanggan, saya terinspirasi dari flow chat Shopee yang kurang lebih sama, namun kami menambahkan FAB pada list Chat dan list Kontak. Kemudian untuk halaman profil pelanggan terdapat riwayat pembelian dan favorit yang kami pisah dengan Data diri pelanggan.

Chat

Flow pada fitur Chat kurang lebih sama dengan flow Detail Informasi Pelanggan. Ada beberapa halaman yang ditambahkan seperti tampilan Chat.

Prototype

Proses terakhir pada tahap Prototype adalah Prototype itu sendiri. Pada proses ini, hasil UI Design sebelumnya dibuat kedalam Prototype agar UI Design agar terlihat lebih interaktif lagi.

5 — Testing

kemudian pada tahapan akhir adalah Proses Testing. Untuk menguji Prototype yang telah dibuat, saya melakukan Usability Testing untuk mengetahui tinggat kegunaan, kemudahan, dan kepuasan terkait fitur yang saya tawarkan.

Research Objective

demikian point-point Research Objective yang telah kami diskusikan sebagai berikut;

Mencari tahu kebutuhan user pada saat melakukan pencatatan pesanan.
Mencari tahu kebiasaan user dalam menyampaikan informasi kepada calon pembeli.
Mencari tahu kebiasaan user dalam menyimpan data pelanggan mereka.
Mencari tahu kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses Catat Pesanan dan Chat, Database Pelanggan, dan Chat.

Responden Criteria

Berusia 20–40 tahun
Laki-Laki / Perempuan
Berdomisili di seluruh wilayah Indonesia
Memiliki kemampuan Bahasa Indonesia sebagai Native Language
Pemilik usaha kecil, mikro, ultra mikro.
Mampu/mahir menggunakan smartphone.

Research Scenario

terkait pengujian ini, kami menetapkan 3 Main Task yang menjadi patokan responden untuk mengukur kegunaan dan kemudahan fitur tersebut bagi responden.

[TASK 1] Meminta responden untuk melakukan Catat Pesanan dan kemudian dilanjutkan dengan melakukan Chat calon pembeli dan observasi apa yang dilakukan oleh responden.
[TASK 2] Meminta responden untuk melakukan Tambah Kontak, lihat Detail Informasi Pelanggan, Edit Data Pelanggan, dan Hapus Kontak pada halaman Database Pelanggan dan observasi apa yang dilakukan oleh responden
[TASK 3] Meminta respoinden untuk melakukan Chat dengan kontak pelanggan yang telah disimpan dan observasi apa yang dilakukan oleh responden.

Hasil Testing

Pada saat wawancara berlangsung saya menanyakan pertanyaan-pertanyaan dasar terkait usaha yang sedang responden jalani. Kemudian saya meminta responden untuk melakukan 3 Task yang telah disinggung sebelumnya. Di setiap responden berhasil melakukan 1 task, saya menanyakan nilai dari task tersebut. Saya menggunakan SEQ (Single Ease Question) sebagai User Matric dalam pengujian ini. Dari skala 1–7, reponden memberi nilai sebagai berikut

[Task 1] responden memberi nilai 6, dengan catatan
- Button agak sulit di tekan, harus pas pada tulisan atau icon.
[Task 2] responden memberi nilai 7, dengan tidak meninggalkan catatan.
[Task 3[ responden memberi nilai 7, dan memberi masukan
- Buat balasan chat otomatis.

Kesimpulan

Setelah melakukan Riset terkait perancangan fitur Simple CRM pada aplikasi krealogi selama kurang lebih 3 bulan, kami mendapatkan respon yang baik pada responden dengan nilai rata-rata 7/10. selain itu, dengan mengikuti program UI/UX yang dicanangkan oleh Digital Talent Scholarship Kominfo X Skilvul 2022, kami juga mendapati banyak sekali pembelajaran. mulai dari proses pengumpulan data, cara berdiskusi yang baik dari internal tim pun untuk tim general, juga kami lebih banyak mengetahui mengenai konsep design thinking yang kami improvisasikan untuk proyek Krealogi ini. Karena keterbatasan waktu selama pengerjaan proyek ini, saya selaku perwakilan dari kelompok ini tahu masih banyak yang harus diperbaiki di masa depan. Besar harapan saya aplikasi ini dapat menjadi wadah yang dapat mengembangkan pengetahuan dan keterampilan masyarakat dengan kesan yang menyenangkan.

saya Juga banyak berterima kasih kepada Rekan Kelompok 5 sebagai Suksesor proyek ini.