KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 4, No 6, June 2024, Hal 2869-2880 DOI 10.30865/klik.v4i6.1899 https://djournals.com/klik

## Implementasi Human-Centered Design dalam Perancangan Front-End Website Fundraising e-YM
Yoga Pangestu, Dianni Yusuf * , Galih Hendra Wibow
Jurusan Bisnis dan Informatika, Teknologi Rekayasa Perangkat Lunak, Politeknik Negeri Banyuwangi, Banyuwangi, Indonesia Email: 1 yogapangestu0746@email.com, 2,* dianniyusuf@poliwangi.ac.id, 3 galih@poliwangi.ac.id Email Penulis Korespondensi: dianniyusuf@poliwangi.ac.id
Abstrak− LAZNAS  Yatim  Mandiri  telah  mencapai  berbagai  keberhasilan  dalam  pengelolaan, penyaluran, dan pemberdayaan  anak yatim kurang mampu dan dhuafa. Meskipun demikian, cabang Banyuwangi masih menghadapi tantangan dalam pengarsipan program, yang  saat  ini  dilakukan  secara  konvensional.  Yayasan  Yatim  Mandiri  cabang  Banyuwangi  belum  mengadopsi  platform  elektronik untuk mengarsipkan berkas dan dokumentasi penyaluran program, sehingga mempersulit donatur dalam mengawasi dan memahami aliran dana yang mereka sumbangkan. Penelitian ini mengusulkan pengembangan sistem elektronik Yatim Mandiri (e-YM) berbasis web untuk meningkatkan efektivitas dan efisiensi pengarsipan program. Proses desain akan dibuat menggunakan perangkat lunak figma dan perancangan mengacu metode Human Centered Design (HCD). Metode pengujian desain  menggunakan system usability scale (SUS)  untuk  mengukur  dan  mengevaluasi  kegunaan  sistem  berdasarkan  presepsi  pengguna.  Berdasarkan  hasil  pengujian  terhadap rancangan website e-YM dengan pendekatan Metode Human Centered Design, didapatkan hasil bahwa Design menjawab kebutuhan user.  Hal  ini  karena  website  e-YM  terdapat  halaman  distribusi  untuk  mencatat  seluruh  penyaluran  donasi,  melakukan  cetak  LPJ, pengarsipan dan pencatatan mandiri donasi oleh para donatur. Selain itu, skor kegunaan pada uji System Usability Scale, yang diikuti oleh  karyawan  Yayasan  Yatim  Mandiri  cabang  Banyuwangi,  mahasiswa  dan  masyarakat  luas  menghasilkan  nilai  rata-rata  80,2 (excellent) Sehingga website e-YM dapat diterima oleh pengguna (masyarakat dan karyawan).
Kata Kunci: Human Centered Design; System Usability Scale; Website; Yayasan Yatim Mandiri
Abstract− LAZNAS Yatim Mandiri has achieved various successes in managing, distributing, and empowering underprivileged and underprivileged orphans. Despite this, the Banyuwangi branch still faces challenges in archiving programs, which are currently done conventionally. The Banyuwangi branch of the Yatim Mandiri Foundation has not yet adopted an electronic platform for archiving files and documentation of program distribution, making it difficult for donors to monitor and understand the flow of funds they donate. This research proposes the development of a web-based Yatim Mandiri (e-YM) electronic system to increase the effectiveness and efficiency of program archiving. The design process will be created using Figma software, and the design will refer to the Human Centered  Design  (HCD)  method.  The  design  testing  method  uses  a  system  usability  scale  (SUS)  to  measure  and  evaluate  system usability based on user perceptions. Based on the results of testing the e-YM website design using the Human Centered Design Method approach, the results showed that the design answered user needs. This is because the E-YM website has a distribution page to record all distribution of donations, print LPJ, archive, and independently record donations by donors. Apart from that, the usability score on the  System  Usability  Scale  test,  which  was  attended  by  employees  of  the  Banyuwangi  branch  of  the  Yatim  Mandiri  Foundation, students and the wider community produced an average score of 80.2 (excellent) so that the E-YM website can be accepted by users (community and employees).
Keywords : Human Centered Design; System Usability Scale; Website; Yatim Mandiri Foundation

## 1. PENDAHULUAN
Yatim  Mandiri  merupakan  Lembaga  Amil  Zakat  Nasional  (LAZNAS)  yang  ikut  berkontribusi  dalam  melakukan pengelolaan zakat, infak, dan sedekah (ZIS) di Indonesia. Penerima manfaat atau sasaran utama LAZNAS Yatim Mandiri adalah anak yatim yang kurang mampu dan dhuafa. Melalui program-program unggulan yang dibentuk oleh LAZNAS Yatim Mandiri dari hasil pengelolaan zakat baik dalam bidang kesehatan, pendidikan, ekonomi dan sosial hal ini sudah mampu merangkul banyak anak yatim dhuafa yang seterusnya akan menjadi anak binaan LAZNAS Yatim Mandiri [1].
Pergerakan Yayasan Yatim Mandiri sebagai lembaga sosial cabang Banyuwangi, banyak membutuhkan campur tangan  dari  donatur  agar  dapat  merealisasikan  program-program  yang  direncanakan.  Setiap  penggunaan  dana,  perlu dirincikan secara jelas agar donatur dapat mengetahui aliran dana yang mereka donasikan pada setiap program dan sebagai bentuk  pertanggungjawaban.  Dalam  pelaksanaannya  saat  ini,  proses  pelaporan  pertanggungjawaban  kepada  donatur dilakukan secara door-to-door dengan memberikan majalah kepada donatur seraya mengumpulkan donasi dalam bentuk uang tunai. Oleh karena itu, diperlukan sebuah sistem yang terkomputerisasi, agar donatur bisa melihat realisasi program yang sudah didistribusikan kepada penerima manfaat. Kantor pusat Yayasan Yatim Mandiri berlokasi di Kota Surabaya. Berbeda  dengan  kantor  cabang,  kantor  pusat  telah  memiliki  sistem  untuk  membantu  pekerjaan.  Oleh  karena  itu, digitalisasi  di  kantor  cabang  diperlukan  agar  semua  pihak  dapat  memanfaatkan  sistem  tersebut  untuk  mempermudah pekerjaan sehari-hari.
Penelitian  terdahulu  dilakukan  oleh  Feraldi,  Andriyanto,  &  Rindri  (2022)  yang  membuat  rancang  bangun mengenai  Sistem  informasi  digital fundraising sehingga  dapat  memudahkan  kinerja  LAZISMU  Universitas Muhammadiyah  Bangka  Belitung  dalam  melakukan  proses  penghimpunan  dan  pengelolaan  ZISWAF  (Zakat,  Infaq, Shadaqah & Wakaf) [2]. Sebelumnya juga terdapat penelitian dari Lestari et. al (2022) yang merancang website dengan metode analisis PIECES [3]. Terdapat penelitian lain yang merancang UI/UX aplikasi pengelolaan  donasi  bencana  di BPBD  Kota  Batu  dengan  pendekatan  Design  Thinking,  kemudian  saat  testing  dihasilkan  score  91,4  dan  untuk  admin mendapatkan score 90,8  yang  dimana  hasil  tersebut  mendapatkan grade A[4].
Mengacu  pada  penelitian  pendahulu  yang  dilakukan  oleh  Al  Mudhari,  Az-Zahra,  &  Rahman,  (2021)  dalam mengembangkan website Yayasan Ihyaul Quran Indonesia dengan orientasi yang berfokus pada pengguna dari kalangan masyarakat  secara  umum  dan  pengurus  yayasan  menggunakan  pendekatan  Human  Centered  Design  (HCD)[5].  Pada tahun  selanjutnya,  Kurniawan,  Pradipta,  dan  Rani  (2022)  merancang  aplikasi  donasi  bernama  Peduli  panti  yang menggunakan pendekatan Human Centered Design (HCD) dan mendapatkan respon yang baik dari calon pengguna pada saat  testing[6].  Kemudian  dalam  penelitian  lain,  pengembangan  UI/UX  pada  aplikasi  crowdfunding  UMKM  yang dilakukan oleh Pratama dan Andika (2023) dengan metode HCD bertujuan untuk menghubungkan antara donator dan UMKM dengan berfokus pada faktor-faktor usability yaitu efisiensi, efektivitas dan kepuasan pengguna [7]. Sama halnya dengan penelitian sebelumnya, pada penelitian ini sangat diperlukan adanya keterlibatan masyarakat umum dan karyawan yayasan agar sistem yang dirancang dapat menjawab kebutuhan pengguna. Sehingga pada penelitian ini dipilih metode Human Centered Design (HCD), sebab pendekatan ini bertujuan untuk merancang sistem dengan berfokus pada pengguna maupun  stakeholder  yang  terlibat.  HCD  dapat  menyajikan  produk  yang  akan  semudah  mungkin  digunakan  dengan mengesampingkan faktor estetika.
Permasalahan-permasalahan  mengenai  pelaporan  pertanggungjawaban  dan  pengarsipan  program-program Yayasan Yatim Mandiri cabang Banyuwangi, dapat diatasi dengan menghadirkan sistem website yang efektif, tepat, dan akurat. Pada penelitian Langoday, Racma [8] adanya sistem website sebagai platform pengarsipan, menjadikan proses pencarian  dan  peninjauan data  menjadi  lebih  cepat  dan  efisien.  Selain  itu,  transparansi dana  donasi  ternyata  memiliki pengaruh signifikan terhadap kepercayaan donatur untuk berdonasi dan loyalitas  muzakki  pada lembaga amil zakat [4, 9]. Oleh karena itu, peneliti menghadirkan sistem elektronik Yatim Mandiri (e-YM) untuk menjawab permasalahan yang dihadapi Yayasan Yatim Mandiri cabang Banyuwangi. Sistem e-YM berbasis web bertujuan untuk memudahkan donatur dalam  mendapatkan  informasi  mengenai  seluruh  program  penyaluran  Yayasan  Yatim  Mandiri  cabang  Banyuwangi. Selain  itu,  bertujuan  untuk  mempermudah  admin  dalam  proses  audit  dari  pusat  dikarenakan  adanya  fitur  pengarsipan kegiatan  penyaluran  donasi  dan  dokumen  lainnya.  Hadirnya  gagasan  e-YM  diharapkan  dapat  mempermudah  proses penyebaran informasi mengenai program-program yang ada di Yayasan Yatim Mandiri cabang Banyuwangi. Sehingga dalam jangka panjang, dapat menarik perhatian donatur baru dari berbagai daerah, karena sistem berbasis web bisa diakses dari mana saja menggunakan internet.

## 2. METODE PENELITIAN

## 2.1 Pengumpulan Data
Metode pengumpulan data yang dilakukan pada penelitian ini, yaitu wawancara dan studi literatur. Peneliti melakukan wawancara pada karyawan Yayasan Yatim Mandiri cabang Banyuwangi. Kemudian studi literatur dilakukan melalui pengumpulan informasi melalui jurnal, karya ilmiah, dan hasil seminar yang selinier. Sehingga dapat digunakan sebagai bahan pertimbangan dan acuan perkembangan dalam penelitian pembuatan website e-YM ini.

## 2.2 Alur Penelitian
Tahapan  dari  penelitian  ini  dapat  dilihat  pada  Gambar  1,  dengan  berturut-turut  mulai  dari  tahap  pengumpulan  data, identifikasi  masalah,  perancangan  menggunakan  aplikasi  figma  dengan  mengacu  metode Human  Centered  Design , implementasi hingga testing . Pada penelitian ini testing yang dilakukan menggunakan jenis pengukuran System Usability Scale (SUS) yang dibagikan pada 30 responden dari total pihak masyarakat luas dan mahasiswa.

## Gambar 1. Alur Penelitian

## 2.3 Analisis Masalah
Pada analisis masalah, didapatkan informasi bahwa Yayasan Yatim Mandiri memiliki struktural karyawan yang salah satunya bernama staf program, dalam menyelesaikan pekerjaan sehari-hari masih menggunakan sistem konvensional. Setiap melakukan penyaluran bantuan, staf program masih menggunakan hard file dalam penyimpanan arsip penyaluran. Selain itu, dalam proses pengambilan donasi dari donatur masih menggunakan sistem door-to-door yang dinilai kurang efektif dan efisien. Berdasarkan permasalahan tersebut, peneliti akan memberikan solusi untuk memudahkan pekerjaan karyawan Yayasan Yatim Mandiri yaitu sebuah website yang bernama e-YM.

## 2.4 Metode Human Centered Design (HCD)
Human      Centered      Design  (HCD )  didefinisikan  sebagai  sebuah  metode  perancangan  dalam  sistem  informasi  yang mempertimbangkan manusia atau pengguna sebagai fokus atau orientasi utamanya [10]. Metode HDC bertujuan untuk memberikan kenyamanan pada pengguna dengan memanfaatkan opini yang didapatkan dari jajak pendapat para pengguna
Pengumpulan Data Indentifikasi Masalah Perancangan •Inspiration •Ideation •Implementation Usability Testing
ataupun  calon  pengguna  [11].  Menurut  Org  [12]  yang  dikutip  ulang  Chen,  Neta  [13],  tahapan  pada  Human  Centered Design  terdiri  dari  tiga  tahap,  diantaranya  adalah inspiration,  ideation, dan implementation . Inspiration merupakan tahapan  penting  karena  bertujuan  untuk  mengetahui  suatu  kendala  ataupun  permasalahan  yang  sedang  dihadapi. Sedangkan, ideation yang  merupakan  tahapan  kedua didefinisikan  sebagai  tahapan  pengumpulan,  pengembangan   ide dan  solusi  atau  biasa  disebut  dengan brainstorming . Kemudian tahap terakhir, implementation yaitu tahap pengguna mencoba prototype yang  sudah  dikerjakan [14].

## 3. HASIL DAN PEMBAHASAN

## 3.1 Perancangan dengan Metode Human Centered Design (HCD)
Perancangan  website  E-YM  yang  akan  diusulkan  untuk  menjawab  permasalahan  di  Yayasan  Yatim  Mandiri  Cabang Banyuwangi melalui tiga tahapan yang disesuaikan dengan metode HCD, diantaranya:

## 3.1.1 Inspiration
Inspiration adalah tahap untuk mengetahui masalah yang dihadapi dan memahami kendala hingga tujuan yang hendak dicapai oleh pengguna [15]. Berdasarkan hasil dua jenis pengumpulan data yang dilakukan, yaitu wawancara dan studi literatur.  Saat  wawancara  dengan  karyawan  Yayasan  Yatim  Mandiri  cabang  Banyuwangi,  didapatkan  hasil  bahwa kebutuhan yang diperlukan adalah arsip dokumen, data donator, data dhuafa, rekap keuangan dan donasi. Pihak yayasan membutuhkan  pengarsipan  yang  baik  untuk  dapat  mempermudah  proses  audit  dari  yayasan  pusat.  Sedangkan  studi literature menjadi bahan pertimbangan dan acuan perkembangan dalam penelitian pembuatan website e-YM ini.
Kemudian, dilakukan proses identifikasi yang bertujuan untuk mengetahui tujuan dari penggunaan website  e-YM. Beberapa  tujuan  diantaranya  yaitu  sebagai  berikut,  website  dapat  digunakan  untuk  pengarsipan  dokumen,  pendataan setelah melakukan program penyaluran; pendataan data donator; pendataan program-program yang ada di Yayasan Yatim Mandiri Cabang Banyuwangi; dapat digunakan untuk donasi; dan digunakan untuk menampilkan dokumentasi setelah melakukan penyaluran program.
Pada tahap planning ini berfungsi untuk memahami sebuah masalah yang ada di Yayasan Yatim Mandiri Cabang Banyuwangi. Permasalahan didapat ketika penulis melakukan wawancara. Perumusan masalah dibagi menjadi analisis masalah dan perancangan sistem. Pada analisis masalah, didapatkan informasi bahwa Yayasan Yatim Mandiri memiliki struktural  karyawan  yang  salah  satunya  bernama  staff  program,  dalam  menyelesaikan  pekerjaan  sehari-hari  masih menggunakan sistem konvensional. Setiap melakukan penyaluran bantuan, staff program masih menggunakan hard file dalam  penyimpanan  arsip  penyaluran.  Selain  itu,  dalam proses  pengambilan  donasi  dari  donatur masih  menggunakan sistem door-to-door yang  dinilai  kurang  efektif  dan  efisien.  Berdasarkan  permasalahan  tersebut,  peneliti  akan memberikan solusi untuk memudahkan pekerjaan karyawan Yayasan Yatim Mandiri yaitu sebuah website yang bernama e-YM.
Rancangan sistem bertujuan untuk menganalisis website yang akan diterapkan dalam sistem dan menjelaskan data yang diperlukan agar sistem dapat berjalan dengan baik serta sesuai dengan kebutuhan proses informasi. Perancangan kebutuhan fungsionalitas adalah sebuah sistem yang diambil sesuai dengan kebutuhan aplikasi. Terdapat tiga aktor yaitu admin, donator dan pengunjung. Admin akan diberikan kepada staff karyawan Yatim Mandiri yang mempunyai peran untuk mengelola data secara keseluruhan, donatur adalah seseorang yang sudah registrasi di sistem dan mempunyai akun yang  nantinya  bertujuan  akan  berdonasi  setiap  bulan,  Sedangkan  pengunjung  yaitu  warga  masyarakat  luas  yang mengakses  website  e-YM  dan  dapat  melihat  dokumentasi  penyaluran  program  yang  sudah  terlaksana.  Kebutuhan fungsionalitas sistem pada website e-YM untuk aktor admin dibagi menjadi login, menambah data program, menambah data  distribusi,  menambah  data  jenis  arsip,  menambah  data  arsip  dan  mengubah  profil.  Pada  aktor  donator  terdapat fungsional  sistem  donasi  dan  mengubah  profil.  Sedangkan  aktor  pengunjung  dapat  melihat  fungsional  sistem  melihat penyaluran program.

## 3.1.2 Ideation
Ideation adalah tahap yang mencakup brainstorming dan pembuatan prototipe  sebagai solusi, dengan umpan balik dari  pengguna  dan  pemangku  kepentingan  terkait  [16].  Hasil  dari  proses  ideation  dapat  dipaparkan  menjadi  beberapa bagian, diantaranya use case, user flow dan prototype.
a. Use Case
Gambar 2. Use Case Diagram
Pada Gambar 2, ditampilkan Use  Case Diagram dari aplikasi E-YM. Use Case didefinisikan sebagai aksi yang saling berkaitan dan berinteraksi secara terstruktur [15]. Sehingga pada gambar 2 mendeskripsikan tindakan yang perlu dilakukan serta kapan harus terjadi. Pada perancangan awal sistem ini disediakan beberapa activity diagram yaitu Admin melakukan  Login  ke  sistem,  Admin  menambahkan  manajemen  program,  manajemen  donasi,  manajemen  jenis  arsip, manajemen arsip, dan Admin juga dapat mengedit ataupun menghapus.
b. User Flow
Alur dan fungsi website e-YM akan digambarkan melalui user flow . User Flow adalah representasi visual yang berisi alur atau cara pengguna dalam menggunakan aplikasi dan disajikan secara tertulis ataupun digital [17]. User flow mendeskripsikan proses atau langkah pengguna dalam menggunakan  website E-YM dari fase awal masuk hingga fase akhir mencapai tujuan. Alur pengguna direpresentasikan dalam bentuk urutan logis dari setiap proses untuk memahami interaksi sistem dan identifikasi potensi masalah. Selain itu, proses ini membantu perancangan antarmuka lebih intuitif dan efisien pada setiap langkah penggunaan aplikasi.
Berdasarkan  gambar  3, user  flow  login dan  registrasi  untuk  donatur  dimulai  dengan  akses  ke  halaman  utama website e-YM, di mana donatur dapat memilih button "Login", lalu masuk ke halaman login jika sudah memiliki akun atau "Register" jika belum. Kemudian donatur diarahkan ke halaman login atau registrasi untuk memasukkan data yang diperlukan  seperti  email  dan password .  Selanjutnya,  sistem  melakukan  validasi  data  dan  jika  berhasil,  donatur  dapat masuk  ke  halaman dashboard donatur  yang  sudah  login.  Dalam  proses  ini,  pengguna  juga  dapat  menerima  notifikasi error jika terjadi kesalahan dan pesan sukses setelah berhasil login atau registrasi.

## Gambar 4. User Flow Menambah Data Distribusi
Berdasarkan gambar 4, user flow menambah data distribusi menguraikan ketika admin yayasan ingin menambah data  distribusi  terbaru  dari  yayasan  Yatim  Mandiri.  Admin  yayasan  login  terlebih  dahulu,  ketika  sudah  memasuki dashboard admin memilih menu distribusi di sidebar . Sistem secara otomatis akan menampilkan daftar dari distribusi yang sudah dimasukkan sebelumnya, ketika ingin menambah data maka admin yayasan harus menekan button tambah pada halaman tersebut, lalu sistem akan menampilkan form tambah data program. Admin mengisi data program baru pada halaman from tambah data distribusi lalu menekan button simpan untuk menyimpan data, sebelum sistem menyimpan data, sistem akan memvalidasi apakah data yang dimasukkan sudah benar atau belum, jika data yang diinput benar maka sistem akan otomatis akan menyimpan data, jika data yang dimasukkan salah maka data tidak tersimpan dan akan muncul notif di form tambah data. Proses tersebut juga berlaku untuk menambah data jenis arsip. Proses tersebut juga berlaku pada menu arsip dan donasi.

## Gambar 5. User Flow Mengubah Data Distribusi
Pada gambar 5, user flow mengubah data distribusi terjadi ketika admin ingin mengubah salah satu dari data yang sudah dimasukkan terdahulu. Admin yayasan login terlebih dahulu, ketika sudah memasuki dashboard admin memilih menu  distribusi  di  sidebar.  Sistem  secara  otomatis  akan  menampilkan  daftar  dari  distribusi  yang  sudah  dimasukkan sebelumnya, ketika  ingin mengubah  data  maka  admin  yayasan  harus  menekan  icon  edit  pada  halaman  distribusi,  lalu sistem  akan  menampilkan  form  ubah  data  distribusi.  Admin  mengubah  data  distribusi  pada  halaman  form  ubah  data distribusi lalu menekan button simpan untuk menyimpan data, sebelum sistem menyimpan data, sistem akan memvalidasi apakah data yang dimasukkan sudah benar atau belum, jika data yang dimasukkan benar maka sistem akan otomatis akan menyimpan data, jika data yang dimasukkan salah maka data tidak tersimpan dan akan muncul notif di form ubah data. Proses tersebut juga berlaku untuk mengubah data pada menu yang lainnya.
Gambar 6. User Flow Cetak LPJ
Pada gambar 6, user flow cetak LPJ dilakukan ketika admin ingin mengunduh LPJ untuk pertanggung jawaban setelah melakukan penyaluran. Admin yayasan login terlebih dahulu, ketika sudah memasuki dashboard admin memilih menu  distribusi  di  sidebar.  Sistem  secara  otomatis  akan  menampilkan  daftar  dari  distribusi  yang  sudah  diinput sebelumnya, admin yayasan lalu menekan icon data barang yang ada di field data barang pada halaman distribusi, lalu sistem  akan  menampilkan  halaman  distribusi  barang.  Ketika  admin  ingin  mengunduh  LPJ,  dapat  melakukan  dangan menekan button cetak, sistem akan menampilkan tampilan LPJ yang akan di unduh, lalu admin dapat mengunduh LPJ.
Gambar 7. User Flow Donatur Donasi
Pada gambar 7, user flow donatur donasi dilakukan ketika donatur ingin berdonasi pada yayasan Yatim Mandiri. Donatur login terlebih dahulu dengan email yang sudah terdaftar, donatur menekan menu donasi pada sidebar , secara otomatis sistem akan menampilkan form donasi. Donatur meng- input data sesuai yang ada pada form donasi, ketika sudah selesai meng- input data donatur lalu menekan button simpan pada halaman tersebut. Sebelum sistem menyimpan data, sistem akan memvalidasi apakah data yang diinput sudah benar atau belum, jika data yang dimasukkan benar maka sistem akan otomatis akan menyimpan data, jika data yang dimasukkan salah maka data tidak tersimpan dan akan muncul notif di form donasi.
c. Prototype
Prototype  didefinisikan  sebagai  pendekatan  dalam  rekayasa  perangkat  lunak  yang  bertujuan  untuk mendemonstrasikan  secara  langsung  proses  perangkat  lunak  dan  komponennya  bekerja,  sebelum  dilakukan  tahapan konstruksi aktual [18, 19]. Prototype dalam metode Human Centered Design (HCD) merupakan representasi awal dari solusi  atau  produk  yang  dirancang  untuk  menguji  konsep,  mendapatkan  umpan  balik  dari  pengguna,  dan  melakukan iterasi desain sebelum produk final dikembangkan. Prototype dapat berupa model sederhana, mockup visual, atau simulasi fungsional yang memungkinkan pengguna untuk mengalami dan memberikan tanggapan terhadap solusi yang diajukan. Prototype dibuat bertujuan untuk meningkatkan komunikasi antara pengembang perangkat lunak dengan tim fungsional ataupun  pengguna  [20].  Dengan  menggunakan  prototype,  tim  pengembangan  dapat  menguji  berbagai  konsep  dan memastikan bahwa solusi yang dihasilkan dapat memenuhi harapan dan kebutuhan pengguna dengan lebih baik.

## 3.1.3 Implementation
Tahap implementasi dilakukan oleh penguji untuk tujuan melakukan uji coba atau pengujian ketergunaan. Sehingga dapat dianalisis  untuk  dilakukan  evaluasi  dengan  indikator  pengukuran  saat  testing.  Berikut  merupakan  tampilan  inti  dari website E-YM saat dilakukan implementasi:

## Gambar 8. Landing Page
Landing  Page  merupakan  halaman  yang  pertama  yang  diakses  oleh  pengunjung  website  sebelum  melakukan aktivitas  lain  [21].  Pada  gambar  8 ditampilkan  halaman  landing page berfungsi  untuk media  promosi  Yayasan  Yatim Mandiri  Cabang  Banyuwangi,  kali  yang  berisikan  dokumentasi  hasil  penyaluran  kepada  anak-anak  yatim  dan  kaum dhuafa yang ada di Kabupaten Banyuwangi. Dalam landing page juga terdapat program-program yang dimiliki Yayasan Yatim Mandiri, lokasi yatim mandiri, kontak, serta media sosial dari Yatim Mandiri Cabang Banyuwangi.
Pada Gambar 9 ditampilkan halaman login. Halaman login berfungsi sebagai pintu masuk utama bagi pengguna untuk  memasuki  website  Yayasan  Yatim  Mandiri  Cabang  Banyuwangi.  Sistem  e-YM  memiliki  dua  jenis  pengguna, admin yang memiliki akses penuh ke seluruh website dan donatur yang hanya memiliki akses ke halaman donasi.
Gambar 10. Halaman Register
Pada  gambar  10  ditampilkan  halaman  register.  Halaman  registrasi  berfungsi  untuk  membuat  akun  bagi  calon donatur sebelum masuk ke dalam website e-YM dengan mengisikan nama, email dan password.
Gambar 11. Halaman Distribusi
Pada  gambar  11  ditampilkan  halaman  distribusi.  Halaman  distribusi  berfungsi  untuk  mencatat  setelah  setiap penyaluran  yang  dilakukan  oleh  Yayasan  Yatim  Mandiri  Cabang  Banyuwangi  yang  meliputi  nama  program,  waktu penyaluran, tempat penyaluran, jumlah orang yang menerima manfaat, anggaran, pengeluaran, dan sisa anggaran. Admin juga dapat melukan tambah data, edit data, dan hapus data.
Pada  gambar  12,  ditampilkan  halaman  distribusi  barang.  Fungsi  halaman  distribusi  barang  adalah  untuk menampilkan data barang dari setiap kegiatan penyaluran. Selain itu, halaman ini juga menyediakan fitur untuk mencetak data barang sebagai lampiran laporan pertanggungjawaban.

## Gambar 13. Halaman Arsip
Pada gambar 13, ditampilkan halaman arsip. Halaman arsip berfungsi untuk menyimpan data-data penting milik Yayasan Yatim Mandiri Cabang Banyuwangi yang tentunya sesuai kategori yang ada di daftar jenis arsip. Halaman Arsip memungkinkan  pengguna  untuk  mengakses  arsip  yang  dibutuhkan  dengan  cepat  dan  mudah,  sehingga  meningkatkan efisiensi dalam proses pencarian dan pengelolaan arsip. Pengguna juga dapat melakukan tambah data, edit data, dan hapus data.

## Gambar 14. Halaman Form Donasi
Pada  gambar  14,  ditampilkan  form  donasi.  Halaman  form  donasi  berfungsi  untuk  para  donatur  yang  akan melakukan donasi kepada Yayasan Yatim Mandiri Cabang Banyuwangi.

## 3.2 Testing
Penelitian  ini  menggunakan  indikator  pengukuran System  Usability  Scale (SUS)  yang  bertujuan  untuk  memberikan pengukuran yang obyektif terhadap kegunaan suatu sistem berdasarkan persepsi pengguna. System Usability Scale (SUS) adalah kuisioner yang dapat digunakan dalam pengukuran usability system computer yang berdasarkan sudut pandang pengguna [22]. Dalam melakukan perhitungan SUS menggunakan 5 point skala Likert yaitu “Sangat Tidak Setuju=1”, “Tidak Setuju=2”, “Netral=3”, “Setuju=4”, “Sangat Setuju=5”. Responden diminta untuk memberikan penilaian atas 10 item pernyataan SUS sesuai dengan penilaian subyektifnya.
Tabel 1. Pertanyaan System Usability Scale
No Pertanyaan 1 Saya berpikir akan menggunakan sistem ini lagi
2 Saya merasa sistem ini rumit untuk digunakan
3 Saya merasa sistem ini mudah untuk digunakan
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini
5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya
6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi) pada sistem ini
7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat
8 Saya merasa sistem ini membingungkan
9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini
10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini
Setiap item pernyataan di Tabel 1, memiliki skor kontribusi. Setiap skor kontribusi item akan berkisar antara 0 hingga 4. Pada item 1,3,5,7, dan 9 skor kontribusinya adalah posisi skala dikurangi 1.  Sedangkan item 2,4,6,8, dan 10, skor kontribusinya adalah 5 dikurangi posisi skala. Kalikan jumlah skor kontribusi dengan 2.5 untuk mendapatkan nilai keseluruhan sistem usability . Untuk target nilai evaluasi dari testing menggunakan system usability scale yaitu 75, dengan nilai  75  menunjukkan  bahwa  produk  ini  berhasil  dalam  mencapai  tujuannya  untuk  memudahkan  pengguna  dalam menyelesaikan tugas. Skor SUS berkisar dari 0 hingga 100. Berikut rumus perhitungan skor SUS:
SUS Score = {(S1-1) + (5-S2) + (S3-1) + (5-S4) + (S5-1) + (5-S6) + (S7-1) + (5-S8) + (S9-1) + (5-10)} * 2.5

## Gambar 15. Acuan Testing
Pada  Gambar  15,  indikator  dapat  diterima  dibagi  menjadi  kategori  “not  acceptable”  (tidak  dapat  diterima), “marginal” (sebagian kecil) dan “acceptable” (dapat diterima). Sedangkan pengukuran kelas dibagi menjadi kelas F, D, C,  B  dan  A.  Kemudian  peringkat  dengan  kata  sifat  dibagi  menjadi  “Worst  Imaginable”,  “Poor”,  “OK”,  “Good”, “Excellent”, dan “Best Imaginable” [23].
Tabel 2. Hasil Testing System Usability Scale pada Website E-YM
No Responden Q1-1  5-Q2  Q3-1  5-Q4  Q5-1  5-Q6  Q7-1  5-Q8  Q9-1  5-Q10  Skor*2,5 1 Responden 1 4 4 4 3 4 4 4 4 4 3 95 2 Responden 2 3 3 3 4 4 3 3 3 3 2 78 3 Responden 3 3 4 4 4 4 4 3 4 3 4 93 4 Responden 4 3 4 3 3 3 3 4 4 3 3 83 5 Responden 5 3 2 3 3 3 2 3 3 3 3 70 6 Responden 6 4 4 4 2 4 4 4 4 4 1 88 7 Responden 7 3 3 3 1 4 3 3 3 4 3 75 8 Responden 8 3 3 4 4 3 3 3 4 2 0 73 9 Responden 9 3 4 3 4 3 4 3 4 3 4 88 10 Responden 10 4 4 4 2 4 3 3 4 3 2 83 11 Responden 11 3 3 3 3 3 3 3 3 3 3 75 12 Responden 12 3 3 3 3 3 3 3 2 2 3 70 13 Responden 13 4 4 4 3 4 4 4 3 4 2 90 14 Responden 14 3 3 3 3 3 3 3 3 3 1 70 15 Responden 15 3 4 3 3 3 3 4 4 3 3 83 16 Responden 16 1 3 3 2 4 3 3 3 4 2 70 17 Responden 17 4 4 4 2 4 4 4 4 4 1 88 18 Responden 18 3 3 3 3 4 3 4 3 4 2 80 19 Responden 19 3 3 3 4 3 3 3 3 2 3 75 20 Responden 20 3 3 3 1 4 3 3 3 4 3 75 21 Responden 21 4 3 4 4 4 3 4 3 3 3 88 22 Responden 22 3 3 3 4 4 3 3 3 3 2 78 23 Responden 23 3 3 4 1 3 3 4 4 3 1 73 24 Responden 24 3 3 4 3 4 3 3 4 4 3 85 25 Responden 25 2 4 4 4 4 4 4 4 4 4 95 26 Responden 26 4 4 4 2 4 3 3 4 3 2 83 27 Responden 27 3 4 4 4 3 1 4 4 4 4 88
28 Responden 28 1 3 3 2 4 3 3 3 4 2 70 29 Responden 29 3 3 3 2 3 3 3 3 3 2 70 30 Responden 30 3 3 3 3 3 3 3 3 3 3 75 Total 2407 Rata-rata Skor (total / 30) 80,2
Pada  tabel  2,  skor  pada  testing  website  E-YM  yang  diikuti  oleh  karyawan  Yayasan  Yatim  Mandiri  cabang Banyuwangi, mahasiswa dan  masyarakat luas berada di angka 80,2. Mengacu gambar 15, dijelaskan indikator metode SUS,  diatas  >80  maka  menunjukkan usability di  skala  Excelent  dengan  Grade  B.  Sehingga  rancangan  website  E-YM dapat diterima ( acceptable ) dikalangan masyarakat.

## 4. KESIMPULAN
Berdasarkan hasil pengujian terhadap rancangan website E-YM dengan pendekatan Metode Human Centered Desig n, didapatkan hasil bahwa Design menjawab kebutuhan user. Hal ini karena website E-YM terdapat halaman distribusi untuk mencatat seluruh penyaluran donasi, melakukan cetak LPJ, pengarsipan dan pencatatan mandiri donasi oleh para donatur. Selain itu, skor kegunaan pada uji System Usability Scale, yang diikuti oleh karyawan Yayasan Yatim Mandiri cabang Banyuwangi, mahasiswa dan  masyarakat luas berada di angka 80,2. Sehingga website E-YM dapat diterima dan berada di skala Excellent Grade B.

## UCAPAN TERIMAKASIH
Dengan penuh rasa syukur, peneliti mengucapkan terima kasih yang sebesar-besarnya kepada Kepala Cabang Yayasan Yatim Mandiri, seluruh karyawan, serta semua pihak yang telah berkontribusi dalam mendukung dan membantu saya dalam proses pembuatan website e-YM. Peneliti juga mengucapkan terima kasih kepada dosen pembimbing yang telah memberikan arahan, bimbingan, dan motivasi yang sangat berarti sepanjang proyek ini. Dukungan dan kerjasama yang luar  biasa  dari  kalian  semua  telah  memungkinkan  terciptanya  website  ini  sebagai  sarana  yang  lebih  baik  untuk memberikan pelayanan dan informasi kepada masyarakat. Peneliti berharap website ini dapat bermanfaat dan memberikan dampak positif bagi yayasan serta para donatur.

## REFERENCES
[ 1]  Ramadhanti,  F.  and  H.F.  Riyadi, Peran  Lembaga  Amil  Zakat  dalam  Meningkatkan  Kesejahteraan  Keluarga  Janda  Miskin Melalui Program Kampung Mandiri di Laznas Yatim Mandiri Kudus. Management of Zakat and Waqf Journal (MAZAWA), 2020. 2 (1): p. 62-77.
[2] Feraldi,  W.,  S.  Andriyanto,  and  Y.A.  Rindri, Rancang  Bangun  Sistem  Informasi  Digital  Fundraising  LAZISMU  Universitas Muhammadiyah Bangka Belitung. JSITIK: Jurnal Sistem Informasi dan Teknologi Informasi Komputer, 2022. 1 (1): p. 1-16.
[3] Lestari,  W.,  et  al., Penyaluran  Donasi  Untuk  Korban  Bencana  Alam  Berbasis  Website  (Studi  Kasus:  Pecinta  Anak  Yatim  & Doeafa Indonesia Tercinta). Jurnal Ilmiah Betrik, 2022. 13 (01): p. 8-17.
[4] Addury, M.M. and D.I. Sunardi, Pengaruh Transparansi dan Kualitas Pelayanan Terhadap Loyalitas Muzakki Pada Lembaga Amil Zakat di Yogyakarta Dengan Trust Sebagai Variabel Intervening. IBSE Economic Journal, 2023. 2 (1): p. 33-41.
[5] Al Mudhari, M.R.A., H.M. Az-Zahra, and K. Rahman, Perancangan User Experience Website Yayasan Ihyaul Quran Indonesia menggunakan Metode Human Centered Design. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2021. 5 (8): p. 3439-3447.
[6] Kurniawan, P. and S. Rani, Perancangan Desain UI/UX Aplikasi PeduliPanti Menggunakan Metode Human-Centered Design (HCD). AUTOMATA, 2022. 3 (2).
[7] Pratama, A.H.A., Perancangan UI/UX aplikasi crowdfunding UMKM berbasis mobile menggunakan pendekatan HCD (Human Centered Design)(Studi Kasus: UMKM Mahasiswa UII). NUANSA INFORMATIKA, 2023. 17 (1): p. 99-110.
[8] Langoday,  M.I.K.,  D.F.  Racma,  and  A.  Wibowo, Kualitas  Sistem  Informasi  Pengarsipan  Surat  dan  Dampaknya  Terhadap Efisiensi Laporan Pengarsipan pada SDN 1 Karangklesem Berbasis Website. DIKE: Jurnal Ilmu Multidisiplin, 2023. 1 (2): p. 53-61.
[9] Athifah,  A.,  A.N.  Bayinah,  and  E.S.  Bahri, Pengaruh  Akuntabilitas  Publik  dan  Transparansi  Laporan  Keuangan  Terhadap Kepercayaan Donatur pada Yayasan PPPA  Daarul  Qur’an Nusantara. Perisai:  Islamic  Banking  and  Finance  Journal,  2018. 2 (1): p. 54-74.
[10]  Cahyaningsih,  D.,  H.M.  Az-Zahra,  and  I.  Aknuranda, Perancangan  Antarmuka  Pengguna  Sistem  Bimbingan  dan  Konseling berbasis Aplikasi Web menggunakan metode Human Centered Design (Studi Kasus: SMK Muhammadiyah 1 Malang). Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2021. 5 (10): p. 4205-4214.
[11]  Hermanto, A., et al., Peningkatan Usability Point of Sales (PoS) Berbasis Human Centered Design (HCD). J. Inf. Syst, 2022. 7 (1): p. 1-13.
[12]  Org, I., The field guide to human centered design . 2015: Ideo Org.
[13]  Chen,  E.,  G.  Neta,  and  M.C.  Roberts, Complementary  approaches  to  problem  solving  in  healthcare  and  public  health: implementation science and human-centered design. Translational behavioral medicine, 2021. 11 (5): p. 1115-1121.
[14]  Muhammad,  Z.N.,  et  al., Perancangan  Sistem  Informasi  Manajemen  Aset  Laboratorium  Berdasarkan  Pendekatan  Human Centered Design (HCD). KLIK: Kajian Ilmiah Informatika dan Komputer, 2023. 3 (6): p. 1272-1284.
[15]  Setiaji, H., Perancangan UI/UX menggunakan pendekatan HCD (Human-Centered design) pada website Thriftdoor. Automata, 2020. 1 (2).
[16]  Nijagal, M.A., et al., Using human centered design to identify opportunities for reducing inequities in perinatal care. BMC health services research, 2021. 21 : p. 1-15.
[17]  Kathleen, A., Analisis Perbandingan User Flow dari Aplikasi E-Catalogue Ifurnholic. Jurnal DKV Adiwarna, 2021. 1 (18): p. 9.
[18]  Yanuarti, E., Prototipe Sistem Informasi Seleksi Penerimaan Pegawai Tugas Belajar. vol, 2017. 3 : p. 36-41.
[19]  Siswidiyanto,  S.,  D.  Wijayanti,  and  E.  Haryadi, Sistem  Informasi  Penyewaan  Rumah  Kontrakan  Berbasis  Web  Dengan Menggunakan Metode Prototype. Jurnal Interkom: Jurnal Publikasi Ilmiah Bidang Teknologi Informasi dan Komunikasi, 2020. 15 (1): p. 16-23.
[20]  Escalona, M.J., L. García-Borgoñón, and N. Koch, Don’t Throw your Software Prototypes Away. Reuse them! 2021.
[21]  Ambarsari, L.S., W. Puspitasari, and A. Syahrina, Perancangan Modul Landing Page Dan Pembayaran Pada Website Pahamee Tentang Kesehatan Mental Menggunakan Metode Extreme Programming. eProceedings of Engineering, 2021. 8 (5).
[22]  Isnainrajab,  I.,  S.H.  Wijoyo,  and  A.R.  Perdanakusuma, Evaluasi  Usability  Pada  Aplikasi  PermataMobile  X  Dengan Menggunakan Metode Usability Testing Dan System Usability Scale (SUS). Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2020. 4 (10): p. 3383-3391.
[23]  Bangor, A., P.T. Kortum, and J.T. Miller, An empirical evaluation of the system usability scale. Intl. Journal of Human–Computer Interaction, 2008. 24 (6): p. 574-594.