UX Case Study: Krealogi — Simple CRM (Customer Relationship Management)

Fahmi Nasir Pohan
10 min readMay 23, 2022

--

Disclaimer
Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Digital Talent Scholarships (DTS) Kementerian Komunikasi dan Informatika dengan Skilvul dan Krealogi sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Krealogi.

Intro

Latar Belakang

Krealogi merupakan platform digital yang dikembangkan oleh Du Anyam. Aplikasi krealogi dibuat dengan tampilan yang ramah pengguna, sehingga dapat digunakan oleh pelaku usaha dari berbagai kalangan.

Fitur yang dibuat juga bertujuan untuk menjawab permasalahan yang dihadapi oleh para pelaku usaha. Beberapa fitur utamanya adalah Pencatatan Pesanan Masuk, Rencana Produksi, Pengelolaan Inventaris, Pencatatan Pengeluaran/Pemasukan, dan Laporan.

Namun pada kenyataannya sebagian pengguna menghadapi kesulitan karena tampilan antarmuka aplikasi yang tidak ramah pengguna, dan belum tersedianya beberapa fitur pendukung yang dapat membantu penggunanya dalam mengelola usahanya. Beberapa fitur yang belum tersedia adalah:

  1. Simple CRM
  2. Cash Flow Feature
  3. Integration with Logistic and Marketplace

Pada pengerjaan proyek challenge partner Krealogi, saya dan tim memutuskan untuk memilih fitur Simple CRM (Customer Relationship Management). Fitur CRM ini sendiri merupakan salah satu fitur yang penting karena fitur ini berfungsi untuk mengelola hubungan antara user dengan customernya.

Objektif

Adapun tujuan utama dari pengembangan fitur ini adalah:

  1. Membuat aplikasi Krealogi yang user friendly untuk target pengguna masa kini.
  2. Membuat solusi berupa desain untuk fitur Krealogi yang belum tersedia (Simple CRM).

Peran Dalam Tim

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

  1. Melakukan Secondary Research
  2. Mengumpulan ide-ide solusi
  3. Membuat Crazy 8's
  4. Membuat Userflow
  5. Membuat Wireframe
  6. Membuat Design System
  7. Membuat Mockup
  8. Membuat Prototype
  9. Melakukan Usability Testing

Tools

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

  1. Figma
    Digunakan untuk brainstorming ide dengan anggota tim dan juga untuk membuat design keseluruhan proyek ini.
  2. Google Sheet
    Digunakan untuk Secondary Research dan juga untuk Record Data User Research.
  3. Google Docs
    Digunakan untuk membuat Stimulus User Research.
  4. 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.

1. Empathise

Pada tahap ini saya dan tim melakukan Secondary Research demi 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 Point

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

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.

How-Might We

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:

  1. Membuat Fitur Info Card User Agar User Mengetahui Data Pembeli,
  2. Membuat Fitur Chating Agar User Dengan Pembeli Dapat Terhubung.
  3. Membuat Fitur Statistik Penjualan / Pembeli Agar Dapat Menentukan Target Campaign Selanjutnya.
Voting How-Might We

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.

Solution Idea

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.

Affinity Diagram

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:

  1. Yes Do It Now, untuk fitur yang memiliki User Value yang tinggi dan Effort yang rendah.
  2. Do Next, untuk fitur yang memiliki User Value yang tinggi namun Effort juga tinggi.
  3. Do Last, untuk fitur yang memiliki User Value yang rendah dan Effort yang rendah.
  4. 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:

  1. Info Card Pelanggan.
  2. 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.

Crazy 8's

4. Prototyping

Tahap 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.

Chat
Detail Informasi Pelanggan
Catat Pesanan & Chat
Riwayat Pembelian Pelanggan
Favorit 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.

Wireframe Catat Pesanan & Chat
Wireframe Detail Informasi Pelanggan
Wireframe Chat

Design System

Setelah membuat Wireframe, proses selanjutnya adalah membuat Design System. Design System ini bertujuan agar UI Design yang nantinya dibuat akan konsisten, tidak berbeda beda 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.

Colors, Texts, dan Buttons Style
Headers dan Textfields Style
Navigation Bar, Stepper, dan Tabbing Style
Card Pesanan, Dropdown, dan Field Chat Style
Cards Style

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, Catat Pesanan, Ringkasan Pesanan, Pesanan Masuk, Detail Pesanan Masuk, dan 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 Step (Progress Bar) menjadi 4 Step. Dengan memisahkan Rencana Rengiriman yang sebelumnya berada satu Step dengan Pembeli. Saya juga menambahkan Button Chat pada halaman Detail Pesanan Masuk dengan tujuan memudahkan pengguna untuk langsung dapat menghubungi calon pembeli.

Detail Informasi Pelanggan

Halaman Home, Inbox, List Chat, List Kontak, Profil Pelanggan, Data Pelanggan

Halaman Home diatas adalah halaman Home ketika selesai mencatat pesanan. Untuk flow Detail Informasi Pelanggan saya terinspirasi dari flow Chat Shopee yang kurang lebih sama, namun saya menambahkan FAB pada List Chat dan List Kontak. Kemudian untuk halaman Profil Pelanggan terdapat Riwayat Pembelian dan Favorit yang saya pisah dengan Data Diri Pelanggan.

Chat

Halaman Home, Inbox, List Chat, List Kontak, 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

Untuk menguji Prototype yang telah dibuat, saya melakukan Usability Testing untuk mengetahui tinggat kegunaan, kemudahan, dan kepuasan terkait fitur yang saya tawarkan.

Research Objective

Sebelum melakukan Usability Testing, saya membuat Research Objective 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.

Respondent Criteria

Setelah membuat Research Objective, selanjutnya saya menentukan Respondent Criteria sebagai berikut

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

Research Scenario

Dalam pengujian ini saya membuat 3 Task yang harus dilakukan oleh responden untuk mengukur kegunaan dan kemudahan fitur tersebut bagi responden. Berikut Task yang harus dilakukan oleh responden

  1. [TASK 1] Meminta responden untuk melakukan Catat Pesanan dan kemudian dilanjutkan dengan melakukan Chat calon pembeli dan observasi apa yang dilakukan oleh responden.
  2. [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
  3. [TASK 3] Meminta respoinden untuk melakukan Chat dengan kontak pelanggan yang telah disimpan dan observasi apa yang dilakukan oleh responden.

Respondent

Wawancara dilakukan kepada responden dengan profesi sebagai Customer Service disalah satu perusahaan di Kota Medan yang memiliki usaha dibidang Snack dan Pakaian. Responden berusia 20 tahun dan usaha yang dimilikinya sudah berjalan selama 2 tahun.

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

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

Outro

Kesimpulan

Proyek ini berjalan kurang lebih 2 bulan, banyak tahapan-tahapan yang dilalui untuk membangun sebuah fitur pada aplikasi. Mulai dari mengumpulan research, kemudian melakukan brainstorming bersama anggota tim sampai dengan membangun prototype. Setelah prototype selesai kemudian lanjut untuk melakukan wawancara kepada responden dan mendapatkan nilai 6 untuk Task 1 dan nilai 7 untuk Task 2 dan 3. Dengan tidak adanya sesi untuk melakukan iterasi design, saya tidak bisa untuk melakukan perbaikan design yang telah disinggung oleh responden.

Reflection

Selama Proyek ini berjalan, saya merasakan banyak hal. Saya mulai dari hal yang tidak mengenakan, yaitu pada awal proyek ini dijalankan. Awalnya tim ini beranggotakan 5 orang, namun satu per satu anggota tim menghilang sampai pada akhirnya tinggal saya sendiri. Hal seru menurut saya selama proyek ini berjalan adalah melakukan brainstroming pada saat semua anggota tim belum berhilangan. Karena disesi itu kita saling bertukar pikiran satu sama lain, ntah berapa banyak ide yang dikeluarkan pada saat itu.

Program ini sangat menarik karena bisa secara langsung mempraktikan hal yang dipelajari di kelas UI/UX Design Mastery dari Skilvul. Materi yang diajarkan juga lengkap mulai dari melakukan research diawal, menyusun ide solusi, kemudian melakukan research lagi untuk usability testing nya. Harapan saya untuk program ini ke depannya adalah agar program ini bisa terus berjalan dan juga melakukan update terhadap challenge partner nya agar semakin ramai.

Terima kasih kepada Digitalent Scholarship Kominfo, Skilvul yang memberikan pejaran baru bagi saya. Terima kasih juga kepada teman-teman dan mentor membantu dan membimbing saya selama program ini berjalan.

--

--