UX Case Study: Redesign Campaign App

Agung Kurniawan
6 min readSep 28, 2022

--

Disclaimer:
UX Case Study ini merupakan bagian dari program Skilvul DTS PROA UI/UX Design Batch 3 — 2022

Latar Belakang

Campaign.com adalah startup sosial yang berbasis di Jakarta, Indonesia. Kami meluncurkan platform aksi sosial yang menyediakan ruang aman dan berdedikasi bagi penyelenggara kampanye untuk mendorong pendukung mereka melakukan aksi sosial dan membuka donasi dari sponsor sehingga dapat mengembangkan kebiasaan sosial baru dalam kehidupan sehari-hari.

Campaign.com menyebut usernya sebagai Supporter yang nantinya mereka dapat memilih berbagai macam Challenge yang tersedia sesuai dengan minat mereka. Berikut ini penjelasan secara singkat bagaimana aplikasi Campaign bekerja :

  • User/Supporter memilih Challenge yang mereka minati.
  • Kemudian mereka harus melakukan beberapa aktivitas sesuai dengan waktu yang ditentukan untuk memenuhi Challenge tersebut.
  • Lalu, user/supporter klik tombol Ambil Aksi pada aplikasi kemudian upload foto, keterangan dan lokasi pada saat melakukan aktivitas tersebut sebagai bukti.
  • Terdapat beberapa aksi yang harus diselesaikan untuk menyelesaikan Challenge tersebut.
  • Jika semua aksi sudah dilakukan, maka user/supporter tersebut telah memenuhi syarat untuk menyelesaikan Challange.
  • Donasi dari sponsor untuk Campaign akan dirilis.

Setelah user/supporter berhasil melakukan aksi dan menyelesaikan challange maka akan mendapatkan beberapa reward seperti point, badge dan yang lainnya.

Objektif

UX Case Study ini dibuat dengan tujuan yaitu :

  • Mencari tahu tingkat kegunaan, kemudahan dan kepuasan dari solusi ide yang ditawarkan pada alur proses login, penyelesaian challenge dan mencari teman.
  • Mencari tahu cara memotivasi pengguna agar terus mengikuti challenge.
  • Mencari tahu penggunaan poin yang didapatkan user.

Peran dalam Tim

Dalam tim ini saya berperan sebagai UI/UX Designer yang melakukan kolaborasi dengan 4 anggota lainnya yaitu Pipitkurniasari, EKO DENNY WAHYUDI, Siti Salman dan lainnya — yang juga berperan sama yaitu sebagai UI/UX Designer. Kami melakukan semua tahapan demi tahapan untuk menuangkan ide-ide kami secara bersama-sama sebagai 1 tim.

  1. Membuat User Flow dari Paint Point yang didapatkan.
  2. Mendesain Wireframe berdasarkan User Flow yang telah dibuat.
  3. Membuat Design UI menggunakan Figma berdasarkan Wireframe dengan beberapa perkembangan lebih lanjut.
  4. Membuat Prototyping pada desain yang untuk dilakukan Usability Testing.
  5. Melakukan Usability Testing terhadap Prototyping yang telah dibuat.

Design Process

Dalam challange ini kami menggunakan Design Thinking sebagai pendekatan dari design proses yang kami lakukan. Design thinking adalah cara untuk memecahkan sebuah masalah dengan praktis dan kreatif serta memiliki fokus utama pada users atau pengguna. Dalam menjalankan Design Thinking ini, Anda harus melalui 5 tahap di dalamnya yaitu Empathize, Define, Ideate, Prototype, dan Test.

Berikut ini adalah tahapan-tahapan dari proses desain yang dilakukan.

1 — Empathize

Tahap pertama dari proses Design Thinking adalah Empathize. Pada tahap ini bertujuan untuk mendapatkan pemahaman empatik dari masalah yang ingin diselesaikan. Hal yang kami lakukan adalah dengan menemukan pandangan dan kebutuhan terkait apa yang dirasakan oleh user. Oleh karena itu, diharapkan ide solusi dan pengeembangan pada aplikasi dapat mengatasi permasalahan yang sering dialami oleh user.

2 — Define

Informasi yang telah dikumpulkan pada tahap Empathize akan dilakukan analisa untuk menentukan masalah inti yang akan diidentifikasi. Pada Tahap define ini akan dilakukan pendefinisan target pengguna dan juga Pain Points yang mungkin dirasakan oleh pengguna. Berikut adalah Pain Points tersebut.

Paint Points yang telah dikumpulkan
Proses Paint Points

Diperlukan mengexplore lebih banyak lagi Paint Points yang dibuat How-Might We yang bertujuan untuk menentukan permasalahan inti yang menjadi fokus utama untuk diselesaikan. Proses Define ini dapat buat menggunakan Figma Jam.

Proses How-Might We

3 — Ideate

Setelah mendefinisikan hal yang akan menjadi fokus utama, tahap berikutnya adalah melakukan diskusi dengan tim dan melakukan brainstroming untuk meng-explore ide-ide yang ada dan menghasilkan solusi yang terhadap permasalaha yang dialami oleh user.

Ide atau Solusi hasil dari Brainstroming

Kemudian kami membuat Affinity Diagram untuk memudahkan dalam mengkategorikan ide atau solusi.

Pengkategorian ide atau solusi

Setelah melakukan pengkategorian ide atau solusi tersebut, tahap selanjutnya adalah melakukan Prioritizing atau menentukan ide mana yang perlu dieksekusi terlebih dari untuk menyelesaikan permasalahan yang bersifat urgent.

Hasil dari Prioritizing Idea

4 — Prototyping

Pada tahap Prototyping ini adalah tahap untuk mulai mengeksekusi ide atau solusi. Namun untuk memudahkan dalam membuat versi HiFi nantinya ada beberapa hal yang akan dilakukan yaitu menyusun userflow dengan beberapa task, kemudian melakukan pembuatan wireframe yang akan dikembangkan menjadi UI Design. Setelah semua selesai maka akan dilakukan prototyping pada desain tersebut.

Berikut ini adalah User Flow yang telah dibuat

User Flow Login/Register
User Flow Menyelesaikan Challange
User Flow Add Friends

Dari User Flow tersebut telah ditentukan halaman-halaman yang akan dibuat. Kemudian halaman-halaman tersebut didefinisikan melalui wireframe sebelum menjadi desain UI. Berikut ini adalah wireframe dari beberapa halaman yang merupakan ide dari kelompok kami pada aplikasi Campaign.

Sebelum dikembangkan menjadi desain UI, kami membuat Design System untuk memudahkan dalam pembuatan desain UI. Kemudian, dari wireframe tersebut kami dikembangkan menjadi desain UI. Ini adalah beberapa hasil dari desain yang dilakukan.

Dari hasil desain tersebut. Dilakukan penyusunan alur informasi seperti yang sudah digambarkan pada User Flow yaitu berupa Prototype yang selanjutkan akan dilakukan testing untuk mendapatkan feedback dari user.

Berikut adalah Prototype yang sudah dibuat.

5 — Testing

Pada Tahap testing ini, kami riset dengan menggunakan cara In Depth Interview. Tahap testing ini kami menguji solusi berupa Prototype yang telah dibuat dan meminta user untuk mengerjakan task-task yang telah kami sediakan dan pada proses testing ini juga bertujuan untuk melakukan User Research dengan Usability Testing.

Sebelum melakukan testing, kami perlu mempersiapkan beberapa hal seperti Research Scenario, Question List dan juga Record Data yang berguna untuk mencatat hasil feedback yang didapat dari user. Pada testing ini kami menggunakan penilaian dari segi SEQ(Single Ease Question) untuk mengukur kemudahan penggunanan (ease of use).

Kesimpulan

Proses untuk melakukan redesign terhadap aplikasi campaign dan pengembangan ide untuk mengatasi permasalahan yang dialami oleh user membutuhkan alur kerja yang tidak sedikit. Karena kegiatan tersebut dilakukan secara daring (online) maka akan ada keterbatasan bagi kami untuk mengembangkan ide dan proses pembuatannya. Meskipun begitu, kami tetap mencoba untuk menyelesaikan challange ini dengan sebaik mungkin.

Diharapkan desain ini nantinya dapat diterapkan dan membantu mengatasi masalah yang dialami user pada aplikasi Campaign.

Rekomendasi Selanjutnya

Meskipun kamu sudah menyelesaikan challange ini, akan tetapi masih ada beberapa pain point yang masih belum terselesaikan. Pada paint point tersebut dapat dikembangkan lagi agar bisa mendapakan hasil yang lebih baik.

Sekian hasil dari melakukan UX Challange dan UX Case Study. Terimakasih kepada pihak yang terkait karena memberikan kesempatan untuk melakukan Challange yang diberikan. Semoga kedepannya, saya bisa lebih baik lagi. Have a nice day!

--

--