Desain UI/UX Prototype SPP pada SMP Islam AlMuttaqin Metode Human Centered Design

• WAHYU MUSLIMIN

---

ABSTRAK

ABSTRAK

Wahyu Muslimin (11220412), Desain UI/UX Prototype SPP pada SMP Islam AlMuttaqin Metode Human Centered Design

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 79%, dari hasil data pengujian tersebut dinyatakan berhasil. Proses pencatatan dan pembayaran SPP akan lebih cepat akan mengurangi kesalahan pencatatan, pengulangan pencatatan, data hilang, dan membuat hasil pencatatan lebih akurat.

KATA KUNCI

Prototype,SPP,Metode Human Centered Design,Figma,Usability

---

DAFTAR PUSTAKA

DAFTAR PUSTAKA

[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] E. R. Y. Tubagus Farhan Baehaqi, “Sistem Informasi Sumbangan Pembinaan Pendidikan (SPP) Berbasis Website,” vol. 6, pp. 58–64, 2019, [Online]. Available:http://repository.ubharajaya.ac.id/2398/%0Ahttp://repository.ubha rajaya.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/arti cle/download/718/545

[4] 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.

[5] 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.

[6] 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

[7] 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

[8] 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.

[9] I. P. Ramayasa, M. A. Maricar, and Edwar, “Pengembangan Prototype Aplikasi Point of Sales Dengan Menggunakan User Centered Design,” Naratif J. Nas. Riset, Apl. dan Tek. Inform., vol. 4, no. 2, pp. 176–181, 2022, doi: 10.53580/naratif.v4i2.167. 89

[10] 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, [Online]. Available: https://jptiik.ub.ac.id/index.php/j-ptiik/article/view/4795/2233

[11] B. B. Wahyujati, “Metode Perancangan: Rangkuman Teori Dan Aplikasi.” p. 66, 2021.

[12] V. Tasril, M. Zen, E. S. Fitriani, and A. D. Putra, “Desain UI/UX Prototipe Pembelajaran Berbasis Game Kosakata Bahasa Inggris Dengan Metode HCD,” J. Inf. Technol. Comput. Sci., vol. 6, no. 1, pp. 1–8, 2023, [Online]. Available: https://journal.ipm2kpe.or.id/index.php/INTECOM/article/view/5527

[13] 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/v iew/2674/1645

[14] K. Angelina, E. Sutomo, and V. Nurcahyawati, “Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking,” Tematik, vol. 9, no. 1, pp. 70–78, 2022, doi: 10.38204/tematik.v9i1.915.

[15] S. Kasus, C. V Cns, and C. Niaga, “Perancangan User Experience Aplikasi Mobile MECHANIC (Vehicle Maintenance Report) menggunakan Metode Design Thinking,” vol. 6, no. 10, pp. 5064–5072, 2022, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/11767/5228

[16] N. Febyla, A. Zubaidi, and I. Wulandari, “Analisis dan Perbaikan Tampilan Sistem Informasi Dewan Perwakilan Rakyat Daerah Provinsi Nusa Tenggara Barat Berbasis Website Menggunakan Figma (Analysis and Improvement of Information System Display of the Regional People ’ s Representative Council of N,” vol. 3, no. 2, pp. 273–284, 2022, [Online]. Available: http://begawe.unram.ac.id/index.php/JBTI/article/view/821/144

[17] M. S. Hartawan, “Penerapan User Centered Design (UCD) Pada Wireframe Desain User Interface Dan User Experience Aplikasi Sinopsis Film,” JEIS J. Elektro dan Inform. Swadarma, vol. 2, no. 1, pp. 43–47, 2022, [Online]. Available:http://ejurnal.swadharma.ac.id/index.php/jeis/article/view/161/131

[18] J. Digital, Desain UI/UX dengan Figma dari Nol. Jubilee Digital, 2023.

[19] A. Rianti, A. Pangestu, and M. F. Nurfauzan, “Perancangan Prototype Aplikasi EFORKID sebagai Media Pembelajaran Bahasa Inggris untuk Anakanak,”vol.7,2022[Online].Available:https://journal.unusida.ac.id/index.php/j ik/article/view/503/407 90

[20] A. N. P. Pungky Indra Permana, Pemrograman Web dan Perangkat Bergerak SMK/MAK Kelas XII. Gramedia Widiasarana indonesia, 2021.

[21] R. A. Malik and M. R. Frimadani, Lean UX: Pemahaman dan Penerapan Metodologi Desain UI yang Efektif. Jejak Pustaka, 2023.

[22] 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.

[23] M. T. I. Dr. Henderi Dr. Untung Rahardja Efana Rahwanto, UML Powered Design System Using Visual Paradigm. CV Literasi Nusantara Abadi, 2022.

[24] 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.

[25] 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.

[26] 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

[27] H. Hadiwijaya and D. T. Octafian, Pengukuran User Interface (UI) Dan User Experience (UX): E-School Filial LPKA Kelas I Palembang. Penerbit NEM, 2021.

[28] S. Nurbaiti Oktaviani, C. Fikri Aziz, and B. Maula Sulthon, “Analisa UI/UX Sistem Informasi Penjualan Berbasis Mobile Menggunakan Metode Prototype,” KLIK Kaji. Ilm. Inform. dan Komput., vol. 2, no. 6, pp. 225–233, 2022, doi: 10.30865/klik.v2i6.401.

[29] 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,[Online].Available:https://jptiik.ub.ac.id/index.php/jptiik/article/view/4 556/2092

[30] 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, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/6260/3005 91

[31] M. A. Humanika, G. P. Mahardhika, and H. Setiaji, “Perancangan Tampilan Antarmuka Website Trisno Motor Menggunakan Pendekatan HCD (HumanCentered Design),” Automata, vol. 2, no. 2, 2021, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/19537

[32] 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

[33] A. S. Wibawa, R. I. Rokhmawati, and H. M. Az-Zahra, “Perancangan Antarmuka Pengguna Aplikasi Leson menggunakan Metode HumanCentered Design (HCD),” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 5, no. 12, pp. 5497–5504, 2021, [Online]. Available: https://jptiik.ub.ac.id/index.php/j-ptiik/article/view/10269/4581