## Perancangan UI/UX Pendaftaran Siswa Baru Dengan Metode User Centered Design Pada Sekolah Smp Islam Al-Muttaqin
Diki Ardi Junanda 1 , Yunita 2
1,2 Teknik Informatika, Universitas Nusa Mandiri Jl. Kamal Raya No. 18, RT.1/RW.6, Ring Road Barat, Cengkareng Barat,, Indonesia e-mail: 1 dikiardijunanda20@gmail.com, 2 Yunita.yut@nusamandiri.com
Abstrak -  Proses  pendaftaran  siswa  baru  adalah  kegiatan  yang  dilaksanakan  setiap  tahun  oleh  sekolah  negeri maupun  swasta,  saat  ini  pendaftaran  siswa  baru  banyak  dilakukan  secara  online  berguna  untuk  mempermudah akses  informasi  penerimaan  siswa  baru.  Tidak  terkecuali  SMP  ISLAM  AL-MUTTAQIN  yang  masih menggunakan  media  offline  dengan  mengisi  formulir  yang  disediakan  oleh  panitia.  Oleh  sebab  itu  penulis membuat rancangan aplikasi UI/UX pendaftaran siswa berbasis mobile yang bernama My Muttaqin serta membuat rancangan  website  admin  untuk  mengelola  aplikasi  pengguna  My  Muttaqin.  Digunakan  metode  User  Centered Design  (UCD)  untuk  membantu  pengguna  agar  dapat  menghasilkan  user  interface  yang  efisien  dan  mudah dimengerti oleh pengguna dan menghasilkan user ecperience yang memberi pengalaman terbaik bagi pengguna saat menggunakan aplikasi. Untuk mengetahui tingkat kepuasan pengguna dilakukan usability testing (pengujian kegunaan) dengan memberikan kuesioner kepada calon pengguna aplikasi My Muttaqin yaitu siswa kelas 7 dan user persona adalah 5 guru SMP ISLAM AL-MUTTAQIN. Hasil usability testing yang telah dilakukan kepada siswa memiliki nilai rata-rata skor 81, dan hasil usability testing yang dilakukan kepada user persona memiliki nilai  rata-rata  skor  89,  Artinya  hasil  kedua  skor  tersebut  memiliki  grade  scale  B  dengan  perhitungan  System Usability Scale (SUS).
Kata Kunci: Pendaftaran Siswa , UI/UX, UCD, SUS
Abstract - The process of registering new students is an activity carried out every year by public and private  schools,  currently  registering  new  students  is  mostly  done  online,  which  is  useful  for facilitating  access  to  new  student  admission  information.  SMP  ISLAM  AL-MUTTAQIN  is  no exception, which still uses offline media by filling out forms provided by the committee. Therefore, the author designs a mobile-based student registration UI/UX application called My Muttaqin and designs an admin website to manage the My Muttaqin user application. The User Centered Design (UCD)  method  is  used  to  help  users  to  produce  user  interfaces  that  are  efficient  and  easy  to understand by users and produce user experiences that provide the best experience for users when using the application. To determine the level of user satisfaction, usability testing was carried out by  giving  questionnaires  to  potential  users  of  the  My  Muttaqin  application,  namely  7th  grade students and user personas are 5 teachers of SMP ISLAM AL-MUTTAQIN. The results of usability testing  that  has  been  done  to  students  have  an  average  score  of  81,  and  the  results  of  usability testing conducted to user personas have an average score of 89, meaning that the results of the two scores have a grade scale B with the calculation of the System Usability Scale (SUS).
Keywords: Student Registration, UI/UX, UCD, SUS

## PENDAHULUAN
Proses  Penerimaan  Peserta  Didik  Baru (PPDB) merupakan suatu kegiatan yang dilakukan setiap  tahun  sebelum  sekolah  negeri  dan  swasta memulai  kelas  baru  (Made,  D.,  Putra,  D.  U., Mahendra, G. S., & Mulyadi, E. 2022). Seperti yang kita ketahui, proses penerimaan calon siswa baru di
indonesia  didasarkan  usia  dan  kemampuan  siswa untuk  memfasilitasi  pembelajaran.  Pelaksanaan proses  penerimaan  calon  siswa  baru,  yaitu  seleksi calon  siswa  dengan  kualifikasi  akademik  untuk mengikuti pendidikan pada periode yang ditentukan.
Pendaftaran siswa baru merupakan kegiatan rutin  di  setiap  sekolah  selama  tahun  ajaran  baru
(Arum Ningtyas, D., Badrul, M., Nur Sulistyowati, D.  2018).  Hingga  saat  ini  banyak  sekolah  di indonesia  yang  belum  mengenalkan  proses penerimaan siswa baru secara online, salah satunya adalah SMP ISLAM AL-MUTTAQIN.
SMP  ISLAM  AL-MUTTAQIN  merupakan sekolah  swasta  menengah  pertama  yang  berada  di jalan  Kapuk  Muara  Raya  No.10,  RT.10/RW.4, Jakarta Utara dimana setiap tahun ajaran baru selalu menyiapkan  kegiatan  baru  untuk  penerimaan. Pelayanan yang cepat dan efisien tentunya menjadi keinginan  orang  tua  wali  murid  dalam  melakukan pendaftaran  sekolah.  Masalah  penerimaan  siswa baru  di  SMP  ISLAM  AL-MUTTAQIN  masih dengan  cara  manual  yaitu  mengisi  formulir pendaftaran.  Kekurangan  dalam  mengisi  formulir secara manual yaitu terdapat masalah penyimpanan, rawan  kerusakan  fisik,  ketidakefisiensi  dalam transfer data, serta menggunakan tulisan tanganmemungkinkan  panitia  kesulitan  dalam membaca  formulir  yang  diisi  oleh  calon  siswa, tentunya cara tersebut kurang maksimal.
Oleh sebab itu penulis membuat Perancangan  UI/UX  Aplikasi  Penerimaan  Siswa Berbasis  mobile  dengan  nama  My  Muttaqin, dimana  pendaftaran  siswa  baru  nantinya  bisa diakses  melalui  smartphone  oleh  wali  murid  atau murid itu sendiri, wali murid atau murid hanya perlu menginstal aplikasi dan hanya perlu mengisi sesuai fitur yang ada pada aplikasi.
Untuk  mencapai  usability  (kegunaan)  dan keinginan  pengguna  yang  diharapkan  maka digunakan  metode  user  centered  design  (UCD) dalam  penelitian  ini,  UCD  sendiri  merupakan metode yang menempatkan pengguna sebagai pusat dari  proses  perancangan  sistem  (Widhiarso,  W., Dan, J., Stmik, S., & Palembang, M. (2007).
Penelitian ini bertujuan untuk menghasilkan user  interface  yang  user-friendly  dan  model  user experience  yang  menawarkan  pengalaman  baru kepada  pengguna  melalui  metode user  centered design (UCD), serta dapat terealisasikan oleh para pengembang  aplikasi  sesuai  dengan  kebutuhan user.

## METODOLOGI PENELITIAN
A. Tahapan Metode Penelitian
Pada  perancangan  UI/UX  pendaftaran siswa  baru  smp  islam  al-muttaqin  menggunakan metode  user  centered  design,  tahapan  alur penelitian  ditunjukkan  pada  Gambar  3.1  sebagai berikut:
Sumber : Hasil Penelitian 2023 Gambar 3.1 Tahapan metode penelitian
Berdasarkan pada Gambar 3.1 terdiri dari 9  tahapan  metode  penelitian  yang  dilakukan  yaitu menentukan calon pengguna, melakukan wawancara, u ser persona , user problem , membuat user flow , membuat wireframe , membuat tampilan antarmuka / UI, prototyping dan terakhir melakukan usability testing.

## B. Menentukan Calon Pengguna
Tahapan  pertama  adalah  menganalisis kriteria partisipan yang nantinya akan menggunakan sebuah produk atau aplikasi. Kriteria kelayakan yang diperlukan dapat dilihat pada Tabel 3.1.

## Tabel 3.1 Kriteria Partisipan
Demographics
1. Usia 12-15 tahun
2. Laki-laki dan perempuan
3. Domisili Jakarta dan Sekitarnya
Pyschographics 4. Pengguna Smartphone Behavior 5. Pernah  melakukan  pendaftaran online
6. Pernah melakukan transaksi online

## C. Wawancara ( User Interview)
Teknik wawancara yang digunakan dalam penelitian  ini  adalah  wawancara  semi  terstruktur. Wawancara semi terstruktur merupakan wawancara dengan  pertanyaan  sehingga  dapat  dikembangkan lebih  lanjut  sesuai  dengan  topik  yang  sedang dibahas.  Adapun  daftar  pertanyaan  wawancara siswa  kelas  7  smp  islam  al-muttaqin  sebagai berikut:
a. Apakah anda pernah melakukan pendaftaran via online pada platform tertentu menggunakan smartphone anda?
b. Apa  saja  platform  yang  sudah  anda  pakai untuk mendaftar diri anda?
c. Apakah  anda  pernah  melakukan  transaksi via online pada platform tertentu menggunakan smartphone anda? d. Seberapa  sering  anda  melakukan  transaksi menggunakan smartphone anda? e. Apakah kekurangan dari pendaftaran calon siswa  di  smp  islam  al-muttaqin  yang dilakukan secara manual?
Hasil  wawancara  dengan  40  partisipan  disajikan pada Tabel 3.2.
Tabel 3.2 Hasil wawancara
Pertanyaa n Partisipan Partisipan Partisipan Partisipan 1-10 11-20 21-30 31-40 a Pernah Pernah Pernah Pernah b Faceboo k Instagra m Twitter Tiktok c Shoppe Lazada Tokoped ia Bukalap ak d 1x Sebulan 2x Sebulan 3x Sebulan 4x Sebulan e Proses Pendafta ran telalu Panjang Tidak efisien pendafta ran secara manual Pendafta ran hanya dilakuka n di hari efektif sekolah Data dikelola secara manual

## D. User Persona
User  Persona adalah  karakter  calon pengguna  yang  nantinya  akan  menggunakan website  admin.  Persona  dilengkapi  dengan  data- data  yang  signifikan  tentang  pengguna. User persona yang  dipilih  adalah  5  guru  smp  islam  al- muttaqin sebagai pengguna administrator.

## E. User Problem
Setiap produk atau aplikasi dikembangkan untuk  memenuhi  kebutuhan  pengguna,  sehingga suatu  produk  atau  aplikasi  diciptakan  untuk mengatasi  permasalahan  yang  dialami  oleh pengguna.  Untuk  meningkatkan user  experience dan user  interface yang  tervalidasi,  masalah pengguna  harus  diidentifikasi  terlebih  dahulu. Berikut  adalah  permasalahan  pengguna  yang muncul dari hasil wawancara:
a. Proses pendaftaran terlalu panjang.
b. Tidak efisien pendaftaran secara manual.
c. Pendaftaran  hanya  dilakukan  di  hari efektif
sekolah.
d. Data dikelola secara manual.
Setelah mengidentifikasi masalah pengguna  dari  hasil wawancara,  kemudian mengkategorikan  masalah  tersebut  dan  membuat
kebutuhan pengguna serta memberikan solusi untuk masalah  yang  ada,  sehingga  dapat  memecahkan masalah  yang  dialami  partisipan  yang  disajikan pada Tabel 3.3
Tabel 3.3 Hasil wawancara Problem Kebutuhan Pengguna Solusi a Membutuhkan proses  pendaftran yang cepat Dibuatkan fitur proses  pendaftaran yang cepat b Membutuhkan Proses  pendaftaran dilakukan dengan optimal Dibuatkan pendaftaran berbasis online yang  efisien  serta optimal c Membutuhkan perdaftaran yang dapat  terikat  oleh waktu Dibuatkan pendaftaran berbasis aplikasi mobile  yang  dapat diakses  kapanpun dan dimanapun d Membutuhkan data dikelola secara terkomputerisasi baik  website  atau mobile Dibuatkan sistem aplikasi  yang  dapat mengelola data secara online
F. User Flow
User  flow merupakan  langkah-langkah atau  aliran  pengguna  untuk  menyelesaikan  suatu masalah  dalam  menggunakan  sebuah  produk  atau aplikasi. Terdapat 2 user flow dalam penelitian ini: yang  pertama  yaitu user  flow pengguna  aplikasi, ditunjukkan pada Gambar 3.2, dan kedua yaitu user flow administrator, ditunjukkan pada Gambar 3.3.
Sumber : Hasil Penelitian 2023 Gambar 3.2 User Flow pengguna
Sumber : Hasil Penelitian 2023
Gambar 3.3 User Flow administrator

## G. Wireframe
Wireframe merupakan skema atau kerangka kasar untuk mengatur elemen pada sebuah tampilan website atau aplikasi sebelum memasukin tahap visual high fidelity prototype .

## HASIL PENELITIAN DAN PEMBAHASAN
A. Desain User Interface Pengguna
Berdasarkan  rancangan  desain  aplikasi mobile My  Muttaqin  menggunakan tools figma dengan ukuran frame 375px X 790px. Serta warna yang  digunakan  adalah  warna  biru  dan  putih  agar terlihat lebih konsisten dan menarik bagi pengguna. Untuk  jenis typography yang  digunakan  yaitu Poppins.  Typography bertujuan  memudahkan pengguna dalam menemukan sebuah informasi dan menyampaikan  sebuah  pesan  kepada  pengguna. Berikut hasil User Interface desain pengguna
a. User Interface splash screen
Tampilan awal ketika pengguna membuka aplikasi mobile My Muttaqin yang berisi logo SMP ISLAM  AL-MUTTAQIN.  Berikut  hasil User Interface splash screen :
Gambar 4.1 User Interface splash screen
b. User Interface onboarding
Pada  aplikasi mobile
My  Muttaqin terdapat
tampilan onboarding bertujuan memperkenalkan  serta  memberikan  informasi
aplikasi  kepada  pengguna.  Terdapat button lanjutkan  guna  memberikan  aksi  selanjutnya kepada  pengguna.  Berikut  hasil User  Interface onboarding :
Gambar 4.2 User Interface onboarding
c. User Interface login atau membuat akun
Setelah  melakukan  aksi  selanjutnya, pengguna  akan  diperlihatkan  pada  tampilan login atau  membuat  akun.  Jika  belum  mempunyai  akun maka  pengguna  harus  mendaftarkan  diri  untuk membuat akun dengan menekan button buat akun. Namun,  jika  sudah  mempunyai  akun  maka pengguna  dapat  menekan button masuk.  Berikut hasil User Interface login atau membuat akun:
Gambar 4.3 User Interface login atau membuat akun
d. User Interface login
Pada  tampilan UI  login pengguna  akan diminta  untuk  memasukan  nomor  telepon  atau nama  pengguna  dan  juga password yang  sudah terdaftar. Berikut hasil User Interface login :
Gambar 4.4 User Interface login
e. User Interface login
Untuk mendaftarkan diri sebagai pengguna aplikasi mobile My Muttaqin terdapat 6
tahapan dalam membuat akun. Tampilan membuat akun  yang  pertama  pengguna  harus  memasukan nama,  telepon,  dan  tanggal  lahir.  Tampilan membuat akun yang kedua pengguna mengkonfirmasi  apakah  data  yang  dimasukan sudah  valid.  Tampilan  membuat  akun  yang  ketiga pengguna akan diperlihatkan oleh verifikasi ponsel sesuai  nomor telepon  yang dimasukkan. Tampilan membuat  akun  yang  keempat  pengguna  akan diminta  untuk  memasukan  kode  sms  yang  telah dikirimkan  ke  nomor  ponsel  pengguna.  Tampilan membuat akun yang kelima pengguna akan diminta untuk  membuat  kata  sandi  untuk  proses login nantinya.  Tampilan  membuat  akun  yang  keenam pengguna  akan  diperlihatkan  oleh  tampilan  pesan pop-up berhasil.  Berikut  hasil User  Interface membuat akun:
Gambar 4.5 User Interface membuat akun
f. User Interface beranda Pada  halaman  beranda  pengguna  akan diperlihatkan  oleh  informasi  penting  yang  ada didalamnya  serta  langkah  pertama  bagi  pengguna untuk  memutuskan  langkah  selanjutnya  seperti unggah  persyaratan,  biaya  pendaftaran,  lokasi sekolah, sarana dan prasarana, data pokok sekolah, berita  terkini,  hubungi,  notifikasi  serta  melihat profil. Berikut hasil User Interface beranda:
g. User Interface lokasi
Pada  tampilan  lokasi  pengguna  akan diperlihatkan oleh detail letak sekolah smp islam al- muttaqin. Terdapat button buka google maps yang bertujuan  untuk  memberi  petunjuk  arah  dan menemukan rute tujuan kepada pengguna. Berikut hasil User Interface lokasi:
Gambar 4.7 User Interface lokasi
h. User Interface sarpras Pada tampilan sarpras pengguna diperlihatkan  oleh  informasi  detail  sarana  dan prasarana  yang  ada  pada  sekolah  smp  islam  al- muttaqin  yang  bertujuan  menigkatkan  minat  para calon  siswa  yang  akan  mendaftar.  Berikut  hasil User Interface sarpras:
Gambar 4.8 User Interface sarpras
i. User Interface data pokok
Pada  tampilan  data  pokok  pengguna diperlihatkan  oleh  informasi  detail  data-data sekolah  smp  islam  al-muttaqin,  serta  terdapat Nomor  Pokok  Sekolah  Nasional  (NPSN)  yang menjadi  acuan  data  kebijakan  yang  dikeluarkan Kemendikbud.  Berikut  hasil User  Interface data pokok :
Gambar 4.9 User Interface data pokok
j. User Interface berita terkini
Pada  tampilan  berita  terkini  pengguna diperlihatkan  oleh  informasi  ter update terkait
kegiatan  yang  ada  pada  sekolah  smp  islam  al- muttaqin.  Berikut  hasil User  Interface berita terkini:
Gambar 4.10 User Interface berita terkini
k. User Interface pendaftaran
Pada  halaman  pendaftaran  terdapat  3 langkah  untuk  mendaftarkan  diri  sebagai  calon siswa  smp  islam  al-muttaqin,  langkah  pertama pengguna  harus  mengisi  identitas  diri,  langkah kedua  mengupload  dokumen  yang  diperlukan seperti  Akte  Kelahiran,  Kartu  Keluarga,  Kartu Pelajar,  dan  SKHUN,  langkah  ketiga  pengguna diminta untuk mengkonfirmasi data yang sudah di isi dengan benar. Kemudian akan muncul tampilan success pendaftaran ketika pengguna telah berhasil melakukan  pendaftaran  dan  terdapat button aksi pembayaran  yang  memerintahkan pengguna  untuk segera menyelesaikan transaksi pembayaran menjadi siswa smp islam al-muttaqin. Berikut hasil User Interface pendaftaran:
Gambar 4.11 User Interface pendaftaran
l. User Interface biaya daftar
Pada  halaman  biaya  daftar  pengguna diperlihatkan oleh detail rician biaya pendaftaran,  dan  memiliki  button  bayar sekarang  untuk  melakukan  aksi  selanjutnya dengan  menampilkan  pemilihan  pembayaran untuk  memilih  transaksi  bank  yang  akan dilakukan untuk pembayaran. Setelah pengguna memilih transaksi pembayaran akan
diperlihatkan  oleh  tampilan  ringkasan  biaya total  pendaftaran  dan  terdapat  tata  cara pembayaran.  Kemudian  setelah  melakukan transaksi  pengguna  akan  diperlihatkan  oleh tampilan  success  pembayaran  yang  artinya pembayaran untuk menjadi siswa smp islam al- muttaqin  telah  berhasil.  Berikut  hasil  User Interface biaya daftar:
Gambar 4.12 User Interface biaya daftar
m. User Interface hubungi
Pada tampilan hubungi berguna membantu
pengguna  untuk  dapat  berkomunikasi,  terdapat button  whatsapp untuk  memfasilitasi  pertanyaan pengguna dan layanan cepat serta tanggapan untuk pengguna.  Dan button  instagram sebagai  media informasi seputar kegiatan ter update smp islam al- muttaqin. Berikut hasil User Interface hubungi:
Gambar 4.13 User Interface hubungi
n. User Interface notifikasi Pada tampilan notifikasi berguna menampilkan  sebuah  informasi  pesan  terkait pembayaran  yang  dilakukan  oleh  pengguna.  serta terdapat button cetak  untuk  menyimpan  pesan pembayaran  sebagai  dokumen.  Berikut  hasil User Interface notifikasi:
Gambar 4.14 User Interface notifikasi
o. User Interface profil
Pada  tampilan  profil  diperlihatkan  oleh data  pribadi  siswa  serta  terdapat icon  edit untuk melakukan  perubahan  data  seperti  nama  lengkap, email,  tanggal  lahir  dan  nomor  handphone. Kemudian  terdapat buton keluar  memberi  aksi kepada pengguna untuk keluar dari aplikasi. Berikut hasil User Interface profil:
Gambar 4.15 User Interface profil
B. Desain User Interface website admin
Terdapat  desain website admin  yang bertujuan  untuk  mengelola  dan  mengontrol  fungsi dari  semua  fitur  yang  ada  pada  sebuah  aplikasi mobile My  Muttaqin.  Rancangan  desain website admin  menggunakan tools figma  dengan  ukuran frame 1440px  X  942px.  Berikut  hasil User Interface desain website admin:
a. User Interface website login
Pada tampilan website login administrator diharuskan  melakukan  proses  autentifikasi  yang terdiri  dari  memasukkan username dan password dengan  benar  untuk  mendapatkan  hak  akses  saat memasuki  halaman website .  Berikut  hasil User Interface website login :
Gambar 4.16 User Interface website login b. User Interface website dashboard
Pada tampilan website  dashboard administrator  akan  diperlihatkan  oleh  informasi tentang  aktivitas  grafik  kunjungan  atau  jumlah pengguna  yang  mendaftar  melalui  aplikasi  My Muttaqin.  Berikut  hasil User  Interface  website login :
Gambar 4.17 User Interface website dashboard
c. User Interface website profil sekolah
Pada  tampilan website profil  sekolah administrator  akan  diperlihatkan  oleh  informasi data-data  sekolah  seperti  identitas  sekolah,  data pelengkap  dan  data  rinci  sekolah  smp  islam  al- muttaqin.  Berikut  hasil User  Interface  website profil sekolah:
d. User Interface website profil sekolah
Pada  tampilan website daftar  pengguna diperlihatkan  oleh  data  pengguna  yang  telah mendaftar  sebagai  calon  siswa  smp  islam  al- muttaqin  melalui  aplikasi  My  Muttaqin.  Terdapat tabel  dengan  nama  calon  siswa,  nomor  telepon siswa,  status  pembayaran  siswa,  dan  dokumen siswa.  Berikut  hasil User Interface website daftar pengguna:
Gambar 4.19 User Interface website daftar pengguna
e. User Interface website lihat dokumen
Ketika  administrator  mengklik  lihat dokumen maka akan diperlihatkan oleh 4 dokumen yang  telah  di upload oleh  pengguna  aplikasi  My Muttaqin diantaranya adalah Akte Kelahiran, Kartu Keluarga, NISN / Kartu Pelajar dan SKHUN. Serta terdapat  2 button aksi  untuk  administrator  yaitu button  view dan button  download. Berikut  hasil User Interface website lihat dokumen:
Gambar 4.20 User Interface website lihat dokumen
f. User Interface website vuew dokumen
Pada  saat  administrator  mengklik view dokumen  maka  akan  diperlihatkan  oleh  tampilan fullscreen mengenai  dokumen  tersebut.  Berikut beberapa  hasil User  Interface  website  view dokumen:
Gambar 4.21 User Interface website view dokumen Akte Kelahiran
Gambar 4.22 User Interface website view dokumen Kartu Keluarga
Gambar 4.23 User Interface website view dokumen NISN / Kartu Pelajar
g. User Interface website confirm
Kemudian  pada  tabel  daftar  pengguna terdapat column  action yang  memiliki button hapus  dan confirm untuk  mengkonfirmasi  kepada calon siswa yang telah melengkapi dan menyelesaikan persyaratan sebagai siswa smp islam al-muttaqin.  Pada  saat  administrator  mengklik button  confirm terdapat pop-up  confirm guna memberikan  aksi  kepada  administrator.  Serta terdapat tampilan success  confirm ketika administrator  megkonfirmasi  calon  siswa  yang telah  lengkap  dan  menyelesaikan  pendaftaran sebagai siswa smp islam al-muttaqin. Berikut hasil User Interface website pop-up confirm dan success confirm :
Gambar 4.25 User Interface website pop-up confirm
Gambar 4.26 User Interface website success confirm
h. User Interface website pendaftar diterima
Setelah  selesai  sukses  melakukan  aksi confirm pengguna  admisitrator  dapat  melihat informasi peserta didik yang telah diterima sebagai siswa  smp  islam  al-muttaqin.  Berikut  hasil User Interface website pendaftar diterima:
Gambar 4.27 User Interface website pendaftar diterima
C. Prototyping
Prototyping merupakan  simulasi  yang memberikan  visi  lebih  nyata  agar  pengguna dapat  berinteraksi  dengan  produk  atau  fitur yang  telah  dibuat.  Berikut  adalah  hasil prototyping  user  interface desain  pengguna  dan website admin:
Gambar 4.28 Prototyping user interface desain pengguna
Gambar 4.29 Prototyping user interface website admin

## D. Usability Testing
Berdasarkan  pembuatan  tampilan  UI desain aplikasi mobile My Muttaqin dan website admin  menggunakan  tools  figma,  penulis
kemudian  melakukan  uji  coba  desain  tersebut kepada siswa kelas 7 dan 5 guru (user persona) smp  islam  al-muttaqin.  Berikut  merupakan langkah–langkah  dalam  melakukan  usability testing:
1.  Penulis  memberikan  link  prototyping  desain aplikasi My Muttaqin kepada siswa dan website admin  kepada  5  guru  (user  persona)  untuk  uji coba secara langsung.
2.  Kemudian  penulis  memberi  waktu  10  menit untuk  menyelesaikan  skenario  aplikasi  My Muttaqin dan website admin.
3. Selama waktu
10 menit, penulis memperhatikan  siswa  saat  menggunakan aplikasi  My  Muttaqin  serta  memperhatikan  5 guru (user persona) saat menggunakan  website admin untuk  melihat apakah  siswa dan 5 guru (user  persona)  merasa  kesulitan  atau  tidak ketika menggunakan aplikasi My Muttaqin atau website admin.
4.  Setelah  siswa  dan  5  guru  (user  persona) menyelesaikan  skenario  uji  coba  selama  10 menit,  penulis  memberikan  kuesioner  untuk mengetahui  tentang  apa  yang  dirasakan  oleh siswa  dan  5  guru  (user  persona)  setelah menggunakan aplikasi My Muttaqin atau website admin.
Setelah uji coba selesai dilakukan, kemudian penulis  ingin  mengetahui  skala  skor  tingkat kepuasan  pengguna  ketika  menggunakan  aplikasi My  Muttaqin  atau website admin  dengan memberikan atribut variabel menggunakan System Usability  Scale (SUS)  dengan  memberikan  10 pertanyaan untuk menganalisis hasil uji coba yang telah dilakukan.
Terdapat beberapa aturan penting dalam perhitungan  skor  System  Usability  Scale  (SUS). Berikut adalah langkah-langkah saat perhitungan skor pada kuesioner: 1. Setiap pertanyaan yang bernilai ganjil, maka dikurangi 1. 2. Setiap pertanyaan bernilai genap dikurangi 5, jika  hasilnya  negatif  maka  dibulatkan  menjadi positif.
3. Nilai skor SUS di dapat dari hasil penjumlahan setiap pertanyaan kemudian dikali 2,5.
Langkah-langkah  perhitungan  skor  berlaku untuk  1  responden.  Selanjutnya  untuk  mengetahui skor  rata-rata,  nilai  skor  SUS  dari  masing-masing responden  dijumlahkan  kemudian  dibagi  dengan jumlah  responden.  Kesimpulan  akhir System Usability Scale (SUS) ditentukan melalui penilaian seperti pada gambar berikut:
Gambar 4.30 SUS Score Sumber : Sharfina, Z. and S. H. B. (2016)
a. Hasil Usability Testing siswa
Setelah  melakukan  pengumpulan  data  dari responden  siswa,  Berikut  ini  merupakan  hasil Usability Testing siswa pada aplikasi My Muttaqin menggunakan System Usability Scale (SUS)  yang ditunjukkan pada Tabel 4.1.

## Tabel 4.1 Hasil Usability Testing siswa
Sumber: Hasil Pengolahan Data (2023)
Hasil Usability Testing siswa sebagai subjek utama  memiliki  nilai  rata-rata  skor  81,  maka  skor tersebut  memiliki  grade  scale  B  dengan  kategori EXCELLENT .  Artinya  tidak  ada  masalah  pada usability aplikasi My Muttaqin.

## b.  Hasil Usability Testing user persona
Berikut  ini  merupakan  hasil Usability Testing  user  persona pada website admin menggunakan System Usability Scale (SUS)  yang ditunjukkan pada Tabel 4.2.
Tabel 4.2 Hasil Usability Testing user persona

## Sumber: Hasil Pengolahan Data (2023
Hasil Usability  Testing  user  persona memiliki nilai rata-rata skor 89, maka skor tersebut memiliki grade scale B dengan kategori EXCELLENT . Artinya secara usability berdasarkan
skor rata-rata data maka website admin mendapatkan penilaian yang layak.

## KESIMPULAN
Terdapat 3 poin kesimpulan dalam merancang UI/UX My Muttaqin dan website admin sebagai berikut:
1.  Pada  proses  rancangan  tampilan  aplikasi mobile  My  Muttaqin  terdapat  9  tahapan  yang dimulai  dari  menentukan  calon  pengguna, wawancara,  user  persona,  user  problem,  user flow, wireframe, membuat tampilan UI, protyping dan usability testing.
2. Hasil usability testing yang dilakukan kepada siswa  kelas  7  menggunakan  System  Usability Scale  (SUS)  sebagai  subjek  utama  adalah  81, dengan grade scale B. Serta hasil usability testing user persona memiliki skor 89, dengan kategori EXCELLENT.
3. Berdasarkan hasil usability testing yang telah diperoleh,  maka  pembuatan  rancangan  UI/UX My  Muttaqin  dan  website  admin  sudah  sesuai dengan kebutuhan pengguna.

## REFERENSI
Arum  Ningtyas,  D.,  Badrul,  M.,  Nur  Sulistyowati,  D.,
Informasi STMIK Nusa Mandiri Jakarta wwwnusamandiriacid, S., & Redaksi Selesai Revisi Diterbitkan,  D.  (2018).  SISTEM  INFORMASI PENERIMAAN PESERTA DIDIK BARU PADA SMP  AR-RIDHA  JAKARTA. Jurnal  TECHNO Nusa Mandiri , 15 (1). www.nusamandiri.ac.id Firmansyah, M. T., Fauzi, R., Fajar, S., &  Gumilang, S.
(n.d.). PERANCANGAN USER INTERFACE DAN USER  EXPERIENCE  MOBILE  APPLICATION
SIBENGKEL UNTUK MEMENUHI KEBUTUHAN
PENGGUNA DENGAN METODE USER- CENTERED  DESIGN  (UCD)  USER  INTERFACE AND  USER  DESIGN  SIBENGKEL  MOBILE APPLICATION EXPERIENCE FOR MEET USER REQUIREMENTS USING USER-CENTERED DESIGN (UCD) METHOD . Ibrahim,  A.  A.-Z.,  &  Lestari,  I.  (2023).  Perancangan UI/UX  Pada  Website  Rumah  Tahfidz  Akhwat Menggunakan  Metode  Design  Thinking. Teknika , 12 (2), 96–105. https://doi.org/10.34148/teknika.v12i2.599 Jidan  Narizki,  M.,  Arri  Widyanto,  R.,  Agung  Prabowo, N., Mayjen Bambang Soegeng, J., Mertoyudan, K., Magelang,  K.,  Tengah,  J.,  Teknik,  F.,  Studi Teknologi Informasi, P., Muhammadiyah Magelang, U., & Jl Mayjen Bambang Soegeng, M. (2023).  Perancangan  UI/UX  Sistem  Penerimaan Mahasiswa  Baru  Berbasis  Perangkat  Mobile dengan  Metode  Design  Thinking. Journal  of Information  System  Research , 4 (4),  1127–1135. https://doi.org/10.47065/josh.v4i4.3652 Made, D., Putra, D. U., Mahendra, G. S., & Mulyadi, E. (2022).  SISTEM  INFORMASI  PENERIMAAN
SISWA  BARU  PADA  SMP  NEGERI  3  CIBAL BERBASIS  WEB. INSERT:  Information  System and Emerging Technology Journal , 3 (1).
Putri,  R.  R.,  Sodik,  A.,  Pakarbudi,  A.,  Adhi,  I.  T.,  &
Surabaya, T. (n.d.). Perancangan User Experience Aplikasi Pendaftaran Mahasiswa Baru Menggunakan Metode Human-Centered Design . Sani  Wijaya,  I.,  Siswanto,  A.,  Program,  ),  Teknik,  S., Stikom, I., Bangsa, D., Jln, J., Sudirman Thehok, J.,
& Jambi, K. (2016). PROTOTYPE PENGEMBANGAN APLIKASI E-
INFORMATION  MENGGUNAKAN  METODE USER  CENTERED  DESIGN  DI  STIKOM DINAMIKA  BANGSA  JAMBI.  In Seminar  Riset Teknologi Informasi (SRITI) tahun .
Widoseno Ardras, D., Voutama, A., & Ridwan, T. (2023). PERANCANGAN  UI/UX  BERBASIS  WEBSITE PADA PENERIMAAN PESERTA DIDIK BARU (PPDB) DI SMK TARUNA KARYA 1 KARAWANG.  In Jurnal  Mahasiswa  Teknik Informatika (Vol. 7, Issue 2).
Wulandari, I., Intan Permatasari, D., Marda Hakiky, D., &  Elektronika  Negeri  Surabaya,  P.  (n.d.). PENGEMBANGAN APLIKASI MOBILE PEMANTAUAN  STUNTING  ANAK  DENGAN PENERAPAN METODE USER CENTER DESIGN. In Prosiding Seminar Nasional Pengabdian  kepada  Masyarakat (Vol.  2021). http://journal.unj.ac.id/unj/index.php/snppm
Zahra  Sharfina,  H.  B.  S.  (2016).  An  Indonesian Adaptation  of  the  System  Usability  Scale  (SUS). Conference:  The  8th  International  Conference  on Advanced  Computer  Science  and  Information Systems (ICACSIS) .