Sistem Gamification untuk meningkatkan Motivasi User pada Aplikasi Campaign

Miga Palma putri
7 min readOct 24, 2021

--

Studi Kasus UI / UX

Pengenalan

Halo! Perkenalkan nama saya Miga Palma Putri. Studi kasus ini merupakan hasil tugas dari PROA DTS UI-UX 2021. Disini saya akan menjabarkan proses yang telah saya lakukan untuk menyelesaikan tugas ini.

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.

Cakupan Kerja

Untuk cakupan kerja sendiri yang kami lakukan kurang lebih dimulai dengan melakuklan User Research, analisis permasalahan dan ide, membuat userflow, wireframe, mockup, prototipe dan interaksi design, sampai usability testing

Peran dalam Tim

Sebagai UI/UX Designer saya berkolaborasi dengan 2 anggota tim yang lain, yaitu Risalatul Mu’awanah & Noviyana Ling. Dalam tim ini, saya memiliki tanggung jawab bekerja diantaranya, yaitu :

  1. Melakukan research dan analisis permasalahan dan fitur — fitur di aplikasi Campaign
  2. Membantu memberikan saran dan ide terkait gamification
  3. Membuat wireframe dan UI
  4. Membuat prototipe dan memberikan interaksi di setiap page
  5. Melakukan testing dan wawancara dengan user

Platform Penunjang

Dalam mengerjakan tugas ini kami menggunakan aplikasi sebagai penunjang tugas, diantaranya

  1. Figma (File Design & File Figjam) untuk pengerjaan dan dokumentasi
  2. Zoom & Discord untuk kolaborasi
  3. Gdocs, Excel dan slide untuk catatan dan dokumentasi

Campaign.com adalah salah satu startup sosial yang meluncurkan platform aksi sosial yang menyediakan ruang aman dan berdedikasi bagi penyelenggara kampanye untuk menantang pendukung mereka melakukan aksi sosial yang berbentuk tantangan kampanye yang berisikan serangkaian tindakan sosial dan membuka donasi dari sponsor.

Ide Challenge

Mencoba untuk mengajak masyarakat umum dan memotivasi minat mereka dalam mengembangkan kebiasaan sosial baru pada kehidupan sehari hari yang dapat berguna untuk dirinya sendiri dan membantu orang lain melalui donasi yang dibukanya melalui serangkaian tantangan kampanye yang bisa diikuti user (supporter) dengan menambahkan sistem gamification di dalamnya.

  • Tema: Kampanye Aksi Sosial dan Donasi
  • Platform: Aplikasi Mobile
  • Ruang Lingkup:
    1. Halaman Home
    2. Halaman Pencarian
    3. Halaman Hub
    4. Halaman Notifikasi
    5. Halaman Profil

Objektif Challenge

Objektif yang ingin kami capai dari tugas ini, yaitu :

  1. Mencari tahu kebutuhan pengguna dalam menggunakan aplikasi campaign.
  2. Mencari tahu kebiasaan atau perilaku pengguna dalam menggunakan aplikasi campaign.
  3. Mencari tahu alasan pengguna ingin menggunakan aplikasi campaign.
  4. Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur melakukan aksi challenge, mengikuti event challenge, Melihat leaderboard dan menukarkan reward serta fungsi notifikasi.

Target Pengguna (Supporter)

Untuk target pengguna atau supporter dalam melakukan research maupun test, kriterianya sebagai berikut :

  1. Perempuan
  2. Berusia 16–24 tahun
  3. Pelajar atau Fresh Graduate
  4. Memiliki ketertarikan di bidang kegiatan sosial
  5. Ingin bertemu dengan orang orang baru
  6. Sedang mempersiapkan dirinya untuk masuk ke dunia kerja

Proses Desain

Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan proses desain yang kami lakukan. Karena kami berfikir bahwa alur dari design thinking dinilai sangat cocok dalam menyelesaikan permasalahan dan menggali informasi yang dibutuhkan untuk menghasilkan ide baru sebagai solusi dari permasalahan yang kami angkat.

Design Thinking

1 — Tahap Empathize

Tahap empathize menjadi tahap pertama yang kami lakukan, disini kami melakukan usability testing sederhana terhadap user dan kami sendiri untuk mendapatkan permasalahan, menggali informasi dan untuk mempelajari alur serta fitur fitur apa saja yang terdapat di dalam aplikasi campaign.

Aplikasi mobile Campaign.com (sebelum di kembangkan)

2 — Tahap Define

Setelah sudah mempelajari alur dan fitur serta mendapatkan permasalahan dari tahap emphatize, kami mulai mendefinisikan pain poin atau permasalahannya dan how might we sebagai opportunity.

Untuk How Might We, kami melakukan voting untuk memilih opportuniyy mana yang bisa dikembangkan di design yang baru nantinya.

Pain Points User dan How Might We

3 — Tahap Ideate

Pada tahap ideate ini kami mulai dengan melakukan brainstrorming ide lalu mulai mengembangkan dan mengeksplor ide solusi sebanyak banyaknya. Setelah itu kami saling memberikan voting untuk ide -ide yang bisa dikembangkan menjadi design baru. Hasil brainstorming ide yang telah kami lakukan sebagai berikut :

Brainstorming ide

Selanjutnya untuk ide — ide yang telah divoting tadi, kami kelompokkan di dalam affinity diagram dan kami beri nama untuk setiap kelompoknya

Affinity Diagram

Selanjutnya kami membuat prioritas ide atau prioritization idea dan di dalamnya terdapat 4 kelompok pengerjaan yaitu “YES, DO IT NOW ”, “ DO NEXT “, “DO LAST ”, dan “ LATER”. Dimana setiap kelompok dibedakan berdasarkan pertimbangan dari value tiap ide dan effort pembuatan desainnya. Sehingga jadilah prioritization idea yang kami buat seperti ini :

Prioritizen Idea

Dari ide ide yang telah dikelompokkan dalam prioritization idea tadi, kami selanjutnya tiap orang membuat Crazy 8 nya masing. Yang selanjutnya gambar gambar itu akan dilakukan voting lagi.

Crazy 8

Wireframe

Dari Crazy 8 tersebut kami membuat wireframe secara digital. Disini kami mengusahakan untuk membuat wireframe yang detail dan hampir mirip dengan yang aslinya. Wireframe ini dibuat dengan style masing — masing sehingga bentuknya terlihat berbeda satu.

Wireframe

User Flow

Setelah itu kami membuat salah satu jenis user flow, yaitu task flow. Task Flow ini adalah task -task yang harus dikerjakan oleh user dan berisikan alur atau langkah user dalam menyelesaikan task tersebut.

Disini kami membuat 4 Task Flow, yaitu :

  1. Menyelesaikan Challenge (individu)
  2. Melihat Leader Board dan menukaran XP menjadi Hadiah
  3. Menyelesaikan Event Challenge
  4. Notifikasi

Berikut gambaran dari alur dari setiap task flow yang telah kami buat.

Task Flow

Design System

Sebelum masuk ke dalam pembuatan prototype, kami membuat yang namanya design system. Di dalam design system ini berisikan panduan mengenai warna, font & typhograpy, button, text field, icon, sampai ke component dan variant. Namun disini saya hanya menampilkan warna, typograpy, button dan text field saja.

Design System

Mockup / Visual Design

Setelah kita telah membuat wireframe dan design system, kami membuat visual design yang disesuaikan dengan task flow yang telah dibuat sebelumnya. Berikut sedikit gambaran visual design yang kami buat

  1. Task Menyelesaikan Challenge (Individu)
    Di dalam task ini ada 3 jenis aksi di dalamnya, yaitu upload poto atau vidio beserta keterangannya sebanyak 3 aksi, mengisi kuis pengetahuan dan permainan susun kata
Visual design Task Menyelesaikan Challenge (Individu)

2. Melihat LeaderBoard
Di dalam task ini user dapat melihat perolehan XP mereka dan menukarkan xp mereka menjadi reward hiburan seperti pulsa, voucher belanja atau hadiah hiburan lain

Visual design Task Melihat Leaderboard

3.Event Challenge
Di dalam task ini user dapat melakukan aksi bersama temannya atau user secara acak. Dimana task ini harus dilakukan dalam waktu hari tertentu dan di dalam challenge ini berisi 3 jenis aksi yang berbeda juga, seperti upload poto dan vidio beserta keterangannya, mengisi kuis dan game teka teki silang.

Visual design Task Event Challenge

4. Notifikasi
Di dalam task ini user dapat melihat dan menerima notifikasi terkait challenge yang diambil.

Visual design Task Notifikasi

4 — Prototyping

Setelah Visual design sudah dibuat semua, kami membuat prototipenya dengan membuat interaksi untuk setiap halaman desain. Berikut link prototipe dari desain dengan sistem gamification.
Prototipe desain yang baru

Prototipe Design

5 — Testing

Pada tahap ini kami melakukan pengujian dengan memberikan prototipe kepada responden yang sesuai dengan kriteria untuk dicoba dan melakukan wawancara dengan mereka. Namun sebelum itu kami menyusun dokumen Stimulus Research yang kami gunakan sebagai panduan dalam melakukan pengujian.

Berikut Link Dokumen Stimulus Research

Dari dokumen Stimulus Research ini, kami ingin mendapatkan tingkat kemudahan pengguna (Easy Of Use), Kegunaan Aplikasi ( Desirability), Pengalaman (Usability) dan Kebahagiaan (Happiness) dalam menggunakan aplikasi ini.

Jumlah Responden : 3 Orang

Matriks Easy Of Use
Matriks Desirability
Matriks Usability
Matriks Happiness

Kesimpulan

Dari hasil pengujian yang kami lakukan terhadap 3 responden, tingkat keberhasilan pada matriks Easy Of Use sebesar 89.2%, Desirability sebesar 86.6%, Usability sebesar 90% dan happiness sebesar 93.3% dimana pengguna merasa aplikasi ini mudah, berguna dan senang dengan solusi permasalahan dari aplikasi ini yaitu mengembangkan sistem gamification untuk meningkatkan motivasi melakukan aksi sosial pada aplikasi.

Pelajaran yang diambil

Aplikasi :
Berdasarkan hasil desirability sebesar 86.6%, dengan adanya sistem gamification ini bisa menjadi salah satu pemicu untuk menarik seseorang melakukan aksi sosial di aplikasi ini. Alasannya karena sistem gamification bisa membuat seseorang lebih merasa tertantang maupun mengganggap aksi itu “seru” dan tidak membosankan.

Pengerjaan :
Dalam mengerjakan tugas ini secara berkelompok tentu banyak tantangannya, terutama dalam hal menyatukan ide dan style design. Namun dengan ini saya bisa belajar kerja sama, saling menghargai, semua pendapat di cerna dan dimusyawarakan serta saya menjadi lebih sabar ketika ada perbedaan di dalamnya serta membuat koneksi diantara anggota.

Penutup

Terimakasih atas waktunya karena sudah membaca UI UX studi kasus ini. Saya berharap bisa mendapatkan masukan, saran dan kritik dari pembaca sehingga kedepannya saya dapat membuat tulisan yang lebih baik lagi seputar UI UX ini. Feel free to connect with me on Linkedin :)

--

--