Design Thinking : Gamification for Campaign.com

Halo! Saya Ryan, mahasiswa dari ISI Padang Panjang yang sedang magang di Skilvul. Skilvul adalah sebuah platform pendidikan teknologi yang menyediakan konten pelajaran digital skills dengan metode “blended-learning” dalam bentuk online maupun offline. Magang saya sekarang ini berhubungan dengan dunia UI/UX. Di Skilvul saya dimentori oleh kak Sarah Anindya Shofi. Pada kali ini saya akan membahas tentang UX process dari project prototype dari aplikasi clien kami yang bernama Campaign.

UI/UX Designer : Saya, Dimas Pradipta Putra, Muhammad Shidqi Hadafi

Clien kami yaitu Campaign, adalah Social Action platform dimana campaign organizer dapat membuat tantangan dalam bentuk Challenge terhadap supporter mereka dan mendapatkan donasi dari sponsor.

Disclaimer : Project ini merupakan bagian dari program pelatihan UI/UX yang dilaksanakan oleh Skilvul. untuk program Kampus Merdeka yang diselenggarakan oleh Kementrian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Campaign adalah Mitra Tantangan. Saya tidak bekerja untuk atau dikontrak secara profesional oleh Campaign.

Latar Belakang

Pada kali ini saya tidak lagi diberi tantangan oleh Skivul melainkan permintaan dari clien yaitu Campaign. Campaign adalah Social Action platform dimana campaign organizer dapat membuat tantangan dalam bentuk Challenge terhadap supporter mereka dan mendapatkan donasi dari sponsor. Pada kesempatan kali ini mereka ingin membuat aplikasi mereka menjadi fun dengan menambahkan fitur gamification.

Permasalahan

Perusahaan Campaign ini ingin membuat gamification didalam aplikasi mereka, tujuannya adalah Ingin membuat aplikasi campaign itu jadi fun atau menyenangkan.

Objektif

• Membuat fitur gamification agar aplikasi lebih fun
• Mengetahui tingkat kemudahan user dalam menggunakan aplikasi
• Mengetahui tingkat ketertarikan pengguna terhadap challenge yang diberikan
• Mengetahui sejauh mana user memahami tentang challenge yang diberikan

Tools yang digunakan

Figma (Figjam File, Design File), Google Spreadsheet, Google Doc.

Figjam adalah tempat untuk mencari permasalahan/pain point dan solusi dengan kelompok, dari tahap define dan ideate dibuat disini

Figma design file adalah tempat untuk membuat tahap prototyping

Google Spreadsheet, Google Doc adalah tempat untuk melakukan tahap testing dan interview, yang jawabannya akan ditulis didalam Google Spreadsheet.

Design Thinking Proses

1. Empathise

Pada tahap Empathize ini yang biasa dilakukan adalah mencari tau pandangan dan kebutuhan pengguna. Pengguna dari aplikasi Campaign biasanya user yang memiliki kepedulian sosial dan user yang sudah tau dan punya intrest sosial isu.

Untuk kriteria pengguna yang akan diinterview adalah
Umur : 20–34 tahun
Profesi : Mahasiswa atau karyawan swasta
Bahasa : Indonesia dan Inggris
Beberapa kriteria lainnya yaitu : Berdomisili di pulau Jawa dan Sumatra, Paham menggunakan smartphone, Belum pernah mengikuti kegiatan sosial baik offline ataupun online, Aktif dalam menggunakan sosial media.

2. Define

Pada tahap ini yang saya lakukan adalah mencari masalah atau pain point yang dirasakan oleh user dari aplikasi Campaign sebelumnya berdasarkan apa yang telah diberi briefnya oleh pihak Campaign. Dan setelah mengumpulkan Pain Point dilanjutkan dengan membuat How-Might We.

- Pain Point

Pain point adalah masalah masalah yang dirasakan oleh pengguna ketika sedang meluncurkan atau menggunakan suatu aplikasi. Pain point kali ini beberapa kami dapatkan dari aplikasi Play Store tentang keresahan keresahan yang dirasakan pengguna.

- How-Might We

How-Might We ini bertujuan untuk membuat kita mencari ide untuk sebuah solusi dari Pain Point. Dari beberapa How-Might We kami memilih bagaimana cara meningkatkan engagement dan retention dengan menggunakan Gamification.

3. Ideate

Pada tahap ini kami memulai mencari solusi berdasarkan How-Might We, membuat Affinity Diagram, dan membuat prioritas dari ide solusi tersebut. Terakhir saya membuat sketsa kasar sebuah Wireframe dengan teknik Crazy-8s. Dan yang terakhir membuat Userflow.

- Solution Idea

Mencari solusi dari tahap How-Might We. Ada beberapa solusi yang kami jadikan prioritas beberapa diantaranya yaitu membuat fitur poin, memberikan quest atau challange harian dan event, dan memberikan avatar atau border spesial jika user telah menyelesaikan sebuah challange event.

- Affinity Diagram

Affinity Diagram ini bertujuan untuk menggabungkan apa saja ide solusi yang ditemukan dijadikan satu kategori. Dan kami membuat 5 kategori.

GAMIFICATION penggunaan dari teknik desain permainan, permainan berpikir dan permainan mekanik untuk meningkatkan non-game konteks.

REWARD kategori untuk fitur yang menyediakan berbagai macam reward.

PUBLIKASI kategori untuk fitur yang memudahkan pengguna membagikan sebuah challange dari Campaign

LOADING kategori yang nantinya akan memudahkan user melihat seberapa lama loading dari aplikasi Campaign.

LAINNYA kategori dari fitur yang nantinya akan memudahkan user dalam menggunakan aplikasi Campaign.

- Prioritization Idea

Prioritization Idea ini bertujuan untuk mengetahui mana solusi/fitur yang akan dibuat lebih dulu sampai dengan yang tidak terlalu perlu untuk cepat cepat dibuat.

YES, DO IT NOW yang diprioritaskan pertama karena usaha membuatnya sedikit tapi memiliki dampak yang besar terhadap Pengguna. Kami memprioritaskan fitur gamification yang ingin kami buat terlebih dahulu.

DO NEXT ini memiliki dampak yang besar terhadap pengguna tapi usaha untuk membuatnya lebih besar.

DO LAST ini memiliki dampak yang kecil terhadap pengguna dengan usaha yang kecil

LATER memiliki dampak yang kecil terhadap pengguna dengan usaha yang besar.

- Crazy-8s

Crazy-8s adalah teknik untuk membuat Wireframe kasar dengan kertas yang dilipat menjadi 8 bagian yang tiap bagian diisi sketsa wireframe dengan waktu yang ditentukan. Ada 8 halaman, yaitu halaman home, login, profile, Leaderboard, Share fitur, Halaman Border dan Avatar, Halaman Challange, Halaman Poin.

- Userflow

Userflow adalah langkah langkah yang akan pengguna lakukan dengan sebuah aplikasi. Mulai dari Login,

halaman Home ke halaman challange, dan juga dari halaman home ke halaman penukaran Poin dan penukaran Avatar/Border.

4. Prototype

Pada tahap Prototyping ini yang saya lakukan adalah membuat Wireframe secara digital dari Crazy-8s, dilanjutkan dengan membuat Design Interface dari Wireframe tersebut dan menyusunnya menjadi sebuah flow yang tadi sudah ditentukan bersama sama agar nantinya dapat dipakai untuk testing.

- Wireframe

Wireframe adalah Sketsa/Blueprint dari Design Interface yang akan kita buat yang nantinya akan bisa dimainkan dan dinikmati oleh pengguna. Kami mulai membuat Wireframe dari halaman login, halaman home, halaman profile, halaman challange, dan halaman poin.

- Design System

Tujuan dibuatnya Design system ini adalah agar design yang ingin kita buat itu menjadi lebih mudah dikerjakan dan membuatnya konsisten. Hal hal yang terdapat pada design system itu mulai dari warna, font, button, text link, icon, text field, header, pop-up, dan navbar. Beberapa Design System sudah dikasih oleh pihak Campaign, jadi kami hanya mengikuti apa yang telah diberikan, walaupun sebenarnya kami diperbolehkan explore.

• Warna

Pada Design System warna pihak Campaign telah menyiapkan warna apa saja yang mejadi warna mereka. Warna biru menjadi dominan diaplikasi Campaign yang membuat aplikasi mereka menjadi terlihat minimalis dan simple, dan juga warna seperti ini tidak membuat mata pengguna terganggu.

• Icon

Untuk icon kami mengambil icon dari iconify, ada banyak icon yang disediakan disana. Mulai dari icon menu, kamera, kembali, panah, dan masih banyak lagi.

• Font

Untuk font kami mengambil dari apa yang telah disediakan oleh pihak Campaign. Typeface yang disediakan oleh pihak Campaign adalah Poppins.

Font adalah suatu kumpulan huruf, angka, atau simbol yang memiliki karakter tertentu. Font merupakan bagian dari typeface.
Typeface adalah keluarga font yang terdiri dari beberapa atau banyak font.

• Button

Untuk button juga telah disediakan oleh Campaign. Mulai dari Button utama yang besar dan kecil, yang aktif dan tidak aktif sampai dengan button outlines yang normal dan yang kecil.

• Navbar

Untuk navbar pihak Campaign juga telah menyediakan navbar mereka. Mulai dari navbar yang aktif semua, yang aktif cuma salah satu dari 5 icon, sampai dengan navbar yang tidak aktif

• Maskot

Maskot juga disediakan oleh pihak Campaign. Maskot kami gunakan biasanya untuk hal hal yang memerlukan maskot, seperti pada halaman pendaftaran ada maskot seperti mensupport anda untuk melakukan pendaftaran.

• Textfield

Untuk textfield kami membuat sendiri versi kami. Mulai dari textfield yang kosong, textfield yang tidak bisa diklik/disable, textfield dropdown, sampai dengan textfield yang mempunyai icon.

• Logo

Karena pihak Campaign juga sudah memiliki logo, jadi kami hanya mengambil dari logo yang telah disediakan oleh pihak campaign. Ada 3 bentuk logo yang disediakan, pertama yaitu logo asli, kedua logo love dengan warna biru dan tulisan campaign berwarna putih, dan ketiga logo campaign berwarna putih.

• Header

Untuk header kami membuat sendiri dengan beberapa bentuk header. Mulai dari header yang hanya icon, header yang hanya text, sampai dengan header dengan text dan icon.

- Design Interface

Inilah tahap kami membuat Design dari wireframe yang telah kami buat sebelumnya. Dengan bantuan Design System, Design interface kami lebih konsisten dan minimalis.

- Prototype

Ditahap Ini kita membuat Design Interface yang dibuat itu sudah bisa dicoba dan digunakan, namun untuk keperluan testing dan belum nyata. Ada dua bentuk Prototype yang kami buat, yaitu prototype sebelum iterasi dan sesudah iterasi.

• Prototype sebelum iterasi
  Pada Prototype ini kami masih dalam bentuk awal dan belum ada masukan dari calon pengguna.

• Prototype sesudah iterasi
  Pada Prototype ini kami telah melakukan perubahan dibagian profile berdasarkan masukan dari calon pengguna. Dia berpendapat kalau Design UI kami pada halaman Profile terkesan kosong karena warna putih mendominasi disana.

5. Testing

Pada tahap ini kami melakukan interview sekalian melakukan testing kepada pengguna agar mendapatkan masukan atau mengetahui apa yang menjadi kendala selama testing. Kami menggunakan metode SEQ (Single Ease Question). SEQ (Single Ease Question) merupakan salah satu Post Task Questionnaire yang digunakan dalam menilai tingkat kemudahan pada suatu fitur produk berdasarkan pengalaman user dengan menggunakan satu pertanyaan saja.

Task 1 pengguna mencoba mendaftarkan akun dan login

Task 2 pengguna mencoba melihat Challenge yang tersedia pada halaman Challenge

Task 3 pengguna mencoba melihat halaman Event, Setelah itu meminta responden untuk mengikuti Challenge yang tersedia , kemudian meminta responden untuk Mengikuti Challenge Harian

Task 4 pengguna mencoba Redeem Reward (Meminta responden untuk mengganti Avatar dan Border)

Dari 4 Task tersebut tidak terlalu banyak kendala yang ditimbulkan. Tapi masukan dari pengguna yaitu ketika dia berada dihalaman profile, halaman tersebut terkesan kosong karena didominasi warna putih.

Setelah melakukan interview dan testing saya menanyakan berapa nilai 1–7 dari yang mudah dipahami sampai dengan sulit dipahami, 3 dari 4 task yang telah dilakukan, pengguna memberi nilai 6, dan pada task ke 4 pengguna memberikan nilai 5 karena halaman tersebut terkesan kosong.

6. Iterasi

Iterasi adalah tahap perubahan dari prototype yang berdasarkan dari masukan dari pengguna. Berdasarkan masukan dari pengguna soal halaman Profile yang terlalu didominasi oleh warna putih, jadi kami putuskan untuk merubah sedikit tampilan dari halaman profile dengan background dibelakang avatar dan nama pengguna.

Kesimpulan

Dari tahap testing dan interview yang kami lakukan, pengguna merespon bahwa tidak ada masalah yang terlalu besar untuk Design UI nya, akan tetapi karena kami terlalu mengikuti aplikasi yang telah ada yang mana aplikasi tersebut didominasi oleh warna putih, pengguna jadi merasa kosong pada halaman tersebut, jadi kami putuskan untuk merubah sesuai dengan masukan pengguna.

Walaupun kebanyakan orang tidak ada yang mengetahui tentang aplikasi kampanye sosial online, tapi kami tetap melakukan interview kepada orang yang mempunyai keinginan untuk melakukan kampanye baik offline maupun online.

Penutup

Terima kasih kepada teman teman telah membaca dan melihat UX Case Study saya, kalau ada yang salah dan teman teman ingin mengkritik dan memberi masukan silahkan ingatkan saya.

Have Great Day :)