Design Thinking: UI/UX KitaBisa
Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika bekerja sama dengan Skilvul dan KitaBisa sebagai Challenge Partner.
Saya tidak bekerja atau diikat dalam kontrak professional oleh KitaBisa.
Introduction
KitaBisa merupakan salah satu platform crowdfunding (penggalangan dana) terbesar di Indonesia yang memiliki ijin dan legalitas kegiatan dengan pengawasan oleh Kementrian Hukum dan HAM , Kementrian Sosial, KomInfo, dan BAZNAS.
Challenge ini dibuat sebagai upaya memberikan pelayanan dan performa terbaik bagi para calon donatur, donatur maupun penggalang dana.
Problem Brief
Saat ini KitaBisa ingin melakukan redesign bahkan revamp atau perubahan pada bagian “Berita” yang dapat ditemukan melalui menu Inbox di navigasi menu — lalu lihat bagian Berita di sebelah bagian Pesan.
Fitur ini merupakan cara KitaBisa untuk mendistribusikan informasi dari kampanye yang telah memperoleh donasi. Tidak hanya itu, informasi yang diberikan juga bisa berkaitan dengan kampanye sejenis sehingga pengguna bisa melakukan donasi ulang di kampanye lain.
Redesign KitaBisa bertujuan:
- Menyediakan dan mempermudah menemukan informasi mengenai pembaharuan kampanye. Hal ini akan membuat para donatur dapat terlibat secara emosional dengan kampanye yang telah didonasikan.
- Mendorong donatur untuk melakukan donasi kembali ke kampanye yang telah dibantu atau kampanye lainnya yang berhubungan dengan kampanye sebelumnya.
KitaBisa membutuhkan sebuah desain aplikasi yang bisa menghadirkan informasi atau berita terbaru mengenai kampanye kepada donatur sehingga pengalaman berdonasi mereka lebih terikat secara emosional dan meningkatkan tingkat retensi atau pengguna tetap yang menggunakan produk aplikasi KitaBisa.
Beberapa rekomendasi fitur yang diharapkan pada bagian Berita yang ingin KitaBisa ubah adalah:
- Donatur dapat melihat pembaharuan informasi dalam format cerita, terbuka juga bentuk eksplorasi di luar gambar dan teks.
- Donatur dapat melihat informasi terbaru mengenai pemanfaatan dana yang didonasikan ataupun digalang.
berdasarkan problem brief tersebut kami, Kelompok 4: Didik Setiawan, Farah Ayu Anandita, dan avin sensius menggunakan metode Desgin Thinking untuk menjawab challenge yang diberikan.
Design Process
Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test.
Design Thinking merupakan proses iteratif non-linier yang digunakan untuk memahami pengguna, menantang asumsi, mendefinisikan kembali masalah, dan menciptakan solusi inovatif untuk prototipe dan pengujian.
Proses Design Thinking yang kami lakukan adalah sebagai berikut:
A. Empathize
Tahap Empathize atau empati kepada pengguna bertujuan mengenal dan memahami keinginan, kebutuhan, serta tujuan pengguna (user) ketika menggunakan sebuah produk.
Tahap ini tidak kami lalui karena telah ada problem brief yang ditentukan.
Berikut problem brief KitaBisa UI/UX Challenge:
Menyediakan dan mempermudah donatur untuk menemukan informasi mengenai pembaharuan kampanye dan mendorong donatur untuk berdonasi kembali.
B. Define
Tahap Define bertujuan mendefinisikan kebutuhan, kesulitan, dan permasalahan (paint point) dari sisi user ketika menggunakan Aplikasi KitaBisa yang ada saat ini.
Berikut paint point yang berhasil kami identifikasi:
C. Ideate
Tahap Ideate merupakan tahap dimana kami mencari segala macam solusi yang sekiranya dapat memecahkan permasalahan pada tahap sebelumnya.
Tahapan ini dilakukan untuk menghasilkan sebanyak mungkin sudut pandang serta ide-ide baru, tahap yang kami lalui meliputi:
- How Might We — Solution Idea
Berdasarkan paint point hasil identifikasi sebelumnya, kami mencoba berperan sebagai pengguna dan mengajukan berbagai pertanyaan yang sekirannya dapat melahirkan ide solusi terhadap permasalahan yang ada.
- Affinity Diagram
Affinity diagram merupakan diagram yang berisi susunan — sesuatu — yang dikelompokkan berdasarkan kepentingan.
Dari hasil solution Idea yang sudah dibuat, kami mengelompokkan solusi di affinity diagram sebagai berikut:
- Prioritazion Idea
Prioritazion Idea merupakan pengelompokan (kembali) berdasarkan skala prioritas — terhadap hasil affinity diagram — yang akan mempermudah designer untuk lebih fokus pada hal terpenting yang ingin dicapai.
Berikut prioritazion idea yang kami susun setelah mempertimbangkan batasan pada problem brief yang diberikan:
- Crazy 8's
Crazy 8’s merupakan metode brainstorming design untuk memberikan gambaran desain dengan cara mengumpulkan ide dalam waktu yang singkat.
Crazy 8’s dibuat sebagai kerangka awal sebelum membuat wireframe di aplikasi. Proses ini biasanya dilakukan dengan menggunakan kertas HVS yang dilipat menjadi 8 bagian.
Berikut hasil crazy 8’s yang telah kami lakukan:
D. Design
Tahap Design merupakan tahap dimana kami mulai membuat rancangan produk yang akan kami bangun atau redesign.
Ide redesain yang akan kami bangun meliputi:
- Menambahkan Progress Bar Dana pada campaign dan Button Donasi Kembali di setiap halaman kabar donasi untuk meningkatkan CTA #OrangBaik untuk melakukan donasi kembali;
- Membedakan bagian Perkembangan Dana dan Perkembangan Pasien agar fokus #OrangBaik tidak terpecah;
- Membuat opsi penyajian Kabar Donasi berupa Cerita dan Video untuk meningkatkan sisi emosional #OrangBaik terhadap campaign;
- Mengubah posisi dan ukuran Button Donasi Kembali pada Halaman Donasi Saya agar lebih menarik perhatian #OrangBaik untuk melakukan Donasi Kembali dan menambahkan Button Kabar Donasi agar memudahkan #OrangBaik untuk melihat langsung ke Halaman Kabar Donasi.
Tahapan yang kami lakukan meliputi:
- Task Flow
Task Flow menggambarkan proses dan tahapan apa saja yang harus dilewati oleh user untuk menyelesaikan suatu task tertentu.
Pada project redesign ini kami membuat Task Flow untuk Kabar Donasi dan Donasi Saya sebagai berikut:
- Wireframe
Wireframe merupakan kerangka dasar dari halaman produk yang biasanya telah memiliki berbagai komponen seperti banner, status bar, button, navbar, dll.
Wireframe dibuat dengan tujuan menyusun hirarki tata letak dari semua komponen dalam satu layer beserta alur fungsionalitasnya.
- Design System
Design system merupakan kumpulan komponen desain yang dapat digunakan secara berulang dengan tujuan menjaga konsistensi desain.
Design system yang kami buat meliputi: color pallet, typography, button style, input field, tabbing, icon, navigation bar, status bar, card, dan component lainnya dengan berbagai variantnya.
Berikut diantara design system yang kami buat:
- Hi-Fi Design
Berdasarkan Design System yang telah dibuat dan mengacu pada rancangan Wireframe maka kami mulai menyusun Hi-Fi Design untuk memberikan gambaran yang lebih realistis kepada user.
Perubahan yang kami lakukan meliputi:
- Prototyping
Prototype merupakan versi simulasi atau sample dari suatu produk yang menyerupai dengan aslinya dan dapat berinteraksi dengan pengguna.
Prototyping bertujuan untuk menguji ide dan desain yang akan dibangun.
Berikut skema prototyping yang telah kami buat:
Adapun hasil prototype KitaBisa yang telah kami buat adalah sebagai berikut:
E. Test
Proses pengujian (testing) bertujuan untuk melihat bagaimana target users berinteraksi dengan prototype yang sudah dibuat sebelumnya.
Tahap pengujian juga akan menghasilkan feedback yang berharga untuk meningkatkan performa dari produk yang akan dihasilkan.
Tingkat keberhasilan uji coba diukur dengan menggunakan Usability Metric. Metode Usability Metric yang digunakan adalah Single Ease Question (SEQ). Metode ini digunakan untuk mengukur kemudahan yang dirasakan pengguna setelah menyelesaikan semua skenario/task yang diberikan.
Agar proses testing dapat berjalan baik dan efektif, kami mempersiapkan:
Stimulus User Research sebagai panduan atau langkah-langkah apa saja yang harus dilakukan mulai saat akan interview, testing, sampai akhir interview. Contoh dokumen:
Record Data User sebagai dokumentasi hasil wawancara agar lebih mudah untuk dievaluasi. Contoh dokumen:
- User Criteria
Setelah membuat Stimulus User Research dan Record Data User saatnya melakukan proses wawancara kepada user. User dipilih berdasarkan kriteria yang dibuat sebelumnya di Stimulus User Research, antara lain:
- Pria atau Wanita
- Usia 25–35 tahun
- Semua jenis pekerjaan
- Pernah menggunakan platform Kita Bisa
- Domisili seluruh Wilayah Indonesia - User Scenario
Sekenario wawancara dan testing kepada user dilakukan melalui tahapan:
- Perkenalan
- Sesi tanya jawab
- Usability Testing
- Pertanyaan setelah Usability Testing - Hasil SEQ
Berdasarkan usability testing yang telah dilakukan, user memberikan penilaian sebagai berikut:
Berikut posisi Result Score pada SEQ Raw Score:
Dengan Result Score 6 pada SEQ Raw Score menunjukkan bahwa prototype Aplikasi KitaBisa yang kami rancang dapat diterima dengan baik oleh user.
Berikut beberapa kutipan dari user setelah melakukan usability testing dari prototype yang kami kembangkan:
“Di setiap halaman kabar donasi ada button donasi kembali, jadi mendorong keinginan buat donasi lagi, soalnya gampang, gak perlu back ke halaman-halaman sebelumnya”
“Desain penyajian kabar donasi yang dikemas menjadi cerita dan video, juga sangat bagus, kok sampai kepikiran ya, karena preferensi orang kan masing-masing, mungkin ada yang lebih suka video dibandingkan harus membaca cerita yang panjang”
“Untuk desain bagian cerita juga lebih jelas, warnanya dibeda-bedain untuk kontek yang berbeda, jelas juga timelinenya berdasarkan tanggal, terlihat lebih rapi”
Conclusion
- Redesign aplikasi KitaBisa pada Kabar Donasi dan Donasi Saya mendapat respon yang baik dari user dengan memperoleh nilai 6 dari skala 7 pada metode Usability Metric: Single Ease Question (SEQ).
- Challenge ini sangat menarik bagi saya pribadi terlebih hal ini merupakan keterlibatan pertama saya dalam dunia UI/UX design.
