UI/UX Case Study: Fitur Gamification pada aplikasi berbasis donasi (Campaign.com)

Taopik Nasrudin
10 min readOct 24, 2021

--

Simple Mockup by iykee

⚠️ Disclaimer:

Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan Campaign.com sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Campaign.com.

Introduction

Campaign.com adalah startup sosial berasal dari Indonesia. Fokus utama paltform ini adalah menyediakan ruang aman dan berdedikasi bagi penyelanggara kampanye untuk memberikan tantangan kepada pendukung mereka dengan melakukan aksi sosial dan membuka donasi dari sponsor. Segala bentuk tantangan dalam kampanye terdiri dari serangkaian tindakan sosial yang bertujuan untuk membimbing dan mengembangkan kebiasaan sosial baru dalam kehidupan sehari-hari penggunanya.

Campaign.com menyuguhkan challenge kepada user untuk dapat memberikan experience berdonasi sambil bermain yang diharapkan menjadi sebuah metode baru dalam proses kampanye. Dalam mengajak individu, komunitas hingga korporasi untuk melakukan kolaborasi dalam perubahan, Campaign.com memfokuskan untuk dapat memperluas pengguna user karena aplikasi ini gratis untuk siapa saja.

Namun, beberapa kendala terjadi diantaranya ketika user tidak menyelesaikan challenge dengan cepat atau bahkan lupa telah mengikuti challenge. Asumsi saya fitur Gamification akan menciptakan hal yang berbeda dari kompetitor lain dan memiliki rasa otentik ketika user menggunakan aplikasi ini, karena semua manusia menyukai tantangan dalam segala aspek kehidupan kita yang selalu berjibaku dengan masalah. Tantangan akan membuat seorang manusia dapat fokus, senang, sedih jika gagal dan dapat bahagia ketika tantangan itu dilewati. Karena saya meyakini bahwa dari sebuah tantangan / masalah yang dihadapi akan membentuk karakter dan membuat manusia itu lebih berkembang daripada hari kemarin.

Photo by Adam McCoid on Unsplash

Understanding the challenge

Saya menyadari secara general bahwasanya hal terberat dalam menyelesaikan challenge / tantangan adalah sebuah konsistensi. Manusia diberikan waktu 24 jam dalam 7 hari, dalam satu pekan manusia melewati berbagai macam experience yang berbeda setiap harinya bahkan hampir tak sama. Kebanyakan manusia tidak mencapai goals karena tersendat dalam segi konsistensi bila dijabarkan konsistensi tersebut dapat memberikan beberapa cabang diantaranya adalah motivasi, kegigihan, rasa tanggung jawab, semangat, mood dan lain semacamnya. Namun, jika sikap dan rasa konsistensi yang tinggi saya akan kembali berasumsi bahwasanya manusia akan melewati masa-masa jenuh hingga keputusasaan dalam proses menyelesaikan tantangan.

Objective

  1. Membuat fitur Gamification, sehingga user dapat merasakan pengalaman mengikuti kampanye yang berbeda.
  2. Menambahkan fitur Leaderboard, sehingga user dapat melihat peringkat dan poin yang berpartisipasi dalam Campaign.com.
  3. Membuat fitur Badge dan Sertifikat, dalam bentuk penhargaan yang diberikan kepada user.
  4. Menyuguhkan reward / hadiah yang menarik sesuai dengan kualifikasi kampanye yang akan dibuat kepada user, sehingga membentuk konsistensi user dalam menyelesaikan challenge meningkat.

Meet the Team

Dalam UX Case study yang pertama ini saya berkolaborasi dengan 2 UI/UX designer lainnya, yaitu Yohana Utami dan devap . Peran dalam tim, saya memiliki tanggung jawab sebagai berikut:

  1. Merancang Wireframe dan UI KIT
  2. Membuat diksi bahasa yang akan digunakan pada tampilan. UI/UX Writer
  3. Memberikan ide mengenai proses reward dan reward apa saja yang akan menarik minat user lebih tinggi
  4. Melakukan prototyping
  5. Menjadi notulensi dan observer saat proses testing dengan responden

Research Methods

#Design Process

Pada UX Case Study kali ini, kami sempat berdiskusi mengenai proses seperti apa yang akan kita gunakan dalam proses Design Process. Akhirnya kami berlabuh dan memutuskan untuk menggunakan Design Thinking sebagai pendekatan yang kami akan lakukan, karena pendekatan tersebut memiliki fokus terhadap solusi yang ingin dicari dalam menyelesaikan masalah. Disisi lain kita diharapkan dapat berusaha memahami pengguna, menguji asumsi dan menjabarkan kembali masalah sebagai proses dalam identifikasi strategi alternatif dan solusi yang sebelumnya belum memberikan dampak positif.

Selain itu menurut yang saya pahami, pendekatan ini tetap menjungjung tinggi kecepatan dalam design process karena pola pikir yang disuguhkan cukup mudah untuk beradaptasi. Sehingga diharapkan kami dapat menyelesaiakan dalam waktu singkat namun tetap on target dengan pemecahan masalah melalui ide, kreativitas dan inovasi untuk membuat perubahan.

Berikut tahapan yang kami lakukan dalam Design Process menggunakan Design Thiking:

1. Empathize

Tujuan Riset

Pada tahapan ini kami mencari tahu pandangan & kebutuhan dari target user. Beberapa tahapan yang harus dilakukan pada tahapan ini adalah menganalisis data analitis, melakukan survey pengguna, melakukan In-Depth Interview, dan yang terakhir adalah melakukan focus group discussion (FGD).

Permasalahan terbesar adalah sulitnya mempertahankan konsistensi user untuk menyelesaikan challenge dengan mengambil aski dan menyelesaikannya dalam beberapa hari. Sehingga titik fokus yang mejadi perhatian dalam pengembangan fitur ini adalah completion rate dari user yang sudah mengikuti challenge.

2. Define

Pain Point dari User

Dari hasil Empathize kami berasumsi bahwasanya konsistensi yang menjadi permasalahan utama dalam sulitnya user dalam menjaga konsistensi utama untuk menyelesaikan challenge. Beberapa yang kami temukan, ada beberapa alasan mengapa user tidak menyelesaikan challenge, yang utama adalah bila kita lihat dari pain point yaitu permasalahan reward serta motivasi user karena kerumitan penggunaan fitur sehingga berpengaruh kepada konsistensi untuk menyelesaikan challenge. Hal tersebut sangat memiliki keterkaitan antara satu dan lain hal, asumsi kami reward belum sesuai dengan target usernya sehingga menyebabkan kurangnya motivasi dan berakibat pada konsistensi.

Selain itu, kami menemukan tidak adanya fitur sharing penglamana ke platform / sosial media lainnya. Sehingga user menganggap bahwa hal ini tidak bisa diupdate sebagai kegiatan yang ia lakukan. Beberapa pengguna user mungkin saja berada di fase ingin melamar pekerjaan sehingga portofolio merupakan yang sangat penting, dalam hal ini kami mencoba beberapa fitur yang akan membantu user untuk menyelesaikan masalahnya.

How-Might we

HMW

How Might We merupakan langkah selanjutnya yang dilakukan. Dalam proses ini, tim menguraikan beberapa pertanyaan yang telah dirumuskan dan disusun sebagai bentuk dari sebuah diskusi yang telah dilakukan. Mayoritas tim memilih untuk mencari solusi bagaimana memudahkan user dalam menggunakan aplikasi, dengan pemilihan fitur baru sehingga user dapat dengan mudah dan mencoba experience berbeda.

3. Ideate

Pada tahapan Ideate kami mulai berdiskusi mencari ide dan gagasan baru berdasarkan How-Might We, hal ini akan menjadi strategi dalam pemecahan masalah yang akan diberikan. Beberapa dari kami mulai memberikan pandangan-pandangan baru dimulai dari perumusan Solution Idea hingga Affinity Diagram.

Ideation Stage

Melalui Ideation Stage kami memberikan beberapa tema solusi berupa fitur Gamification, Reward, Security, Connetion, Time dan Guidance. Ide dan gagasan dari fitur ini adalah harapan baru yang akan menjadikannya jalan keluar untuk memudahkan user menggunakan aplikasi. Namun, kami membaginya kembali menjadi beberapa skala prioritas mengingat adanya fitur yang membutuhkan energi lebih banyak dan waktu lebih lama dalam proses pengerjaanya.

Priritization Idea

Dari beberapa ide yang terkumpul kami mengelompokan pada skala prioritas, terkumpul 7 ide yang akan kami fokuskan pada pengerjaan UX Case Study kali ini, diantaranya yaitu:

  • Membuat fitur Gamification dengan daftar wajib challenge harian yang harus dilakukan oleh user.
  • Fitur Share Pencapaian dan Badge
  • Memberikan reward melalui level / poin tertentu untuk membuka Filter, Stiker atau Voucher Belanja. Beberapa Filter dan Stiker kami memilih bernuansa K-Pop karena cukup menarik perhatian anak muda.
  • Membuat fitur rekomendasi minat user
  • Menambahkan sistem score leaderboard

Namun, dari beberapa ide yang terdapat pada skala prioritas utama. Kami hanya dapat mengerjakan beberapa poin saja dikarenakan waktu yang cukup singkat.

Akhirnya kami membuat sebuah Fitur Gamification berupa kampanye yaitu Gerakan 10 menit lebih awal. Gerakan ini dibuat dengan tujuan masyarakat dapat meningkatkan diri mereka bahwa kita bisa tepat waktu dan menghargai waktu. Selain itu, fitur yang tak kalah pentingnya adalah Level / Poin yang bisa menunjukan posisi pada leaderboard serta reward yang bisa ditukarkan (unlock) berdasarkan level atau poin

Sebelum kami melanjutkan ke tahapan sketsa, kami menentukan User Flow telebih dahulu, untuk memetakan alu pengguna berdasarkan pengalaman (user persona) yang diharapkan dari pengguna aplikasi ini. Penggunaan user flow membantu bagaimana dan dimana fitur baru dapat diaplikasikan dengan baik.

User Flow

User Flow yang telah dibuat akan diturunkan pada desain wireframe dengan kualitas low fidelity, sebelum masuk pada tahapan wireframe kami tertantang untuk membuat sketsa kasar menggunakan crazy 8’s dengan menggunakan pensil, penghapus, kertas dan penggaris. Hal ini kami lakukan agar saat pengerjaan wireframe menggunakan software tools lebih cepat dan sudah memiliki bayangan.

Crazy 8’s Sketch

Setelah melakukan voting kami bergerak menuju sketsa wireframe, kami membagi rata beberapa wireframe yang akan di desain sesuai dengan kebutuhan fitur yang akan digunakan.

Low Fidelity Wireframe

Sedikit pemberitahuan bahwasanya ada perbedaan antara Low-Fidelity dan High-Fidelity, namun tidak terlalu meleset jauh. Kami berupaya mengoptimalkan wireframe low-fidelity yang telah dibuat.

Color and Typography Guidelines

Color and Typography Guidelines

4. Prototyping

High Fidelity!

Sebelum beranjak melihat UI yang kami buat. Ada beberapa yang akan saya sampaikan yaitu Icon, Animasi, dan Foto bukanlah karya kami melainkan dibantu oleh para kreator yang menyuguhkan karyanya sehingga kami menggunakan karya tersebut untuk mempercantik UI yang kami buat. Saudara-saudari bisa melihat karya tersebut di:

Icon: https://fonts.google.com/icons?selected=Material+Icons

Animasi: Lottiefiles.com

Foto: https://www.pexels.com/photo/person-wearing-black-round-analog-watch-on-left-wrist-while-holding-basketball-on-right-hand-179908/

#Home

Pada kami menambahkan button “Lanjutkan” agar dapat memudahakan user dalam mengambil aksi yang sedang dijalankan, mengingat aksi / challenge yang diikuti memerlukan beberapa hari untuk menyelesaikannya sehingga kami persingkat waktu user dalam menyelesaikan task pada hari itu dengan menempatkannya bagian atas halaman.

Selain itu kami sengaja menampakkan button Leaderboard, Reward dan Profile pada bagian bawah agar user dapat menjangkaunya dengan cepat tanpa perlu mencari keberadaan menu tersebut.

#Ambil Aksi

Proses alur ambil aksi kami desain dengan semudah mungkin agar user dapat menjalankan tanpa ada kebingungan hingga sampai pada tahap akhir yaitu donasi. Lalu mengapa pada halaman UI kamera, user tidak dapat mengambil foto dari galeri? Hal ini kami pertimbangkan agar user mengikuti challenge secara live pada saat itu (jam, hari, tanggal, momentum, vibes dll) juga dengan ditambah filter dan sticker kedepannya kami rasa akan memberikan experience yang menyenangkan.

Selain itu kami memberikan pilihan untuk dapat membagikan momen kamu setelah menyelesaikan challenge, hal ini diharapkan kamu dapat membagikan kebaikan kepada teman-temanmu. Selain untuk menambah donasi, dengan adanya user baru kami berharap mereka dapat mengembangkan diri mereka dan ikut serta dalam menciptakan hal positif untuk kepentingan sosial.

#Leaderboard

Fitur ini kami berikan untuk menambah motivasi meningkatkan poin, selain karena reward tentunya kami ingin membuat user berlomba-lomba mengembangkan peringkatnya menjadi peringkat 1 karena aplikasi ini sangat positif bagi pengembangan diri jadi poin sebenernya hanya bonus dalam sebuah permainan, yang terpenting pengembangan individu berubah ke arah lebih baik akan menciptakan dampak bagi kehidupan sosial.

Bayangkan, dari challenge “Gerakan 10 menit lebih awal” teman-temanmu bisa tepat waktu ketika akan nongkrong atau janjian? Sehingga kita dapat menghargai waktu dengan baik, dan kamu tidak berkeluh-kesah karena boring ketika menunggu teman yang ngaret (terlambat).

#Reward

Kami telah membahas bahwasanya ada hadiah berupa filter dan stiker dengan tema K-POP (Korean-POP), hal ini bukan tanpa alasan melainkan kami ingin meraih user dari kalangan pemudi untuk ikut serta dalam perubahan sosial.

Untuk dapat menukarkan hadiah, kalian harus mencapai poin atau level sesuai dengan ketentuan hadiah tersebut, semakin tinggi nilai hadiah yang diberikan akan semakin tinggi juga poin atau level yang harus diraih.

Button yang dibuat kami buat se-simple mungkin sehingga user dapat menggunakan hadiah tersebut dengan lebih cepat.

#Profile

Kami memberikan apresiasi berupa Badge dan Sertifikat kepada user yang telah mencapai level / poin tertentu. Karena atas konsistensi dan kegigihan dalam mengikuti kampanye di aplikasi ini, akan menciptakan perubahan sosial ke arah yang lebih baik.

Disini, user dapat membagikan di sosial medianya atas apresiasi yang kami berikan melalui button yang telah kami siapkan. Karena berita baik harus disebarkan agar tercipta hal-hal baik lainnya.

5. Testing

Persona

Pada tahapan ini kami akan menguji interface dengan task yang sudah ditentukan sebelumnya. Kami mewawancarai dengan satu responden yang memiliki latar belakang design graphic.

Mockup by Saroj Shahi

Kami memulai tahapan testing dengan menggunakan platform google meet yang direkam, kami sudah menyusun Stimulus User Research dan Record Data User Research.

Dari hasil wawancara kami mendapatkan feedback yang cukup serius pada tampilan interface yang kami buat. Namun, responden mengaku cukup senang dengan Prototype yang kami buat dengan beberapa alur yang mudah dipahami.

System Usability Scale (SUS)

Data dari hasil System Usability Scale (SUS)menunjukan Score 78

B- (Good)

Conclusion

Campaign.com merupakan jaringan sosial pertama yang dibangun untuk perubahan dan memberikan dampak sosial. Menyediakan ruang aman dan berdedikasi bagi penyelanggara kampanye untuk memberikan tantangan kepada pendukung mereka dengan melakukan aksi sosial dan membuka donasi dari sponsor. Adapun beberapa masukan yang dapat diakomodasi ke depan agar cita-cita dan impian dalam turut serta membangun perubahan tercapai, diantaranya:

  • Memberikan reward sesuai dengan target user
  • Mengembangkan sistem histori terhadap challenge yang sudah diikuti
  • Mengembangkan fitur video-music sehingga user dapat berkreativitas semenarik mungkin

Akhir kata inilah akhir dari perjumpaan. Terima kasih kepada Digital Talent Scholarship yang telah memberikan kesempatan kepada saya untuk mengikuti bootcamp ini, terima kasih juga dihaturkan kepada mentor skilvul dan tim yang telah menyajikan pembelajaran dengan mudah, terima kasih kepada yang memberikan tantangan yaitu campaign.com sehingga saya berada ditahap ini, dan terima kasih kepada teman-teman kelas UI/UX 3 khususon anggota tim kelompok 5.

Apabila rekan sekalian ingin berdiskusi atau memberikan masukan, alangkah senangnya hati ini untuk bisa bercengkrama dalam meningkatkan ilmu seputar UI/UX. Sekiranya berkenan silahkan rekan menghubungi saya di alamat surel: taopiknsrdn@gmail.com, Terima Kasih!

Bandung, Oktober 2021

Salam,

Taopik Nasrudin | Yohana Tri Utami | Devi Ayu Peramesti

--

--