UX Case Study: Redesign Kitabisa.com
Membuat desain terbaru pada halaman “Kabar Terbaru”, sehingga donatur lebih emosional dalam berdonasi.
Disclaimer: Proyek ini merupakan bagian dari program pelatihan UI/UX yang dilaksanakan oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Kitabisa.com adalah Mitra Tantangan. Saya tidak bekerja atau dikontrak secara profesional oleh Kitabisa.com.
Halo perkenalkan nama saya David Isser Harel, saya seorang UI/UX Designer yang mencoba menyelesaikan permasalahan yang dialami salah satu aplikasi crowdfunding yaitu Kitabisa.com dalam merevamp desain halaman “Kabar Terbaru”.
Latar Belakang
Kitabisa merupakan sebuah platform yang digunakan untuk kegiatan menggalang dana dan berdonasi secara online. Platform Kitabisa menjadikan sebuah tempat untuk menyadarkan masyarakat atas pentingnya menggalang dana dan berdonasi. Hal ini dibuktikkan dengan sebuah laporan pada website Kitabisa bahwa pada setiap bulannya, platform Kitabisa memfasilitasi lebih dari 1,5 juta transaksi donasi kebaikan, 4.000 galang dana untuk kepentingan sosial, bergabungnya ratusan Yayasan dan Lembaga sosial di 34 provinsi di seluruh Indonesia, serta ratusan pasien yang membutuhkan perawatan di lebih dari 150 rumah sakit di seluruh Indonesia. Hadirnya platform Kitabisa sebagai donasi online memudahkan para donatur di berbagai daerah dalam merealisasikan sebuah kampanye yang diadakan.
Masalah
Saat ini Kitabisa.com ingin melakukan redesign bahkan revamp atau perubahan untuk bagian “Berita” yang bisa kita temukan melalui menu Inbox di navigasi menu lalu lihat bagian Berita di sebelah bagian Pesan.
Fitur ini merupakan cara kami untuk mendistribusikan informasi dari kampanye yang telah mereka donasi. Tidak hanya itu, informasi yang diberikan juga bisa berkaitan dengan kampanye sejenis sehingga pengguna bisa melakukan donasi ulang di kampanye lain.
Oleh karena itu, kami 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 kami ubah :
- Donatur dapat melihat pembaharuan informasi dalam format cerita. Kami juga terbuka bentuk eksplorasi di luar gambar dan teks.
- Donatur dapat melihat informasi terbaru mengenai pemanfaatan dana yang didonasikan ataupun digalang.
Tujuan
- Menyediakan dan mempermudah menemukan informasi mengenai pembaharuan kampanye.
- Mendorong donatur untuk melakukan donasi kembali ke kampanye yang telah dibantu atau kampanye lainnya yang berhubungan dengan kampanye sebelumnya.
Target Pengguna
- Berusia 18–35 tahun
- Pekerjaan sebagai Mahasiswa/Mahasiswi dan Karyawan/Karyawati pada instansi apapun
- Berdomisili di seluruh wilayah Indonesia
- Memiliki kemampuan Bahasa Indonesia sebagai native language
- Antusias dalam berdonasi dan gemar membantu sesama
- Memiliki gawai sebagai media elektronik
- Dapat berpikir kritis dan open minded
- Sehat jasmani dan rohani
Cangkupan Proyek
Ini adalah desain yang kami buat dari awal, mulai dari konsep, elemen desain, hingga desain per halamannya. Berikut merupakan cakupan halaman-halaman tersebut:
- Pendaftaran Akun
- Login
- Home
- Detail Campaign
- Kabar Terbaru
Peran dalam Tim
Sebagai UI/UX Designer, saya berkolaborasi dengan 2 anggota tim, yaitu Andika Suriya Bagus Saputra dan Assyifa Almayzarani. Dalam tim ini, tanggung jawab kami adalah:
- Menyusun emphatize, Define, dan Ideate stage
- Membuat crazy 8's
- Membuat wireframe
- Membuat style guide
- Membuat UI Design
- Membuat Prototyping
- Melakukan User Research
Proses Perancangan
Untuk menyelesaikan kasus ini, saya dan tim menggunakan metode design thinking dalam merancang solusi desain. Metode ini berguna dalam mengatasi masalah yang kurang jelas dengan cara memahami ulang permasalahan yang ada pada pengguna agar tercipta ide solusi yang lebih baik.
1. Empathize
Pada tahap Empathize kami berempati terhadap masalah yang ingin diperbaiki Kitabisa.com. Kami membantu mencari tahu pandangan dan kebutuhan yang diperlukan oleh target pengguna sebelum menentukan pernyataan permasalahan dalam membuat ide dan brainstorming. Hal yang kami lakukan pada tahap Empathize seperti:
- Competitor Analysis
- Membuat resume dari sesi AMA dengan Challenge Partner
- Mencari referensi case terkait di Medium, IEEE, ACM
- Feedback User dari App Store/Play Store dari aplikasi serupa
2. Define
Tahap ini bertujuan untuk mencari tahu permasalahan utama dari target pengguna serta mencari tahu bagian apa saja yang bisa dikembangkan lebih baik. Terdapat hal penting yang harus dilakukan di tahap ini, yaitu mendefinisikan pain Point dari target pengguna dan juga membuat how might we sebagai acuan ide solusi. Pain Point yang tim kami temukan yaitu:
Dari paint points tersebut, kami dapat menyimpulkan permasalahan utama dari target pengguna yaitu adalah :
donatur (pengguna) ingin diberikan perlakuan secara emosional ketika melihat laporan dari donasi yang sudah didonasikan
Setelah itu, kami membuat rancangan how might we sebagai acuan ide solusi dari permasalahan utama dan melakukan voting untuk mengetahui poin mana saja yang bisa menyelesaikan permasalahan utama dengan baik bagi pengguna dan perusahaan.
Berdasarkan hasil voting gambar di atas, kami sepakat bahwa how might we yang cocok yaitu:
- Mempermudah pengguna dalam mendapatkan informasi terbaru
- Membuat tampilan UI yang menarik
- Membuat update donasi lebih emosional dilihat
- Meningkatkan minat donatur secara emosional untuk melakukan donasi
- Memajukan tingkat retensi untuk menggunakan aplikasi Kitabisa
3. Ideate
Pada tahap ini kami memberikan berbagai macam ide untuk menyelesaikan masalah utama target pengguna menggunakan acuan dari how might we. Terdapat tiga hal penting yang kami lakukan di tahap ini, yaitu Brainstorming Ide, membuat Affinity Diagram (kategorisasi ide-ide yang ada), serta membuat desain Crazy 8’s (membuat 8 desain kasaran sebagai bentuk visual solusi utama).
Berdasarkan hal tersebut, kami memilih 6 ide solusi yang menjadi prioritas utama (ditandai dengan “Yes, Do It Now”, yaitu :
- Membuat fitur Story dan live update untuk penggalang dana
- Membuat fitur sticker dan gif dalam reaksi berita terbaru
- Mengupdate berita mengenai penggunaan uang donasi secara detail
- Memberikan informasi terbaru mengenai kondisi korban berupa video atau foto
- Fitur koin untuk berdonasi
Setelah menemukan ide solusi dengan prioritas tertinggi, selanjutnya, kami membuat desain crazy 8’s lalu melakukan voting setelahnya. Berikut hasil desain crazy 8’s yang kami buat :
4. Prototype
Pada tahap ini bertujuan untuk mengimplementasikan hasil desain Crazy 8’s menjadi sebuah Low Fidelity Wireframe (Wireframe) dan High Fidelity Wirframe (UI Design). Ada 3 hal penting yang kami lakukan di sini, yaitu merancang Task Flow (urutan tahapan penggunaan aplikasi), Wireframe, dan UI Design.
Setelah membuat wireframe, kami melanjutkan ke proses UI Design dan prototype-nya. Berikut merupakan UI Design yang kami buat beserta prototype-nya.
5. Test
Setelah melakukan pembuatan desain yang baru, kami melakukan tahapan test untuk mengevaluasi desain dan flow yang telah kami buat. Pada tahap ini, kami menggunakan metode in-depth interview berserta usability testing (responden melakukan demo pada task yang diminta). Kami melakukan tahap ini terhadap satu responden dengan kriteria yang sudah dijelaskan pada “Target Pengguna” secara online menggunakan Google Meet. Responden akan kami berikan link prototype aplikasi Kitabisa.com, lalu melakukan demo sesuai task yang kami arahkan. Berikut merupakan identitas dari responden :
Adapun tujuan dalam melakukan in-depth interview dan usability testing sebagai berikut:
- Melibatkan pengguna secara emosional untuk kembali berdonasi
- Menguji Single Ease Question pada desain yang telah dibuat terutama pada laman berita aplikasi Kitabisa
- Mengetahui keberhasilan dari laman berita aplikasi Kitabisa melalui keterlibatan pengguna secara emosional
Adapun metrik yang kami gunakan dalam usability testing, yaitu single ease question (SEQ) yang bisa mengukur tingkat kegunaan, kemudahan, kepuasan, dan ketertarikan yang dirasakan pengguna dalam skala 1 sampai 7 setelah menyelesaikan sebuah task yang diberikan selama menguji prototype aplikasi. SEQ akan dinilai baik jika memenuhi ambang batas, yaitu 5. Sebaliknya, SEQ akan dinilai kurang baik jika bernilai di bawah 5.
Hasil SEQ rata-rata yang kami peroleh dari responden adalah 6/7, dengan rincian sebagai berikut:
Dengan kendala masing-masing task, diperoleh masukkan yang diberikan responden untuk dikembangkan kedepannya yaitu :
Adapun hasil rekaman vidio yang kami rekam, sebagai bahan dokumentasi pada sesi usability testing ini
6. Iterasi Desain
Setelah mendapatkan masukan dari responden, tim kami akhirnya melakukan perbaikan sedikit pada UI Design, tetapi fitur coin tetap kami hadirkan karena beberapa alasan yaitu karena kami melakukan user research hanya terhadap satu responden dikarenakan waktu yang sangat singkat, akan tetapi mentor kami telah menyetejui bahwa fitur coin tetap di adakan saja. Berikut contoh before after yang terjadi pada UI Design kami setelah menerima pendapat dari responden:
Kesimpulan
Kesimpulan dari pembuatan UX Case Study ini bertujuan untuk menyelesaikan permasalahan yang dimiliki oleh platform kitabisa.com, dengan membuat tampilan yang menarik untuk mendapatkan rasa emosional dari donatur, serta memberikan pengalaman yang baik dalam menggunakan aplikasi kitabisa.com. Dengan proses menggunakan design thinking, maka diperoleh hasil usability testing dari satu responden di dapatkan dengan poin 6 ( skala 1–7). Dengan demikian, pengubahan desain pada halaman “Berita Terbaru” serta halaman lainnya berhasil dilakukan.
Demikian UX Case Study yang saya buat, kiranya UX Case Study yang saya buat dapat menjadi refrensi kawan-kawan dalam mengerjakan UX Case Study. Mohon maaf jika masih banyak kesalahan kalimat dalam menjelaskan. Terimakasih telah membaca ^__^
