UI/UX

Redesign Bagian Berita Pada Menu Inbox KitaBisa

Lihat Preview Showcase
Redesign Bagian Berita Pada Menu Inbox KitaBisaLihat Preview Showcase

Deskripsi

Dari program Skilvul Virtual Internship, saya mendapatkan tugas yaitu melakukan redesign untuk membuat perubahan untuk bagian “Berita” yang dapat kita temukan melalui menu Inbox di navigasi menu pada aplikasi KitaBisa. Dari proses redesign untuk bagian “Berita” pada menu inbox ini bertujuan untuk: • 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. Pendekatan desain proses yang digunakan dalam projek ini adalah design thinking. Terdiri dari tahap: 1. Empathize 2. Define 3. Ideate 4. Prototype 5. Test Mengapa kami memilih desain proses dengan pendekatan design thinking? kami memilih menggunakan pendekatan desain proses karena meningkatkan usability dan interface design yang lebih optimal dan untuk pemilihan design thinking di dasari oleh keinginan untuk memenuhi kebutuhan pengguna melalui pemecahan masalah yang kreatif. 1. Empathize Pada tahap ini yang menjadi fokus utamanya ialah pengguna.Berdasarkan brief yang telah disediakan oleh Skilvul, terdapat keinginan dari donatur ialah: • 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. 2. Define Tahap define merupakan tahap untuk melihat problem real yang kemudian hasil dari permasalahan yang telah didapat akan dipecahkan oleh desain atau dalam bentuk desain. Kami melakukan tahap define yang untuk mencari tahu, mengeksplorasi paint points yang dirasakan oleh pengguna dan menentukan how-might we dari paint points tersebut. Kami menempatkan diri kami sebagai pengguna yang memang sudah pernah menggunakan aplikasi Kitabisa, sehingga didapatlah: Paint points yang dirasakan oleh Nadya Wardah Budiman: • Bingung saat ingin melihat update informasi terbaru • Tidak ada fitur yang membuat semangat berdonasi • Rekomendasi kampanye tidak cukup dipersonalisasi, kebanyakan berhubungan dengan kasus keagamaan • Bingung kampanye yang ditampilkan masih samar tidak ada alur cerita yang masih belum jelas • Tidak ada pilihan kategori untuk berita Paint points yang dirasakan oleh Dinda Anasta Sabillaa: • User ingin mengetahui pemanfaatan uang yang sudah user donasikan pada salah satu campaign. • User ingin update informasi dalam bentuk cerita sehingga ada transparansi uang donasi antara donatur dengan pengurus campaign. • Tidak terlalu eksploratif, cenderung mengikuti alur dari donasi bawaan • Melihat banyak gambar yang mengganggu dari campaign medis saat user sedang melakukan explore • Opsi donasi yang terlalu terbatas • User tidak mendapatkan notifikasi dari penggunaan uang yang telah di donasikan kepada campaign. • Timeline pada update news kurang user friendly Paint points yang dirasakan oleh Malik Al Fajar: • Tidak mempunyai tampilan versi desktop • Bingung dengan alur proses berjalannya donasi • Untuk menutup penggalangan dana, harus melalui email terlebih dahulu • Aplikasi untuk IOS kurang kompatibel Tahap how might we, setelah didapat pain point dari masing-masing anggota tim, langkah selanjutnya adalah menentukan kira-kira bagaimana cara yang paling mungkin kita lakukan untuk menyelesaikan permasalahan yang didapat dari pain points tersebut. Dari banyaknya hasil how might we, kami melakukan voting terbanyak dan didapatilah hasil yang mencakup keseluruhan dari pain points yang dirasakan yaitu: • Menampilkan informasi penggunaan dana dari donatur yang sudah digunakan dalam bentuk gambar atau video 3. Ideate Langkah selanjutnya adalah melakukan tahap ideate. Tahap ideate diperlukan untuk menghasilkan sebanyak mungkin ide yang kreatif. Pada tahap ideate kami melakukan: • Solution Idea Tahap solution idea (ide solusi) bertujuan untuk mencari ide solusi dari how might we. Kami memulai brainstorming ide solusi berdasarkan how might we yang telah didapatkan, dan didapatlah beberapa ide yaitu: Hasil ide solusi dari Nadya Wardah Budiman: 1. Membuat fitur keterbukaan transparasi dana yang telah dikeluarkan rincian tersebut dapat berupa laporan tulisan (CSV) dan bukti kegiatan. 2. Membuat fitur menu pembeda antara berita per kategori dan update dana donasi yang kita ikuti, dan memberikan filtering pesan telah dibaca atau belum dan mengurutkan pesan. 3. Tracking proses kegiatan dari penyaluran dana dalam bentuk alur, sehingga penguna mengetahui prosesnya sudah sampai mana Hasil ide solusi dari Dinda Anasta Sabillaa: 1. Membuat fitur yang menampilkan keseluruhan anggaran donatur yang sudah terpakai oleh pihak campaign dan dimasukkan ke dalam update news. 2. Membuat fitur notifikasi dana donatur yang telah digunakan oleh campaign dan masuk ke notifikasi donatur. Hasil ide solusi dari Malik Al Fajar : 1. Menampilkan foto atau video,dapat digunakan untuk melihat nota atau perkembangan pengobatan / pengunaan 2. Menampilkan jumlah donasi yang sudah digunakan secara keseluruhan • Affinity Diagram Affinity Diagram merupakan diagram untuk mengorganisasikan sejumlah besar ide-ide kedalam suatu kelompok atau cluster tertentu yang memiliki kesamaan atau sejalan dalam segi konsep. Pada tahap ini kami mengelompokan ide solusi yang telah didapatkan ke dalam 3 kategori, yaitu: a. Transparansi data  Membuat fitur notifikasi dana donatur yang telah digunakan oleh campaign dan masuk ke notifikasi donatur  Menampilkan jumlah donasi yang sudah digunakan secara keseluruhan  Membuat fitur yang menampilkan keseluruhan anggaran donatur yang sudah terpakai oleh pihak campaign dan dimasukkan ke dalam update news  Membuat fitur keterbukaan transparasi dana yang telah dikeluarkan rincian tersebut dapat berupa laporan tulisan (CSV) dan bukti kegiatan.  Tracking proses kegiatan dari penyaluran dana dalam bentuk alur, sehingga penguna mengetahui prosesnya sudah sampai mana b. Hygiene feature  Menampilkan foto atau video,dapat digunakan untuk melihat nota atau perkembangan pengobatan / pengunaan c. Berita  Membuat fitur menu pembeda antara berita per kategori dan update dana donasi yang kita ikuti, dan memberikan filtering pesan telah dibaca atau belum dan mengurutkan pesan. • Prioritization Idea Kami menentukan ide mana yang menjadi prioritas berdasarkan user value dan effortnya seperti: 1. Do it now • Membuat fitur yang menampilkan rincian setiap dana yang sudah digunakan ke dalam update news • Membuat fitur notifikasi dana donatur yang sudah terpakai dan masuk ke notifikasi donatur • Menampilkan foto atau video,dapat digunakan untuk melihat nota atau perkembangan pengobatan / pengunaan • Membuat fitur keterbukaan transparasi dana yang telah dikeluarkan rincian tersebut dapat berupa laporan tulisan (CSV) dan bukti kegiatan 2. Do next : • Membuat fitur notifikasi dana donatur yang sudah terpakai dan masuk ke notifikasi donatur. • Membedakan antara donasi terkumpul dan donasi yang sudah tersalur • Tracking proses kegiatan dari penyaluran dana dalam bentuk alur, sehingga penguna mengetahui prosesnya sudah sampai mana 3. Do last : • Membuat fitur menu pembeda antara berita per kategori dan update dana donasi yang kita ikuti, dan memberikan filtering pesan telah dibaca atau belum dan mengurutkan pesan. • Crazy 8's Crazy 8’s merupakan kegiatan brainstorming desain atau menuangkan ide dalam bentuk desain dalam waktu 8 menit, kegiatan ini menantang setiap desainer untuk benar-benar berpikir secara kreatif, dan mendorong mereka untuk melewati ide ‘normal’ atau ide yang tidak mungkin. Gambar yang dibuat pada proses ini merupakan bentuk kasar dari UI yang akan dibuat nantinya. Setiap anggota tim masing -masing membuat gambaran kasar pada kertas HVS A4 selama 8 menit. • Task Flow Task Flow merupakan salah jenis diagram yang ada pada user flow. Task flow berfungsi sebagai diagram yang menjelaskan bagaimana alur proses yang akan berjalan nantinya. Setiap bagian di task flow dapat berhubungan dengan bagian-bagian lain. • Wireframe Wireframe merupakan gambaran atau sketsa yang memberikan outline struktur dan layout interface. Membuat UI versi level low fidelity yaitu dengan wireframe. Pembuatan wireframe ini akan membantu sebelum melanjutkan ke tahap desain yang lebih dalam (High fidelity). • Design System Design system merupakan komponen atau kumpulan guideline yang dapat digunakan kembali untuk keperluan perancangan dan juga pengembangan produk baik dari sisi desain maupun kode programming nantinya. 4. Prototype Prototype merupakan bentuk 1:1 dari tampilan produk yang akan di-develop tetapi belum nyata. Prototype digunakan untuk mencoba & mensimulasikan solusi desain yang telah dibuat. Pada tahap ini saya masih menggunakan tools Figma. Pada prototype yang saya buat, saya tambahkan interactions agar terlihat lebih nyata seperti menggunakan aplikasi yang asli. 5. Test Test merupakan tahap terakhir yang ada pada design thinking. Kami melakukan user research. Proses user research dilakukan dengan eksperimen prototype test yang di uji coba oleh pengguna secara langsung. Proses user research dilakukan untuk melihat interaksi yang terjadi antara aplikasi dan pengguna. Selanjutnya melihat penilaian dari sisi pengguna terhadap aplikasi ini sehingga saya mendapatkan masukkan dari pengguna untuk bisa meningkatkan kualitas dan performa aplikasi ini. Untuk dapat melihat satuan ukuran tingkat ke efektivitas, efisiensi, kemudahan,kepuasan, dan lain-lain yang kemudian dapat menggambarkan tingkat keberhasilan dari solusi desain pada user research ini yaitu dengan menggunakan Usability Metric. Jenis usability metric yang saya gunakan adalah single ease question. Single ease question merupakan skala yang dimulai dari 1–7 skala tersebut diukur dari hanya dari sisi kemudahan. Indek nilai 5,5 sampai 7 dinyatakan berhasil indeks kemudahaan yang dirasakan oleh pengguna. Indek nilai dibawah 5,5 dinyatakan belum berhasil memenuhi tingkat kemudahan yang dirasakan oleh pengguna. Sebelum melakukan user research, kami menyiapkan objektif menentukan kriteria pengguna untuk wawancara dan pengguna tersebut nantinya akan mencoba prototype yang telah saya buat. Research Objective 1. Mencari tahu kemudahan pengguna dalam menemukan informasi mengenai pembaharuan di bagian berita pada menu inbox. 2. Mencari tahu apakah pengguna dapat merasakan keterlibatan secara emosional dengan kampanye yang telah didonasikan. 3. Mencari tahu apakah informasi yang disajikan pada bagian berita sudah terdistribusikan dengan baik kepada para donatur. 4. Mencari tahu kemudahan pengguna dalam melakukan donasi kembali ke kampanye yang telah didonasikan atau kampanye lainnya yang berhubungan dengan kampanye sebelumnya. 5. Mengetahui tingkatan nilai keberhasilan dari SEQ dari bagian “Berita” yang bisa ditemukan melalui menu inbox. Respondent Criteria 1. Pria atau Wanita 2. Berusia lebih dari 18 tahun 3. Seorang mahasiswa/non-mahasiswa/karyawan/karyawati pada profesi dan instansi apapun 4. Berdomisili di seluruh wilayah Indonesia 5. Memiliki kemampuan Bahasa Indonesia sebagai native language 6. Pernah menggunakan aplikasi Kitabisa Wawancara dilakukan menggunakan platform Zoom, nantinya user akan diminta untuk memperlihatkan aktivitas yang dilakukan saat mencoba aplikasi sebelumnya saya menanyakan beberapa pertanyaan yang telah kami persiapkan dalam dokumen Stimulus User Research . Stimulus User Research merupakan dokumen yang dipersiapkan apabila akan melakukan user research. Hasil nilai Single Ease Question yang di dapatkan dari hasil wawancara bersama pengguna semuanya berada diatas 5,5. Maka, nilai tersebut mendakan aplikasi dapat dengan mudah digunakan oleh pengguna. Kesimpulan Dari hasil proses yang telah dilakukan dalam membuat prototype aplikasi KitaBisa dengan menggunakan metode desain thinking yang terdiri dari 5 tahap yaitu, empathize, define, ideate, prototype, dan test aplikasi telah selesai dibuat dengan menggunakan tools Figma. Dengan adanya redesign aplikasi Kitabisa ini diharapkan pengguna mendapatkan pengalaman yang menyenangkan dalam menggunakan aplikasi KitaBisa, mulai dari merasa nyaman saat melihat tampilan UI menu inbox, mudah dalam menggunakan aplikasi ini khusunya fitur yang terdapat pada menu inbox, dan mendapatkan motivasi untuk terus berdonasi. Dari program Skilvul Virtual Internship saya sangat senang karena disana saya bisa mendapatkan banyak ilmu mengenai UI/UX, bahkan bertukar pikiran dengan orang-orang hebat yang tertarik dengan dunia UI/UX dan tentunya belajar dari mentor-mentor yang ramah dan juga berpengalaman.

Creator

Nadya Wardah Budiman


Partner Challenge

Kitabisa

Kitabisa

Kitabisa - Revamp Laman Berita

Showcase lainnya dari challenge ini


UI/UX

Meningkatkan Pengalaman Berdonasi Online di Kitabisa

Kitabisa - Revamp Laman Berita


Anang Syaifuddin Nurul Fadli

UI/UX

Kitabisa: UI/UX Challenge, re-desain fitur berita pada aplikasi Kitabisa

Kitabisa - Revamp Laman Berita


ghiffari noer muhammad

UI/UX

Redesign Aplikasi KitaBisa

Kitabisa - Revamp Laman Berita


Cahyono ​