## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1018−1028 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5495

## Perancangan dan Analisa UI/UX Aplikasi Mobile BankHijau Menggunakan User-Centered Design dan User Experience Questionnaire
Yogiswara, Chanifah Indah Ratnasari *
Fakultas Teknologi Industri, Program Studi Informatika, Universitas Islam Indonesia, Sleman Kaliurang St Km. 14,5, Krawitan, Umbulmartani, Ngemplak, Kabupaten Sleman, Daerah Istimewa Yogyakarta, Indonesia Email: 1 yogiswara@students.uii.ac.id, 2,* chanifah.indah@uii.ac.id Email Penulis Korespondensi: chanifah.indah@uii.ac.id Submitted: 05/07/2024; Accepted: 17/07/2024; Published: 20/07/2024
Abstrak −Pengelolaan sampah merupakan permasalahan serius yang tidak hanya dialami di Indonesia, khususnya Yogyakarta, tetapi juga merupakan permasalahan global. Bank Sampah Ngudi Barokah merupakan salah satu tempat pemilahan sampah yang berlokasi di Yogyakarta. Bank sampah Ngudi Barokah memiliki kesulitan dalam proses pencatatan dikarenakan masih dilakukan  secara  manual  menggunakan  buku.  Dalam  rangka  turut  berkontribusi  dalam  mengatasi  permasalahan  tersebut, dibangun  aplikasi  mobile  BankHijau  yang  memfasilitasi  pencatatan  pada  bank  sampah  Ngudi  Barokah.  Dalam pengembangannya, perancangan user interface (UI) dan user experience (UX) aplikasi BankHijau menggunakan pendekatan User-Centered Design (UCD) agar sesuai dengan kebutuhan pengguna. Tahapan yang dilakukan meliputi memahami konteks pengguna,  memastikan  kebutuhan  pengguna,  perancangan  solusi,  dan  pengujian.  Pengujian  dilakukan  menggunakan  User Experience Questionnaire (UEQ) dikarenakan dapat memperoleh wawasan yang mendalam dan menyeluruh dari pengalaman pengguna (user experience/UX). Pengujian dilakukan kepada 26 responden, dengan menghasilkan umpan balik yang positif pada seluruh aspek. Melalui hasil analisis benchmark UEQ diketahui aspek daya tarik (2,15), efisiensi (1,95), ketepatan (2,15), dan stimulasi (2,11) mendapatkan kriteria excellent; sedangkan aspek kejelasan (1,98) dan kebaruan (1,54) mendapat kriteria good.  Dapat  disimpulkan  rancangan  aplikasi  BankHijau  berada  diatas  rata-rata  dari  aplikasi  lain.  Diharapkan  keberadaan aplikasi  ini  nantinya  secara  tidak  langsung  akan  mengurangi  volume  sampah  pada  tempat  pembuangan  akhir  (TPA)  dan mendorong  proses  daur  ulang,  sehingga  turut  mendorong  perubahan  positif  dalam  pengelolaan  sampah  dan  mendukung kelestarian lingkungan yang komprehensif.
Kata  Kunci: User-Centered  Design;  User  Experience  Questionnaire; Pengalaman Pengguna; Pengelolaan  Sampah;  Mobile Application
Abstract −Waste management is a critical issue that affects not only Indonesia, specifically Yogyakarta, but the entire world. Ngudi  Barokah  Waste  Bank  is  one  of  the  waste  sorting  centers  located  in  Yogyakarta.  Ngudi  Barokah  waste  bank  has difficulties in the recording process because it is still done manually using books.  In order to contribute to overcoming this problem,  the  BankHijau  mobile  application  was  built,  which  facilitates  recording  at  Ngudi  Barokah  Waste  Bank.  In  its development, the design of the user interface (UI) and user experience (UX) of the BankHijau application used a User-Centered Design  (UCD)  approach  to  suit  user  needs.  The  following  stages  are  implemented:  comprehending  the  user  context, ascertaining  user  requirements,  designing  solutions,  and  conducting  testing.  The  User  Experience  Questionnaire  (UEQ)  is utilized for testing purposes due to its ability to gather a detailed and thorough understanding of the user experience (UX). Testing was conducted on 26 respondents, who provided positive feedback on all aspects. The UEQ benchmark study reveals that  attractiveness  (2,15),  efficiency  (1,95),  dependability  (2,15),  and  stimulation  (2,11)  exhibit  excellent  criteria,  while perspicuity (1,98) and novelty (1,54) provide good criteria. It can be concluded that the design of the BankHijau application is above the average of other applications. The existence of this application is expected to indirectly lower the volume of waste in final disposal sites (TPA) and encourage recycling, hence contributing to positive changes in waste management and helping overall environmental sustainability.
Keywords : User-Centered Design; User Experience Questionnaire; User Experience; Waste Management; Mobile Application

## 1. PENDAHULUAN
Pengelolaan sampah merupakan permasalahan global yang serius, yang mana Bank Dunia memperkirakan bahwa timbulan sampah akan meningkat dari 2,01 miliar ton pada tahun 2016 menjadi 3,40 miliar ton pada tahun 2050 atau  peningkatannya  hampir  70%  [1].  Sekitar  33%  dari  sampah  tersebut  salah  dikelola,  yaitu  baik  melalui pembakaran atau berakhir di tempat pembuangan sampah terbuka, sehingga menimbulkan bahaya bagi lingkungan dan kesehatan. Indonesia  merupakan salah satu negara penyumbang sampah terbesar di Asia Tenggara [2], [3], menghasilkan sekitar 185.753 ton sampah setiap harinya, atau mencapai 67,8 juta ton per tahun, dengan tingkat daur ulang  kurang dari 10% [4], [5]. Timbulan sampah terbesar di Indonesia dihasilkan oleh Pulau Jawa, salah satunya  pada  Provinsi  Daerah  Istimewa  (D.I.)  Yogyakarta.  Sebagai  kota  pariwisata  dan  pelajar,  Yogyakarta menghadapi tantangan sampah yang semakin berat, terutama pada masa puncak wisata, serta tempat pembuangan akhir  (TPA)  utamanya  yaitu  TPA  Piyungan,  memiliki  kelebihan  kapasitas  [6].  Tercatat  timbulan  sampah  D.I. Yogyakarta  pada  tahun  2023  mencapai  299.687  ton  [7].  Diperkirakan  jumlah  timbulan  sampah  pada  provinsi tersebut  akan  terus  meningkat  seiring  dengan  peningkatan  jumlah  penduduk.  Yogyakarta  memiliki  masalah pengolahan sampah serius dikarenakan jumlah timbulan sampah yang muncul melebihi kapasitas dan kemampuan pengelolaannya.  Hal  ini  mengakibatkan  meningkatnya  timbunan  sampah  pada  tempat  penampungan  sementara (TPS) yang ada. Permasalahan juga ditambah dengan ditutupnya secara permanen TPA Piyungan yang berfungsi

## Journal of Information System Research (JOSH)
menampung sampah yang ada pada Provinsi Daerah Istimewa Yogyakarta [8]. Hal ini memaksa setiap kota dan kabupaten pada D.I. Yogyakarta untuk memilah dan mengolah timbulan sampah nya sendiri.
Salah satu mekanisme yang dapat diterapkan oleh pemerintah dan masyarakat dalam pengelolaan sampah secara mandiri adalah dengan bank sampah. Bank sampah merupakan tempat pengumpulan limbah anorganik atau limbah kering yang dapat didaur ulang, yang mana sampah tersebut dipilah oleh warga sesuai dengan jenisnya [3]- [5].  Bank  sampah  memiliki  konsep  seperti  perbankan,  yaitu  warga  (dalam  hal  ini  disebut:  nasabah)  menabung sampah  kering  yang  kemudian  ditimbang  dan  dicatat,  selanjutnya  apabila  sampah  dari  para  nasabah  sudah terkumpul, akan dijual kepada pengepul oleh pihak pengelola bank sampah. Setelah dijual, pengelola bank sampah akan membagikan hasil penjualan kepada nasabah sesuai dengan jenis dan bobot dari sampah yang ditabung oleh masing-masing  nasabah.  Bank  sampah  menawarkan  solusi  dengan  mendorong  pengurangan  dan  daur  ulang sampah serta memberdayakan masyarakat untuk berpartisipasi aktif dalam upaya daur ulang tersebut. Salah satu bank sampah yang ada di Yogyakarta adalah Bank Sampah Ngudi Barokah. Bank sampah ini terletak di Dusun Ngropoh, Condongcatur, Depok, Sleman, D.I. Yogyakarta. Bank Sampah Ngudi Barokah secara rutin melakukan penimbangan  dan  pencatatan  penyetoran  sampah  setiap  sebulan  sekali.  Dalam  melakukan  pencatatan  transaksi hasil penimbangan, Bank Sampah Ngudi Barokah bergulat dengan mekanisme pencatatan yang tidak efisien dan berbasis kertas sehingga rentan terhadap human-error, kerusakan, kehilangan, serta menyulitkan pemantauan dan verifikasi publik. Pihak pengelola bank sampah juga kesulitan dalam melakukan edukasi mengenai sampah kepada nasabahnya dikarenakan tidak ada media yang mewadahi. Oleh karena itu, penggunaan teknologi seperti aplikasi mobile  diperlukan  untuk  mengatasi  permasalahan  yang  dihadapi  pada  bank  sampah  tersebut.  Aplikasi  mobile dipilih karena penggunaannya yang masif dan dapat diakses melalui smartphone di mana saja dan oleh siapa saja [12],  memberikan  kemudahan  [13],  meningkatkan  efisiensi  dalam  suatu  proses  bisnis  [14],  juga  mengingat masyarakat pada dusun tersebut mayoritas sudah menggunakan smartphone.
Menilik  permasalahan  yang  dihadapi  oleh  Bank  Sampah  Ngudi  Barokah,  akan  dikembangkan  aplikasi mobile yang diberi nama “BankHijau”, yang memfasilitasi pencatatan penyetoran sampah dan transaksi penjualan, edukasi  sampah  kepada  masyarakat,  serta  memungkinkan  nasabah  memantau  dan  memverifikasi  catatan penyetoran sampah. Pada pembangunan aplikasi tersebut,  peneliti akan merancang UI (User Interface) dan UX (User  Experience)  untuk  aplikasi  mobile  BankHijau.  Pendekatan  yang  dipilih  oleh  peneliti  untuk  merancang UI/UX  aplikasi  BankHijau  adalah  pendekatan  dengan  User-Centered  Design  (UCD).  Tahapan  perancangan dengan  metode  UCD  adalah  analisis  konteks  pengguna,  analisis  kebutuhan  pengguna,  pembuatan  desain,  dan evaluasi desain [15]. Pendekatan dengan metode UCD dipilih karena dapat mengembangkan aplikasi yang dapat menyesuaikan dengan  kebutuhan dan keinginan pengguna [16]. Dengan kata lain, penerapan metode UCD dapat menciptakan  produk  yang  tidak  hanya  fungsional  tetapi  juga  menyenangkan  dan  memuaskan  pengguna. Selanjutnya,  untuk  pengujian  pengalaman  pengguna  (User  Experience/  UX)  pada  rancangan  UI  aplikasi BankHijau, peneliti menggunakan metode User Experience Questionnaire (UEQ). UEQ berisikan 26 pernyataan dengan pilihan jawaban skala 1 sampai 7 yang digunakan untuk mengukur 6 aspek pengalaman pengguna mulai dari daya tarik (attractiveness), ketepatan (dependability), kejelasan (perspicuity), stimulasi (stimulation), efisiensi (efficiency),  hingga  kebaruan  (novelty)  [17].  Metode  ini  memungkinkan  peneliti  mendapatkan  evaluasi  yang mendalam  dan  menyeluruh  tentang  bagaimana  pengguna  berinteraksi  dengan  aplikasi  [18],  sehingga  dapat memperoleh  masukan  yang  berharga  mengenai  aspek  mana  yang  perlu  diperbaiki  ataupun  ditingkatkan,  serta berpengaruh pada keberhasilan aplikasi dari sudut pandang pengalaman pengguna.
Terdapat  penelitian  terdahulu  mengenai  penggunaan  metode  User  Centered  Design  (UCD)  untuk merancang  UI/UX  suatu  aplikasi.  Pertama,  penelitian  oleh  Hamdanuddinsyah  [19]  dilakukan  untuk  merancang ulang  website  Mizanstore  menggunakan  metode  UCD.  Penelitian  ini  menghasilkan  rancangan  aplikasi  mobile yang melibatkan sepuluh orang responden dalam tahap analisis konteks dan kebutuhan. Evaluasi yang dilakukan pada  prototype  aplikasi  mobile  Mizanstore  menggunakan  SUS  (System  Usability  Scale)  menghasilkan  skor  90 yang dapat dikategorikan excellent. Kedua, penelitian yang dilakukan oleh Ravelino [20], metode UCD digunakan pada perancangan fitur asuransi pada aplikasi Bank Jago. Penelitian ini melibatkan 20 responden saat uji persepsi dan mendapatkan skor rata-rata dengan tingkat kepuasan 60%. Selanjutnya, penelitian menggunakan metode UCD juga  dilakukan  oleh  Wulandari  [21]  untuk  merancang  aplikasi  konsultasi  kesehatan  mental  berbasis  mobile. Peneliti melakukan pengujian kepada lima responden menggunakan SUS dan mendapatkan skor rata-rata 82 atau dapat dikategorikan layak. Penelitian UCD lainnya dilakukan oleh Ernawati [22] untuk merancang aplikasi mobile pada PT Cipta Wisata Medika. Tahap analisis konteks dan kebutuhan dilakukan dengan melakukan wawancara kepada CEO dan CMO PT Cipta Wisata Medika. Penelitian ini menghasilkan rancangan aplikasi mobile Medical Tourism  yang  mendapatkan  skor  80,125  saat  dilakukan  evaluasi  menggunakan  SUS.  Terakhir,  penelitian  oleh Andhiza [23] menggunakan  UCD dilakukan  untuk  merancang aplikasi pencarian  car  wash. Evaluasi dilakukan kepada 30 responden menggunakan SUS dengan skor rata-rata 80 atau dapat dikategorikan good.
Berdasarkan  penelitian  di  atas,  dapat  diambil  kesimpulan  bahwasanya  metode  System  Usability  Scale (SUS) efektif untuk digunakan dalam tahap pengujian. Akan tetapi, metode SUS memiliki kekurangan di mana tidak dapat mengukur aspek emosional dan hanya terbatas pada aspek usability saja. Sehingga pada penelitian ini untuk mengisi gap yang ada akan dilakukan pengujian menggunakan User Experience Questionnaire (UEQ) agar mendapatkan pemahaman yang lebih mendetail dari pengalaman pengguna dibandingkan menggunakan metode SUS.  Hal  ini  dikarenakan  UEQ  terdiri  dari  enam  aspek  yang  diujikan  mulai  daya  tarik,  ketepatan,  kejelasan,

## Journal of Information System Research (JOSH)
stimulasi,  efisiensi,  sampai  dengan  kebaruan.  Penelitian  ini  bertujuan  untuk  merancang  user  interface  aplikasi BankHijau: aplikasi mobile pencatatan terstruktur transaksi pada bank sampah, untuk meningkatkan efisiensi dan transparansi, serta melakukan evaluasi user experience pada rancangan antarmuka tersebut, sehingga penelitian ini dapat membantu  memberikan landasan dan  masukan kepada pengembang secara detail, tidak hanya dari aspek usability tetapi juga dari aspek emosional dan kebaruan yang dapat digunakan untuk proses pengembangan aplikasi BankHijau ke depannya.

## 2. METODOLOGI PENELITIAN
Penelitian pembuatan rancangan UI/UX pada aplikasi BankHijau dilaksanakan dengan menggunakan metode User Centered Design (UCD). Metode UCD digunakan agar dapat merancang aplikasi yang sesuai dengan kebutuhan end-user dan tingkat  usability yang tinggi. Hal ini dikarenakan  metode UCD secara aktif melibatkan pengguna pada  setiap  tahapnya  [24].  Pada  penelitian  ini  terdapat  lima  tahap,  yaitu:  analisis  konteks  pengguna,  analisis kebutuhan  pengguna,  pembuatan  desain,  evaluasi  desain,  dan  ditutup  dengan  tahap  kesimpulan.  Alur  tahapan tersebut dapat dilihat pada Gambar 1.

## Gambar 1. Alur Penelitian

## 2.1 Analisis Konteks Pengguna
Tahap  pertama  dalam  metode  UCD  adalah  analisis  konteks  pengguna.  Tahap  ini  dilaksanakan  untuk mengidentifikasi  target  pengguna  aplikasi  dan  juga  menjelaskan  alasan  mengapa  user  menggunakan  aplikasi tersebut. Proses pnengidentifikasian ini bertujuan agar peneliti dapat melakukan perancangan aplikasi yang sesuai dengan kesulitan atau permasalahan yang dihadapi oleh pengguna. Tahap ini dimulai dengan peneliti melakukan kajian literatur untuk mencari sekumpulan informasi yang relevan dengan penelitian, seperti proses perancangan UI/UX menggunakan User Centered Design (UCD) dan teknik pengujian menggunakan metode User Experience Questionnaire  (UEQ).  Kemudian  dilanjutkan  dengan  peneliti  melakukan  observasi  dan  wawancara  untuk mengidentifikasi  dan  memahami  kesulitan  yang  dihadapi  oleh  pengguna.  Pada  tahap  ini  peneliti  melakukan wawancara dan pengamatan secara langsung kepada ketua pengelola Bank Sampah Ngudi Barokah.

## 2.2 Analisis Kebutuhan Pengguna
Pada  tahap  ini,  peneliti  melaksanakan  wawancara  dan  menyebarkan  kuesioner  kepada  pengguna  dengan pertanyaan yang lebih mendetail. Hal ini dilakukan agar peneliti mendapatkan data dan pemahaman dari kebutuhan dan keinginan pengguna. Wawancara dan penyebaran kuesioner dilakukan secara langsung kepada pengelola dan nasabah Bank Sampah Ngudi Barokah.

## 2.3 Pembuatan Desain
Pada tahap pembuatan desain, peneliti merancang solusi sesuai dengan kebutuhan dan keinginan pengguna yang telah  diperoleh  dan  diidentifikasi  pada  tahap  sebelumnya:  analisis  konteks  pengguna  dan  analisis  kebutuhan pengguna.  Pada  tahap  ini  peneliti  melakukan  perancangan  UI  dan  UX  mulai  dari  perancangan  mind  map, wireframe,  sampai  dengan  perancangan  prototype,  yang  kemudian  akan  diujikan  kepada  pengguna  pada  tahap evaluasi desain.

## 2.4 Evaluasi Desain
Terkhir pada tahap evaluasi desain, dilakukan pengambilan kesimpulan. Fase ini melibatkan interaksi langsung dengan  pengguna  untuk  menentukan  apakah  desain  aplikasi  yang  ditentukan  selaras  dengan  persyaratan  dan preferensi pengguna. Tahap evaluasi desain akan diawali dengan pengguna melakukan pengujian pada prototype aplikasi  BankHijau  yang  telah  dibuat  menggunakan  software  Figma.  Dilanjutkan  dengan  pengguna  mengisi kuesioner yang telah dibuat melalui Google Forms, di mana data yang didapatkan akan digunakan sebagai bahan evaluasi. Pendekatan yang digunakan untuk pengujian adalah dengan menggunakan pendekatan User Experience Questionnaire  (UEQ).  UEQ  berisikan  26  pernyataan  dengan  jenis  jawaban  skala  linier  1  sampai  7  yang  harus dipilih oleh pengguna untuk dapat mengukur 6 aspek pengalaman pengguna/user experience mulai dari daya tarik, stimulasi,  efisiensi,  ketepatan,  kejelasan,  hingga  kebaruan.  Data  yang  didapat  kemudian  akan  dimasukkan  ke dalam UEQ data analysis tools version 12 yang telah disediakan pada website official UEQ www.ueq-online.org untuk selanjutnya diolah. Hasil pengolahan ini akan digunakan oleh peneliti untuk melakukan perbaikan kembali

## Journal of Information System Research (JOSH)
pada  rancangan  aplikasi  yang  dibuat  agar  sesuai  dengan  kebutuhan  dan  keinginan  pengguna.  Pernyataan  yang digunakan pada UEQ ditampilkan pada Gambar 2.
Gambar 2. Pernyataan pada UEQ

## 3. HASIL DAN PEMBAHASAN

## 3.1 Analisis Konteks Pengguna
Hasil analisis  konteks pengguna  yang dilakukan dengan observasi dan  wawancara, didapatkan  calon pengguna yang  akan  menggunakan  aplikasi  BankHijau  adalah  pengelola,  nasabah,  dan  masyarakat  sekitar  Bank  Sampah Ngudi Barokah. Diketahui juga bahwa pengguna menginginkan aplikasi yang dapat membantu proses yang ada, seperti  pencatatan  transaksi  penimbangan  dan  pengeluaran.  Berdasarkan  analisis  yang  dilakukan,  pada  aplikasi yang akan dibangun ini terdapat dua jenis role, yaitu pengelola dan nasabah.

## 3.2 Analisis Kebutuhan pengguna
Analisis  kebutuhan  pengguna  dilakukan  dengan  wawancara  dan  penyebaran  kuesioner  kepada  lima  responden yang  merupakan pengelola dan juga nasabah pada Bank Sampah Ngudi Barokah. Hal ini dilakukan agar dapat lebih  memahami  kebutuhan  pengguna.  Kesimpulan  dari  hasil  wawancara  dan  penyebaran  kuesioner  tersebut adalah:
a. Pengguna menginginkan desain aplikasi mobile yang memiliki tampilan visual yang menarik.
b. Pengguna menginginkan desain aplikasi mobile yang sederhana agar mudah dipelajari.
c. Pengguna menginginkan desain aplikasi mobile dengan warna hijau dan putih.
d. Pengguna menginginkan adanya fitur edukasi dari pengelola untuk nasabah.
e. Pengguna menginginkan adanya fitur pencarian.
f. Pengguna menginginkan desain menggunakan navigation bar.
Aplikasi BankHijau berfokus pada pencatatan transaksi dan penyediaan wadah edukasi untuk pengguna. Pada aplikasi ini, langkah pertama yang harus dilakukan pengguna adalah memilih untuk login sebagai pengelola atau nasabah. Untuk pengguna dengan role nasabah, apabila pengguna belum terdaftar pada aplikasi, diharuskan melakukan registrasi terlebih  dahulu. Setelah  melakukan registrasi, pengguna dapat  melakukan login. Terdapat perbedaan aktivitas antara role pengelola dengan nasabah. Setelah login, pengelola dapat: 1) memilih nasabah dari daftar yang ada, atau 2) menggunakan fitur pencarian untuk mencari nama nasabah, 3) menambahkan pencatatan transaksi baru dari nasabah, baik itu penimbangan atau penarikan uang, 4) melihat riwayat pencatatan yang ada dari nasabah yang dipilih, dan 5) menambahkan edukasi maupun pemberitahuan melalui halaman awal. Pada fitur untuk  menambahkan  edukasi  atau  pemberitahuan,  pengelola  dapat  memasukkan  judul,  deskripsi,  dan menambahkan  foto.  Fitur  ini  dilengkapi  dengan  fungsi  edit  dan  hapus,  di  mana  pengelola  dapat  mengedit  isi edukasi  atau  menghapusnya.  Pada  bagian  pengaturan,  pengelola  dapat  mengubah  kata  sandi  yang  digunakan.

## Journal of Information System Research (JOSH)
Sedangkan sebagai role nasabah, setelah melakukan login, nasabah dapat: 1) melihat balance tabungan dan juga riwayat pencatatan yang ditambahkan dari pengelola, 2) memilih riwayat pencatatan dan juga melihat detailnya, 3)  melihat  konten  edukasi  maupun  pemberitahuan  dari  pengelola  melalui  halaman  edukasi.  Pada  bagian pengaturan, nasabah dapat melakukan edit profil, melihat informasi tentang aplikasi, dan logout.

## 3.3 Merancang Desain Solusi
Berdasarkan hasil wawancara pada tahap analisis konteks pengguna dan analisis kebutuhan pengguna sebelumnya, peneliti akan merancang solusi desain untuk aplikasi BankHijau. Perancangan solusi dimulai dengan pembuatan mind map yang berfungsi untuk menjabarkan ide terkait halaman aplikasi yang akan dibuat. Kemudian dilanjutkan dengan pembuatan wireframe untuk setiap halaman dan dilanjutkan dengan pembuatan prototype. Software yang digunakan  dalam  melakukan  perancangan  ini  adalah  whimsical  dan  Figma.  Mind  map  aplikasi  BankHijau ditampilkan pada Gambar 3.
Gambar 3. Mind map aplikasi BankHijau

## 3.3.1 Wireframe
Pada  tahap  ini,  peneliti  melakukan  pembuatan  desain  kasar  berupa  wireframe  untuk  aplikasi  BankHijau. Wireframe  ini  selanjutnya  akan  digunakan  pada  tahapan  desain  detail  untuk  pembuatan  prototype.  Wireframe berfungsi sebagai blueprint yang menggambarkan struktur antarmuka aplikasi  tanpa berfokus pada warna maupun grafik. Perancangan wireframe pada desain aplikasi BankHijau terdiri dari 4 bagian, yaitu onboarding, signup dan signin, halaman nasabah, dan halaman pengelola. Wireframe aplikasi BankHijau memiliki 17 halaman yang terdiri dari splash screen, onboarding1, onboarding2, onboarding3, login (pengelola), login (nasabah), register (nasabah), home  (nasabah),  riwayat,  edukasi,  setting  (nasabah),  edit  profil,  home  (pengelola),  setting  (pengelola),  detail nasabah, tambah pencatatan, dan tambah edukasi. Wireframe aplikasi ditampilkan pada Gambar 4.

## Journal of Information System Research (JOSH)

## 3.3.2 Prototipe
Setelah  pembuatan  wireframe,  tahap  berikutnya  yang  dilakukan  peneliti  adalah  pembuatan  prototype  aplikasi BankHijau. Pada tahap ini, prototipe yang dibuat berisikan desain detail dari tahap sebelumnya. Dimulai dengan pembuatan design guideline yang berisikan tipografi, warna, kartu, tombol, dan navigasi yang  selanjutnya akan terus digunakan pada tahap pembuatan  prototype. Pada tipografi, peneliti menggunakan  font Poppins dengan 5 jenis  font-weight  yang  berbeda  sesuai  dengan  fungsinya.  Berikutnya  untuk  warna  utama,  peneliti  memilih menggunakan warna hijau dikarenakan menurut psikologi warna hijau secara universal menggambarkan alam dan lingkungan. Selanjutnya, peneliti membuat 5 jenis card yang dapat digunakan secara berulang agar desain pada prototype  tetap  konsisten.  Selanjutnya,  peneliti  membuat  4  jenis  tombol  dengan  ukuran  berbeda  sesuai  dengan kebutuhan form. Terakhir, peneliti membuat 2 jenis bottom navigation bar yang masing-masing digunakan pada halaman nasabah dan halaman pengelola. Design guidelines yang digunakan pada prototype aplikasi BankHijau ditampilkan pada Gambar 5.
Gambar 5. Design guidelines aplikasi BankHijau
Halaman pertama yang akan tampil ketika pengguna membuka aplikasi BankHijau adalah halaman splash screen.  Pada  halaman  ini,  terdapat  logo  aplikasi  BankHijau  dengan  tulisan  berwarna  putih  dan  latar  belakang aplikasi berwarna hijau. Halaman ini akan tampil selama beberapa detik yang kemudian akan membawa pengguna ke halaman onboarding 1. Pada halaman onboarding 1 pengguna dapat melihat fasilitas apa saja yang ditawarkan dari aplikasi BankHijau. Selanjutnya sama dengan sebelumnya, halaman onboarding 2 juga berisikan fasilitas yang ditawarkan dari aplikasi ini. Pada halaman onboarding 3 terdapat pilihan di mana pengguna diharuskan memilih akan  masuk  sebagai  pengelola  atau  nasabah  sesuai  dengan  role  yang  dimilikinya.  Halaman  splash  screen, onboarding 1, onboarding 2, dan onboarding 3 dapat dilihat pada Gambar 6.
Gambar 6. Halaman splash screen, onboarding 1, onboarding 2, dan onboarding 3
Setelah pengguna memilih role yang akan digunakan, maka pengguna akan diarahkan ke halaman login. Terdapat perbedaan halaman login pengelola dengan nasabah. Halaman login pengelola berisikan formulir untuk mengisi  email  dan  password  yang  digunakan  untuk  masuk  ke  akun  yang  sudah  ada.  Sedikit  berbeda  dengan halaman login pengelola, halaman login nasabah terdapat pilihan untuk membuat akun baru. Hal ini dikarenakan pengelola hanya didesain memiliki 1 akun saja. Setelah membuat akun, nasabah dapat langsung masuk dengan

## Journal of Information System Research (JOSH)
mengisi formulir yang ada pada halaman login nasabah. Halaman login yang ada didesain sederhana dengan warna hijau  pada  logo  aplikasi  BankHijau.  Diharapkan  dengan  desain  ini  pengguna  dapat  dengan  mudah  melakukan proses registrasi dan login. Halaman login (pengelola), login (nasabah), dan register (nasabah) ditampilkan pada Gambar 7.
Gambar 7. Halaman login (pengelola), login (nasabah), dan register (nasabah)
Setelah login ke dalam aplikasi, pengguna dengan role pengelola diarahkan ke halaman home pengelola. Halaman  ini  berisikan  list  nasabah  yang  terdaftar  di  aplikasi  BankHijau.  Terdapat  juga  fitur  pencarian  guna memudahkan  pengelola  mencari  nasabah  yang  diinginkan.  Pada  bagian  bawah  halaman  ini    terdapat  bottom navigation bar yang digunakan untuk berganti ke halaman tambah edukasi dan halaman setting. Apabila pengelola menekan nama yang ada pada list nasabah, maka pengelola diarahkan ke halaman detail nasabah. Pada halaman ini pengelola dapat  melihat  balance, riwayat pencatatan, dan juga dapat  masuk ke  halaman tambah pencatatan. Apabila pengelola menekan tombol tambah pencatatan yang ada pada halaman detail nasabah yang dipilih, maka ia akan diarahkan ke halaman tambah pencatatan. Pada halaman ini pengelola dapat memilih tanggal pencatatan, memilih  jenis  pencatatan,  dan  mengisi  detail  pencatatan.  Setelah  pengelola  selesai  mengisi  detail  pencatatan, pengelola dapat menekan tombol submit yang kemudian akan mengarahkan pengelola kembali ke halaman detail nasabah  dengan  riwayat  yang  sudah  bertambah.  Selanjutnya  pada  halaman  tambah  edukasi,  pengelola  dapat menambahkan  edukasi  dengan  mengisi  judul,  deskripsi,  dan  menambahkan  foto  yang  diinginkan.  Setelah pengelola menekan tombol submit, maka pengelola akan dikembalikan ke halaman awal. Terakhir, pada halaman setting pengelola dapat melakukan edit password dan logout. Halaman home (pengelola), detail nasabah, tambah pencatatan, tambah edukasi, dan setting ditampilkan pada Gambar 8.
Gambar 8. Halaman home (pengelola), detail nasabah, tambah pencatatan, tambah edukasi, dan setting
Pengguna dengan role nasabah, setelah login ke dalam aplikasi, akan diarahkan ke halaman home nasabah. Pada halaman ini nasabah dapat melihat balance dan riwayat pencatatan terbaru yang ada. Berikutnya pada bottom navigation bar nasabah dapat berpindah ke halaman riwayat, edukasi, dan setting. Pada halaman riwayat pengguna dapat  melihat  semua  riwayat  pencatatan  yang  ada.  Selanjutnya,  pada  halaman  edukasi,  nasabah  dapat  melihat konten edukasi dan pemberitahuan yang telah ditambahkan oleh pengelola. Terakhir pada halaman setting nasabah dapat melakukan edit profile,  melihat informasi aplikasi, dan  melakukan  logout.  Apabila nasabah  memilih edit profile,  maka  nasabah  akan  diarahkan  pada  halaman  edit  profil  guna  mengganti  data  username,  password,  dan alamat. Setelah selesai, nasabah dapat menekan tombol update dan akan diarahkan ke halaman berhasil edit profil. Halaman home (nasabah), riwayat, edukasi, setting, edit profile, dan berhasil edit profile ditampilkan pada Gambar 9.

## Journal of Information System Research (JOSH)
Gambar 9. Halaman home (nasabah), riwayat, edukasi, setting, edit profile, dan berhasil edit profile

## 3.4 Evaluasi Prototype
Pada tahap evaluasi, peneliti melakukan pengujian prototype aplikasi BankHijau yang sudah dibuat menggunakan metode User Experience Questionnaire (UEQ). Penyebaran kuesioner dilakukan kepada pengelola, nasabah, dan masyarakat sekitar Bank Sampah Ngudi Barokah. Didapatkan 26 responden yang mengisi kuesioner. Kuesioner ini  disebar  menggunakan  Google  Forms  agar  memudahkan  proses  pengumpulan  data.  Data  yang  dikumpulkan kemudian dimasukkan ke dalam tabel UEQ yang kemudian diolah menggunakan UEQ data analysis tools version 12. Sebelum mengolah data, peneliti melakukan uji reliabilitas untuk mengukur dan mengetahui apakah data yang didapat valid dan dapat diandalkan. Hasil dari pengujian reliabilitas dapat dilihat pada Tabel 1.

## Tabel 1. Evaluasi Hasil Uji Reliabilitas
Berdasarkan hasil pengujian reliabilitas, diperoleh hasil yang reliabel pada keseluruhan aspek UEQ. Hasil uji didapatkan dari perhitungan Cronbach Alpha dengan ketentuan hasil alpha harus di atas 0,6 untuk dinyatakan reliabel [25]. Semakin dekat alpha yang didapat dengan angka 1, semakin reliabel dan konsisten data yang didapat. Setelah dipastikan keseluruhan data yang diperoleh reliabel, peneliti melanjutkan dengan mengolah data tersebut. Hasil rata-rata enam aspek pada UEQ ditampilkan pada Gambar 10.
Gambar 10. Grafik perbandingan rata-rata aspek UEQ
Berdasarkan hasil rerata masing-masing aspek UEQ, dapat diketahui bahwa aspek ketepatan memiliki nilai rata-rata tertinggi dibandingkan aspek lainnya dengan nilai 2,15. Selanjutnya, dapat disimpulkan dari enam aspek UEQ mulai dari daya tarik, kejelasan, efisiensi, ketepatan, stimulasi, dan kebaruan mendapatkan nilai mean > 0,8. Hal ini  menandakan bahwa  keenam aspek  yang ada  mendapatkan  penilaian positif dari pengguna [26]. Setelah
Aspek Alpha Keterangan Daya tarik 0,77 Reliabel Kejelasan 0,74 Reliabel Efisiensi 0,64 Reliabel Ketepatan 0,76 Reliabel Stimulasi 0,81 Reliabel Kebaruan 0,64 Reliabel

## Journal of Information System Research (JOSH)
mendapatkan nilai rata-rata dari setiap aspek UEQ, selanjutnya dilakukan perbandingan dengan data  benchmark yang  terdaftar  pada  basis  data  UEQ.  Pada  tahap  ini,  hasil  pengujian  UEQ  pada  prototipe  aplikasi  BankHijau dibandingkan dengan 468 sistem atau aplikasi lainnya, yang mana sistem atau aplikasi tersebut pernah melakukan evaluasi UX menggunakan UEQ. Diagram perbandingan benchmark dan tabel evaluasi ditampilkan pada Gambar 11 dan Tabel 2.
Gambar 11. Grafik benchmark aplikasi BankHijau
Tabel 2. Evaluasi hasil benchmark UEQ Aspek Nilai Rerata Status Perbandingan dengan Benchmark Keterangan Daya tarik 2,15 Excellent Prototipe berada pada 10% hasil terbaik. Kejelasan 1,98 Good Terdapat 10% sistem lain yang hasilnya lebih baik dan terdapat 75% sistem lain yang hasilnya lebih buruk dari prototipe aplikasi BankHijau. Efisiensi 1,95 Excellent Prototipe berada pada 10% hasil terbaik. Ketepatan 2,15 Excellent Prototipe berada pada 10% hasil terbaik. Stimulasi 2,11 Excellent Prototipe berada pada 10% hasil terbaik. Kebaruan 1,54 Good Terdapat 10% sistem lain yang hasilnya lebih baik dan terdapat 75% sistem lain yang hasilnya lebih buruk dari prototipe aplikasi BankHijau.
Berdasarkan  hasil  evaluasi  benchmark  pada  keenam  aspek  UEQ  didapati  aspek  daya  tarik,  efisiensi, ketepatan,  dan  stimulasi  mendapatkan  hasil  perbandingan  dengan  status  “Excellent”  yaitu  prototipe  aplikasi BankHijau berada pada 10% hasil terbaik dari sistem atau aplikasi yang dibandingkan. Sedangkan untuk aspek kejelasan  dan  kebaruan  diperoleh  status  “Good”  yaitu  terdapat  10%  sistem  lain  yang  hasilnya  lebih  baik  dan terdapat  75%  sistem  lain  yang  hasilnya  lebih  buruk  dari  prototipe  aplikasi  BankHijau.  Terdapat  note  yang diberikan oleh salah satu responden kepada peneliti  pada saat melakukan pengujian  prototype,  yaitu responden meminta aplikasi memiliki ukuran font yang lebih besar agar lebih mudah dibaca.

## 4. KESIMPULAN
Pembangunan  aplikasi  BankHijau  bertujuan  untuk  mengembangkan  sistem  pencatatan  terstruktur  untuk  bank sampah, dalam hal ini Bank Sampah Ngudi Barokah, serta meningkatkan efisiensi dan transparansi. Aplikasi ini diharapkan dapat membantu pengelolaan data lebih akurat, meminimalkan kesalahan, dan memungkinkan warga memantau  dan  memverifikasi  catatan  penyetoran  dan  penjualan  sampah.  Dalam  tahap  pengembangan  yang menggunakan  metode  User Centered Design (UCD), dilakukan pengujian  user experience (UX) pada prototipe aplikasi mobile BankHijau kepada 26 responden menggunakan User Experience Questionnaire (UEQ). Diperoleh rerata hasil pengujian untuk masing-masing aspek: daya tarik (2,15), efisiensi (1,95), ketepatan (2,15), stimulasi (2,11),  kejelasan  (1,98),  dan kebaruan  (1,54). Berdasarkan  perbandingan  benchmark,  aspek  yang  masuk  dalam kriteria excellent adalah aspek daya tarik, efisiensi, ketepatan, dan stimulasi; sedangkan aspek yang masuk dalam kriteria good adalah aspek kejelasan dan kebaruan. Walaupun hasil perbandingan benchmark aplikasi BankHijau dapat dikatakan baik, aspek kebaruan dan kejelasan perlu mendapat perhatian khusus, terutama aspek kebaruan yang mendapat nilai rata-rata paling rendah di antara kelima aspek lainnya. Terdapat juga catatan yang diberikan responden  kepada  peneliti  untuk  lebih  memperhatikan  ukuran  font  dikarenakan  beberapa  pengguna  memiliki kategori umur lansia. Hal ini menjadi masukan penting kepada pengembang dalam fokus pengembangan aplikasi ke depannya. Secara keseluruhan, dapat disimpulkan bahwa berdasarkan hasil yang diperoleh dari UEQ, tingkat kepuasan  pengguna  sangat  positif.  Sebagai  langkah  selanjutnya,  peneliti  merekomendasikan  untuk  tetap

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1018−1028 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5495
melakukan pengujian secara berkala dalam tahap pengembangan agar tetap memberikan User Interface (UI) dan User Experience (UX) pada aplikasi BankHijau yang berfokus pada keinginan dan kebutuhan pengguna.

## REFERENCES
[1]  S.  Kaza,  L.  C.  Yao,  P.  Bhada-Tata,  and  F.  Van  Woerden,  “What  a  Waste  2.0:  A  Global  Snapshot  of  Solid  Waste Management  to  2050,”  What  a  Waste  2.0:  A  Global  Snapshot  of  Solid  Waste  Management  to  2050,  Sep. 2018,  doi: 10.1596/978-1-4648-1329-0.
[2]  databoks, “10 Negara Penyumbang Sampah Plastik Terbanyak ke Laut, RI Peringkat Berapa?” Accessed: Jun. 28, 2024. [Online].  Available:  https://databoks.katadata.co.id/datapublish/2022/11/12/10-negara-penyumbang-sampah-plastik- terbanyak-ke-laut-ri-peringkat-berapa
[3]  databoks,  “Produksi  Sampah  Makanan  Indonesia  Tertinggi  di  Asia  Tenggara.”  Accessed:  Jun.  28,  2024.  [Online]. Available: https://databoks.katadata.co.id/datapublish/2022/06/27/produksi-sampah-makanan-indonesia-tertinggi-di- asia-tenggara
[4]  Administrator,  “Indonesia.go.id  -  Membenahi  Tata  Kelola  Sampah  Nasional.”  Accessed:  Jun.  28,  2024.  [Online]. Available: https://indonesia.go.id/kategori/indonesia-dalam-angka/2533/membenahi-tata-kelola-sampah-nasional
[5]  M. Defitri, “Fakta Mengejutkan Daur Ulang - Artikel dan berita pengelolaan sampah dari Waste4Change.” Accessed: Jun. 28, 2024. [Online]. Available: https://waste4change.com/blog/fakta-daur-ulang-yang-mengejutkan/
[6]  A. Fakhurozi, T. T. Suhariyanto, and M. Faishal, “Analysis of Environmental Impact and Municipal Waste Management Strategy: A Case of the Piyungan Landfill, Yogyakarta, Indonesia,” Jurnal Optimasi Sistem Industri, vol. 20, no. 1, pp. 61–71, May 2021, doi: 10.25077/josi.v20.n1.p61-71.2021.
[7]  KLHK,  “SIPSN  -  Sistem  Informasi  Pengelolaan  Sampah  Nasional.”  Accessed:  Jun.  22,  2024.  [Online].  Available: https://sipsn.menlhk.go.id/sipsn/
[8]  Humas,  DIY,  “Portal  Resmi  -  Pemerintah  Daerah  Daerah  Istimewa  Yogyakarta.”  Accessed:  Jun.  22,  2024.  [Online]. Available: https://jogjaprov.go.id/berita/pemda-diy-resmi-tutup-tpa-piyungan
[9]  S. A. Nabilah, D. Purnomo, and R. Kastaman, “Perancangan Model Bisnis Bank Sampah di Kota Bandung Menggunakan Business Model Canvas,” Bina Ekonomi, vol. 23, no. 1, pp. 1–12, Apr. 2019, doi: 10.26593/BE.V23I1.3858.1-12.
[10] F.  A.  Rahmadani,  “Upaya  Menumbuhkan  Kesadaran  Masyarakat  Dalam  Menjaga  Kebersihan  Lingkungan  Melalui Pengelolaan Bank Sampah,”  Comm-Edu (Community Education Journal), vol. 3, no. 3, pp. 261–270, Sep. 2020, doi: 10.22460/COMM-EDU.V3I3.3482.
[11] I.  P.  Konsep  et  al.,  “Konsep  dan  Implementasi  Ekonomi  Sirkular  Dalam  Program  Bank  Sampah  Studi  Kasus: Keberlanjutan Bank Sampah Tanjung,” AmaNU: Jurnal Manajemen dan Ekonomi, vol. 4, no. 1, pp. 89–98, Apr. 2021, Accessed: Jun. 22, 2024. [Online]. Available: https://www.jurnal.unugha.ac.id/index.php/amn/article/view/40
[12] E. Kyriakaki and A. M. Driga, “Mobile applications for students with ADHD,” https://gjeta.com/sites/default/files/GJETA-2023-0116.pdf,  vol.  15,  no.  3,  pp.  205–216,  Jun.  2023,  doi: 10.30574/GJETA.2023.15.3.0116.
[13] S. Salsabilah, Moh. I. Wahyuddin, and R. T. K. Sari, “Analisa UI/UX Terhadap Perancangan Website Laundry dengan Metode Human Centered Design dan User Experience Questionnaire,” Jurnal Media Informatika Budidarma, vol. 6, no. 1, pp. 720–727, Jan. 2022, doi: 10.30865/MIB.V6I1.3547.
[14] M.  F.  Aziz  and  C.  B.  Sanjaya,  “Aplikasi  Kas  Berbasis  Flutter  untuk  Meningkatkan  Efisiensi  Pencatatan  Transaksi Keuangan,” Jurnal Krisnadana, vol. 3, no. 1, pp. 34-48–34 – 48, Sep. 2023, doi: 10.58982/KRISNADANA.V3I1.472.
[15] “User  Centered  Design  –  School  of  Information  Systems.”  Accessed:  Jun.  22,  2024.  [Online].  Available: https://sis.binus.ac.id/2019/05/31/user-centered-design/
[16] M. Faisal et al., “Perancangan UI/UX Menggunakan Metode User Centerd Design Berbasis Web Pada Perhitungan Luasan Kumuh Balai Prasarana Pemukiman Wilayah Lampung,” Jurnal Informatika dan Teknik Elektro Terapan, vol. 11, no. 2, pp. 2830–7062, Apr. 2023, doi: 10.23960/JITET.V11I2.2921.
[17] A. Angela, F. Halim, and C. Sylvia, “Pengukuran Pengalaman Pengguna Aplikasi Platform Pembelajaran dan Konferensi Video Menggunakan Framework UEQ+,” Jurnal Media Informatika Budidarma, vol. 6, no. 2, pp. 1238–1247, Apr. 2022, doi: 10.30865/MIB.V6I2.3878
[18] I. N. T. A. Putra, K. S. Kartini, P. W. Aditama, and S. P. Tahalea, “Analisis Sistem Informasi Eksekutif Menggunakan User Experience Questionnaire (UEQ),” International Journal of Natural Science and Engineering, vol. 5, no. 1, pp. 25– 29, Apr. 2021, doi: 10.23887/IJNSE.V5I1.29289.
[19] M.  Hafizh  Hamdanuddinsyah  et  al.,  “Perancangan  UI/UX  Aplikasi  Buku  Online  Mizanstore  Berbasis  Mobile Menggunakan User Centered Design,” Journal of Information System Research (JOSH), vol. 4, no. 4, pp. 1464–1475, Jul. 2023, doi: 10.47065/JOSH.V4I4.3850
[20] C.  Ravelino,  Y.  Alfa  Susetyo,  and  K.  Satya  Wacana,  “Perancangan  UI/UX  untuk  Aplikasi  Bank  Jago  menggunakan Metode User Centered Design,” Jurnal JTIK (Jurnal Teknologi Informasi dan Komunikasi), vol. 7, no. 1, pp. 121–129, Jan. 2023, doi: 10.35870/JTIK.V7I1.697.
[21] K. Wulandari and A. Voutama, “Perancangan UI Aplikasi Konsultasi Kesehatan Mental Berbasis Mobile Menggunakan Metode User Centered Design (UCD),” Jurnal Teknologi Sistem Informasi dan Sistem Komputer TGD, vol. 6, no. 2, pp. 445–451, Jul. 2023, doi: 10.53513/JSK.V6I2.8253.
[22] S. Ernawati and A. D. Indriyanti, “Perancangan User Interface dan User Experience Aplikasi Medical Tourism Indonesia Berbasis Mobile Menggunakan Metode User Centered Design (UCD) (Studi Kasus: PT Cipta Wisata Medika),” Journal of Emerging Information System and Business Intelligence (JEISBI), vol. 3, no. 4, pp. 90–102, Aug. 2022, Accessed: Jun. 13, 2024. [Online]. Available: https://ejournal.unesa.ac.id/index.php/JEISBI/article/view/49296
[23] T. Andhiza, I. Fitri, and A. Rubhasy, “Perancangan User Experience Pada Aplikasi Pencarian Car Wash Menggunakan Metode UCD (User Centered Design),” SMATIKA JURNAL : STIKI Informatika Jurnal, vol. 12, no. 01, pp. 135–145, Jun. 2022, doi: 10.32664/SMATIKA.V12I01.581.

## Journal of Information System Research (JOSH)
[24] S.  L.  Ramadhan,  I.  Fitri,  and  A.  Rubhasy,  “Perancangan  User  Experience  Aplikasi  Pengajuan  E-KTP  menggunakan Metode UCD pada Kelurahan Tanah Baru,” JATISI (Jurnal Teknik Informatika dan Sistem Informasi), vol. 8, no. 1, pp. 287–298, Mar. 2021, doi: 10.35957/JATISI.V8I1.633
[25] A. D. Savitri and C. I. Ratnasari, “Implementasi User Experience Questionnaire (UEQ) untuk Mengevaluasi Pengalaman Pengguna pada UII RAS,” KLIK: Kajian Ilmiah Informatika dan Komputer, vol. 4, no. 3, pp. 1352–1361, Dec. 2023, doi: 10.30865/KLIK.V4I3.1444.
[26] M.  Schrepp,  “User  Experience  Questionnaire  Handbook.”  Accessed:  Jun.  22,  2024  [Online].  Available:  www.ueq- online.org