## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220

## 145
This work is licensed under a Creative Commons Attribution 4.0 International License .

## Pengembangan Desain UI/UX Pada Aplikasi Kampanye Sosial Berbasis Mobile Menggunakan Figma Software
Neny Tiara Kusumaningdyah 1 , Sukadi 2
1, 2 Fakultas Teknik, Universitas Merdeka Madiun, Jawa Timur, Indonesia Email: 1 nenytiara34@gmail.com, 2 sukadi@unmer-madiun.ac.id

## Abstrak
Penelitian  ini  dilatarbelakangi  karena  kebanyakan  selama  ini  kampanye  sosial menggunakan  media  cetak  seperti  koran,  spanduk,  atau  brosur  untuk  menyebarkan informasinya,  dan  karena  saat  ini  semakin  banyak  orang  yang  memanfaatkan kemajuan teknologi untuk melakukan semua hal secara digital, maka dalam penelitian ini  akan  dibuat  sebuah  desain  user  interface  atau  yang  biasanya  dikenal  dengan desain  UI/UX  aplikasi  kampanye  sosial  sehingga  orang  bisa  menyuarakan  aksinya dengan  mengunggahnya  di  sebuah  aplikasi  kampanye  sosial  secara  digital.  Desain aplikasi  kampanye  sosial  ini  memiliki  user  yang  nantinya  dapat  memilih  berbagai “Challenge” yang tersedia sesuai minat, yang bertujuan untuk membantu memotivasi pengguna dalam melanjutkan aksinya hingga masa akhir periode aksi tersebut, selain itu  juga  dapat  meningkatkan  ketertarikan  pengguna  dalam  menggunakan  aplikasi. Metode yang digunakan dalam penelitian ini adalah Design Thinking, di mana memiliki 5  tahapan  diantaranya  empathize,  define,  ideate,  prototyping,  dan  testing.  Solusi yang dapat berikan antara lain memberikan fitur pop-up notifikasi untuk pengambilan aksi  sebagai  pengingat,  fitur  leaderboard,  dan  fitur  share  poin  kepada  teman  atau sesama pengguna.
Kata kunci: User Interface, User Experience, Design Thinking.

## 1. PENDAHULUAN
Perkembangan  teknologi  dan  informasi  yang  semakin  maju  seiring  dengan berjalannya waktu memberikan banyak perubahan pada teknologi digital. Hal tersebut juga memengaruhi masyarakat dalam kegiatan sehari-hari, termasuk bersosial  media.  Pada  saat  ini  semakin  banyak  orang  yang  memanfaatkan kemajuan teknologi untuk melakukan semua hal secara digital. Banyak orang yang sudah mulai beralih dari cara konvensional ke cara yang modern. Hal itu pula  yang  membuat  kemajuan  untuk  kehidupan  masyarakat  sekarang.  Salah satu  contohnya  adalah  sistem  yang  menjadi  wadah  kampanye  untuk  aksi

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
146 | Pengembangan Desain UI/UX Pada Aplikasi Kampanye Sosial .....
sosial  sekaligus  menjadi  sosial  media  yang  unik  dan  baru.  Kebanyakan kampanye  zaman  dahulu  menggunakan  koran,  spanduk,  atau  brosur  untuk menyebarkan  informasi.  Namun  sekarang  orang  bisa  menyuarakan  aksinya dengan mengunggahnya disebuah aplikasi kampanye sosial secara digital.
Dengan  adanya  dampak  pandemi  Covid-19  menjadikan  masyarakat  terbiasa dihadapkan  dengan  serba  digital.  Hal  itu  mendorong  sekaligus  memaksa masyarakat  menggunakan  cara-cara  yang  baru  dan  praktis.  Tentunya  pada sistem atau media yang sudah sangat maju, harus tetap mempertimbangkan kenyamanan  dan  kemudahan  untuk  penggunanya.  Seperti  yang  kita  tahu bahwa  tidak  semua  orang  yang  menggunakan  sistem  online  adalah  anak muda pada usia produktif yang masih mudah mempelajari sesuatu yang baru, tapi  juga  ada  orang  dengan  usia  lanjut  yang  dituntut  untuk  tetap  mengikuti perkembangan zaman. Di sisi lain ada pula orang-orang dengan keterbatasan tertentu  yang  membutuhkan  perhatian  khusus  oleh  para  desainer  dalam mendesain  sebuah  aplikasi.  Maka  dari  itu  desain  user  interface  atau  yang biasanya  dikenal  dengan  desain  UI/UX  sebagai  suatu  cabang  bidang  untuk membuat  tampilan  yang  user  friendly  dengan  mengedepankan  kenyamanan dan  kemudahan  pengguna  menjadi  faktor  penting  keberhasilan  dalam pengimplementasian suatu aplikasi.

## 2. METODE
Metode  yang  digunakan  dalam  penelitian  ini  yaitu  design  thinking.  Design Thinking  digunakan  untuk  memecahkan  permasalahan  pada  pengembangan aplikasi menggunakan pendekatan user-centered. Jadi pada metode ini peran dari  pengguna  sangat  penting  karena  nantinya  hasil  desain  akan  digunakan oleh  pengguna  [4].  Terdapat  5  proses  di  dalam  design  thinking  antara  lain empathize, define, ideate, prototyping, testing. Pada tahap pertama dilakukan pencarian  data  menggunakan  metode  primary  dan  secondary  research,  dan melakukan  survey  pengguna  secara  online.  Tahap  selanjutnya  adalah mengolah data yang sudah diperoleh di dalam proses define dan mencari ide- ide solusi pada tahap ideate. Tahap prototyping adalah serangkaian kegiatan yang digunakan untuk merancang dan membuat desain sampai dengan versi high  fidelity. Hingga tahap terakhir yaitu testing, di mana desain  yang sudah selesai  siap  untuk  dilakukan  demo  kepada  pengguna  untuk  dinilai  dari  sisi pengguna menggunakan parameter yang sudah disiapkan untuk memberikan penilaian terhadap desain itu sendiri. Dalam pelaksanaannya, testing disebut juga  usability  testing  atau  user  testing.  Dokumen  yang  diperlukan  yaitu

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
Neny Tiara Kusumaningdyah, Sukadi | 147
stimulus user research yang berisi skenario pengujian dan data record sebagai dokumentasi jawaban responden saat dilakukan pengujian dan wawancara.

## 2.1. Empathize
Tahapan  empathize  dilakukan  untuk  mengetahui  permasalahan  dan kebutuhan  pengguna.  Setelah  melakukan  tahap  empathize  diharapkan mendapatkan  beberapa  problem  statement  berdasarkan  permasalahan pengguna  untuk  diproses  lebih  lanjut  pada  tahap  berikutnya.  Pada  tahap empathize  penulis  melakukan  riset  dengan  melakukan  interview  dan competitive analysis [3].
Tujuan empathize adalah membantu desainer dalam mencari tahu pandangan dan  kebutuhan  dari  target  pengguna  dengan  riset  sebelum  mendefinisikan masalah  dan  melakukan  pencarian  gagasan  ide.  Di  mana  hal  pertama  yang dilakukan  adalah  riset  dengan  beberapa  metode  yang  telah  ditetapkan bersama  kepada  pengguna  yang  memiliki  kriteria  sesuai  dengan  target pengguna yang dibutuhkan.

## 2.2. Define
Tahapan  kedua  dari  design  thinking  adalah  define.  Pada  proses  define  ini mampu  memberikan  lebih  banyak  gambaran  mengenai  permasalahan  yang terjadi  dan  hal-hal  yang  selama  ini  dianggap  biasa,  namun  ternyata  cukup penting untuk diperhatikan dan dicarikan solusinya [1].
Dalam  tahap  ini  untuk  memperluas  sudut  pandang  penyelesaian  masalah menggunakan metode How Might We (HMW). Cara kerja metode How Might We  yaitu  dengan  mengubah  pernyataan  menjadi  sebuah  pertanyaan.  Hal yang  ingin  dicapai  dengan  metode  How  Might  We  ini  adalah  informasi  apa yang dibutuhkan dari setiap solusi permasalahan dan bagaimana langkah kita menyelesaikan solusi yang dibangun [3].

## 2.3. Ideate
Tahapan  ketiga  ialah  Ideate  (Ide)  yang  merupakan  proses  transisi  dari rumusan masalah menuju penyelesaian masalah, adapun dalam proses ideate ini  akan  berkonsentrasi  untuk  menghasilkan  gagasan  atau  ide  sebagai landasan  dalam  membuat  prototipe  rancangan  yang  akan  dibuat  [2].  Tahap ideate  memiliki  serangkaian  kegiatan  yang  harus  dilakukan,  antara  lain menentukan  ide  solusi  apa  saja  yang  akan  dilakukan,  mengelompokkan  ide

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
148 | Pengembangan Desain UI/UX Pada Aplikasi Kampanye Sosial .....
solusi ke dalam affinity diagram, melakukan prioritization idea, dan membuat Crazy 8's.

## 2.4. Prototyping
Tahap prototyping merupakan hal inti dari sederet proses design thinking. Di tahap  ini  perlu  dilakukan  proses  desain  interface  dari  hasil  crazy  8’s, menyusun  user  interface  menjadi  sebuah  user  flow  yang  sesuai  dengan  ide solusi,  dan  membuat  prototype/mockup  UI  yang  akan  digunakan  untuk testing  di  tahap  selanjutnya.  User  flow  adalah  langkah-langkah  yang  harus dilakukan  user  untuk  menyelesaikan  sebuah  task.  Sebenarnya  tidak  banyak yang dibahas pada tahap ini, selain perubahan dari wireframe ke high fidelity design.
2.5. Testing
Langkah  terakhir  dalam  pelaksanaan  tahap  desain  ialah  pelaksanaan  testing menggunakan Usability Test dengan mempresentasikan prototype yang telah dibuat pada tahap sebelumnya dengan memanfaatkan user scenarios sebagai panduan  pengguna  dalam  melakukan  testing.  Testing  adalah  metode  untuk melakukan  pengujian  uraian  dan  memperhitungkan  tingkat kemudahan  user saat  berinteraksi  bersama  tampilan  aplikasi  [5].  Pada  tahap  ini  pengujian dilakukan  untuk  mendapatkan  umpan  balik  dari  responden.  Umpan  balik  ini nantinya  digunakan  untuk  memperbaiki  desain  yang  telah  dibuat  untuk disesuaikan dengan hasil pengujian tersebut.

## 3. HASIL DAN PEMBAHASAN
Pada  penelitian  ini  hasil  yang  didapatkan  bermula  dari  mendefinisikan permasalahan user dari hasil empathize sebelumnya dan mengelompokkan ke dalam  3  masalah  besar.  Proses  yang  dilakukan  diantaranya  menentukan target user, goals user, motivasi user, dan mendefinisikan problem statement dengan menyusun pain points. Pembuatan task flow adalah menyusun ide-ide yang  dapat  menyelesaikan  masalah  tersebut  dan  melakukan  penggolongan ide  dengan  diagram  untuk  menentukan  jenis  fiturnya.  Lalu  dilakukan prioritization idea, di mana pada langkah ini menentukan jenis-jenis ide yang akan dijadikan fokus utama dan urutan dalam mengimplementasikan ide yang sudah diseleksi sebelumnya. Hal tersebut dilakukan agar desainer tidak keluar dari  area  yang  menjadi  topik  dan  tetap  mengacu  pada  ide-ide  yang  dinilai efektif  dan  bisa  memberikan  impact  yang  besar  dari  pengembangan  yang dilakukan.

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
Neny Tiara Kusumaningdyah, Sukadi | 149
Setelah  mendiskusikan  mapping  untuk  prioritas  ide,  langkah  berikutnya adalah  membuat  crazy  8’s  dengan  selembar  kertas  A4  dan  dilipat  hingga membentuk  kotak-kotak  berjumlah  8.  Di  setiap  kotak  mewakili  satu  frame atau  screen yang akan dipakai untuk membuat wireframe dalam versi rough (kasar) dan setiap frame hanya memiliki durasi 1 menit, jadi total durasi dalam membuat crazy 8’s secara keseluruhan adalah 8 menit . Dari crazy 8’s tersebut, dituangkan ke dalam wireframe yang dapat dilihat pada Gambar 1.
Gambar 1. Wireframe

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
150 | Pengembangan Desain UI/UX Pada Aplikasi Kampanye Sosial .....
Pada  tabel  1  menjelaskan  hasil  dari  serangkaian  proses  desain  UI/UX  pada aplikasi kampanye sosial menggunakan metode design thinking.
Tabel 1. Hasil Desain Fitur/Komponen Hasil Desain Pop-up  Notifikasi  Ambil Challenge Notifikasi  akan  ditampilkan  setiap  pengguna membuka  aplikasi  ketika  memiliki  aksi  challenge yang belum diselesaikan. Maka dari itu pop-up notif akan  muncul  setiap  user  membuka  aplikasi.  Di  sisi lain  notifikasi  juga  akan  muncul  di  bar  notif smartphone pengguna. Leaderboard Tampilan leaderboard untuk  memberi  apresiasi kepada pengguna. Pemberian  peringkat  dalam leaderboard ini dimaksudkan untuk membangun motivasi user agar terpacu untuk berkompetisi dengan pengguna lain. Pop-up Notifikasi Penyaluran Donasi Notifikasi  ketika  donasi  dari challenge yang  diikuti pengguna telah tersalurkan.
Pop-up  notifikasi  ini  akan  ditampilkan  kepada pengguna  yang  berpartisipasi  mengikuti challenge - nya,  meskipun  nantinya  pengguna  lain  yang  tidak mengikuti challenge pun  bisa  melihat  berita  ini  di dalam fitur Cerita dan Berita. Pop-up  Notifikasi Reward Badge Pemberian badge baru  kepada  setiap  pengguna yang  melakukan  suatu  aksi  atau task tertentu sebagai bentuk apresiasi untuk pengguna. Kumpulan badge yang  belum  dan  sudah  terbuka berada  pada  koleksi badge untuk  memudahkan pengelompokkan badge. Koleksi Badge Penukaran Poin Pengguna  bisa  dengan  mudah  menukarkan  poin yang didapatkan untuk ditukarkan ke saldo e-wallet yang sudah  tersedia. Namun, ketentuan  penukaran poin  tetap  disesuaikan  agar  tidak  memberatkan salah satu pihak. Share Poin Selain reward berupa badges dan  saldo e-wallet , penulis  juga  memberikan  fitur  yaitu  memberi  poin sebagai gift kepada sesama pengguna.

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220

## 4. KESIMPULAN
Berdasarkan perancangan dan pengujian yang sudah dilakukan menggunakan metode Design Thinking , maka didapatkan kesimpulan antara lain:
1. Perancangan  desain  UI/UX  bisa  menambah  motivasi  pengguna  dalam rangka menyelesaikan aksi challenge hingga selesai.
2. Fitur  dan  sistem  gamifikasi  yang  dirancang  ada  beragam  macam  yang disesuaikan  dengan  masalah  yang  dihadapi  oleh  pengguna  selama menggunakan  aplikasi,  sehingga  dapat  mengurangi  ketidaknyamanan bagi pengguna.
3. Tidak  semua  ide  dan  solusi  dalam  perancangan prototype ini  dapat diimplementasikan, karena mempertimbangkan pihak yang bersangkutan yang harus menindaklanjuti lebih dalam.
4. Berdasarkan  hasil prototype ,  beberapa  perubahan  yang  dilakukan terletak pada gamifikasi yang berguna untuk membuat pengguna tertarik melakukan  aksi challenge dan  notifikasi  yang  berfungsi  untuk memberitahukan tentang informasi terkait challenge kepada pengguna.

## DAFTAR PUSTAKA
[1]  Fauzi,  A.  H.,  &  Sukoco,  I.  (2019).  Konsep  Design  Thinking  pada  Lembaga Bimbingan  Belajar  Smartnesia  Educa. Organum:  Jurnal  Saintifik Manajemen Dan Akuntansi , 2 (1), 37 – 45.
https://doi.org/10.35138/organum.v2i1.50
[2] Razi, A. A., Mutiaz, I. R., & Setiawan, P. (2018). Penerapan Metode Design Thinking Pada Model Perancangan Ui/Ux Aplikasi Penanganan Laporan Kehilangan  Dan  Temuan  Barang  Tercecer. Desain  Komunikasi  Visual, Manajemen  Desain  Dan  Periklanan  (Demandia) , 3 (02),  219. https://doi.org/10.25124/demandia.v3i02.1549
[3]  Shirvanadi,  E.  C.,  &  Moh.  Idris,  S.Kom,  M.  K.  (2020). Perancangan  Ulang UI/UX Situs E-Learning Amikom Center Dengan Metode Design Thinking (Studi Kasus: Amikom Center) .
[4]  Susanti, E., Fatkhiyah, E.,  & Efendi, E. (2019). Pengembangan Ui/Ux Pada Aplikasi  M-Voting  Menggunakan  Metode  Design  Thinking. Prosiding Simposium  Nasional  Rekayasa  Aplikasi  Perancangan  Dan  Industri ,
18 (1), 364 – 370. http://hdl.handle.net/11617/11706
[5]  Teknologi,  I.,  Angelina,  K.,  Sutomo,  E.,  &  Nurcahyawati,  V.  (2023). Jurnal Desain  UI  UX  Aplikasi  Penjualan  dengan  Menyelaraskan  Kebutuhan

## Journal of Software Engineering Ampera
Vol. 3, No. 3, October 2022  e-ISSN: 2775-2488 Published By APTIKOM SUMSEL
DOI: doi.org/10.51519/journalsea.v3i3.220
Bisnis menggunakan Pendekatan Design Thinking using Design Thinking Approach . 5 , 70 – 78.