KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 4, No 4, Februari 2024, Hal 2342-2356 DOI 10.30865/klik.v4i4.1722 https://djournals.com/klik

## Perancangan UI/UX Penerimaan Peserta Didik Baru Berbasis Website Menggunakan Metode User Centered Design
Merrieayu Puspita Hannah, Rizka Nur Kholiza * , Kurniawan
Fakultas Sains Teknologi, Program Studi Sistem Informasi, Universitas Bina Darma, Palembang, Indonesia Email: 1 merrieayu@binadarma.ac.id, 2,* rizkanurkholizae15@gmail.com, 3 kurniawan@binadarma.ac.id Email Penulis Korespondensi: rizkanurkholizae15@gmail.com
Abstrak −Proses  penerimaan  peserta  didik baru  merupakan proses  pertama  yang  dilakukan  untuk mengenyam  pendidikan. Sistem penerimaan  peserta  didik  baru  yang  berjalan  di  SMK  Setianegara  Sembawa  saat  ini  masih  manual.  Penerimaan  peserta  didik  baru dimulai dari pendaftaran awal peserta didik, hingga formulir sampai bukti pendaftaran penerimaan peserta didik baru masih bersifat manual. Kondisi ini masih diterapkan selama ini, sekolah sering mengalami kesalahan seperti dalam input data, pengolahan data, hingga berkas  pendaftaran  sering  mengalami  kerusakan  dan  kehilangan.  Tujuan  dari  penelitian  ini  adalah  untuk  membantu  pihak  sekolah mengatasi permasalahan yang ada dengan memberikan suatu perancangan ui/ux penerimaan peserta didik baru di SMK Setianegara berbasis website. Metode perancangan yang digunakan peneliti yaitu menggunakan metode user centered design. User centered design merupakan salah satu metode dengan memfokuskan kebutuhan dari calon user (pengguna) dalam tahapan atau proses perancangan sistem.  Kebutuhan  tersebut  meliputi  kenyamanan  dan  kepuasaan  ketika  pengguna  memakai  produk  sistem  yang  akan  dirancang sehingga  bisa  di  implementasikan  ke  tahap  selanjutnya.  Wawancara  dilakukan  kepada  admin,  guru,  dan  umum,  ide  solutif dikumpulkan. Pembuatan user flow dan sitemap dan desain UI dalam bentuk wireframe. Evaluasi dilakukan dengan memberikan link prototype  dan  kuesioner  kepada  calon  pengguna.  Hasil  penelitian  menunjukan  perancangan  UI/UX  PPDB  berbasis  website menggunakan tools figma dengan metode user centered design dapat dilakukan di SMK Setianegara Sembawa. Hasil usability testing menunjukan indicator baik dari perhitungan skala likert 1-4.
Kata Kunci: Perancangan; UI/UX; PPDB; Web; User Centered Design; Usability Testing
Abstract −The process of accepting new students is the first process carried out to receive education. The system for accepting new students  at  Setianegara  Sembawa  Vocational  School  is  currently  still  manual.  Acceptance  of  new  students  starts  from  the  initial registration  of  students,  until  the  form  and  proof  of  registration  for  accepting  new  students  are  still  manual.  This  condition  is  still applied today, schools often experience errors such as in data input, data processing, and registration files are often damaged and lost. The aim of this research is to help the school overcome existing problems by providing a website-based UI/UX design for accepting new  students  at  Setianegara  Vocational  School.  The  design  method  used  by  researchers  is  the  user  centered  design  method.  User centered design is a method that focuses on the needs of prospective users (users) in the system design stages or process. These needs include comfort and satisfaction when users use the product system that will be designed so that it can be implemented at the next stage. Interviews were conducted with admins, teachers and the general public, solution ideas were collected. Creating user flow and sitemap and UI design in wireframe form. Evaluation is carried out by providing prototype links and questionnaires to potential users. The  research  results  show  that  website-based  PPDB  UI/UX design using  figma  tools  with  the  user  centered design  method  can be carried  out  at  Setianegara  Sembawa  Vocational  School.  The  results  of  usability  testing  show  good  indicators  from  a  Likert  scale calculation of 1-4.
Keywords : Design; UI/UX; PPDB; Web; User Centered Design; Usability Testing

## 1. PENDAHULUAN
Teknologi  informasi  sangat  berkembang  di  masyarakat,  secara  umum  teknologi  informasi  adalah  teknologi  yang digunakan untuk mengelola data, mengolah, menyimpan dan memanipulasi data dengan berbagai cara dan prosedur untuk menghasilkan  informasi  yang  berkualitas  dan  berguna  [1].  Seiring  bertambahnya  kebutuhan  manusia,  perkembangan teknologi informasi pun terus berkembang.
Semakin  berkembangnya  teknologi  informasi  tentu  sangat  disambut  baik  oleh  semua  kalangan,  salah  satunya bahkan  telah  merambah ke  dunia  pendidikan  sejak  beberapa  tahun  terakhir.  Sehingga  hal  ini  menciptakan  persaingan yang  kompetitif  diantara  setiap  lembaga  pendidikan  negeri  maupun  swasta  [2].  Dengan  adanya  kemajuan  teknologi informasi dan komunikasi seperti teknologi internet dan website , dapat mempermudah proses input dan output data secara cepat dan akurat di kalangan masyarakat. Dengan manfaat dan kemudahan internet sehingga website yang sudah canggih, seharusnya dikembangkan di tiap-tiap sekolah agar mempermudah mengelola data [3].
Sistem Penerimaan Peserta Didik Baru di SMK  Setianegara Sembawa masih secara manual dengan tahap awal pendaftaran secara langsung kesekolah tersebut, selanjutnya pengisian formulir pendaftaran yang masih dilakukan dengan menulis di lembar formulir yang dibagikan, sehingga kegiatan penerimaan peserta didik baru seperti ini kurang efektif dan  efisien,  karena  dapat  mengakibatkan  kerusakan  dan  hilangnya  berkas  peserta  didik.  Formulir  pendaftaran  dan dokumen lain yang diperlukan calon peserta didik baru harus di tulis ulang oleh staf sekolah sebagai arsip. Banyaknya dokumen yang harus di arsip oleh staf ini memungkinkan terjadinya kesalahan dan mempersulit jika ingin mengambil data kembali. Sistem ini juga masih menggunakan arsip dalam bentuk fisik yang rentan mengalami kerusakan atau hilang. Maka dari itu kebutuhan akan suatu konsep dan mekanisme penerimaan peserta didik baru dengan memanfaatkan adanya teknologi informasi menjadi hal yang perlu dipertimbangkan.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order

## Centroid in Supplier Performance Evaluation
Menurut  [4]  pada  penelitian  yang  berjudul  Perancangan  UI/UX  Pendaftaran  Siswa  Baru  Dengan  Metode  User Centered Design Pada Sekolah Smp Islam Al-Muttaqin Hasil dari usability testing pada penelitian tersebut telah diperoleh, maka  pembuatan  perancangan ui/ux sesuai  dengan  keinginan  pengguna.  Pada  penelitian  [5]  yang  berjudul  Penerapan Metode User Centered Design dalam Perancangan Ulang Desain Website MAN 1 Pasuruan penelitian ini memuat Solusi dari temuan masalah dengan memperbaiki fungsi menu yang tidak sesuai menggabungkan menu PPDB dan SPPB, serta melakukan redesign website. Penelitian [6] yang berjudul Perancangan UI/UX berbasis website pada penerimaan peserta didik baru (PPDB) di SMK Taruna Karya 1 Karawang, penelitian ini sangat membantu mengembangkan website sesuai keinginan pengguna.
Untuk  meningkatkan  pelayanan  sekolah  saat  penerimaan  peserta  didik  baru  dibutuhkan  sistem  yang  dapat menjalankan  proses  tersebut  dengan  baik  dan  dapat  diakses  dimana  saja.  Maka,  dengan  adanya website penerimaan peserta didik baru dapat memudahkan panitia dalam proses penerimaan maupun penyimpanan data-data calon peserta didik baru di SMK Setianegara Sembawa.
Metode yang digunakan dalam merancang website adalah User Centered Design yang memiliki lima tahapan yaitu Plan the User Centered Design Process, Specify Context of Use, Specify User Requirements, Design Solution, Evaluation Against User Requiretments. Suatu metode desain yang menempatkan  pengguna sebagai pusat dari proses desain sistem [7]. User Centered Design atau disingkat dengan UCD merupakan salah satu metode dengan memfokuskan kebutuhan dari calon user (pengguna) dalam tahapan atau proses perancangan sistem. Kebutuhan tersebut meliputi kenyamanan dan kepuasaan ketika pengguna memakai produk sistem yang akan dirancang [8].
Melalui  penelitian  ini,  peneliti  berharap  dapat  menggunakan  teknik user  centered  design  (UCD) untuk mewujudkan desain pengalaman pengguna yang  mudah digunakan dan memberikan pengalaman baru kepada pengguna. Hal ini dapat diimplementasikan oleh pengembang website sesuai kebutuhan pengguna.

## 2. METODOLOGI PENELITIAN

## 2.1 Tahap Penelitian
Pada gambar 1 berikut terlihat tahapan penelitian yang penulis lakukan.

## Gambar 1. Tahap Penelitian
Pada gambar 1 tahap penelitian dilakukan perumusan masalah, Studi literature, pengumpulan data, perancangan sistem, dan pembuatan laporan karya akhir.

## 2.2 Model Pengembangan User Centered Design
Metode yang digunakan dalam merancang website adalah User Centered Design yang memiliki lima tahapan yaitu Plan the User Centered Design, Specify Context of Use, Specify User Requirements, Design Solution, Evaluation Against User Requiretments. Suatu metode desain yang menempatkan  pengguna sebagai pusat dari proses desain sistem [7]. User Centered Design atau disingkat dengan UCD merupakan salah satu metode dengan memfokuskan kebutuhan dari calon user (pengguna) dalam tahapan atau proses perancangan sistem. Kebutuhan tersebut meliputi kenyamanan dan kepuasaan ketika pengguna memakai produk sistem yang akan dirancang [8].
Melalui  penelitian  ini,  peneliti  berharap  dapat  menggunakan  teknik user  centered  design  (UCD) untuk mewujudkan desain pengalaman pengguna yang  mudah digunakan dan memberikan pengalaman baru kepada pengguna. Hal ini dapat diimplementasikan oleh pengembang website sesuai kebutuhan pengguna. Dalam membuat antarmuka suatu website , terdapat metode perancangan sistem yang berguna dalam menentukan urutan  secara  baik  dalam  memecahkan  masalah  penelitian.  Berikut  merupakan  alur  penelitian  yang  digunakan  agar penelitian dapat berjalan secara sistematis.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Gambar 2. Metode Perancangan User Centered Design
Dari gambar 2 dapat dijelaskan sebagai berikut.
a. Rencanakan proses User Centered Design
Metode  pengumpulan  data  yang  dilakukan  pada  perancangan ui/ux penerimaan  peserta  didik  baru  di  SMK Setianegara Sembawa berbasis website menggunakan metode user centered design , Pengumpulan data merupakan salah satu  langkah  terpenting  dalam  penelitian.  Teknik  pengumpulan  data  yang  tepat  akan  menghasilkan  data  yang  dapat diandalkan dan sebaliknya, antara lain sebagai berikut:
1. Observasi
Pengamatan langsung atau observasi terhadap kondisi lapangan (SMK Setianegara Sembawa). Observasi kualitatif merupakan  proses  penelitian  yang  menggunakan  metode  subjektif  untuk  mengumpulkan  informasi  dan  data  [9]. Observasi kualitatif berfokus pada penyesuaian terhadap perbedaan kualitas dan oleh karena itu lebih memakan waktu dibandingkan observasi kuantitatif, namun ukuran sampel yang digunakan jauh lebih kecil dan penelitiannya lebih besar dan lebih personal [10].
2. Wawancara
Proses  wawancara  dimulai  dengan  menyepakati  informan  peneliti  kapan  wawancara  dapat  dilakukan.  Wawancara didasarkan pada sejumlah pertanyaan yang tercantum dalam panduan wawancara. Peneliti menambahkan beberapa pertanyaan di luar yang terdapat dalam panduan wawancara untuk lebih memperdalam penelitian.
Tabel 1. Hasil Wawancara
3. Studi Literatur
Pada bagian studi literatur, penulis membahas beberapa  penelitian yang mengenai perancangan user interface (UI) dan user experience (UX).
Bagian Poin hasil wawancara Admin PPDB
Tidak adanya website PPDB di SMK Setianegara mempengaruhi proses pendaftaran dikarenakan banyak kerusakan  data-data  peserta  bahkan  sering  terjadinya  kehilangan,  sehingga  pendaftaran  secara  manual sangat kurang efesien.
Membutuhkan  sistem  yang  dapat  membantu  proses  pendaftaran  seperti  mencegah  adanya  kerusakan bahkan kehilangan data peserta.
Guru Di  SMK  Setianegara  Sembawa  tidak  memiliki  website  PPDB,  sehingga  pendaftaran  peserta  didik  baru dilakukan  secara  manual  yaitu  melakukan  pendaftaran  secara  langsung  ke  SMK  tersebut.  Hal  ini dikarenakan kurangnya kemajuan sistem di SMK Setianegara Sembawa.
Sehingga sangat membutuhkan sistem yang dapat membantu dalam proses pendaftaran peserta didik baru di SMK Setianegara Sembawa.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation

## b. Tentukan konteks penggunaan
Perancangan  sistem  harus  mengerti  konteks  kegunaan  dari  penggunaan  sistem  seperti  siapa  yang  akan menggunakan aplikasi tersebut untuk apa mereka menggunakannya dan dalam situasi seperti apa mereka menggunakan aplikasi tersebut.
User persona dapat membantu tercapainya tujuan produk melalui persona pengguna karena dengan hal tersebut dapat membantu dalam mengenali setiap pengguna memiliki kebutuhan yang berbeda-beda dalam menggunakan sebuah aplikasi  maupun  sebuah  sistem  [11].  User  Persona  sangat  bermanfaat  untuk  efektifitas  penelitian  terhadap  pelanggan dengan membuat profil fiksi pengguna [12].
Pada tahap user persona, didapatkan target pengguna sebanyak dua orang atau lebih yang merupakan admin dan calon  peserta  didik  baru,  masing  masing user persona  tersebut  memiliki  identitas  pengguna.  Langkah  pertama  dalam metode ini adalah memahami dan menentukan konteks pengguna  sistem yang dibangun. Selain itu, pada tahap ini juga berguna untuk mengumpulkan dan menganalisis informasi tentang konteks pengguna yang akan diterapkan pada sistem di masa depan.
Gambar 3 . User persona admin 1
Tidak  adanya  pendaftaran  calon  siswa  melalui website membuat  pengelolaan  data  kurang  efesien.  Diharapkan dengan perancangan desain ini dapat mempermudah dalam pendaftaran calon peserta didik nantinya.

## Gambar 4. User persona calon peserta didik
Adanya  perancangan  desain  seperti  yang  terlihat  pada  gambar  3  dan  4,  dapat  mempermudahkan  peserta  didik dalam melakukan pendaftaran online.

## c. Menentukan persyaratan pengguna dan organisasi
Setelah  perancang  mengerti  konteks  pengguna  dari  aplikasi,  maka  dapat  berlanjut  keproses  selanjutnya  yaitu menentukan kebutuhan user (user requirement). Pada proses ini perancang harus dapat menentukan kebutuhan user di dalam bisnis dan tujuan yang akan dicapai.
1. User flow User flow merupakan representasi visual dari langkah-langkah dan batasan yang dapat diambil oleh pengguna untuk mencapai  tujuan  tertentu.  Tujuannya  adalah  untuk  memahami  perjalanan  pengguna  dan  menggunakan  informasi tersebut  untuk  mencapai  tujuan  mereka[13].  Dengan  adanya  diagram  user  flow,  peneliti  dapat  memvisualisasikan secara sistematis dan terstruktur bagaimana pengguna akan berinteraksi dengan aplikasi serta mengidentifikasi potensi masalah  atau  perbaikan  yang  dapat  dilakukan  untuk  meningkatkan  pengalaman  pengguna  secara  keseluruhan[14]. Pada gambar 5 tahap user flow kegiatan atau akitivitas yang dilakukan oleh sipengguna website .

## NAZIRIN AZMI, S. Kom
Admin
• Laki-laki • 38 Tahun • SMK Setianegara Sembawa BIO
Bapak Nazirin Azmi, S. Kom merupakan guru komputer serta ketua program studi multimedia di SMK Setianegara Sembawa.

## RIZKA FATIMAH
Peserta didik • Perempuan • 15 Tahun • SMK Setianegara Sembawa • Desa Mainan
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Gambar 5. User flow website PPDB
Pada user flow dimulai dengan menampilkan Pop up promosi. Kemuadian menampilkan halaman beranda, lalu terdapat  beberapa  menu  yang  ditampilkan  yaitu  profile  yang  berisikan  tentang  visi  dan  misi  sekolah,  halaman informasi berisi data guru dan pegawai, kemudian pada halaman pendaftaran yang berisikan persyaratan pendaftaran dan dimana user harus membuat akun terlebih dahulu untuk login , jika sudah login selanjutnya user akan mengisi form pendaftaran, lalu user akan mencetak bukti pendaftaran jika pendaftaran sudah berhasil.
Gambar 6. User flow website admin
Gambar  6,  pada user  flow admin  dimulai  dengan  login  yaitu  memasukan  email  dan password ,  lalu  terdapat halaman beranda ( dashboard), halaman PPDB, dan halaman data sekolah. 2. Sitemap
Sitemap adalah  fitur  yang  membantu  pengguna  menjelajahi  halaman  situs web dan  menemukan  informasi  yang tersedia  dengan  cara  yang  mudah  dan  nyaman  [6].  Merancang  situs web dengan Sitemap membantu  pengguna menemukan halaman yang mereka butuhkan sebelum tersesat. Jadi memiliki Sitemap juga memungkinkan pengguna untuk berinteraksi dengan sistem [15]. Sitemap merupakan model konten situs web yang dirancang untuk membantu pengguna dan mesin pencari menjelajahi situs web [16]. Tahapan ini peneliti akan membuat sitemap atau daftar halaman dari website PPDB SMK Setianegara Sembawa agar memudahkan dalam memahami website . Tujuannya dilakukan pembuatan sitemap agar dapat menggambarkan denah setiap halaman pada website tersebut.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Gambar 7. Sitemap website PPDB
Gambar  7 sitemap PPDB  terdiri  dari pop  up promosi,  beranda  yang  terdapat  beberapa  menu  pendukung  yaitu halaman profile yang berisikan sejarah sekolah, fasilitas sekolah, ektrakulikuler yang ada di sekolah tersebut, lalu halaman informasi yang berisikan data guru dan pegawai yang ada di sekolah, selanjutnya halaman pendaftaran yang terdiri dari persyaratan, buat akun, login, form pendaftaran, bukti pendaftaran, dan terakhir halaman contact person.
Gambar 8. Sitemap website admin
Pada sitemap halaman admin terdapat halaman beranda yang terdapat dua menu halaman, yaitu PPDB yang berisi nama peserta didik baru beserta data pendukung, lalu halaman data sekolah yang berisikan data guru & pegawai, peserta didik, fasilitas, ekstrakulikuler, dan informasi.

## d. Menghasilkan Solusi Desain
Pada tahap ini adalah tahap perancangan purwarupa User Interface (UI) dan User Experience (UX) sesuai dengan keinginan dan kebutuhan pengguna.
1. Wireframe
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order

## Centroid in Supplier Performance Evaluation
Wireframe merupakan kerangka atau visual kasar untuk penataan elemen item yang terdapat pada sebuah aplikasi baik website maupun mobile [17]. Wireframe dilakukan  sebagai  perancangan  awal  dari  sebuah  desain website . Dalam  tahapan  ini  sebelum  proses  perancangan  desain  dimulai  dilakukannya  penataan  item-item  agar  pada  saat melakukan pembuatan prototyping sesuai dengan kebutuhan pengguna [18].
2. Prototyping
Tahap ini melibatkan pembuatan desain visual untuk berkomunikasi dengan pengguna. Tujuan dibuatnya prototype yaitu guna memudahkan pengembang aplikasi dalam menganalisa ide, masalah, dan juga pengalaman dari pengguna dalam menggunakan aplikasi. Perancangan prototype dibuat dengan tools figma , karena figma rancangan prototype dapat sangat mudah untuk dibuat [19]. Prototyping merupakan fase pembuatan desain visual di mana nantinya dapat dijadikan  media  komunikasi  kepada  pengguna  ketika      berinteraksi  dengan  sistem,  pembuatan  desain prototype dalam  bentuk high-fidelity ini  berlandaskan  hasil  dari  validasi wireframe  low-fidelity dan user  flow yang  dibuat sebelumnya.
e. Mengevaluasi desain terhadap kebutuhan pengguna
Tahapan evaluasi desain menggunakan metode Usability Testing. Pengguna yang diuji sebaiknya juga memiliki karakteristik dan persona yang berbeda-beda.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Perancangan

## Berikut hasil perancangan dalam penelitian
3.1.1 Wireframe
a. Wireframe Website PPDB
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order

## Centroid in Supplier Performance Evaluation
Gambar 9 merupakan tahapan wireframe terdiri dari beberapa wireframe seperti Pop up promosi, profil sekolah terdiri dari sejarah sekolah, visi/misi sekolah, halaman fasilitas sekolah, halaman ekstrakulikuler, halaman data kepala sekolah  beserta  guru,  halaman  pendaftaran  terdiri  dari  halaman  persyaratan,  registrasi  akun,  login  akun,  formulir pendaftaran, bukti pendaftaran, dan halaman follow us .
b. Wireframe Website Admin
Gambar 10. Wireframe Website Admin
Gambar  10  merupakan  tahapan  yang  terdiri  dari  beberapa wireframe ,  yaitu  halaman login admin,  halaman dashboard, halaman PPDB, halaman data guru dan pegawai, halaman data peserta didik, halaman hapus data, edit data, tambah data, data ekstrakulikuler, dan informasi.

## 3.1.2 Prototype
Tahap ini melibatkan pembuatan desain visual untuk berkomunikasi dengan pengguna. Tujuan dibuatnya prototype yaitu guna memudahkan pengembang aplikasi dalam menganalisa ide, masalah, dan juga pengalaman dari pengguna dalam menggunakan aplikasi. Perancangan prototype dibuat dengan tools figma , karena figma rancangan prototype dapat sangat mudah untuk dibuat [19].

## Design Guideline

## Gambar 11. Design Guideline
Setelah pembuatan wireframe tahap selanjutnya adalah pembuatan prototyping. Pada tahap ini peneliti melakukan desain dengan komponen warna, font, icon, button , dan sebagainya serta membuat desain guidline untuk dijadikan acuan
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order

## Centroid in Supplier Performance Evaluation
dalam  merancang  website  PPDB  SMK  Setianegara  Sembawa.  Namun  sebelum  itu  dalam  penentuan color  scheme memilih  warna  oren  dan  putih  sebagai  warna  utama  pada  website  PPDB  dan  warna  hitam  putih  pada  desain website admin.
Terkait font yang digunakan yaitu Poppins. Font tersebut dipilih karena memiliki karakteristik keterbacaan yang sangat baik dalam bentuk hurufnya dan juga dapat mempercantik desain tersebut.
a. Prototype Website PPDB 1. Pop up promosi
Gambar 12. Pop Up Promosi Website PPDB
Gambar 12 merupakan halaman pop up promo merupakan halaman yang menampilkan informasi terkait promosi potongan harga untuk biaya sekolah.
2. Home
Home adalah halaman utama pada website ini . Gambar 13 merupakan halaman yang berisikan kata sambutan dari kepala sekolah, informasi kabar terkini, dan contact person.
3. Halaman Persyaratan
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Gambar 14. Halaman Persyaratan
Gambar 14 merupakan halaman persyaratan yang berisikan tentang apa saja yang diperlukan untuk pendaftaran dan terdapat juga pendaftaran secara oflline.
4. Login
Gambar 15. Page Login
Gambar 15 merupakan halaman yang memungkinkan peserta login jika sudah memiliki akun. 5. Halaman Pendaftaran
Pada halaman ini ada empat bagian yaitu formulir peserta didik, formulir orang tua, formulir berhasil dikirim, dan bukti pendaftaran.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Pada halaman ini diharapkan kepada calon peserta didik untuk mengisi data diri pada formulir.
Gambar 17. Form Orang Tua
Pada halaman ini diharapkan kepada orang tua calon peserta didik untuk mengisi data diri.
Gambar 18. Formulir Berhasil Dikirim Pada tampilan ini menampilkan bukti berkas formulir yang berhasil dikirim.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Gambar 19 merupakan halaman yang menunjukan bukti pendaftaran bagi peserta didik yang sudah melakukan pendaftaran.
6. Halaman Profile Sekolah
Gambar 20. Profile Sekolah
Gambar  20  merupakan  halaman  profil  yang  berisikan  tentang  singkat.  Pada  halaman  profil  sekolah  terdapat sejarah, visi misi dan struktur SMK Setianegara Sembawa.
b. Prototype Website Admin
Terdapat desain website admin yang bertujuan untuk mengelola dan mengontrol fungsi dari semua fitur website PPDB pada SMK Setianegara Sembawa.
1. Login Admin
Pada  tampilan website  login admin  diharuskan  melakukan  proses  autentifikasi  yang  terdiri  dari  username  dan password dengan benar untuk mendapatkan hak akses saat memasuki halaman website .
Gambar 21. Login Website Admin
2. Dashboard Website Admin
Gambar 22 Pada tampilan dashboard admin akan diperlihatkan halaman khusus PPDB dan beberapa halaman data sekolah seperti data guru, data siswa, fasilitas sekolah, ekstrakulikuler, dan informasi lainnya.
Gambar 22. Dashboard Website admin
3. Halaman PPDB Website Admin
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
Pada tampilan ppdb ini diperlihatkan nama-nama peserta didik baru yang mendaftar di SMK Setianegara Sembawa beserta dokumen pendukung.
Gambar 24. Dokumen Pendukung
Pada gambar 24 merupakan tampilan yang menampilkan dokumen pendukung peserta didik yang sudah lengkap dalam mengisi formulir.
Gambar 25. Form Pendaftaran
Pada Tampilan ini berisi data diri calon peserta didik dan orang tua yang sudah melakukan pendaftaran.
4. Mengevaluasi desain terhadap kebutuhan pengguna
Tahapan  evaluasi  desain  menggunakan  metode Usability  Testing. Pengguna  yang  diuji  sebaiknya  juga  memiliki karakteristik dan persona yang berbeda-beda. Usability Testing merupakan pendekatan alat ukur untuk mengetahui tingkat kemudahan dan pengalaman pengguna saat pertama kali menggunakan sebuah website, sehingga hasil yang diperoleh berupa perolehan data berdasarkan tingkat pengalaman dan kemudahan  [6]. Skala likert merupakan skala yang dipakai untuk menentukan sikap, opini, dan persepsi dari seseorang maupun kelompok terhadap fenomena yang terjadi. Skala likert juga merupakan salah satu skala yang paling umum dipakai untuk penelitian dalam bentuk survei [20].

## 3.1.3 Usability Testing
Pada tahapan ini dilakukannya pengujian dengan menggunakan kuesioner dengan usability testing , Dimana responden pada penelitian ini merupakan 30 orang. Proses pengujian dilakukan secara online menggunakan Google-Form (G-form)
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order

## Centroid in Supplier Performance Evaluation
yaitu  dimana  responden  akan  melakukan  pengujian prototype terlebih  dahulu  dengan  memberikan link  prototype kemudian dilanjutkan dengan pengisian dari pertanyaan yang telah diberikan yang berjumlah 15 pertanyaan berdasarkan metode yang ada.
Tabel 2. Hasil Usability Testing Indikator Rata-Rata Keterangan Learnability P1 3.40 Baik P2 3.37 Baik P3 3.43 Baik P4 3.53 Baik Efficiency P5 3.30 Baik P6 3.27 Baik P7 3.73 Baik Memorability P8 3.57 Baik P9 3.53 Baik P10 3.57 Baik Errors P11 3.53 Baik P12 3.43 Baik Statisfactions P13 3.57 Baik P14 3.33 Baik P15 3.67 Baik
Berdasarkan tabel 2 dari hasil dari pengujian penyebaran kuesioner yang dilakukan, maka didapatkan hasil seperti pada table diatas, maka diperoleh hasil indikator baik dari perhitungan skala linkert 1-4.

## 4.KESIMPULAN
Berdasarkan   hasil   perancangan UI/UX penerimaan peserta didik baru di SMK Setianegara Sembawa berbasis website menggunakan metode user centered design (UCD), dapat disimpulkan sebagai berikut : Hasil perancangan desain user interface dan user experience berdasarkan permasalahan yang ada yaitu dengan membuat perancangan yang dibutukan pengguna  sehingga  peserta  didik  tidak  harus  mengunjungi  sekolah  untuk  melakukan  pendaftaran.  Penelitian  ini menghasilkan 30 desain antarmuka perancangan website penerimaan peserta didik baru (PPDB) dan perancangan website admin. Prototype yang telah dirancang merupakan hasil implementasi dari metode user centered design dimana sampai melakukan pada tahap usability testing dengan menyebarkan koesioner kepada 30 responden. Hal tersebut memperoleh indikator baik dengan melihat hasil evaluasi prototype tersebut dengan menggunakan perhitungan skala likert 1-4 . Hasil yang didapat merupakan rekomendasi dari desain prototype pada website yang sesuai dengan apa yang dibutuhkan oleh pengguna serta pihak SMK Setianegara Sembawa.

## REFERENCES
[1] Irawan Andri Agus and neneng, “Sistem Informasi Penerimaan Siswa Baru Berbasis Web (Studi Kasus Sma Fatahillah Sidoharjo Jati Agung Lampung Selatan),” Jurnal Informatika dan Rekayasa Perangkat Lunak (JATIKA), vol. 1, no. 2, pp. 245–253, 2020, [Online]. Available: http://jim.teknokrat.ac.id/index.php/informatika
[2] Supriyadi and Lutfiyana Nur, “Perancangan Sistem Informasi Pendaftaran Siswa Baru  pada SMA Pusaka 1 Jakarta Berbasis Web,” Informatika Dan RPL, vol. 2, no. 1, pp. 62–68, 2020.
[3] N.  Septiarina,  Wahyudin,  and  Maruloh,  “Perancangan  Sistem  Informasi  Penerimaan  Siswa  Baru  Berbasis  Web  Pada  SMK Bandara,” Prosisko, vol. 8, no. 1, pp. 1–8, 2021.
[4] Junanda diki ardi and Yunita, “Perancangan UI/UX Pendaftaran Siswa Baru Dengan Metode User Centered Design Pada Sekolah Smp Islam Al-Muttaqin,” Rekayasa Perangkat Lunak, vol. 4, no. 2, pp. 1–11, Nov. 2023.
[5] R.  D.  Cahyani1  and  A.  Dwi,  “Penerapan  Metode  User  Centered Design dalam  Perancangan  Ulang  Desain  Website  MAN 1 Pasuruan,” JEISBI, vol. 03, no. 02, pp. 1–9, 2022.
[6] D. Widoseno Ardras, A. Voutama, and T. Ridwan, “Perancangan UI/UX Berbasis Website Pada Penerimaan Peserta Didik Baru (PPDB) di SMK TARUNA KARYA 1 KARAWANG,” Jurnal Mahasiswa Teknik Informatika, vol. 7, no. 2, pp. 1–9, 2023.
[7] A. S. Wijaya, “Human Centered Design dan Perbedaan Dengan User Centered Design,” 2019.
[8] C.  E.  Zen,  S.  Namira,  and  T.  Rahayu,  “Rancang  Ulang  Desain  UI  (User  Interface)  Company  Profile  Berbasis  Website Menggunakan  Metode  UCD  (User  Centered  Design),”  Seminar  Nasional  Mahasiswa  Ilmu  Komputer  dan  Aplikasinya (SENAMIKA) Jakarta-Indonesia, 2022.
Muhammad  Waqas  Arshad,  Combination  of  Multi-Attributive  Ideal-Real  Comparative  Analysis  and  Rank  Order Centroid in Supplier Performance Evaluation
[9] P.  Pada  Pendekatan  Kualitatif  dan  Kuantitatif  Ardiansyah,  Ms.  Jailani,  S.  Negeri,  B.  Provinsi  Jambi,  and  U.  Sulthan  Thaha Saifuddin  Jambi,  “Teknik  Pengumpulan  Data  Dan  Instrumen  Penelitian  Ilmiah,”  2023.  [Online].  Available: http://ejournal.yayasanpendidikandzurriyatulquran.id/index.php/ihsan
[10]  Y. Rifa’i, “Analisis Metodologi Penelitian Kulitatif dalam Pengumpulan Data di Penelitian Ilmiah pada Penyusunan Mini Riset,” 2023. [Online]. Available: https://glorespublication.org/index.php/ekodestinasi
[11]  Kalyani H. M., “apa itu user persona? Retrieved 2020,” https://medium.com/learnfazz/apa-itu-persona-2e3d2cab00ba.
[12]  I. Angelica and C. Nas, “Design UI / UX Prototype Aplikasi Pemesanan Produk Dimskuy Berbasis Mobile Dengan Menggunakan Figma,” manajemen sistem informasi, vol. 1, no. 1, pp. 1–5, Dec. 2022.
[13]  M. Aditya Dhita Pratama, Y. Raymond Ramandhan, and T. Iman Hermanto, “Rancangan UI/UX Design Aplikasi Pembelajaran Bahasa  Jepang Pada Sekolah Menengah Atas  Menggunakan Metode Design Thinking,” jurnal riset komputer, vol. 9, no. 4, pp. 2407–389, 2022.
[14]  S.  Ansori,  P.  Hendradi,  and  S.  Nugroho,  “Penerapan  Metode  Design  Thinking  dalam  Perancangan  UI/UX  Aplikasi  Mobile SIPROPMAWA,”  Journal  of  Information  System  Research  (JOSH),  vol.  4,  no.  4,  pp.  1072–1081,  Jul.  2023,  doi: 10.47065/josh.v4i4.3648.
[15]  Ichsan  Averushyd  Juliansyah  and  Irving  V  Paputungan,  “Perancangan  User    Experience  Pada  Website  Penjualan    Kerajinan Tangan Dengan Metodologi Design Thinking,” pp. 1–10, 2022.
[16]  Nur  Faizi,  “Perancangan    UI/UX  Sistem  Informasi  Input  Data  Produksi Pada Pt  Belitang  Panen  Raya  Menggunakan  Metode Design Thinking,” International Journal of Information System  Technology, vol. 7, no. 2, pp. 109–117, 2023.
[17]  A. Firdaus, D. Bin Zainal, W. I. Firdaus, T. Komputer, and P. Sriwijaya, “Implementasi Flutter Dalam Aplikasi Pencarian Rumah Kost Berbasis Mobile,” 2023.
[18]  Ovia Febri Liantika, “Analisis dan Perancangan Desain User Interface User Experience Website Penerimaan Peserta Didik Baru SMA IMPIEMS Surabaya Menggunakan Metode User Centered Design (UCD),” 2022.
[19]  Adhiza Tiara, Fitri Iskandar, and Rubasy Albaar, “PerancanganUser ExperiencePadaAplikasiPencarianCarWash Menggunakan MetodeUCD (User,” STIKI Informatika Jurnal, vol. 12, no. 1, pp. 1–11, 2022.
[20]  M.  H.  Yudhakesuma,  A.  Muliawati,  and  N.  H.  I,  “Analisis  User  Experience  dan  Redesign  Antarmuka  Website  Portal  Berita Online dengan Metode User Centered Design (UCD) (Studi Kasus:  Cakrawala.co),” jurnal informatik edisi ke 18, pp. 1–11, 2022.