UI/UX Challenge: Redesign Aplikasi Kitabisa pada Bagian Berita

Hani Dzikra Nurkhairiyyah
6 min readNov 28, 2021

--

Disclaimer

Project 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 sebagai Challenge Partner dan Saya tidak bekerja atau dikontrak secara profesional oleh Kitabisa.

Latar Belakang

Kitabisa merupakan salah satu platform penggalangan dana terbesar di Indonesia. Kitabisa ingin melakukan redesign pada bagian Berita dengan tujuan untuk menyediakan serta memudahkan donatur untuk menemukan informasi mengenai pembaharuan kampanye sehingga membuat para donatur dapat terlibat secara emosional dengan kampanye yang sudah didonasikan. Tujuan lainnya untuk mendorong donatur agar dapat berdonasi kembali ke kampanye sebelumnya maupun kampanye yang lainnya. Sehingga Kitabisa membutuhkan sebuah design yang dapat menghadirkan sebuah berita terbaru yang membuat donatur terikat secara emosional serta dapat meningkatkan retensi pengguna Kitabisa. Pada project ini kami melakukan pengembangan dengan melakukan redesign pada bagian menu Inbox dengan memasukkan ide-ide solusi yang sudah didiskusikan bersama melalui tahap design thinking.

Objektif

Objektif dari rancangan redesign ini adalah dapat meningkatkan keterlibatan emosional donatur terhadap kampanye yang telah didonasikan serta dapat meningkatkan minat donatur untuk dapat berdonasi kembali ke kampanye yang telah didonasikan maupun ke kampanye lainnya.

Peran dalam Tim

Pada project ini Saya bekerja sama dengan 2 rekan Saya, yaitu Afifhibatullah dan Dedepatmah. Kami bekerja sama untuk menyelesaikan project ini dengan melalui beberapa tahapan, diantaranya:

  • Melakukan Secondary Research
  • Mendefinisikan masalah dan how might we
  • Brainstorming ide
  • Membuat User Flow
  • Membuat Wireframe
  • Membuat UI Styleguide
  • Membuat UI Design
  • Membuat Prototype
  • Membuat dokumen User Research
  • Melakukan User Research

Proses Desain

Design Thinking Process | Sumber: thedispatch.in

Design Thinking merupakan sebuah pendekatan metodologi desain yang memberikan solusi untuk memecahkan masalah. Pada intinya design thinking ini sebuah proses untuk memahami pengguna. Adapun tahapan dalam proses design thinking adalah empathize, define, ideate, prototype, test. Berikut merupakan proses design thinking yang sudah dilakukan pada project ini.

1 — Empathize

Sumber: interaction-design.org

Pada tahapan ini Saya dan Tim melakukan Secondary Research dengan menganalisis data dari berbagai sumber seperti resume dari hasil AMA (Ask Me Anything) dengan pihak Challenge Partner (Kitabisa), artikel Medium, hingga review pengguna aplikasi serupa di Playstore. Terdapat sebuah informasi bahwa Kitabisa membutuhkan sebuah design yang dapat menghadirkan sebuah informasi kepada donatur sehingga donatur dapat terikat secara emosional serta meningkatkan tingkat retensi pengguna Kitabisa.

Profil Pengguna

  • Gender: Pria atau Wanita
  • Umur: 25–35 tahun
  • Profesi: Tidak spesifik

2 — Define

Pain points

Pada tahapan ini Saya dan Tim melakukan diskusi untuk mendapatkan pain points, maka didapatkan beberapa pain points.

  • Tampilan, tata letak, dan informasi membingungkan
  • Berita terbaru kurang jelas dalam memberikan informasi
  • Berita masih terasa tidak rapih sehingga sulit untuk melihat berita yang lama
  • Berita terbaru kurang keterikatan emosional
  • Tidak ada fitur search
  • User terkadang merasa tidak nyaman ketika melihat gambar yang diberikan
  • Informasi yang diberikan terlalu panjang

Kemudian kami memberikan beberapa solusi yang kami tulis dalam how might we untuk menyelesaikan masalah-masalah tersebut serta melakukan voting untuk memilih how might we yang akan digunakan.

How Might We

How might we:

  1. Menambahkan berita terbaru berupa video dari penggalang dana
  2. Adanya fitur group update campaign berdasarkan waktu

3 — Ideate

Berdasarkan how might we di atas, maka selanjutnya kami melakukan brainstorming ide untuk mencari solusi.

Solution Idea

Beberapa ide yang bisa menjadi solusi:

  • Membuat video stories
  • Penggalang dana dapat langsung mengedit video
  • Laporan akhir penggalangan dana berupa video
  • Penggalang dana mengunggah video minimal 3 menit dan maksimal 10 menit
  • Inbox berita dikelompokkan sesuai kampanye terbaru
  • Fitur filter
  • Fitur search
  • Mengirimkan notifikasi setiap berita terbaru di rilis
  • Fitur kalender
  • Bisa melakukan komentar terhadap postingan berita

Selanjutnya solusi ide tersebut dikelompokkan ke dalam Feature Video, Grouping Last News, Notification, Comment

Affinity Diagram

Selanjutnya adalah memasukkan solusi ide ke dalam prioritization idea diagram yang terbagi menjadi Do It Now, Do Next, Do Last, dan Later.

Prioritization Idea

Lalu kami membuat Crazy 8’s, masing-masing dari kami membuat design pada kertas HVS. Setelah itu kami melakukan voting terhadap screen yang memungkinkan untuk digunakan.

Crazy 8's

4 — Prototype

Kami memulai dengan membuat user flow.

User Flow

Selanjutnya kami membuat wireframe.

Wireframe

Sebelum membuat UI Design, kami membuat UI Styleguide terlebih dahulu. Komponen-komponen ini dapat digunakan kembali sehingga membuat design menjadi lebih konsisten.

UI Styleguide

Setelah membuat user flow, wireframe, dan ui styleguide maka selanjutnya adalah ui design.

UI Design

Untuk lebih detail-nya berikut ini merupakan prototype dari hasil redesign menu Inbox pada aplikasi Kitabisa yang dapat dicoba langsung di bawah ini.

Prototyping

5 — Test

Single Ease Question | Sumber: https://measuringu.com/seq-prediction/

Kami melakukan user research menggunakan metode In-Depth Interview dan Usability Testing serta menggunakan Single Ease Question untuk mengukur tingkat keberhasilan dengan kriteria responden sebagai berikut.

  • Gender : Pria atau Wanita
  • Usia : 25–35 tahun
  • Profesi : Tidak spesifik
  • Pengguna aplikasi Kitabisa
  • Sudah pernah berdonasi di Kitabisa
  • Berdomisili di seluruh wilayah Indonesia

Responden bernama Muhammad Khoirurizqi merupakan pengguna Kitabisa dan sudah sering berdonasi melalui Kitabisa.

Berdasarkan hasil user research, dari skala 1–7 responden memberikan nilai 6.5 sebagai tingkat keberhasilan. Responden memberikan beberapa feedback diantaranya sebagai berikut.

  • Persen yang ada di bagian Berita sedikit ambigu
  • Komen tidak perlu ada karena berpotensi adanya keributan
  • Tidak tau perbedaan tampilan dari stories yang tersimpan dan yang sementara
  • Untuk caption yang ada di story cukup 2 baris saja
  • Kotak untuk next story cukup mengganggu lebih baik dihilangkan
  • Menambahkan informasi di story agar tidak sama dengan tampilan aplikasi lain
Dokumentasi User Research
Dokumentasi User Research

Kesimpulan

Seluruh tahapan sudah dilakukan untuk melakukan redesign bagian Berita pada aplikasi Kitabisa. Adapun beberapa perubahan yang kami lakukan pada bagian Berita antara lain adalah:

  • Memisahkan bagian Berita dan Pesan
  • Terdapat fitur filter
  • Terdapat video story
  • Perubahan pada berita terbaru

Responden sudah cukup puas dengan hasil redesign dari kelompok kami dengan memberikan nilai sebesar 6.5, namun terdapat beberapa masukan yang berguna untuk menghasilkan design yang lebih baik lagi.

Rekomendasi Selanjutnya

Terdapat beberapa perbaikan dari hasil feedback responden, yaitu dengan tidak menggunakan komentar, dan merubah halaman story serta menghilangkan kotak pada bagian next story.

Sekian dan terima kasih sudah membaca UX Case Study ini ☺

--

--