UX Case Study: Redesign and Gamification Feature for Campaign.com

Syafira Alifah
7 min readNov 28, 2021

--

Photo by Mockup on Figma

Latar Belakang

Campaign.com memiliki user yang disebut sebagai “Supporter”. Sebagai user, nantinya mereka dapat memilih berbagai “Challenge” yang tersedia sesuai minat. Mengajak pengguna menyelesaikan challenge dengan mengambil aksi selama beberapa hari tidaklah mudah, maka dikarenakan itu kami ingin membangun sistem gamification yang akan menjadi motivasi tambahan dalam user mengambil aksi. Metrics akan jadi perhatian dalam pengembangan ini adalah completion rate dari user yang sudah mengikuti challenge. Pada UX case study ini, saya sebagai creator bukan bagian dari Challenge patner (Campaign.com) dan karya yang dibuat baik dalam bentuk tulisan atau design merupakan bagian dari program Skilvul Virtual Internship, yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi RI.

Objektif

  • Membuat fitur yang dapat memotivasi pengguna dalam menggunakan aplikasi.
  • Melakukan redesign terhadap beberapa tampilan agar memudahkan pengguna ketika melakukan aksi sosial.

Peran dalam Tim

  • UI/UX Designer 3 orang: Digma Heldy Pratama,Rizka Parwanti, dan Syafira Nur Alifah (penulis)
  • Mentor 1 orang

Design Process

Dalam proses ini kami menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Design Thinking dipilih karena dapat membuat designer dalam mengintegrasikan kebutuhan user, bisnis, dan teknologi, sehingga hasil yang didapat akan membuat kebaharuan atau inovasi dalam memecahkan suatu masalah.

Image by Sarah Gibbons at Nielsen Norman Group

1 — Empathize

Pada tahap ini, penulis dan tim mendapatkan challenge dari Challenge Patner yaitu Campaign.com. Campaign.com adalah jaringan sosial pertama yang dibangun untuk perubahan dan memberikan dampak sosial. Dibangun di Indonesia sejak 2015, Campaign.com bertujuan untuk membantu organisasi, komunitas dan perusahaan maupun individu mengorganisir sebuah kampanye yang berkelanjutan dan berdampak pada perubahan sosial. Dengan deskripsi challenge sebagai berikut:

Deskripsi challenge

Tujuan adanya tahapan ini adalah membantu saya dan tim dalam mencari tau akan pandangan dan kebutuhan dari target usernya dengan melakukan research, sebelum mendefinisikan problem statement dan melakukan ideanation. Dengan sudah diketahuinya deskripsi challenge dan juga melakukan research dengan cara customer journey map, hal ini dilakukan agar lebih mengetahui lebih dalam mengenai fitur apa yang perlu ditambah atau diredesign.

Pengerjaannya sendiri dilakukan di spreedsheet untuk berdiskusi secara berkelompok dan brainstorming terkait apa saja pembaharuan yang dapat ditingkatkan

2 — Define

Setelah selesai melakukan tahapan emphatize, saya dan rekan tim mulai menjalankan tahapan define, di mana kami melakukan pendefinisiaan terhadap permasalahan user dan membuat How-Might We sebagai sebuah pandangan untuk peluang yang bisa didapat.

Image from Figjam Creator

Tahapan ini dilakukan sepenuhnya dilakukan menggunakan aplikasi Figma dengan fitur Figjam, kami juga melakukan diskusi saat mengerjakan tahapan ini agar dapat saling tukar pandangan. How-Might We yang didapat pada tahapan ini adalah: “Menambah aspek gamification untuk meningkatkan motivasi”

3 — Ideate

Pada tahapan Ideating kami melakukan brainstorming ide berdasarkan How-Might We yang telah ditentukan, kemudian mencari ide solusi yang diberikan terkait proses yang sebelumnya sudah dilakukan.

Saat memasuki tahapan untuk menentukan affinity diagram, kami mengkategorikan ide-ide kedalam sebuah kategori yang sama, sehingga memudahkan dalam penyortiran bagian-bagian yang ada. Pada tahapan ini, kami memiliki 5 kategori yang terdiri dari:

  1. Gamification: Kategori ini ada paling pertama karena melihat kembali objektif dari proyek ini dijalankan untuk menambahkan fitur-fitur gamification yang tersedia.
  2. Tampilan
  3. Notification
  4. Social Feature
  5. Additional Feature
Affinity Diagram made by Group 3 SVI-8

Setelah menentukan affinity diagram, kami melakukan prioritazion idea. Hal ini didasarkan oleh User Value. Penentuan prioritazion idea bertujuan untuk mendahulukan fitur atau hal yang dilakukan agar pengerjaan wireframe atau UI Design di tahapan selanjutnya lebih maksimal dan efektif.

Tahapan Priorization Idea

Dengan gamification yang menjadi prioritas, kami sudah dapat memikirkan terkait hal apa saja yang dapat dibuat atau ditambahkan, sehingga dapat mencapai objektif dari proyek Challenge patner ini. Karena sudah berdiskusi satu sama lain terkait apa saja yang ingin dibuat kedepannya, kami selanjutnya melakukan Crazy 8's.

Crazy 8’s yang dibuat dalam kertas HVS

4 — Prototyping

Di minggu selanjutnya, berdasarkan hasil define dan ideating process, kami melanjutkan proses pembuatan UI Design sendiri. Dalam pembuatannya, seminggu sekali kami melakukan tukar pendapat, yang nanti akhirnya akan menghasilkan beberapa inovasi dan juga fitur yang kemungkinan besar dapat dikembangkan. Karena kami melakukan redesign dan penambahan fitur untuk aplikasi yang sudah ada, kami melakukan research untuk referensinya berdasarkan aplikasi yang tersedia juga seperti beberapa game yang pernah kami mainkan, aplikasi Gojek, Tokopedia, dan beberapa platform lain.

Terlebih dahulu, kami membuat user flow agar memudahkan pembuatan frame, baik masih tahapan wireframe atau pembuatan UI Designnya. Total kami membuat 4 user flow yang dirasa cukup membantu dalam memotivasi pengguna Campaign agar tetap menggunakan dan melakukan aksi sosial di aplikasinya.

Dengan adanya user flow ini, kami cukup terbantu dan tergambar tahapan apa saja yang harus dibuat agar sesuai dengan objektif dari Challenge patner ini. Kami melanjutkan untuk ke tahapan Wireframe. Disini bentukan layout UI nya masih dalam versi Low-fidelity. Tujuan pembuatan Wireframe bagi saya (designer) adalah:

  • Memberikan informasi dalam interface
  • Memberikan outline struktur dan layout interface
  • Mempercepat proses ideation

Cukup banyak wireframe yang kami buat, untuk itu kami membagi tugas masing-masing dengan cara membuat wireframe dengan user flow yang sudah ada. Jadi secara garis besar kami membuat 4 kategori wireframe:

  1. Doing Challenge atau Quest Campaign (Oleh Digma)

2. Progress Kerjakan Challenge (Dikerjakan bersama)

3. Klaim reward (Oleh Fira)

4. Kerjakan Challenge bersama teman (Oleh Riska)

Setelah dirasa Wireframe yang telah dibuat cukup, kami melanjutkan ke proses pembuatan UI Design. Dengan komponen yang lumayan banyak, kami membagi tugas, seperti membuat:

  1. Komponen warna
  2. Tabbing
  3. Navigation Bar
  4. Typography
  5. Input text field
  6. Button
  7. Header
  8. Prototype Interactive Component
  9. Dan beberapa card yang dapat digunakan
UI Styleguide untuk Campaign

Sama seperti pembuatan wireframe, ketika masuk ke tahapan designing UI, kami membagi tugas berdasarkan user flow yang sudah ditentukan, namun ketika satu sama lain ingin membantu menambahkan atau mengoreksi, kami langsung melakukannya di Figma, terkait pembuatannya, kurang lebih 2 minggu kami menyelesaikan tahapan UI Design ini 100%, tentunya dengan meminta masukan dari Kak Alvian sebagai mentor SVI 8.

Contoh UI Design yang telah dibuat

Secara garis besar, kami tidak mengalami banyak kesulitan berarti saat pengerjaan UI Designnya. Jika kami mengalami kesulitan, pasti akan langsung mengadakan diskusi, baik dilakukan dalam bentuk chat di Grup Whatsapp atau melakukan meeting di Gmeet. Kami juga satu sama lain saling menambahkan frame yang dirasa dibutuhkan untuk UI yang lain sehingga kami cepat pengerjaannya.

Selanjutnya, kami melakukan prototyping dengan tujuan untuk mencoba dan mensimulasikan solusi desain yang telah dibuat. Berikut hasil prototyping yang telah dibuat:

Prototype yang telah dibuat kelompok 3 SVI 8

5 — Testing

Dalam proses testing, kami masing-masing melakukan user research ke minimal 1 orang, yang sesuai dengan dengan kriteria pada Challenge patner brief. Testing dilakukan dengan beberapa agenda, diantaranya:

  • Memperkenalkan diri masing-masing dan menjelaskan tujuan diadakannya user research
  • Memberikan question list general
  • Memberikan 4 task berupa: (1) Menggunakan Quest Camp sebagai fitur untuk menjalankan misi dan mengerjakan challenge, (2) Mengerjakan aksi dari sebuah challenge hingga selesai, (3) Menjalin relasi dengan teman dan klaim reward, (4) Mencoba fitur mengerjakan challenge bersama teman.
  • Menanyakan mengenai feedback terkait UI Design dalam bentuk deskripsi dan meminta angka untuk skala SEQ (Single Ease Question) agar dapat dilakukan perbaikan yang dapat menunjang aplikasi.
User Research Interview (On-site) by Digma
User Research Interview (Conference Meeting Call) by Fira
User Research Interview (Conference Meeting Call) by Riska

Untuk durasinya sendiri, rata-rata kami melakukannya selama 20–55 menit. Terkait caranya ada dua, ada yang langsung melakukan user testing on-site dan ada juga yang dilakukan secara online menggunakan platform meeting. Hasil yang didapat dari User research ini, selanjutnya akan digunakan untuk iterasi design UI yang telah dibuat agar feedback yang didapat berguna bagi perkembangan kualitasnya.

Iterasi Design

Dengan hasil research yang telah didapat, kami melakukan revisi terhadap beberapa desain yang telah dibuat, diantaranya di bagian:

  1. Klaim reward
  2. Pengerjaan challenge bersama teman
  3. Keterangan lebih lanjut pada Quest Campaign
Iterasi UI Design

Kesimpulan

Untuk mengerjakan challenge ini, dibutuhkan kurang lebih 1 bulan, di mulai dari tahapan emphatise sampai testing. Tentu saja masih banyak kekurangan dan hal yang dapat dikembangkan lebih lanjut, namun dengan proses ini kami mendapatkan beberapa pelajaran diantaranya:

  1. Skill Team work
  2. Rasa bertanggungjawab
  3. Critical Thinking
  4. Public speaking

Kami rasa gamification yang telah dibuat, cukup membantu user untuk memotivasinya dalam melakukan aksi sosial di aplikasi Campaign. Hal itu didapat dari interview yang dilakukan saat User research interview.

--

--