KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 4, No 2, Oktober 2023, Hal 746-756 DOI 10.30865/klik.v4i2.1081 https://djournals.com/klik

## Desain UI/UX Prototype SPP Metode Human Centered Design
Wahyu Muslimin * , Eva Zuraidah
Teknologi Informasi, Sistem Informasi, Universitas Nusa Mandiri, Jakarta, Indonesia Email: 1,* wahyumuslimin623@gmail.com, 2 eva.evz@nusamandiri.ac.id Email Penulis Korespondensi: wahyumusimin623@gmail.com
Abstrak− Sekolah  Menengah  Pertama  Islam Al-Muttaqin  merupakan  sekolah  menengah  pertama  yang  masih menggunakan  sistem pembayaran Sumbangan Pembinaan Pendidikan (SPP) dengan dicatat dan direkap pada kartu SPP dan buku pembayaran, namun sistem seperti itu rentan rusak dan hilang sehingga menyebabkan ketidak amanan data, selain itu juga membuat proses pembayaran menjadi relatif  lama.  Perancangan  user  interface  atau  user  experience  dapat  mempengaruhi  pengguna    karena  tampilan  yang  menarik  dan diharapkan dapat memberi solusi agar lebih memudahkan petugas dalam pelayanan pembayaran SPP dan dapat melakukan transaksi pembayaran yang bisa dilakukan. Target audiens dalam peraancangan ini ditujukan pada bendahara sekolah dan wali siswa. Tujuan dari penelitian ini yaitu mengetahui tahapan proses sistem pembayaran SPP pada SMP Islam Al-Muttaqin kemudian melakukan desain solusi dari masalah tersebut.  Pada penelitian ini dilakukan perancangan UI/UX SPP pada SMP Islam Al-Muttaqin dengan menerapkan tahapan dari metode Human Centered Design (HCD), yaitu pemahaman dan spesifikasi konteks penggunaan, spesifikasi kebutuhan pengguna,  membuat  desain  solusi,  dan  evaluasi  desain  solusi  dengan  melakukan  pengujian  usability  terhadap  rancangan.  Hasil pengujian usability effectifiness mendapatkan skor 90%, pada  learnability mendapatkan skor 92%, dan pada pengujian  satisfaction (SUS) mendapatkan skor 87,8%, dari hasil data pengujian tersebut dinyatakan berhasil. Proses pencatatan dan pembayaran SPP ak an lebih cepat , akan mengurangi kesalahan pencatatan, pengulangan pencatatan, data hilang, dan membuat hasil pencatatan lebih akurat.
Kata Kunci: Prototype; SPP; Human Centered Design; Figma; Usability
Abstract− Al-Muttaqin  Islamic  Junior High  School  is  a  junior  high  school  that still  uses the  Education Development  Contribution (SPP) payment system by recording and recapitulating on SPP cards and payment books, but such a system is prone to damage and loss, causing data insecurity, besides that it also makes the payment process relatively long.  The design of the user interface or user experience can influence users because of its attractive appearance and is expected to provide solutions to make it easier for officers in SPP payment services and to be able to make payment transactions that can be made. The target audience in this design is aimed at school treasurers and student guardians. The purpose of this study is to find out the stages of the tuition payment system process at Al- Muttaqin Islamic Middle School and then design a solution to the problem. In this study, the UI/UX SPP design was carried out at Al- Muttaqin Islamic Middle School by applying the stages of the Human Centered Design (HCD) method, namely understanding and specifying the context of use, specifying user needs, creating solution designs, and evaluating solution designs by conducting usability testing of designs. The results of the usability effectiveness test got a score of 90%, on learnability got a score of 92%, and on the satisfaction test (SUS) got a score of 87.8%, from the results of the test data it was declared successful. The process of recording and paying SPP will be faster, will reduce recording errors, record repetition, lost data, and make recording results more accurate.
Keywords : Prototype; SPP; Human Centered Design; Figma; Usability

## 1. PENDAHULUAN
Lembaga pendidikan dipahami sebagai  lembaga yang memberikan layanan jasa pendidikan kepada siswa, mahasiswa, ataupun masyarakat umum[1], pendidikan merupakan aspek penting bagi seluruh lapisan masyarakat. Pendidikan yang baik akan membentuk generasi penerus yang berkualitas. Melalui pendidikan seseorang dapat memperoleh kemampuan dan pengetahuan yang luas.
Kemajuan  teknologi  dan  sistem  informasi  yang  sesuai  akan  mendukung  aktivitas  pendidikan  di  lembaga  atau institusi pendidikan[2]. SMP Islam Al-Muttaqin adalah lembaga pendidikan memerlukan manajemen yang optimal untuk memberikan pelayanan dalam memenuhi kebutuhan pendidikan masyarakat. Selain kegiatan belajar mengajar, terdapat kegiatan lain, yakni proses administrasi keuangan sekolah. Tindakan tersebut mencakup pencatatan informasi keuangan Sumbangan Pembinaan Pendidikan (SPP) yang dibayar siswa setiap bulannya.
Dalam  perkembangan  teknologi  informasi  saat  ini,  diperlukan  perancangan  UI/UX  yang  optimal  untuk menciptakan  sistem  informasi  terstruktur  dengan baik.  Desain User Experience (UX)  menjadi  fokus  utama  dalam  era modern di mana UX dapat menjadi faktor penentu keberhasilan pembuatan website . Prinsip dasar dalam merancang UX adalah mencapai kenyamanan dan kepuasan pengguna[3]. User Interface pada desain merujuk pada sistem dan interaksi antara  pengguna  dengan  pengguna  lainnya  melalui  perintah,  penginputan  data,  dan  penggunaan  konten. Interface pengguna  sangat  vital  dalam  aplikasi  sistem  karena  hampir  semua  operasi  aplikasi  memerlukan  antarmuka  pengguna. Antarmuka  yang  kurang  optimal  dapat  mempengaruhi  produktivitas  sistem  secara  keseluruhan.  Desain  UI/UX  ini sangatlah penting dalam pembuatan desain prototype , sehingga dapat memudahkan pembayaran SPP, jika menggunakan desain  UI/UX  dapat  meningkatkan  pengalaman  pengguna  dalam  melayani  dan  meyakinkan  siswa/orang  tua  untuk bertransaksi. UI ( User Interface ) merujuk pada desain antarmuka yang menekankan pada estetika, termasuk pilihan warna yang tepat dan elemen desain lainnya yang meningkatkan daya tarik visual [3].
Sekolah Menengah Pertama (SMP) Islam Al-Muttaqin ini merupakan salah satu dari banyak sekolah menengah pertama  yang  masih  menggunakan  sistem  pembayaran  Sumbangan  Pembinaan  Pendidikan (SPP)  secara  manual.  SPP dicatat dan direkap pada kartu SPP dan buku pembayaran SPP  yang dikelola oleh  bendahara sekolah. Namun, sistem pencatatan manual ini rentan terhadap kerusakan dan kehilangan data. Hal ini dapat menyebabkan tidak amanan data dan kesulitan dalam melaporkan dana yang telah dibayarkan siswa untuk setiap periode. Selain itu, bendahara sekolah sering
mengalami  kesulitan  dalam  mengetahui  total  rekapitulasi  pembayaran  SPP  karena  harus  menjumlahkan  data  secara manual  pada  periode  tertentu.  Selain  itu,  sulitnya  mencari  daftar  siswa  yang  sudah  membayar  maupun  yang  belum membayar pada periode bulan tertentu juga menjadi kendala.
Pada  penelitian  terdahulu  yang  pernah  dilakukan  oleh  A.  Arifin,  dkk  tentang  Evaluasi  dan  Perancangan User Interface untuk meningkatkan User Experience menggunakan Metode Human Centered Design dan Heuristic Evaluation pada Aplikasi Ezyschool, untuk menemukan masalah usability dengan mengacu pada prinsip heuristik dan merancang solusinya dengan memperhatikan saran evaluator, severity ratings, dan Google Material Design (panduan). Pendekatan Human-Centered Design (HCD) digunakan karena pendekatan pengembangan desain dan sistem interaktifnya berfokus pada pengguna dan kebutuhan pengguna. Metode Heuristic Evaluation (HE) digunakan untuk menemukan dan menilai masalah usability berdasarkan  prinsip  heuristik  dengan  bantuan  ahli  ( evaluator ),  hasil  penelitian  ini  adalah  analisis perbandingan  antara  hasil  evaluasi  awal  dan  desain  solusi  beserta  desain  solusi  dengan  UX  yang  lebih  baik  yang ditunjukkan dengan penurunan 10 masalah heuristik sehingga hanya ditemukan 7 masalah pada desain solusi[4]
Penelitian terdahulu yang pernah dilakukan oleh K. Carisfian, dkk tentang Perancangan User Experience Aplikasi Informasi  Lomba  Karya  Tulis  Ilmiah  Mahasiswa  Menggunakan  Metode Human  Centered  Design bertujuan  untuk memudahkan  mencari  informasi  tentang  perlombaan  karya  tulis  ilmiah,  dan  juga  mempermudah  panitia  dalam mempromosikan lomba yang mereka selenggarakan. Setelah dilakukan pengujian menggunakan Usability Testing pada aplikasi,  didapatkan  hasil  sebesar  96,5%,  dan  dikategorikan  sangat  baik  dengan  nilai  di  atas  80%.  Hasil  pengujian usability  testing menunjukkan  aspek  efektivitas  sebesar  100%,  aspek  efisiensi  sebesar  100%,  dan  rata-rata  kepuasan pengguna sebesar 89,75%. Pengujian UEQ menghasilkan nilai untuk skala keindahan 2,38, kejelasan 2,46, efisiensi 2,25, keterandalan 2,40, stimulasi 2,18, dan aspek kebaruan 2,30, sehingga dikategorikan sangat baik dengan rentang 10% hasil terbaik berdasarkan interval UEQ benchmark [5] .
Penelitian terdahulu yang pernah dilakukan oleh Y. Firantoko dkk tentang Perancangan User Experience Aplikasi Informasi Calon Anggota Legislatif 2019, dengan pengalaman pengguna yang baik dan diharapkan dapat memberikan kemudahan informasi tentang calon anggota legislatif kepada masyarakat. Metode yang digunakan dalam penelitian ini adalah human centered design . Dari hasil evaluasi, ditemukan 17 permasalahan yang telah diurutkan berdasarkan nilai rata-rata severity  ratings tertinggi.  Salah  satu  permasalahan  termasuk  dalam  kategori  masalah  utama,  yang  memiliki prioritas perbaikan yang tinggi[6].
Penelitian  terdahulu  yang  pernah  dilakukan  oleh M.  Humanika,dkk  tentang  Perancangan  Tampilan  Antarmuka Website Trisno  Motor  Menggunakan  Pendekatan  HCD  ,dalam  merancang website Trisno  Motor,  mereka  memilih pendekatan Human  Centered  Design (HCD).  Pendekatan  ini  terdiri  dari  tiga  fase: Inspiration,  Ideation,  dan Implementation . Setelah menggunakan pendekatan HCD, desain website Trisno Motor dinilai cocok dan mendapat respon yang  baik  dari  pengguna.  Dari feedbac k  yang  diperoleh,  92,2%  pengguna  menilai  desain  tersebut  bagus,  sementara sisanya memilih cukup bagus. Feedback dari pengguna sangat membantu penulis agar mendapatkan hasil yang sesuai. Hasil [7].
Penelitian  terdahulu  yang dilakukan oleh C. Fitri dan Rahma tentang  Evaluasi  dan Perbaikan Tampilan Desain Antarmuka Pengguna Web Jogja Center dengan Metode Human Centered Design , yang melibatkan masukan dari para s takeholder . Metode ini terdiri dari tiga tahap, yaitu Inspiration, Ideation, dan Implementation , dimana penulis saat ini berada pada tahap Implementation . Meskipun  belum melakukan aktivitas Usability Testing , perbaikan yang dilakukan pada  tampilan  antarmuka  pengguna  Web  Jogja  Center  telah  berhasil  meningkatkan  kualitasnya.  Dari  hasil feedback pengguna sebanyak 7 responden, 71.4% menilai tampilan desain Web Jogja Center sudah baik dan 28.6% menilai sangat baik. [8].
Setelah  desain  selesai  tentunya  perlu  untuk  mengukur  tingkat  kenyamanan  pengguna  salah  satu  cotoh  metode untuk  mengukur  adalah SUS[9]. Kinerja Usability diukur dengan menggunakan metode System Usability Scale (SUS) untuk menilai kegunaan dalam suatu produk . SUS merupakan metode pengujian yang melibatkan pengguna akhir atau end-user dalam proses pengerjaannya dan pengujian serta perhitungan yang lebih kompleks [10]. Sehingga Tujuan dari penelitian ini yaitu mengetahui alur dan kendala pada proses pembayaran SPP SMP Islam Al-Muttaqin dan membuat sebuah desain solusi untuk masalah yang terjadi dengan menerapkan metode Human Centered Design. Diperlukan teknik pengumpulan data yang efektif sebagai tahap awal dalam penelitian. Pengumpulan informasi bisa dilakukan dengan memanfaatkan sumber utama dan sumber tambahan [11]. Observasi adalah pengamatan langsung dengan memakai format tertentu sesuai dengan kebutuhan peneliti. Untuk memudahkan melakukan observasi, diperlukan skenario khusus yang telah disusun sebelumnya oleh peneliti [12]. Wawancara merupakan teknik pengumpulan data yang dilakukan dengan cara mengajukan pertanyaan secara langsung kepada responden tentang beberapa  aspek yang relevan dengan  topik  penelitian.  Wawancara  juga  merupakan  interaksi  dalam  proses  tanya  jawab  antara  narasumber  dan pewawancara untuk memperoleh informasi  [13]. Kuesioner merupakan suatu  teknik pengumpulan data atau informasi melalui  formulir-formulir  yang  berisi  pertanyaan  yang  dapat  ditujukan  ke  seseorang  atau  sekelompok  orang  dalam organisasi  untuk  mendapatkan  tanggapan  atau  jawaban  yang  akan  dianalisis  oleh  pihak  yang  memiliki  suatu  tujuan tertentu[14]. Studi Pustaka merupakan serangkaian kegiatan yang berkenaan dengan metode pengumpulan data pustaka, membaca  dan  mempelajari  materi  yang  terkait  dengan  penelitian  dari  sumber  referensi  yang  terpercaya  seperti  buku, jurnal, e-book , dan situs dari internet untuk mengolah bahan penelitian[15]. Human  Centered  Design  (HCD) merupakan  metode  pengembangan  sistem  yang  bertujuan  untuk  menciptakan sistem yang lebih interaktif dan bermanfaat bagi pengguna . . Metode Human Centered Desig n ini fokus pada pengguna, kebutuhan pengguna, aspek ergonomi, ilmu dan teknik yang berkaitan dengan usability [6] .
Human-Centered Design (HCD) adalah jenis metode yang dapat digunakan untuk memecahkan masalah dengan membawa  perspektif  manusia  ke  dalam  semua  tahapan  proses  pemecahan  masalah .  Human-Centered  Design  (HCD) diimplementasikan selama proses desain untuk mengembangkan solusi untuk suatu masalah dan juga meningkatkan aspek efisiensi, efektifitas, kepuasan pengguna, kenyamanan pengguna dan yang terpenting adalah meningkatkan pengalaman pengguna [16].

## Gambar 2 Human Centered Design
Spesifikasi konteks penggunaan. Dilakukan penggalian informasi detail kepada stakeholder dan pengguna terkait tujuan  perancangan  desain  dan  juga  gambaran  desain  yang  diinginkan  agar  mencapai  keselarasan  antara  tujuan  dan keinginan  [17].  Dilakukan  proses  identifikasi  kebutuhan  pengguna  dan  spesifikasi  fungsional  yang  dibutuhkan[17]. Dalam tahap ini dibutukan user persona dan juga user scenario. User Persona adalah representasi  fiktif dari  persona. Karakter fiksi ini mewakili pengguna produk atau audiens target[18]. User scenario menceritakan bagaimana aktivitas pengguna  yang  menjelaskan  setiap  pekerjaan  yang  dikerjakan  oleh  pengguna  serta  bagaiman  sikap  pengguna  dalam mengerjakannya[19]. Sebelum dilakukan desain, akan dilakukan perancangan activity diagram danjuga usecase diagram. Usecase  Diagram adalah  sebuah  kegiatan  yang  dilakukan  oleh  sistem,  biasanya  dalam  menanggapi  permintaan  dari pengguna  sistem[20].  Gambaran  interaksi  antar  aktor  yang  terdapat  dalam  sebuah  sistem  dengan  menunjukkan keterlibatan komponen setiap aktor sehingga membentuk sebuah interaksi pengguna[21]. Activity Diagram menyediakan sarana untuk menggambarkan perilkau yang terdiri dari kumpulan tugas, seperti operasi algoritma atau alur kerja proses bisnis  secara  grafis.  Sebuah  aktivitas  merepredentasikan  suatu  operasi  pada  beberapa  class  dalam  sistem  yang menghasilkan suatu perubahan keadaan ( state ) dari sistem tersebut . Activity diagram biasa digunakan untuk memodelkan diagram alir sebuah sistem kerja atau proses bisnis[22].
Dalam tahap ini menggunakan program figma untuk membantu  desain user interface . Kegiatan mendesain  dan mengembangkan  sistem  sesuai  dengan  kebutuhan  pengguna  yang  telah  diidentifikasi  dan  dievaluasi[17].  Dalam menghasilkan desain tampilan antarmuka untuk situs web, aplikasi figma berbasis cloud dan sarana prototyping untuk proyek digital. Figma juga program untuk kerjasama antara perancang yang dapat membuat desain bersama-sama. Oleh karena  itu,  keunggulan  dari  figma  dapat  mengirit  waktu[3].  Evaluasi  Desain  Solusi  merupakan  proses  pengujian  dari perspektif pengguna, tujuannya adalah memvalidasi  desain  sesuai  dengan kebutuhan pengguna, sehingga  mengetahui kelebihan dan kekurangan dari sistem yang dibuat[17].
Usability merupakan  salah  satu  bidang  ilmu  untuk  menganalisa  atau  menguji  tingkat  kemudahan  penggunaan perangkat  lunak. Usability atau  yang  sering  dikenal  dengan  kebergunaan  adalah  teknik  pengujian  atau  pengukuran aplikasi  perangkat  lunak  yang  dilihat  dari  lima  aspek  yaitu learnability , efficiency , memorability , errors dan satisfaction [23]. Dalam pengujian menggunakan usability, peneliti mampu mengetahui seberapa besar aspek penerimaan pengguna terhadap aplikasi [24]
Proses pengujian satisfaction diukur dengan menggunakan metode System Usability Scale (SUS) untuk menilai kegunaan dalam suatu produk . SUS merupakan metode pengujian yang melibatkan pengguna akhir atau end-user dalam proses pengerjaannya dan pengujian serta perhitungan yang lebih kompleks [10]
Tabel 1. Nilai Skor Penilaian SUS Skor Nilai (Predikat) Hasil 81-100 A (Sangat Baik) Berhasil 61-80 B (Baik) Berhasil 41-60 C (Rata-rata) Gagal 21-40 D (Layak) Gagal <20 E (Sangat Tidak Layak) Gagal
Pada Tabel  1, terdapat  tingkat  pencapaian atau perolehan yang akan ditetapkan oleh peneliti berdasarkan skala perolehan kuesioner yang ditentukan.
Berdasarkan hasil dari pengujian terhadap calon pengguna akan ditarik sebuah kesimpulan apakah desain ui/ux prototype spp pada SMP Islam Al-Muttaqin sudah bisa memenuhi kebutuhan calon pengguna.

## 2. METODOLOGI PENELITIAN

## 2.1 Tahapan Penelitian
Tahapan Penelitian mencakup langkah-langkah pelaksanaan dari  awal  sampai akhir penelitian ini, adapun langkahnya sebagai berikut :
Gambar 1 Tahapan Penelitian
Langkah-langkah tahapan penelitian

## a.  Pengumpulan Data
Metode dan langkah-langkah untuk memperoleh data yang dipakai dalam penelitian ini meliputi :
1. Observasi (Pengamatan)
Melakukan pengamatan langsung proses pembayaran yang dilakukan oleh bendahara.
2. Interview (Wawancara)
Dalam  konteks  wawancara  ini,  penulis  menjalankannya  dalam  bentuk  wawancara  terstruktur.  Penulis  melakukan wawancara  dengan  narasumber  yang  memiliki  keterlibatan  dalam  proses  Pembayaran  SPP  pada  SMP  Islam  Al- Muttaqin yaitu Ibu Iqtoria Himma Rubayani.
3. Kuesioner
Kuesioner dilakukan dengan memberikan daftar pertanyaan kepada 40 orang responden meliputi 2 Orang Bendahara, 1  Tata  Usaha,  2  Operator  Sekolah,  1  Kepala  Sekolah,  dan  32  Orang  Wali  Siswa  menggunakan  metode likert . Kuesioner disebarkan melalui google forms untuk mendapatkan jawaban dari responden. Tujuan dilakukan kuesioner ini untuk mengidentifikasi masalah terkait Pembayaran SPP pada SMP Islam Al-Muttaqin serta mengetahui seperti apa yang user butuhkan dalam memudahkan proses Pembayaran SPP pada SMP Islam Al-Muttaqin serta mengetahui kebutuhan user nantinya akan dilakukan desain user interface Pembayaran SPP. 4. Studi Pustaka
Melakukan pencarian data yang relevan terhadap sistem yang akan dibangun dan sesuai dengan kebutuhan pustaka.
b.   Penerapan Human Centered Design
1. Spesifikasi Konteks Penggunaan
Tahap  ini  melibatkan  pengumpulan  informasi  dari  calon  pengguna  untuk  mendukung  perancangan  antarmuka pengguna (UI/UX) SPP di SMP Islam Al-Muttaqin. Proses pencarian data ini meliputi penggunaan kuesioner online serta  pelaksanaan  wawancara  dengan  calon  pengguna,  menjalankannya  dalam  bentuk  wawancara  terstruktur,  dan melakukan  wawancara  dengan  narasumber  yang  memiliki  keterlibatan  dalam  proses  Pembayaran  SPP  pada  SMP Islam Al-Muttaqin yaitu Ibu Iqtoria Himma Rubayani, Kuesioner dilakukan dengan memberikan daftar pertanyaan kepada 40 orang responden meliputi 2 Orang Bendahara, 1 Tata Usaha, 2 Operator Sekolah, 1 Kepala Sekolah, dan 32 Orang Wali Siswa menggunakan metode likert . Kuesioner disebarkan melalui google forms untuk mendapatkan jawaban  dari  responden.  Tujuan  dilakukan  kuesioner  ini  untuk  mengidentifikasi  masalah  terkait  Pembayaran  SPP pada  SMP  Islam  Al-Muttaqin  serta  mengetahui  seperti  apa  yang user butuhkan  dalam  memudahkan  proses Pembayaran SPP pada SMP Islam Al-Muttaqin serta mengetahui kebutuhan user nantinya akan dilakukan desain user interface Pembayaran SPP. 2. Spesifikasi Kebutuhan Pengguna
Proses Spesifikasi Kebutuhan Pengguna melibatkan pengenalan terhadap kebutuhan pengguna serta penentuan rincian fungsional yang dibutuhkan. Dalam fase ini, ada rangkaian tindakan untuk mengenali kebutuhan pengguna, termasuk menciptakan  profil  Pengguna  ( User  Persona )  dan  Skenario  Pengguna  ( User  Scenario ). User  Persona )  dihasilkan melalui  data  yang  terkumpul  dari  wawancara  dalam  upaya  pengumpulan  informasi  bersama  pihak  yang  mengurus Sumbangan  Pembinaan  Pendidikan.  Profil  Pengguna  mengilustrasikan  identitas  dan  riwayat  pengguna,  sambil meliputi  permasalahan,  tujuan,  dan  aspirasi  potensial  pengguna  terkait  dengan  hasil  desain.Pada  fase  Skenario
Pengguna,  akan  dijelaskan  situasi  di  mana  permasalahan  muncul  dan  motivasi  di  balik  kebutuhan  perancangan purwarupa  SPP  di  SMP  Islam  Al-Muttaqin.  Skenario  Pengguna  terbentuk  berdasarkan  inspirasi  yang  berasal  dari kondisi, tindakan, serta pandangan yang berhubungan dengan pengalaman yang mungkin akan dihadapi oleh calon pengguna.
3. Pembuatan Desain Solusi
Tahap Perancangan Desain Solusi melibatkan aktivitas seperti pemetaan kerangka, perancangan, dan pengembangan ide  desain  solusi.  Semua  langkah  ini  didasarkan  pada  identifikasi  kebutuhan  yang  telah  ditemukan  dalam  tahap sebelumnya. dilakukan penyusunan sitemap atau pemetaan struktur desain prototype SPP di SMP Islam Al-Muttaqin. Hasil dari tahap ini berupa kerangka desain prototype yang mencakup struktur halaman, fitur-fitur, serta konten yang memberikan  gambaran  keseluruhan  desain.  Tindakan  selanjutnya  melibatkan  penyusunan  urutan  rancangan  desain atau alur pengguna ( userflow ). Pada fase ini, diciptakan serangkaian langkah proses yang akan dipakai oleh pengguna untuk  menjalankan  rancangan  desain  tersebut.  Kemudian  kerangka  tersebut  akan  dikembangkan  menjadi  desain antarmuka pengguna ( user interface ). Proses pembuatan desain antarmuka pengguna melalui beberapa tahapan :
a) Low Fidelity Prototype
Pada  langkah  ini,  akan  dibuat Low-Fidelity  Prototype ,  yang  juga  dikenal  sebagai wireframe . Wireframe merupakan gambaran awal dari antarmuka pengguna, berupa sketsa sederhana yang mengilustrasikan fitur-fitur dan penataan komponen pada setiap halaman. Proses pembuatan wireframe dilaksanakan menggunakan alat desain Figma.
b) High Fidelity Prototype
Setelah  tahap  perancangan wireframe selesai,  tindakan  berikutnya  adalah  mengembangkannya  menjadi High- Fidelity Prototype , yang juga dikenal sebagai mockup . Pada fase ini, desain tampilan aplikasi akan dirinci lebih lanjut dan didekati ke tampilan akhir produk. Proses desain ini melibatkan penerapan elemen-elemen desain sistem dan sumber daya yang sudah disiapkan, seperti palet warna, jenis huruf, ikon, dan gambar. Tambahan pula, desain ini  akan  diwujudkan  menjadi  prototipe  interaktif,  sehingga  desain  tersebut  bisa  dioperasikan  dan  memberikan pengalaman yang hampir serupa dengan produk yang sudah jadi.
4. Evaluasi Desain Solusi
Penilaian terhadap solusi desain merupakan tahapan akhir dalam pendekatan Human Centered Design (HCD), di mana proses  evaluasi  dilakukan  untuk  menguji  sistem  dan  mengukur  kepuasan  pengguna  yang  telah  dibangun  dalam langkah-langkah  sebelumnya.  Dalam  pengujian,  analisis  dilakukan  melalui  penggunaan usability  testing untuk mengukur tingkat kegunaan dari desain  yang telah dibuat, sehingga kelemahan-kelemahan dapat  diidentifikasi  dan diperbaiki. Pengujian ini berfokus pada perspektif pengguna dan melibatkan responden yang menguji prototype yang telah  dirancang.  Aspek-aspek  yang  diuji  dalam  penelitian  ini  meliputi  efektivitas,  kemudahan  pemahaman ( learnability ), dan tingkat kepuasan yang dirasakan oleh pengguna. Tahap evaluasi desain solusi melibatkan beberapa langkah yang perlu dilakukan.
Tahap  awal  melibatkan  pemilihan  responden,  yang  memiliki  peranan  krusial  dalam  proses  pengujian  kegunaan . Responden pada penelitian ini 40 responden meliputi Kepala Sekolah 1 orang, Bendahara 2 orang, Tata Usaha 1 orang, Operator Sekolah 2 orang, dan Wali Siswa 32 orang.
Langkah berikutnya melibatkan penyusunan tugas pengujian, yang nantinya akan diberikan kepada responden saat proses pengujian. Tugas-tugas ini dirancang berdasarkan fungsi-fungsi utama yang terdapat dalam desain prototype . Responden  melakukan  pengujian  dengan  melaksanakan  berbagai  tugas  yang  telah  ditetapkan  pada interactive prototype yang telah dibuat menggunakan Figma. Pengujian ini menggunakan metode Usability Testing dan System Usability Scale (SUS) :
a) Usability Testing
Metode usability testing yang diaplikasikan dalam  penelitian ini digunakan untuk  mengukur tingkat  efektivitas dan kemudahan pemahaman (learnability ) dari desain prototype :
1) Effectifiness ,  dinilai  dengan  mengidentifikasi  tugas-tugas  yang  berhasil  diselesaikan  dengan  berhasil  serta tugas-tugas  yang  tidak  dapat  ditemukan  solusinya  oleh  responden  saat  berinteraksi  dengan  rancangan prototype .
2) Learnability , dievaluasi dengan mengukur sejauh mana kemudahan dalam mempelajari desain oleh pengguna saat  pertama  kali  digunakan.  Penilaian  terhadap  aspek  kemampuan  dipelajari  ini  dilaksanakan  melalui pengumpulan  data  menggunakan  kuesioner  penilaian  kemampuan  dipelajari  yang  diserahkan  kepada  setiap responden setelah mereka menguji dan berinteraksi dengan rancangan prototype .
b) System Usability Scale (SUS)
System  Usability  Scale (SUS)  diterapkan  untuk  mengevaluasi  tingkat  kepuasan  pengguna  melalui  pengisian kuesioner  SUS  yang  mengandung  10  pertanyaan  yang  telah  disiapkan  sebelumnya.  Kuesioner  ini  diisi  oleh responden setelah mereka berpartisipasi dalam pengujian dan berinteraksi dengan rancangan prototype.
5. Analisis Hasil
Langkah terakhir dalam fase evaluasi  solusi  desain adalah menganalisis hasil pengujian. Setelah data yang relevan terkumpul  dari  tahap-tahap  sebelumnya,  tindakan  berikutnya  melibatkan  analisis  dan  pembuatan  kesimpulan berdasarkan hasil pengujian tersebut. Di bawah ini terdapat panduan umum mengenai skala nilai yang dipakai dalam penilaian kemanfaatan.

## 3. HASIL DAN PEMBAHASAN
.

## 3.1 Perancangan Metode Human Centered Design
a. Spesifikasi Konteks Penggunaan
Tahapan Pemahaman dan Spesifikasi Konteks Penggunaan merupakan proses pengumpulan data. Tahap pertama yaitu melakukan proses User Research.User Research merupakan proses pengumpulan data dari calon pengguna yang bertujuan untuk menggali informasi dalam perancangan UI/UX SPP Islam Al-Muttaqin .
b. Spesifikasi Kebutuhan Pengguna
a) User Persona
User Persona  didapatkan  dari  hasil  wawancara  pada  proses User  Research yang  dilakukan  kepada  pengelola  SPP SMP Islam Al-Muttaqin yaitu Ibu Iqtoria Himma Rubbayani selaku Bendahara. User Persona menjelaskan identitas dan  latar  belakang  pengguna,  serta  masalah  yang  ada harus  mencari  data  siswa  di  buku  besar  yang  memakan  waktu , penyalinan  data  dilakukan  berulang-ulang  sehingga  terjadi  data  tidak  sinkron  dengan  buku  SPP,  dengan  tujuan melakukan pencatatan dan pembayaran SPP dengan mudah dan praktis, dapat mempercepat proses administrasi, dapat lebih mudah dalam menyusun laporan, dan harapan meningkatkan pelayanan,pekerjaan cepat selesai, memanfaatkan teknologi secara baik
2. User Scenario
User Scenario berisi latar belakang masalah dan juga kebutuhan perancangan desain User Interface Pembayaran SPP SMP Islam Al-Muttaqin. User Scenario disusun berdasarkan kondisi, perilaku, dan sikap yang sesuai dengan keadaan yang terjadi pada calon  pengguna. Iqtoria Himma Rubayani  adalah salah satu  Bendahara SMP Islam  Al-Muttaqin. Tugas yang dikerjakan merupakan melakukan pencatatan dan melakukan proses pembayaran SPP Siswa. Pencatatan dilakukan setiap bulan untuk proses Pembayaran SPP, pada proses pencatatan dan pembayaran SPP. Ibu Iqtoria harus melakukan  pengecekan  kartu  SPP  siswa  dengan  buku  besar  agar  tidak  mengalami  kesalahan  data,  hal  ini  cukup memakan  waktu  dikarenakan  harus  mencari  data  siswa  secara  manual  di  buku  besar.  Selanjutnya  melakukan penyalinan data yang berulang yaitu dari kartu SPP siswa ke dalam buku besar untuk dijadikan laporan pembayan atau rekap.
c. Membuat Desain Solusi
1. Usecase Diagram
Pada gambar 3 diatas menunjukan terdapat beberapa actor, yaitu ada Bendahara (Petugas), Tata Usaha (Admin), dan  Wali  Siswa.  Admin  dapat  melihat  dan  mengunduh  laporan,  mengelola  data  siswa,  mengelola  data  admin, mengelola  data  kelas,  melihat  tunggakan,  melihat  riwayat  pembayaran,  sedangkan  Bendahara  atau  petugas  dapat
mengunduh laporan, melihat daftar siswa, melihat tunggakan SPP, mengelola pembayaran SPP, dan melihat iwayat pembayaran,  kemudian  wali  siswa  dapat  melihat  tunggakan,  melakukan  pembayaran,  dan  melihat  riwayat pembayaran.
2. Activity Diagram
Gambar 4 Activity Diagram Pembayaran SPP
Pada gambar 4 menjelaskan sebuah activity diagram petugas menjelaskan sebuah alur kerja sebuah proses dalam mengelola pembayaran spp 3. Prototyping
Pada tahapan ini peneliti menuangkan ide dan solusi kedalam bentuk prototype . Pembuatan prototype berguna untuk memfasilitasi  peneliti  dalam  memperoleh  tanggapan  dari  pengguna  terkait  interaksi  mereka  dengan prototype . Tanggapan dan respons tersebut dijadikan sebagai acuan oleh peneliti dalam melakukan perbaikan sehingga tetap bisa memenuhi kebutuhan dan keinginan pengguna. Perancangan prototype dilakukan menggunakan tools Figma. Adapun berikut merupakan hasil dari perancangan prototype menggunakan Figma :
a) Halaman Login
Pada Gambar 5, terdapat halaman login , user diharuskan memasukan username dan juga password untuk masuk ke halaman utama.
b) Halaman Beranda

## Gambar 6 Mockup Halaman Beranda
Pada Gambar 6, terdapat halaman beranda yang berisi beberapa menu di sebelah kiri dan pada beranda terdapat menu Data Siswa, Daftar Tunggakan dan Laporan Pencatatan
c) Halaman Data Siswa
Gambar 7. Mockup Halaman Data Siswa
Pada Gambar 7. terdapat halaman data siswa yang berisi data identitas semua siswa dari kelas 7 sampai kelas 9 4. Halaman Tunggakan SPP
Gambar 8 Mockup Halaman Tunggakan SPP Pada Gambar 8, terdapat halaman tunggakan spp, tertera nama-nama siswa yang masih mempunyai tunggakan dan belum lunas 5. Halaman Pembayaran SPP
Pada Gambar 9, terdapat halaman pembayaran spp, button untuk melakukan pembayaran spp, dapat dilakukan proses pembayaran spp.

## 6. Halaman Riwayat Pembayaran
Gambar 10 Mockup Halaman Riwayat Pembayaran
Pada Gambar 10, terdapat halaman riwayat pembayaran, mempunyai fitur dapat melihat riwayat pembayaran secara detail meliputi tanggal bayar, jenis pembayaran dll.

## 3.2 Pengujian Usability
Hasil  dari  pengujian  yang  sudah  didapatkan  menggambarkan  bagaimana  nilai  tiga  aspek usability yaitu effectifiness , learnability , dan satisfaction yang diukur pada desain ui/ux interface SPP pada SMP Islam Al-Muttaqin. Dalam penilaian effectifiness antar  muka  pengguna  dilakukan  dengan  mengidentifikasi  keberhasilan  responden  dalam  melakukan  tugas sesuai dengan petunjuk yang telah diberikan. Untuk penilaian learnability interface dilakukan dengan menghitung nilai persentase  kuesioner learnability ,  dan  penilaian satisfaction  interface dilakukan  dengan  menghitung  nilai  persentase kuesioner SUS. Dari hasil pengujian terhadap responden, dalam penghitungan hasil dilakukan dengan menggantikan tugas yang berhasil diselesaikan atau memberikan jawaban “Ya” atau angka 1 (satu) dan angka 0 (nol) untuk responden yang memberikan jawaban “Tidak”.
a. Effectifiness
Dalam  proses  pengujian,  responden  tidak  menemukan  kesulitan  yang  berarti  dalam  menyelesaikan  tugas  yang diberikan. Pada tabel dibawah menunjukan tingkat penyelesaian tugas yang diberikan kepada responden selama pengujian
Tabel 4 Hasil Effectifiness Keseluruhan Effectifiness Skor Admin 100% Petugas 92% Wali Siswa 86% Skor Keseluruhan 93%
Berdasarkan tabel 4 diatas, hasil pengujian pada aspek Effectifiness yang dilakukan oleh Admin mendaatkan skor 100%, Petugas mendapatkan skor 92%, Wali Siswa mendapatkanskor 86% dan Skor Keseluruhan Effectifiness sebesar 93%  Sehingga  hasil  tersebut  menunjukan  bahwa  aspek Effectifiness pada  desain ui/ux SPP  SMP  Islam  Al-Muttaqin dinyatakan berhasil.
b. Learnability
Pada tabel dibawah ini menunjukan hasil pengisian kuesioner learnability yang diberikan kepada responden selama pengujian.
Tabel 5 Hasil Pengujian Learnability Responden Pernyataan 1 2 3 4 5 1 1 1 1 1 1 2 1 1 1 1 1 3 1 0 1 1 1 4 1 1 0 1 1
5 1 1 1 1 1 …. …. …. …. …. …. 40 1 1 1 1 1 Jumlah 38 32 29 40 40 Skor % Ya 95%  80%  73%  100%  100% Tidak 5%  20%  28% 0% 0% Skor  Rata-rata 90%
Berdasarkan tabel 5 diatas, hasil pengujian pada aspek learnability yang dilakukan oleh semua calon pengguna mendapatkan skor 90% . Hasil tersebut menunjukan bahwa aspek learnability pada Desain UI/UX SPP pada SMP Islam Al-Muttaqin dapat dinyatakan berhasil.
c. Satisfaction
Untuk  menganalisa usability dalam  aspek satisfaction ,  dilakukan  pemeriksaan  dengan  kuesioner  SUS  yang diberikan kepada setiap responden .
Tabel 6 Hasil Perhitungan Skor SUS Responden Skor Penilaian Skor Skor x 2.5 Q1  Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10 1 5 3 4 3 5 3 5 2 5 4 39 97,5 2 5 2 4 3 4 2 5 2 5 3 35 87,5 3 5 5 5 3 4 3 3 1 4 3 36
90
4 5 3 5 3 5 2 4 1 4 3 35 87,5 5 3 2 3 4 4 2 3 3 4 4 32 80 … ….  ….  ….  ….  ….  ….  ….  ….  …. …. …. …. 40 5 1 5 4 4 2 4 2 5 3 35 87,5 Jumlah Skor SUS 3487,5 Rata-rata Skor SUS 87,8%
Berdasarkan Tabel 6, hasil SUS yang sudah dihitung, hasil tersebut menandakan hampir semua user puas dengan apa yang dapat dikerjakan oleh hasil desain tersebut.

## 3.3 Analisa Hasil Pengujian
Aspek effectifiness berhubungan  langsung  dengan  tingkat  kesuksesan  mencapai  tujuan  dari  hasil  desain  ini,  secara keseluruhan pemahaman responden terhadap aspek ini sangat baik. Sedangkan learnability adalah aspek yang berkaitan dengan  tingkat  kemudahan  yang  diperoleh user dalam  menyelesaikan  permasalahan  yang  ada  serta  kemudahan  untuk dimengerti. Secara keseluruhan pemahaman dari responden terhadap penggunaan desain ui/ux SPP pada SMP Islam Al- Muttaqin sangat baik dan aspek satisfaction berhubungan dengan tingkat kepuasan pengguna, dimana secara keseluruhan tingkat kepuasan dalam penggunaan desain ui/ux SPP pada SMP Islam Al-Muttaqin sangat baik.
Hasil perhitungan dari rata-rata tiap aspek usability diperoleh dari pembagian jumlah tiap nilai aspek yang dihitung melalui pengerjaan tugas dan jumlah pernyataan. Hasil dari rata-rata tersebut disajikan sebagai berikut:
Tabel 7 Hasil Perhitungan Usability Jenis Pengujian Skor Effectifiness 93% Learnability 90% Satisfaction (SUS) 87,8% Skor Rata-rata % 90%
Pada  tabel  7,  Dengan  persamaan  yang  digunakan  untuk  mengukur  nilai usability diperoleh  bahwa  secara keseluruhan skor usability Desain UI/UX SPP pada SMP Islam Al-Muttaqin pada effectifiness mendapatkan skor sebesar 93%, pada learnability mendapatkan skor 90%, dan pada satisfaction mendapatkan skor 87,8%. Menurut tabel 1 Bahwa kisaran skor 81-100 % menunjukan hasil yang sangat baik dan dinyatakan berhasil.

## 4. KESIMPULAN
Berdasarkan hasil yang diperoleh dari setiap tahapan metode Human Centered Design yang sudah dikerjakan pada Desain UI/UX SPP pada SMP Islam Al-Muttaqin, dapat diperoleh beberapa kesimpulan.  Hasil usability yang telah dilakukan terhadap Desain UI/UX SPP pada SMP Islam Al-Muttaqin yang telah di desain yaitu pada effectifiness mendapatkan skor sebesar  93%,  pada learnability mendapatkan  skor  90%,  dan  pada satisfaction mendapatkan  skor  87,8%.  Ketiga  hasil terebut menunjukan hasil yang sangat baik dan dinyatakan berhasil. Desain UI/UX SPP pada SMP Islam Al-Muttaqin yang  dirancang  dapat  disimpulkan  bahwa  telah  memenuhi  kebutuhan  pengguna,  yaitu  akan  memudahkan  proses pencatatan  dan  proses  pembayaran  SPP.  Proses  pencatatan  dan  pembayaran  SPP  akan  lebih  cepat  ,  akan  mengurangi kesalahan pencatatan, pengulangan pencatatan, data hilang, dan membuat hasil pencatatan lebih akurat. Setelah  dilakukan  penelitian  mengenai  Desain  UI/UX  pada  SMP  Islam  Al-Muttaqin  mengunakan  Metode Human Centered Design (HCD), diperlukan penelitian lanjutan agar desain dapat dikembangkan lebih lanjut dan dibuat sebuah program aplikasi yang lebih optimal, Dikembangkan lebih jauh lagi ke penerapan program aplikasi dengan menambahkan teknologi  yang baru atau menmabahkan fitur-fitur lainnya. Melakukan pengujian usability terhadap aspek-aspek yang lain seperti efficiency , memorability , dan lainnya, agar mendapatkan masukan-masukan yang baru

## REFERENCES
[1] M.  Iqbal,  “Pemasaran  Jasa  Pendidikan  dan  Implementasinya  sebagai  Strategi  Pengembangan  Pendidikan  di  SMP Muhammadiyah  1  Depok  Sleman  Yogyakarta,” Manag.  J.  Manaj.  Pendidik.  Islam ,  vol.  4,  no.  1,  pp.  127–146,  2019,  doi: 10.14421/manageria.2019.41-08.
[2] Y.  Pamungkas,  “Sistem  Informasi  Sumbangan  Pembinaan  Pendidikan  (SPP)  Berbasis  Website  Pada  SMK  Mandalahayu Bekasi.,” vol. 6, pp. 58–64,2019,[Online].Available:
http://repository.ubharajaya.ac.id/2398/%0Ahttp://repository.ubharajaya.ac.id/2398/1/201510225138_Yoga Pamungkas_Cover-Daftar Isi.pdf
[3] H. Dafitri, E. Panggabean, N. Wulan, and ..., “Pelatihan Pembuatan Desain UI/UX Website UMKM Profile Labscarpe dengan Aplikasi  Figma:  Pelatihan  Desain  UI/UX  Website  UMKM,” J.  Pengabdi.  … ,  vol.  3,  no.  2,  pp.  1972–1980,  2023,  [Online]. Available: http://ejournal.sisfokomtek.org/index.php/jpkm/article/view/718%0Ahttps://ejournal.sisfokomtek.org/index.php/jpkm/article/d ownload/718/545
[4] I. N. Arifin, H. Tolle, and R. I. Rokhmawati, “Evaluasi dan Perancangan User Interface untuk Meningkatkan User Experience menggunakan Metode Human-Centered Design dan Heuristic Evaluation pada Aplikasi Ezyschool,” J. Pengemb. Teknlogi Inf. dan Ilmu Komput. , vol. 3, no. 2, pp. 1725–1732, 2019.
[5] K. R. Carisfian, A. P. Kharisma, and T. Afirianto, “Perancangan User Experience Aplikasi Informasi Lomba Karya Tulis Ilmiah Mahasiswa Menggunakan Metode Human-Centered Design,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 3, no. 9, pp. 8723– 8731, 2019.
[6] Y. Firantoko, H. Tolle, and H. M. Az-zahra, “Perancangan User Experience Dengan Menggunakan Metode Human Centered Design Untuk Aplikasi Info Calon Anggota Legislatif 2019,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 3, no. 3, pp. 2798– 2806, 2019.
[7] M. A. Humanika, G. P. Mahardhika, and H. Setiaji, “Perancangan Tampilan Antarmuka Website Trisno Motor Menggunakan Pendekatan HCD (Human-Centered Design),” Automata ,vol. 2, no. 2, 2021, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/19537
[8] C. H. Fitri and F. Rahma, “Evaluasi dan perbaikan Tampilan Desain Antarmuka pengguna Web Jogja Center dengan Metode Human-Centered Design,” Automata , 2022, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/21921
[9] A.  S.  Wibawa,  R.  I.  Rokhmawati,  and  H.  M.  Az-Zahra,  “Perancangan  Antarmuka  Pengguna  Aplikasi  Leson  menggunakan Metode Human-Centered Design (HCD),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 5, no. 12, pp. 5497–5504, 2021, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/10269/4581
[10]  I.  Salamah,  “Evaluasi  Usability  Website  Polsri  Dengan  Menggunakan  System  Usability  Scale,”  vol.  8,  pp.  176–183,  2019, [Online]. Available: https://ejournal.undiksha.ac.id/index.php/janapati/article/view/17311/pdf
[11]  F. Jamil, R. Mukhaiyar,  and I. Husnaini, “Kajian Literatur Rekonstruksi Mata Kuliah (Studi Kasus Mata Kuliah Pengolahan Sinyal  Teknik  Elektro  UNP),” JTEV  (Jurnal  Tek.  Elektro  dan  Vokasional) ,  vol.  6,  no.  2,  p.  198,  2020,  doi: 10.24036/jtev.v6i2.108742.
[12]  G. M. M.Si, “Peningkatan Hasil Belajar Menyusun Teks Laporan Hasil Observasi Pada Peserta Didik Kelas X Sman 7 Malang Dengan  Model  Pembelajaran  Integratif,” JINoP  (Jurnal  Inov.  Pembelajaran) ,  vol.  5,  no.  1,  p.  39,  2019,  doi: 10.22219/jinop.v5i1.7244.
[13]  R. Yudiantara, N. budi pamungkas, and Mg. An, “Sistem Penilaian Rapor Peserta  Didik Berbasis Web Secara Multiuser,” J. Inform. dan Rekayasa Perangkat Lunak , vol. 2, no. 4, pp. 447–453, 2021, [Online]. Available: http://jim.teknokrat.ac.id/index.php/informatika
[14]  K. N. Cahyo, Martini, and E. Riana, “Perancangan Sistem Informasi Pengelolaan Kuesioner Pelatihan pada PT Brainmatics Cipta Informatika,” J.  Inf.  Syst.  Res. ,  vol.  1,  no.  1,  pp.  45–53,  2019,  [Online].  Available:  http://ejurnal.seminar- id.com/index.php/josh/article/view/44
[15]  A. Apiyani, Y. Supriani, S. Kuswandi, and O. Arifudin, “Implementasi Pengembangan Keprofesian Berkelanjutan (PKB) Guru Madrasah  Dalam  Meningkatkan  Keprofesian,” JIIP  -  J.  Ilm.  Ilmu  Pendidik. ,  vol.  5,  no.  2,  pp.  499–504,  2022,  doi: 10.54371/jiip.v5i2.443.
[16]  V. Tasril, M. Zen, E. S. Fitriani, A. D. Putra, U. Pembangunan, and P. Budi, “Desain ui/ux prototipe pembelajaran berbasis game kosakata bahasa inggris dengan metode hcd ui/ux design of english vocabulary game-based learning prototype using the hcd method,” vol. 6, pp. 1–8, 2023.
[17]  E.  Putu  Ramayasa,  M.  Azman  Maricar,  “PENGEMBANGAN  PROTOTYPE  APLIKASI  POINT  OF  SALES  DENGAN MENGGUNAKAN  USER  CENTERED,”  vol.  04,  no.  02,  pp.  176–181,  2022,  [Online].  Available: https://www.naratif.sttbandung.ac.id/index.php/naratif/article/view/167/91
[18]  M. Z. Kurniawan, D. Y. Wijaya, and A. Purnawan, “Elisitasi Kebutuhan Sistem Absensi InfoKHS Menggunakan User Persona,” vol. 10, no. 1, pp. 62–71, 2022, [Online]. Available: http://ejournal.unis.ac.id/index.php/jutis/article/view/2674/1645
[19]  I. Teknologi, K. Angelina, E. Sutomo, and V. Nurcahyawati, “Jurnal Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan  Bisnis  menggunakan  Pendekatan  Design  Thinking  using  Design  Thinking  Approach,”  vol.  5,  pp.  70–78,  2023, [Online]. Available: http://www.jurnal.plb.ac.id/index.php/tematik/article/view/915/464
[20]  E.  Triandini  and  I.  G.  Suardika, Step  by  Step  Desain  Proyek  Menggunakan  UML .  Penerbit  Andi.  [Online].  Available: https://books.google.co.id/books?id=3OlRBbSZq24C
[21]  A. Herdiyanto and N. Normalisa, “Perancangan Sistem Informasi Akademik SMPN I Tajurhalang,” J. Eng. Technol. Appl. Sci. , vol. 1, no. 1, pp. 1–18, 2020, doi: 10.36079/lamintang.jetas-0101.90.
[22]  M. T. I. Dr. Henderi Dr. Untung Rahardja Efana Rahwanto, UML POWERED DESIGN SYSTEM USING VISUAL PARADIGM . CV Literasi Nusantara Abadi, 2022. [Online]. Available: https://books.google.co.id/books?id=Dn9XEAAAQBAJ
[23]  U. Ependi, T. B. Kurniawan, and F. Panjaitan, “System Usability Scale Vs Heuristic Evaluation: a Review,” Simetris J. Tek. Mesin, Elektro dan Ilmu Komput. , vol. 10, no. 1, pp. 65–74, 2019, doi: 10.24176/simet.v10i1.2725.
[24]  M. Prabowo and A. Suprapto, “Usability Testing pada Sistem Informasi Akademik IAIN Salatiga Mengunakan Metode System Usability Scale,” JISKA (Jurnal Inform. Sunan Kalijaga) , vol. 6, no. 1, pp. 38–49, 2021, doi: 10.14421/jiska.2021.61-05.