UI/UX Case Study & Challenge: Kitabisa App

Hilal Shafwanto
6 min readNov 29, 2022

--

Membuat sebuah desain halaman Berita pada aplikasi KitaBisa yang merupakan cara untuk mendistribusikan informasi mengenai kampanye.

Tentang Aplikasi Kitabisa

Kitabisa merupakan salah satu platform crowdfunding (penggalangan dana) terbesar di Indonesia. Kamu dapat menggunakan platform ini untuk melakukan penggalangan dengan berbagai tujuan. Sebagian besar tujuannya untuk kebutuhan medis. Akan tetapi, kamu juga bisa melakukan penggalangan untuk beberapa kategori seperti bencana alam, pendidikan, lingkungan, kegiatan sosial, kemanusiaan dan lainnya.

Peninjauan

Untuk memperjelas bahwa UI/UX Case Study ini merupakan bagian dari Program Skilvul Kampus Merdeka UI/UX Design Batch 3–2022. Kami sebagai mahasiswa belajar UI/UX Design di Skilvul yang merupakan salah satu mitra dari program Kemendikbud ini.

Latar Belakang

Saat ini tim Kitabisa 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 tim Kitabisa 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. Tujuannya adalah sebagai berikut :

  • 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.

Oleh karena itu, tim 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 tim Kitabisa 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.

Profil Pengguna

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

Saya diperbolehkan melakukan eksplorasi dan membuat asumsi sendiri di luar dari detail challenge yang diberikan. Sebagai contoh, jika challenge tidak menerangkan lebih detail mengenai target pengguna, maka saya bisa asumsikan sendiri profil pengguna yang berpotensi menggunakan produk dari partner. Tidak hanya itu, saya juga bisa bereksplorasi untuk menghasilkan flow produk digital yang lebih baik jika dibutuhkan.

Objektif

~ Mencari tahu bagaimana pengalaman user saat berdonasi dari sisi kemudahan, emosional user dan juga ketertarikan user untuk berdonasi

~ Mencari tahu kebutuhan dan tingkat kepuasan user dalam memakai aplikasi kitabisa terutama saat menemukan informasi mengenai pembaharuan kampanye

~ Mencari tahu pendapat pengguna aplikasi Kitabisa tentang desain Halaman Berita

Peran-peran Anggota Tim dalam bekerja

Saya di tim ini sebagai ketua yang bekerja sama dengan 3 anggota UI/UX Designer lainnya yaitu:
- Ferdy Fadhil Lazuardi bertanggung jawab mendesain Halaman Masuk & Pendaftaran, Halaman Berita, Donasi
- Farah Adelia bertanggung jawab mendesain Halaman Berita & Detail Berita
- Catherine Jetajones bertanggung jawab mendesain Halaman Donasi Saya
- Saya Hilal Shafwanto bertanggung jawab mendesain Halaman Awal, Halaman Donasi, Halaman Akun, Pilihan Nominal Donasi

Proses Desain

Kelompok kami menggunakan kerangka kerja Design Thinking Process yang dimana ada beberapa tahap yang harus dilewati yaitu:

  1. Empathize
    Di tahap ini kami melakukan Primary Research dimana melakukan In Depth Interview dengan pengguna Kitabisa yang pernah melakukan donasi di sana.
    Klik di sini untuk melihat Interview

User persona ini dibuat untuk menggambarkan atau mewakili persona pengguna-pengguna yang akan atau sudah memakai aplikasi Kitabisa.

User Persona

2.Define
Di tahap ini kelompok kami mengumpulkan beberapa permasalahan yang sering dihadapi pengguna dalam menggunakan aplikasi Kitabisa. Lalu kita juga mencarikan beberapa solusi yang bisa menyelesaikan masalah tersebut.

Painpoints
How-Might We

3.Ideate
Setelah semua anggota memberikan solusinya masing-masing, sekarang di tahap Ideate kami menentukan solusi yang paling tepat sasaran untuk bisa menyelesaikan permasalahan yang paling banyak sering dialami pengguna dalam memakai aplikasi Kitabisa.

Solution Idea

Kemudian menyeleksi dan memprioritaskan ide-ide yang akan dilakukan segera dengan mengukur dari Usaha & Nilai dengan membagi ke dalam 4 kuadran: DO IT NOW, DO NEXT, DO LATER, DO LAST

Prioritization Idea

Sebelum membuat wireframe kami membuat User Flow terlebih dahulu untuk menyatukan visi para anggota tim bahwa alur pengguna memakai aplikasi ini diawali dari Masuk sampai Pembelajaran.

Userflow

Selanjutnya membuat Wirefame atau Low Fidelity yang belum ada warna maupun gambar untuk menjadi patokan saat membuat UI Design nanti.

Wireframe

Karena kami bekerja secara tim, Design System sangat dibutuhkan untuk mendesain UI sebuah aplikasi. Tujuan untuk menyamakan komponen-komponen desain yang mirip. Supaya desain yang kita buat bisa konsisten dari awal sampai akhir. Mulai dari Color, Text Style, Button, Input Field, Header Bar, Logo, Checkbox, Iconography, Molecule dan sebagainya

Design System

Selanjutnya membuat UI Design atau High Fidelity perhalaman mengikuti Design System yang sudah dibuat dengan memfokuskan lebih banyak ke desain Halaman Berita.

UI Design

4.Prototyping
Dalam tahap prototyping kami berdiskusi membahas alur proses jalannya aplikasi ini mulai dari Pendaftaran, Masuk, Lihat Detail Berita dan Kampanye, Donasi dan Keluar. Lalu menghubungkan halaman ke halaman lainnya dengan beberapa fitur di Figma seperti: On Tap, After Delay, Smart Animate dan lain-lainnya.

Klik di sini untuk melihat Prototype link

5.Testing
Tahap testing kali ini menggunakan metode Usability Testing & In Depth Interview dengan responden. Dimulai dari perkenalan diri, tanya jawab beberapa pertanyaan seputar aplikasi Kitabisa. Sampai mencoba prototype aplikasi Kitabisa dan responden juga pengguna memberi kritik dan saran.

Klik link disini untuk melihat sesi In Depth Interview

Kesimpulan

  • Pengguna atau responden memberi saran beberapa fitur seperti fitur share yang bisa ditambahkan.
  • Pengguna atau responden menyukai desain hasil revamp yang sudah didesain oleh tim kami.
  • Pengguna atau responden memberikan nilai 6 untuk keseluruhan prototype dan 7 untuk desain halaman berita untuk skala kemudahan dengan menggunakan Single Ease Question.

Rekomendasi Selanjutnya

Kami sudah mendesain kembali UI Design Kitabisa apa saja yang masih kurang dari aplikasi kami dan melakukan prototyping ulang. Jika solusi yang kami berikan ini sudah memenuhi kebutuhan para pengguna Kitabisa. Kami akan terus memperbarui desain kami mengikuti perkembangan teknologi saat ini yang semakin berkembang. Semoga desain yang ditawarkan kami bisa dilanjutkan ke tahap Development yang akan dikerjakan oleh programmer Kitabisa.

Penutup

Semoga artikel kecil ini bisa membantu & menambah wawasan Anda tentang dunia UI/UX Design & Research. Terima kasih banyak telah menyempatkan waktu untuk membaca 😊!!

--

--