Skilvul: UI/UX Case Study — Krealogi
⚠️Disclaimer: Project ini dilakukan sesuai dengan pengarahan dan dibawah pengawasan yang diberikan oleh Skilvul sebagai bagian dari program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan Riset, dan Teknologi Republik Indonesia. Saya adalah peserta Studi Independen UI/UX Design Mastery, tetapi saya tidak dikontrak secara profesional oleh Skilvul. Project ini merupakan sebuah UX Challenge dari Skilvul dan di sini saya akan membagikan semua proses desain dalam membuat project ini.
Aplikasi Pencatatan Pembukuan
Usaha Kecil Mikro dan Menengah (UMKM) adalah usaha produktif yang dimiliki oleh perorangan atau perusahaan. Jenis UMKM diklasifikasikan menjadi beberapa kriteria berdasarkan omzet, yaitu usaha mikro, kecil, dan menengah. Bisnis yang baik tidak dapat dipisahkan dari akuntansi yang baik. Membuat sistem akuntansi yang baik bagi pelaku UMKM seringkali sulit dan terkadang merepotkan. Oleh karena itu, tidak jarang beberapa pelaku UMKM mengabaikan hal ini. Namun seiring berkembangnya teknologi dan dunia digital, telah diciptakan beberapa aplikasi yang bermanfaat untuk memudahkan pembukuan UMKM, salah satunya adalah Krealogi.
Krealogi adalah aplikasi akuntansi bisnis yang memungkinkan beberapa fungsi. Beberapa fitur utamanya adalah pelacakan inventaris, jadwal produksi, pelacakan pesanan, pelacakan biaya/pengeluaran, dan laporan.
Selama pengembangan, beberapa pengguna mengalami kesulitan karena layar UI tidak ramah pengguna dan beberapa fitur lainnya hilang. Oleh karena itu, Krealogi memberikan challenge kepada pihak Skilvul untuk membuat beberapa fitur baru untuk pengembangan aplikasi Krealogi. Saya dan tim saya memutuskan untuk mengembangkan fitur Customer Relationship Management (CRM).
Sebagai challenge partner, Krealogi bertujuan mengembangkan fungsi CRM untuk menciptakan jangkauan dan keterlibatan yang lebih baik antara pengguna aplikasi dan pelanggan. Krealogi menawarkan beberapa syarat untuk mengembangkan fungsi CRM, termasuk kartu nama dan database kontak pelanggan.
Sasaran
Membangun fitur terkait CRM sehingga pemasaran dapat menjangkau pelanggan dengan mudah.
Mengembangkan antarmuka pengguna yang ramah dan mudah digunakan.
Peran dalam Tim
Selama proses pengerjaan project ini, saya bekerja dalam tim yang beranggotakan 4 orang yaitu saya, Ramadhan Kurniawan, Mahadewi, dan Firmansyah, kami memiliki tanggung jawab dan tugas yang sama dalam pelaksanaan proyek ini, 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
Dalam proyek ini, metode Design Thinking digunakan sebagai Proses Desain UX. Metode ini dipilih karena fleksibilitasnya, beberapa langkah proses design thinking tidak harus dilakukan satu per satu, bahkan dapat tidak perlu dilakukan, sesuai dengan kebutuhan. Dengan cara ini, pekerjaan proyek dapat dilakukan dengan lebih fleksibel dan mudah.
Seluruh proses kerja desain dilakukan dengan Figma, menggunakan FigmaJam dalam beberapa tahapan untuk mengumpulkan ide secara bersama-sama. Seluruh proses desain dan kolaborasi kemudian dilakukan di File Desain Figma.
Tahap 1 — Empathize
Tahap pertama dalam proses Design Thinking adalah Empathize. Pada tahap ini, dilakukan pencarian dan pengumpulan informasi tentang pengalaman pengguna aplikasi ini. Informasi tersebut dapat memberikan gambaran yang jelas tentang kesulitan pengguna, sehingga aplikasi harus dikembangkan lebih lanjut. Pengalaman pengguna aplikasi Krealogi disediakan dalam ringkasan proyek, sehingga harus dipahami sepenuhnya untuk memberikan konteks kebutuhan pengguna yang jelas.
Mengenai fungsi CRM yang kami kembangkan, beberapa pengguna merasa kesulitan untuk menyimpan pesanan dan menghubungi pelanggan pada waktu yang sama dan tidak dalam aplikasi yang sama. Krealogi tidak menyediakan database kontak pelanggan, sehingga kontak pelanggan harus dilakukan secara manual melalui WhatsApp. Hal ini mengarah pada proses yang rumit yang hanya dilakukan oleh operator UMKM dengan menghubungi pelanggan mereka.
Selain itu, Secondary Research dilakukan untuk menganalisis lebih lanjut aplikasi pembukuan dan analisis aplikasi lainnya yang sejenis. Beberapa eksperimen singkat dilakukan dengan aplikasi pencatatan lain untuk membandingkan beberapa kelebihan dan kekurangan Krealogi dengan aplikasi lain. Kemudian dianalisis saran dan rating aplikasi Krealogi di Google Play Store. Karena penelitian dilakukan secara singkat dan sederhana, tidak ada data penting yang dapat dimasukkan.
Tahap 2 — Define
Setelah mengetahui dan telah menerima informasi tentang apa yang dibutuhkan pengguna, proses berlanjut ke langkah berikutnya, yaitu Define. Pada langkah ini, ditentukan Pain Points dari pengguna, kemudian dikelompokkan dalam Affinity Diagram. Kemudian topik utama masalah tersebut menjadi ide sasaran dari masalah yang akan dipecahkan.
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 mengumpulkan ide tentang masalah yang mungkin dialami pengguna dengan fungsi CRM dan sticky notes. Beberapa anggota tim akan menemukan poin kesulitan yang sama dan catatan tempel terkait akan dikelompokkan bersama.
Affinity Diagram
Setelah semua Pain Points dituliskan pada sticky notes, dilakukan pengelompokan ke dalam sticky notes ang berkaitan dengan masalah yang sama. Ini menunjukkan bagaimana topik utama tertentu ditampilkan dari kumpulan sticky notes. etiap kelompok topik diberi nama yang tepat untuk menggambarkan keseluruhan masalah yang ditemukan.
Setelah dilakukan pengelompokan, ditemukan 4 topik utama terkait CRM yaitu integrasi database pelanggan, kartu nama, dan statistik pelanggan.
How-Might-We
Untuk setiap topik utama masalah, tujuan diusulkan untuk memecahkan masalah dalam topik itu. Diagram ini disebut How-Might-We.. Kelompok memutuskan untuk mengidentifikasi cara untuk memecahkan masalah dari setiap topik.
Tim menjelaskan bahwa tema integrasi database pelanggan adalah untuk memudahkan pemangku kepentingan UMKM untuk meninjau dan mengelola catatan penjualan dan berkomunikasi dengan pelanggan. Tema kartu nama bertujuan untuk memfasilitasi peluang bagi pelaku UMKM untuk mempromosikan usahanya. Tujuan dari tema statistik pembeli adalah untuk memberi penjual kesempatan untuk membiasakan diri dengan statistik pembelian pelanggan.
Tahap 3 — Ideate
Setelah semua tujuan target tujuan ditentukan pada How-Might-We dalam tahap Define, proses berpindah ke fase Ideate. Pada fase ini, ide diubah dari solusi menjadi tujuan. Ide solusi kemudian diurutkan ke dalam bagan prioritas berdasarkan dampak pada pengguna dan upaya yang diperlukan untuk membuatnya.
Ide Solusi
Semua anggota kelompok mengumpulkan ide solusi terkait fitur atau fungsi yang dapat mencapai tujuan yang telah ditetapkan pada sticky notes. Beberapa ide serupa dikelompokkan bersama.
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.
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 Database 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.
Wireframe
Kemudian, Wireframe dibuat sesuai dengan Task Flow. Proses-proses yang terdapat pada Task Flow divisualisasikan ke dalam Wireframe dalam bentuk umum.
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
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.
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.
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.