← Back to list

UX Study Case : KitaBisa.com Redesign

Disclaimer

Tarisyah Taskiya Khalbu · 2022-09-28 16:56 · 1 claps · 6.6 min read
#ui-ux-design #ux #ui #kitabisa #user-research
Open on Medium ↗
Wiki topics: UX · UI/UX Design

UX Study Case : KitaBisa.com Redesign

Disclaimer

Ini adalah projek bagian dari pelatihan UI/UX Designer yang diadakan oleh Kementrian Komunikasi dan Informasi bersama Skilvul dan Kitabisa.com sebagai challange partner. Saya bukan pegawai atau pekerja yang dibayar oleh Kitabisa.com

Perkenalan

Assalamualaikum, nama sata Tarisyah Taskiya Khalbu, penggemar dari UI/UX Design yang ingin melakukan switch career dari bidang Pendidikan Biologi ke UI/UX Designer. Saat ini, saya sudah berada di tahap akhir proyek pelatihan UI/UX Designer. Study Case ini dilakukan dengan mitra Kitabisa.com sebagai challenge partner. Study case ini dibuat sebagai rangkuman dari pelatihan dan pengerjaan proyek selama saya mengikuti program pelatihan ini.

Latar Belakang

Kitabisa.com adalah salah satu situs donasi dan menggalang dana (fundraising) untuk inisiatif, campaign dan program sosial. Penggalangan donasi dapat dengan mudah dilakukan melalui gadget dan donasi dilakukan dilakukan dengan berbagai metode pembayaran yang fleksibel.

Kelompok Proyek

Saya berkolaborasi bersama kak Fahitha Salsabila, Mas Hanif Satya dan Mas Marselus sebagai UI/UX Designer pada proyek ini. Kami tergabung dalam kelompok 6 dan saling bekerja sama dalam penyelesaian tugas yang diberikan.

Design Process

pada tahap ini, kami menggunakan Design thinking untuk membuat design process. Kami memilih untuk menggunakannya sebab manurut kami ini adalah metode yang mudah diikuti untuk kami yang baru di bidang UI/UX Designer.

  • Tahap 1 Empathize

pada tahap ini kami melakukan observasi tentang competitor analysis, feedback user dari aplikasi lain yang mirip, mencari refrensi jurnal/artikel dan mengeksplorasi produk dari hasil challenge partner sebelumnya. Hal yang kami temukan adalah sebagai berikut :

Competitor Analysis :

kami menemukan bahwa aplikasi yang serupa seperti kita bisa ini memiliki belum memiliki fitur yang mampu menarik perhatian donatur.

User Feedback :

Kami menemukan feedback dari laman Google Play Store pada aplikasi Kitabisa.com. Kami menemukan bahwa banyak saran yang diberikan oleh pengguna aplikasi kitabisa.com.

Challenge Partner :

Objektif dari proses redesign kitabisa adalah menyediakan interface donasi yang memudahkan untuk membantu orang-orang yang membutuhkan sebagai bentuk melaksanakan kewajiban membantu orang dan mendapatkan reward atas donasi yang dilakukan.

Target user yang direkomendasikan adalah :

Siapa : Wanita/Pria

Usia : usia 23–28 tahun

Profesi : dengan pekerjaan yang tidak spesifik digolongkan.

  • Tahap 2 Define

Setelah melakukan observasu, lanjut ke define problem. Terdapat dua tahapan yaitu :

Pain Points

Kami mendapati bahwa masalag yang didaptkan pada observasi menjadi pilihan pada tahapan How-Might-We nanti

Kami menemukan beberapa masalah seperti :

  1. Masih menemukan kampanye samar tanpa adanya update cerita yang jelas.
  2. Sering melihat foto disturbing saat explore
  3. Tidak ada fitur untuk menemukan penggalang donasi yang berada disekitar donatur
  4. sering gagal untuk berdonasi dan pemberitahuan keberhasilan bedonasi sangat lambat
  5. tidak adanya jejak seberapa besar donasi yang sudah disalurkan dari akun untuk memotivasi orang berdonasi lebih
  6. fitur doa belum dapat digunakan, masih sering ada perbaikan
  7. Rekomendasi campaign kurang terpesonalisasi, beberapa rekomendasi masih berhubungan dengan alasan keagamaan
  8. Kalau bisa ada opsi “mark as read” atau “bisukan notifikasi selama 1 jam” agar pop-up message/inbox tidak terlalu mengganggu
  9. tidak bisa mengkontak support center , otp sering kali tidak bisa kekirim
  10. Menambah fitur “remember me” atau “ keep me sign in”
  11. di apliksi e-wallet status pembayaran selesai, tapi di aplikasi kitabisa status dibatalkan.

How-Might We

Dari masalah yang ditemukan maka kami membentuk beberapa pilihan untuk menyelesaikan masalah yang ada yaitu dengan Bagaimana sebaiknya kami menyajikan berita terbaru (pembaruan kampanye) kepada para donatur sehingga pengalaman donasi mereka terasa lebih menarik secara emosional dan meningkatkan tingkat retensi. Selanjutnya kami memilih beberapa piilihan berdasarkan urgensi.

  • Tahap 3 : Ideate

Tahap ini bertujuan untuk mengembangkan solusi yang ada untuk masalah yang muncul.

Solution Idea

Setelah melakukan voting, kami mendapatkan ide yang menjadi solusi yaitu :

  1. di aplikasi kita bisa, dibuat fitur live chat, untuk memudahkan para donatur jika ada kendala.
  2. beri fitur “keep me sign in” atau “remember me” pada bagian sign in aplikasi
  3. Beri fitur “mark as read” pada inbox pesan atau pop up message
  4. Tambah bagian campaign yang baru dibuka/kurang sponsor
  5. Beri semacam rating pada donatur yang memberikan donasi
  6. Ada fitur filter/klasifikasi donasi berdasarkan beberapa pilihan preferensi seperti urutkan sesuai lokasi terdekat
  7. Fitur story ala Instagram untuk setiap kampanye donasi, yang menjelaskan mengenai informasi donasi, update donasi yang terkumpul hingga penyaluran hasil donasi
  8. memberikan fitur alarm reminder untuk berdonasi
  9. merapikan fitur2 dalam kitabisa agar dapat mudah diakses dan mudah bagi pengguna untuk filter dan melihat berita terbaru
  10. Ada fitur filter/klasifikasi donasi berdasarkan beberapa pilihan preferensi seperti urutkan sesuai lokasi terdekat
  11. Memberikan invoice pembayaran donasi lewat email maupun sms
  12. diberikan fitur kontak untuk support center agar para pengguna bisa bertanya masalah apa yang sedang dihadapi (contoh gagal otp , transaksi gagal dll )
  13. Menambah bagian di navigation bar, isinya tentang berita campaign. Agar tidak bertumpuk di bagian “donasi”
  14. dibuat didalam profil kita bisa history seberapa banyak donasi yang kita berikan atau berapa besar kita donasi setiap bulannya
  15. ditingkatkan system untuk pembayaran dan fast respon untuk pemberitahuan apakah sudah berhasil atau gagal dalam berdonasi
  16. Tambah bagian campaign yang baru dibuka/kurang sponsor

Affinity Diagram

Pembayaran

Fitur

  1. Ada fitur filter/klasifikasi donasi berdasarkan beberapa pilihan preferensi seperti urutkan sesuai lokasi terdekat
  2. memberikan fitur alarm reminder untuk berdonasi
  3. Fitur story ala Instagram untuk setiap kampanye donasi, yang menjelaskan mengenai informasi donasi, update donasi yang terkumpul hingga penyaluran hasil donasi
  4. Tambah bagian campaign yang baru dibuka/kurang sponsor

Pembayaran

  1. dibuat didalam profil kita bisa history seberapa banyak donasi yang kita berikan atau berapa besar kita donasi setiap bulannya
  2. Memberikan invoice pembayaran donasi lewat email maupun sms
  3. ditingkatkan system untuk pembayaran dan fast respon untuk pemberitahuan apakah sudah berhasil atau gagal dalam berdonasi

Bantuan

  1. di aplikasi kita bisa, dibuat fitur live chat, untuk memudahkan para donatur jika ada kendala.
  2. diberikan fitur kontak untuk support center agar para pengguna bisa bertanya masalah apa yang sedang dihadapi (contoh gagal otp , transaksi gagal dll )

Tampilan

  1. merapikan fitur2 dalam kitabisa agar dapat mudah diakses dan mudah bagi pengguna untuk filter dan melihat berita terbaru
  2. beri fitur “keep me sign in” atau “remember me” pada bagian sign in aplikasi

Lainnya

  1. Beri semacam rating pada donatur yang memberikan donasi

Prioritization Idea

Selanjutnya kami melakukan urutan prioritas dari ide yang telah dituliskan tadi

User Flow

Selanjutnya kami membentuk dan menyusun user flow yang menjadi gambaran serang user saat menggunakan aplikasi.

Design System

Sebelum ke prototype, maka kami membuat desain sistem seperti warna, tombol/button dan lainnya.

Wireframe

saat ini, kami memvisualisasikan user flow menjadi wireframe.

Kami menggunakan figma untuk melakukan desain karena menggunakan aplikasi figma sangat ramah digunakan untuk pemula mendesain User Interface.

Tahap 4 Prototyping

Ada 2 yaitu :

User Interface

Splash screen

Login

Home screen

Melihat Story

Menambahkan story

Halaman Donasi

Filter

Random Campaign

Prototype

Kamu bisa melihat prototypenya disini :

[embed]

Tahap 5 : testing

Tahap ini kami melakukan wawancara tentang usibility testing terhadap prototype yang sudah kami buat

Pertanyaan :

  1. Apakah anda pernah melakukan donasi secara online? Melalui platform apa saja? Pernah beberapa kali, broadcast whatsapp dari rekan dan beberapa kali di aplikasi kitabisa. Diaplikasi lain belum mencoba.
  2. Apakah pernah menggunakan aplikasi Kitabisa sebelumnya? Bagaimana tanggapan anda tentang aplikasi di Kitabisa?Tanggapannya aplikasinya cukup membantu untuk saya yang pertama kali berdonasi di aplikasi
  3. Apakah ada fitur yang membuat anda bingung atau apakah ada informasi rancu di dalam aplikasi Kitabisa? Sejauh ini belum ada
  4. Apakah ada kendala yang anda alami selama menggunakan aplikasi Kitabisa.com? Kendalanya belum ada
  5. Apakah anda sering melakukan donasi setelah melihat cerita yang disajikan di halaman donasi? Setelah membaca cerita, saya pernah beberapa kali berdonasi.
  6. Apakah ada keraguan (keresahan) setelah melakukan donasi? Sering, karena tidak dahu uang donasi apakah sampai tidak ke pada yng membutuhkan
  7. Apa yang anda sukai dan tidak sukai setelah melihat dan merasakan pembaharuan fitur pada aplikasi kitabisa.com?Yang disukai : aplikasinya efektif dan membantu, fiturnya tersortir dan membantu saya mencari donasi untu yang membutuhkan. Yang tidak disukai : banyak donasi yang tidak jelas, yang terlalu pribadi.

Score : 6 (Passed)

Note: It is passed when the score is 5.5 or above.

Kesimpulan

Kami masih memerlukan peningkatan terhadap aplikasi yang kami demo kan ini, walaupun user yang kami wawancari telah merasa puas, namun kami juga memperoleh beberapa masukan yang berguna untuk meningkatkan aplikasi ini.

Terima kasih sudah membaca hasil study case ini.

Terima kasih banyak kelompokku atas kerjasamanya. Terima kasih juga kepada Kementrian Komunikasi dan Informasi bersama Skilvul dan Kitabisa sebagai challenge partner projek ini.


메타데이터
post_id
2f6199486be6
slug
ux-study-case-kitabisa-com-redesign-2f6199486be6
url
https://medium.com/@ttkhalbu/ux-study-case-kitabisa-com-redesign-2f6199486be6
canonical_url
https://medium.com/@ttkhalbu/ux-study-case-kitabisa-com-redesign-2f6199486be6
author_url
https://medium.com/@ttkhalbu
status
ok
fetched_at
2026-07-26 15:15:35