← Back to list

Kitabisa Impact Redesign: Prototype Donasi Berbasis Pengalaman Pengguna Terbaik

Intro

Muhammad Abdurrohman · 2025-02-10 10:15 · 5 claps · 3.7 min read
#redesign-kitabisa #kitabisa
Open on Medium ↗
Wiki topics: UX · UI/UX Design

Kitabisa Impact Redesign: Prototype Donasi Berbasis Pengalaman Pengguna Terbaik

Intro

Kitabisa.com adalah platform untuk mengumpulkan sumbangan dan memberikan donasi online. Kitabisa didirikan pada 2013 dan mencapai ribuan layanan medis dan kontribusi sosial setiap hari.

Latar Belakang

Kasus penelitian ini dipilih. Kasus penelitian ini terutama bagi mereka yang ingin berbagi kebaikan dengan aplikasi ini, dan mereka yang tidak berpikir mereka perlu merasa sulit untuk berbagi aset, karena mereka memiliki fungsionalitas bagi mereka yang benar -benar membutuhkannya.

Objektif

Peningkatan fungsionalitas kami adalah membuat tampilan yang lebih ramah pengguna yang digunakan orang. Ini juga menciptakan desain yang menarik dan nyaman.

Peran dalam Team

Saya di Grup KitaBisa.com itu memainkan peran perancang UI/UX sebagai anggota bantuan grup saya. Teman -teman saya mengerjakan masing- masing desain prototypenya seperti Nur Fajri Halim Tanthowi mendesain bagian login,home, dan tampilan Donasi , Muhammad Abdurrohman mendesain bagian zakat, pembayaran zakat, dan donasi otomatis, Marcellino Standlie mendesain history donasi, akun, kotak masuk, penggalangan favorit, setting, Adriyan Setiawan juga mendesain bagian zakat dan kategori zakat dan Muhammad Luthfi Rizqullah mendesain pembayaran zakat lewat dana.

Design Process

Metode yang Digunakan

Kami menggunakan metode Design Thinking, yaitu pendekatan dalam pemecahan masalah yang bersifat kognitif, kreatif, dan praktis untuk merancang solusi yang sesuai dengan kebutuhan pengguna.

Design Thinking

Design Thinking

Empathize

Dalam kasus ini, kami diberikan kebebasan untuk mengeksplorasi dan membuat asumsi sendiri. Hal ini sejalan dengan tujuan tahap Empathize, yaitu membantu desainer dalam memahami perspektif serta kebutuhan target pengguna melalui riset sebelum merumuskan pernyataan masalah (problem statement) dan mengembangkan ide.

Define

Proses untuk merumuskan permasalahan pengguna berdasarkan hasil dari tahap Empathise, yang kemudian dituangkan dalam bentuk Pain Points seperti berikut.

Paint Points

Paint Points

Dari hasil Pain Points yang telah diidentifikasi, muncul beberapa pertanyaan dalam bentuk How Might We untuk mencari solusi atas permasalahan tersebut. Setelah proses penyusunan How Might We selesai, langkah berikutnya adalah melakukan voting guna menentukan permasalahan yang paling relevan untuk dikembangkan ke tahap selanjutnya

How-Might We

How-Might We

Ideate

Setelah proses voting selesai dan permasalahan terpilih, langkah berikutnya adalah merancang solusi ide yang didasarkan pada pertanyaan How Might We yang telah dibuat

Solution Idea

Solution Idea

Setelah merumuskan solusi ide, kami mengelompokkannya ke dalam Affinity Diagram, yang diklasifikasikan ke dalam tiga kategori utama: First Access, Home & Menu, serta Future Features.

Affinity Diagram

Affinity Diagram

Prioritization Idea bertujuan untuk menentukan skala prioritas dari ide-ide yang telah dikelompokkan. Dalam kasus ini, ide-ide tersebut dibagi ke dalam empat kategori: Yes, Do It Now, Do Next, Later, dan Do Last. Proses ini dilakukan dengan mempertimbangkan keseimbangan antara nilai manfaat bagi pengguna (user value) dan tingkat usaha (effort) yang diperlukan untuk merealisasikannya.

Priotization Idea

Priotization Idea

Langkah berikutnya adalah merancang User Flow, yaitu alur atau jalur penggunaan dalam aplikasi yang dikembangkan berdasarkan hasil Prioritization Idea.

User Flow

User Flow

Setelah alur aplikasi tersusun dengan jelas, langkah berikutnya adalah merancang Information Architecture, yang berisi rincian mengenai fitur-fitur yang akan tersedia dalam aplikasi.

Information Architecture

Information Architecture

Sebelum masuk ke tahap Wireframe, dilakukan proses Crazy 8, di mana setiap anggota tim membuat sketsa ide mereka. Dari hasil tersebut, sketsa Crazy 8 yang dipilih untuk dikembangkan ke tahap Wireframe adalah yang dibuat oleh Muhammad Lutfi Rizqulloh.

Crazy 8's

Crazy 8's

Setelah seluruh proses sebelumnya selesai, kami langsung merancang Wireframe berdasarkan sketsa Crazy 8 yang telah terpilih

Wireframe

Wireframe

Setelah menyelesaikan Wireframe, langkah berikutnya adalah menyiapkan Style Guide sebagai panduan sebelum masuk ke tahap Prototype.

Style Guide

Style Guide

Prototype

Tahap Prototyping bertujuan untuk merancang produk yang sesuai dengan kebutuhan dan keinginan pengguna. Prototype ini dapat diakses melalui Figma.

[embed]

Outro

Kesimpulan

Hasil Usability Testing yang dilakukan dengan responden menunjukkan bahwa desain yang dikembangkan telah mempermudah pengguna dalam proses login, serta dalam melakukan donasi atau zakat, sesuai dengan kebutuhan dan harapan mereka.

Rekomendasi untuk Selanjutnya

Desain yang kami kembangkan masih belum sepenuhnya final, karena masih ada banyak fitur dan tampilan yang dapat ditingkatkan sesuai dengan ide-ide yang kami miliki. Namun, karena keterbatasan waktu, kami menyelesaikannya sebisa mungkin. Ke depannya, kemungkinan akan ada desain yang lebih baik dibandingkan dengan versi saat ini.


메타데이터
post_id
4d4d3f0dc112
slug
kitabisa-impact-redesign-prototype-donasi-berbasis-pengalaman-pengguna-terbaik-4d4d3f0dc112
url
https://medium.com/@Rohman0408/kitabisa-impact-redesign-prototype-donasi-berbasis-pengalaman-pengguna-terbaik-4d4d3f0dc112
canonical_url
https://medium.com/@Rohman0408/kitabisa-impact-redesign-prototype-donasi-berbasis-pengalaman-pengguna-terbaik-4d4d3f0dc112
author_url
https://medium.com/@Rohman0408
status
ok
fetched_at
2026-07-08 03:00:00