UX Case Study: Redesign Kitabisa Application (Indonesia’s Fundraising Platform)

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 hanya sebagai Challenge Partner, saya tidak bekerja atau dikontrak secara profesional oleh Kitabisa.

Overview

Kitabisa adalah salah satu platform untuk berdonasi di Indonesia yang dilakukan secara online atau bisa disebut dengan crowdfunding. Selain untuk berdonasi, platform ini juga sering digunakan untuk melakukan penggalangan dana dengan berbagai macam tujuan. Fitur yang dimiliki oleh Kitabisa juga sangat beragam, seperti donasi, zakat, dan beberapa fitur mendukung untuk mempermudah berdonasi.

Salah satu fitur mendukung tersebut adalah Kabar Terbaru. Fitur ini bertujuan untuk memberi kabar tentang perkembangan dari suatu campaign dan juga dana yang sudah dipakai agar para donatur bisa mengetahuinya. Karena Kabar Terbaru merupakan fitur yang sangat berguna, Kitabisa memberikan brief kepada kelompok kami untuk melakukan redesign terhadap fitur ini agar bisa memberikan kesan yang lebih menarik secara emosional dan juga meningkatkan tingkat retensi.

Problem

Berdasarkan brief yang sudah diberikan, dapat disimpulkan bahwa:

1. Tampilan dari fitur Kabar Terbaru kurang menarik secara emosional.
2. Penempatan fitur Kabar Terbaru yang memiliki tingkat retensi yang rendah.

Objectives

Untuk menyelesaikan permasalahan yang diberikan, saya dan teman-teman sekelompok melakukan redesign dengan berfokus kepada:

1. Merubah tampilan fitur Kabar Terbaru menjadi lebih menarik secara emosional.
2. Menambahkan beberapa fitur untuk mempermudah user mengakses fitur Kabar Terbaru.

Target User

Pendonor yang ingin melakukan donasi.

Role

Saya berperan sebagai UI/UX Designer bersama dengan 2 anggota lainnya, yaitu Pebliana Siregar dan Achmad Afandi dengan peran dan tanggung jawab yang sama, seperti:

1. Melakukan riset untuk tahap Emphatize dengan menyebarkan kuesioner.
2. Melakukan brainstorming untuk tahap Define dan Ideate berdasarkan hasil data dari riset yang sudah dilakukan dan brief yang sudah diberikan.
3. Membuat user flow dari hasil yang sudah didapatkan pada tahap Define dan Ideate.
4. Membuat wireframe sesuai dengan user flow yang sudah dibuat.
5. Membuat Design System berdasarkan Product Language yang sudah dimiliki oleh Kitabisa.
6. Membuat UI design menggunakan Design System yang sudah dibuat (sesuai dengan Product Language yang dimiliki Kitabisa) dan prototype.
7. Melakukan Usability Test untuk mengetahui apakah design yang sudah dibuat sesuai dengan kebutuhan user.

Design Process

Pada proses redesign kali ini, kami menggunakan Design Thinking sebagai pendekatan design process karena pada kasus ini membutuhkan banyak ide-ide atau inovasi baru untuk menyelesaikan masalah dan juga miliki fokus utama kepada user. Hal ini dapat tercapai secara maksimal dengan menggunakan Design Thinking. Sifatnya yang tidak terlalu baku dan kaku juga bisa menambahkan kreatifitas tiap anggota dalam melakukan redesign.

Design Thinking Process. (photo by Interaction Design Foundation)

1 — Empathize

Pada tahap ini kami menyebarkan kuesioner yang berisi beberapa pertanyaan keapada orang-orang yang sudah pernah melakukan donasi melalui aplikasi online untuk lebih memahami apa yang mereka inginkan dan rasakan. Hasil dari jawaban kuesioner tersebut juga akan menjadi informasi tambahan dari brief yang sudah diberikan oleh Kitabisa dan bisa digunakan untuk ke tahap selanjutnya.

2 — Define

Pada tahapan berikutnya, kami menentukan pain points berdasarkan data dan informasi yang sudah didapatkan dari tahapan sebelumnya lalu kami juga membuat acuan untuk beberapa ide dari solusi permasalahan tersebut yang bisa disebut sebagai how might we (HMW).

Pain Points

Berikut adalah pain points yang sudah kami jabarkan dari permasalahan yang ada pada brief Kitabisa dan juga hasil dari kuesioner yang disebarkan. Permasalahan utamanya adalah visual yang kurang menarik perhatian secara emosional.

How Might We (HMW)

Dari hasil pain points, kami mengumpulkan beberapa how might we yang merupakan solusi terbaik untuk mengatasi permasalahan yang dialami. Dalam hal ini masing-masing dari anggota memberikan solusinya masing-masing dan kami sepakat untuk menjadikan solusi ini menjadi solusi utama, yaitu dengan membuat tampilan yang lebih baik secara emosional dan juga meningkatkan tingkat retensi.

3 — Ideate

Setelah memahami lebih dalam tentang pain points yang ada dan juga mengumpulkan cara untuk menyelesaikan permasalahan tersebut, selanjutnya kami mengumpulkan lebih banyak ide-ide solusi untuk mencapai how might we yang sudah dikumpulkan pada tahap sebelumnya.

Solution Idea

Selanjutnya ide solusi yang sudah dibuat akan dibagi berdasarkan beberapa kategori yang memang sesuai dengan solusi tersebut pada bagian Affinity Diagram.

Affinity Diagram untuk kategori Visual dan Copywriting.

Pada kategori visual berisi tentang solusi-solusi yang berfokus kepada tampilan sedangkan untuk kategori copywriting berfokus kepada penulisan yang ada pada design agar lebih menarik dan lebih jelas.

Affinity Diagram untuk kategori Interaction dan Multimedia.

Lalu pada kategori selanjutnya yaitu Interaction berfokus kepada solusi tentang interaksi antar fitur agar user lebih memahami alur yang diberikan, seperti menambahkan fitur komentar, button share, notifikasi, dan juga membuat fitur seperti Instagram Story. Setelah itu pada kategori terakhir yaitu multimedia akan berfokus kepada fitur tambahan yang berisi video, gambar, atau musik yang bertujuan untuk membuat tampilan menjadi lebih emosional.

Prioritization Idea bagian “Yes, Do It Now”

Selanjutnya kami membuat Prioritization Idea untuk mengetahui solusi mana saja yang memang menjadi prioritas utama dan akan lebih fokus kepada solusi tersebut dengan dibagi menjadi 4 bagian. Yaitu ada bagian “Yes, Do It Now”, lalu ada “Do Next”, “Do Last”, dan “Later”. Pada hal ini kami memutuskan untuk memasukkan semua solusi ke dalam bagian “Yes, Do It Now” karena kami berfikir bahwa semua solusi yang sudah dikumpulkan memiliki prioritas utama, jadi semuanya akan dikerjakan sekarang.

Crazy 8’s yang dibuat Pebliana Siregar

Crazy 8’s yang dibuat Alya Nurindah Setiawan

Crazy 8’s yang dibuat Achmad Afandi

Setelah itu kami membuat crazy 8’s yaitu membuat gambaran kasar (wireframe) selama 8 menit dari hasil Solution Idea yang sudah dibuat. Kemudian setelah semua anggota sudah selesai membuat desain wireframe masing-masing, setiap anggota memilih frame dari wireframe tersebut dan yang mendapatkan banyak sticker (vote) akan dipilih untuk menjadi acuan pada proses pembuatan UI design.

4 — Prototype

Pada tahap ini, kami membuat task flow yaitu langkah-langkah yang harus dilakukan pengguna dari hasil analisis yang sudah dilakukan dan juga implementasi dari crazy 8’s pada tahapan sebelumnya. Lalu setelah itu masing-masing anggota mendesain wireframe berdasarkan task flow yang sudah dibuat.

Task Flow dari hasil Redesign Aplikasi Kitabisa

Wireframe untuk halaman Home, Fitur Story, dan halaman Detail Campaign

Setelah itu, wireframe yang sudah dibuat dalam bentuk low-fidelity lalu dibuat dengan versi yang berbeda yaitu high-fidelity atau dalam bentuk UI/prototype. Sebelumnya saya sudah membuat UI Styleguide berdasarkan Product Language milik Kitabisa agar UI design yang dibuat menjadi lebih rapih dan konsisten.

Prototype Hasil Redesign Aplikasi Kitabisa

5— Test

Pada tahap terakhir saya melakukan user research atau proses pengujian dari aplikasi ini untuk mengetahui bagaimana target pengguna berinteraksi dengan prototype yang sudah dibuat dan mengetahui feedback dari pengguna tersebut untuk dijadikan bahan evaluasi selanjutnya. Kami menggunakan 2 method dengan cara in-depth interview yaitu menggali informasi secara mendalam dengan memberikan pertanyaan dengan bebas dan juga melakukan usability testing dengan memakai single east question yaitu satuan ukur dengan skala 1–7 dengan angka 5,5 sebagai parameter keberhasilan.

User Persona

Hal tersebut kami lakukan dengan 1 orang responden yang memenuhi kriteria dengan user persona seperti pada gambar. Tujuan dari user research yang kami lakukan kepada pengguna adalah untuk:

1. Mencari tahu kebutuhan pengguna dalam melakukan donasi melalui aplikasi online.
2. Mencari tahu kebiasaan pengguna dalam melakukan donasi melalui aplikasi online.
3. Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses yang ada pada aplikasi.
4. Mencari tahu tingkat keberhasilan dari hasil mendesain ulang pada aplikasi Kitabisa.

Hasil yang kami dapatkan dari user research yang sudah dilakukan adalah:

1. [Task 1: Fitur Story] Responden memberikan nilai 6 untuk fitur ini dikarenakan sudah mempermudah pengguna untuk melihat Kabar Terbaru dari suatu campaign.
2. [Task 2: Fitur Comment & Share] Responden memberikan nilai 6 pada fitur ini dikarenakan alur untuk menambahkan komentar masih sulit untuk dilakukan.
3. [Task 3: Fitur Cashflow] Responden memberikan nilai 7 untuk fitur ini dikarenakan hasil desain yang sangat detail dan memudahkan pengguna untuk melihat laporan pencairan dana.

Dapat disimpulkan bahwa hasil SEQ yang kami dapatkan adalah (6+6+7)/3 = 6,3 yang berarti desain yang kami buat sudah memenuhi kebutuhan dari pengguna karena melebihi angka 5,5.

Pada saat proses usability test, responden masih merasa kesulitan untuk menggunakan fitur cash flow dan menambahkan komentar, oleh karena itu kami melakukan proses iterasi desain sebagai berikut:

1. Merubah dan menambahkan pilihan pada filter cash flow yaitu untuk jenis laporan harian, bulanan, dan tahunan agar pengguna dapat melihat laporan pencairan dana dengan mudah.
2. Menambahkan beberapa flow pada fitur komentar agar pengguna bisa menuliskan dan mengirim komentar dengan mudah.

Kesimpulan

Setelah melakukan proses design thinking dan juga in-depth interview, desain yang kelompok kami buat sudah sesuai dengan kebutuhan dan keinginan pengguna berdasarkan hasil SEQ yang diperoleh. Kebutuhan pengguna tersebut adalah pengguna dapat dengan mudah mendapatkan kabar terbaru dari campaign dengan fitur story, lalu dapat berinteraksi dan juga meningkatkan tingkat retensi fitur kabar terbaru dengan fitur comment and share, dan yang terakhir dapat mengetahui penggunaan dari pencairan dana donasi pada fitur cash flow.

Semoga proses mendesain ulang yang saya lakukan dengan teman-teman dapat memberikan ilmu dan tambahan informasi bagi para pembaca. Terima kasih atas perhatiannya :)