## PERANCANGAN UI/UX WEBSITE SMA PGRI 268 PANGKALAN KERSIK MENGGUNAKAN METODE HUMAN CENTERED DESIGN
Nawfal Septamuyassar 1) , Dwi Rosa Indah 2) , Dedy Kurniawan 3)
1,2,3 Fakultas Ilmu Komputer, Universitas Sriwijaya, Jalan Palembang-Prabumulih, KM 32 Inderalaya,Kabupaten Ogan Ilir, Sumatera Selatan email: 09031382025156@student.unsri.ac.id , indah812@unsri.ac.id, dedykurniawan@unsri.ac.id

## Abstract
In this era of rapid technology, websites are used as a medium for disseminating information quickly and effectively for several agencies, including the world of education. PGRI 268 Pangkalan Kersik High School is one of the schools that implements a website in disseminating information about the school, new student registration, and other information. PGRI 268 Pangkalan Kersik High School already has a previous website, but the website is considered not good in terms of appearance and features  based  on interviews  with students,  alumni  and  the school.  Therefore,  the  school  wants to update the website with a new design design with an attractive appearance and easier  to use. The research method used is Human Centered Design based on ISO 9241-210: 2019 which has activities to understand and determine the user context, determine user needs, produce design solutions, and finally evaluate the design. Usability Testing is carried out using the System Usability Scale (SUS) method. The purpose of this research is to produce a website-based prototype design display.
Keywords: User Interface, User Experience, Human Centered Design, System Usability Scale,

## Website

## Abstrak
Pada era teknologi yang pesat seperti sekarang ini, website dijadikan sebagai media dalam penyebaran informasi yang cepat dan efektif bagi beberapa instansi, termasuk dunia pendidikan. Sekolah SMA PGRI 268 Pangkalan Kersik adalah salah satu sekolah yang menerapkan website dalam penyeberan informasi  tentang  sekolah,  pendaftaran  siswa  baru,  maupun  informasi  lainnya.  SMA  PGRI  268 Pangkalan Kersik sudah memiliki website sebelumnya, namun website tersebut dirasa kurang baik dari segi tampilan dan fitur berdasarkan wawancara dengan siswa, alumni dan pihak sekolah. Oleh sebab itu pihak sekolah ingin memperbaharui website dengan rancangan desain baru dengan tampilan yang menarik dan lebih mudah digunakan. Metode penelitian yang digunakan yaitu Human Centered Design berdasarkan  ISO  9241-210  :  2019  yang  memiliki  aktivitas  memahami  dan  menentukan konteks  pengguna,  menentukan  kebutuhan  pengguna,  menghasilkan  solusi  desain,  dan  terakhir mengevaluasi  desain.  Untuk Usability  Testing dilakukan  menggunakan  metode System  Usability Scale (SUS). Tujuan dari penelitian ini yaitu menghasilkan sebuah tampilan prototype design berbasis website .
Kata Kunci : User Interface, User Experience, Human Centered Design, System Usability Scale, Website

## 1. PENDAHULUAN
Di  era  masyarakat  modern,  akses terhadap  teknologi  dan informasi  sudah  tidak dapat dipisahkan lagi dari dampak globalisasi, dan banyaknya masyarakat yang menggunakan  teknologi  semakin  meningkat. Ini  membuktikan  jika  kemudahan  terhadap akses  teknologi  dan  informasi  berkembang dengan  sangat  cepat  (Adhiya  Adha  et  al., 2023). Website bisa  dibilang  salah  satu
revolusi  sebuah  kemajuan  teknologi  pada bidang informasi yang berbasis
teknologi internet. Dengan adanya website ini diharapkan  dapat  membantu  masyarakat dalam  menyebarkan  informasi  secara  cepat, murah  dan  juga  efektif (Purnamasari Syakti, 2020) .
SMA PGRI 268 Pangkalan Kersik adalah salah  satu  sekolah  yang  menerapkan  sistem informasi berupa website. Berdasarkan wawancara  dengan  pihak  SMA  PGRI  268 Pangkalan  Kersik,  siswa,  dan  alumni  SMA
tersebut  pada  bulan  September  2023,  ada beberapa permasalahan dalam website tersebut. Menurut pihak sekolah, tampilan dari website  ini  jika  perlu  dibuat  lebih  sederhana lagi  dan  menarik  serta  mudah  digunakan, untuk bisa menarik pengguna. Kemudian dari alumni mengatakan warna dari desain website ini terlalu gelap. Untuk pengalaman pengguna, siswa  mengatakan  sedikit  kesulitan  dalam penggunaan  website  ini  terhadap  tampilan yang ada pada fitur website ini.
Ada  beberapa  metode  pengembangan atau  pendekatan  untuk user  interface ,  salah satunya  HCD  ( Human  Centered  Design ). HCD adalah metodologi desain yang berpusat pada  manusia  yang  kemudian  mengadaptasi proses  desain  dan  pengembangan  yang berbeda  sesuai  pada  konteks  yang  ada
( Ergonomics of Human-System Interaction-Human-Centred  Design  for Interactive  Systems ,  2010) .  Pendekatan
HCD  adalah  metode  yang  sesuai  untuk kebutuhan  pengguna  (Widyono  et  al.,  2019). Metode  ini  digunakan  karena  fokus  dari penelitian ini adalah pengguna atau manusianya  itu  sendiri  sebagai  pengguna website. Menurut ( Ergonomics  of  Human-
System Interaction-Human-Centred
Design  for  Interactive  Systems ,  2019) terdapat  beberapa  aktivitas  menurut,  yaitu memahami  dan  menentukan  konteks  dari pengguna,  menentukan  kebutuhan  pengguna, menghasilkan  solusi  desain,  dan  evaluasi desain. Dengan melibatkan manusia, dalam hal ini  pengguna  dan  pemangku  kepentingan, sehingga  kebutuhan  dan  kepuasan  mereka dapat  terpenuhi  dan  tujuan  organisasi  yang direncanakan sebelumnya dapat tercapai(Rahmah et al., n.d.). Metode HCD ini berfokus  pada  pengguna,  kebutuhan  mereka, dan aspek ergonomis, ilmiah dan teknis terkait kegunaan.  (Firantoko  et  al.,  2019).  Menurut (Rohmah  et  al.,  2021) Human-Centered Design mempunyai  proses  iterasi.  Tujuan iterasi  adalah  untuk  mengurangi  sebuah kegagalan  yang  hasilnya  akan  sesuai  dengan harapan dari pengguna. Metode ini digunakan untuk  menyelesaikan  permasalahan  yang umum terjadi pada manusia untuk mendapatkan  solusi  yang  berpusat  pada pengguna sehingga hasil yang diperoleh sesuai dengan  kebutuhan.  (Salsabilah  et  al.,  2022). Metode Human-Centered Design dapat memberikan  solusi  desain  sesuai  dengan
kebutuhan pengguna (Farid Muzayyani et al., 2023).Metode ini berorientasi pada  pengguna dan  didasarkan  pada  kemampuan  dan kebutuhan pengguna (Larasati et al., 2022).
Perancangan user experience telah mendapat  perhatian  besar  di  dunia  modern (Handayani  Hendra Mayatopani, 2023) . Untuk  memberikan  layanan  yang  sesuai dengan  harapan  pengguna,  diperlukan  desain user  experience (UX).  Desain  UX  memiliki tujuan  supaya  aplikasi  bisa  memberikan pengalaman pengguna yang baik dan meningkatkan  efektivitas  aplikasi.(Isadora  et al., n.d.).
Berdasarkan  latar  belakang  diatas,  dan berdasarkan permasalahan yang telah uraikan, maka dari itu penulis ingin mengangkat sebuah judul  “Perancangan  UI/UX  Website  SMA PGRI 268 PANGKALAN
KERSIK Menggunakan  Metode Human  Centered Design ”.

## 2. METODE PENELITIAN
Dalam  penelitian  ini,  material  penelitian yang  akan  dilakukan  terdiri  dari  objek penelitian,  subjek  penelitian,  dan  proses pengumpulan  data.  Objek  pada  penelitian  ini ialah merancang ulang user interface dan user experience website SMA PGRI 268 Pangkalan Kersik. Subjek pada penelitian ini ialah siswa dan  guru  SMA  PGRI  268  Pangkalan  Kersik. Data  dalam  tugas  akhir  ini  dikumpulkan dengan wawancara dan observasi langsung di lokasi penelitian.
Dalam penelitian ini peneliti menggunakan Human  Centered  Design sebagai  metode perancangan  interface.  Adapun  tahapan  yang dilakukan pada penelitian ini akan menggunakan metode HCD  berdasarkan ISO 9241-210  :  2019  yaitu  memahami  dan menentukan  konteks  pengguna,  menentukan kebutuhan  pengguna,  menghasilkan  desain solusi,  dan  mengevaluasi  desain.  Ilustrasi tahapan  tersebut  dapat  dilihat  dalam  gambar dibawah ini :
Septamuyassar, Perancangan UI/UX Website SMA PGRI 268 Pangkalan Kersik Menggunakan Metode Human Centered Design , 276-286 | 278
Gambar 1. Tahap Penelitian
Gambar  1  adalah  tahapan  dari  penelitian yang  dilakukan  oleh peneliti.  Adapun  rincian dari  tahapan  penelitian  yang  akan  dilakukan oleh penulis akan diuraikan dibawah ini.

## 2.1 ANALISIS PERMASALAHAN
Pada  tahapan  ini,  peneliti  melakukan analisis  terkait  permasalahan  yang  ada  pada lokasi  objek  penelitian.  Peneliti  nantinya melakukan  wawancara  dengan  pihak  terkait untuk mendapatkan detail permasalahan yang dialami pengguna terkait website SMA PGRI 268 Pangkalan Kersik.

## 2.2 STUDI LITERATUR
Dalam tahapan ini dilakukan studi literatur lebih
jauh mengenai perancangan
menggunakan  metode  HCD . Studi  literatur yang dilakukan penulis melalui bahan bacaan baik jurnal, buku, skripsi, atau media lainnya yang  mendukung  penulis  untuk  menerapkan metode  HCD  ini  sebagai  metode  yang  tepat yang  digunakan  dalam  penelitian  terhadap perancangan ulang UI/UX website SMA PGRI 268 Pangkalan Kersik.

## 2.3 METODE  HUMAN  CENTERED DESIGN
Dalam  tahapan  ini,  peneliti  memasuki tahapan  untuk  membuat  rancangan  ulang UI/UX  website  SMA  PGRI  268  Pangkalan
Kersik menggunakan metode Human
Centered  Design (HCD).    Adapun  tahapan metode HCD berdasarkan ISO 9241-210: 2019 diawali  dengan  memahami  dan  menentukan
konteks pengguna, lalu menentukan kebutuhan  pengguna,  kemudian  membuat desain  solusi,  dan  terakhir  adalah  evaluasi desain.  Berikut  penjelasan  tahapan  metode
Human Centered Design. 2.3.1 MENETUKAN KONTEKS PENGGUNA Dalam tahapan ini, peneliti akan melakukan  riset  untuk  menentukan  dan mengevaluasi  awal  konteks  penggunaan website  SMA  PGRI  268  Pangkalan  Kersik. Dalam  tahapan  ini  peneliti  melakukan  studi literatur  dan  wawancara  terhadap  pengguna dan stakeholder yang ada.

## 2.3.2 MENENTUKAN KEBUTUHAN PENGGUNA
Selanjutnya  dalam  tahapan  ini  peneliti akan  mengidentifikasikan  persyaratan  atau kebutuhan  dari  pengguna  berdasarkan  hasil wawancara  pada  tahapan  sebelumnya.  Pada tahap  ini  akan  berisi  kebutuhan  pengguna seperti kebutuhan fitur tampilan dan sebagainya  yang  berkaitan dengan  kebutuhan pengguna.

## 2.3.3 MENGHASILKAN SOLUSI DESAIN
Setelah menentukan kebutuhan pengguna, peneliti  akan  melakukan  perancangan  desain solusi berupa prototype antarmuka pengguna menggunakan software yang bernama figma. Perancangan desain antarmuka dibuat berdasarkan  hasil  dari  tahapan  sebelumnya. Tahap  ini  memiliki  tujuan  untuk  melihat interaksi pengguna dengan sistem yang ada.

## 2.3.4 MENGEVALUASI DESAIN
Dalam  tahapan  ini,  peneliti  akan  menguji desain  yang  telah  dibuat  sebelumnya  dengan menggunakan  figma untuk membantu  pengguna mengevaluasi  desain  yang  telah  dibuat  melalui pengujian usability testing .
2.4 SYSTEM USABILITY SCALE (SUS)
Metode System  Usability  Scale (SUS), pertama kali dikembangkan oleh John Brooke pada tahun 1986, adalah metode untuk menilai kegunaan  salah  satu  dari  mereka  di  halaman web. SUS tidak memerlukan perhitungan yang rumit  dan  memakan  waktu    dengan    skor  0 hingga  100  (Aisyah  et  al.,  2021).  Dalam
metode SUS terdapat 10 instrumen pertanyaan seperti pada tabel dibawah :
Tabel 1. Instrumen Pertanyaan SUS
No Items In Indonesian 1 Saya akan menggunakan sistem ini lagi 2 Saya merasa sistem ini rumit digunakan 3 Saya  merasa  sistem  ini  mudah  untuk digunakan 4 Saya membutuhkan bantuan dari orang lain  atau  teknisi  dalam  menggunakan sistem ini 5 Saya  merasa  fitur-fitur  sistem  ini berjalan dengan semestinya 6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi) pada sistem ini 7 Saya merasa orang lain akan memahami cara  menggunakan  sistem  ini  dengan cepat 8 Saya merasa sistem ini membingungkan 9 Saya  merasa  tidak  ada  hambatan dalam menggunakan sistem ini 10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini
Menurut (Damayanti et al., 2022) metode SUS  memiliki  10  pertanyaan  dan  5  jawaban. Berikut  aturan  yang  ada  dalam  perhitungan skor  SUS :
1. Jika  soal  bernomor  ganjil,  skor  dari pengguna akan dikurang dengan 1.
2. Jika  soal  dengan  nomor  genap, perhitungan  skor  yaitu  nilai  5 dikurangi dengan skor yang diberikan oleh  pengguna.
3. Hasil  nilai  rata-rata,  diperoleh  dari hasil penjumlahan pada tiap pertanyaan kemudian dikalikan dengan 2,5.
Berikut  ini  tabel  interpretasi  nilai  SUS menurut (Damayanti et al., 2022) yaitu :
Tabel 2. Intepretasi nilai SUS Nilai SUS Peringkat Adjective Rating 80,3 A Excellent 68 – 80,3 B Good 68 C Okay 51 – 68 D Poor 51 E Awfull

## 3. HASIL DAN PEMBAHASAN
3.1 ANALISIS PERMASALAHAN
Website sekolah SMA PGRI 268
Pangkalan  Kersik  merupakan  website  yang digunakan untuk media penyebaran informasi terkait dengan informasi pendaftaran sekolah, informasi  mengenai  ekstrakulikuler  sekolah, visi  misi sekolah, sejarah sekolah, informasi terkini  sekolah,  dan  sebagainya.  Namun, dalam  penggunaannya  dirasa  masih  belum efektif dikarenakan masih minimnya pengguna,  user  yang  merasa  desain  tampilan kurang menarik, dan tampilan fitur yang dirasa sedikit rumit digunakan.

## 3.2 STUDI LITERATUR
Dalam tahapan ini dilakukan studi literatur lebih jauh mengenai perancngan menggunakan  metode  HCD.  Studi  literatur yang dilakukan penulis melalui bahan bacaan baik jurnal, buku, skripsi, atau media lainnya yang  mendukung  penulis  untuk  menerapkan metode  HCD  ini sebagai  metode  yang  tepat yang  digunakan  dalam  penelitian  terhadap perancangan  ulang  UI/UX  website    SMA PGRI 268 Pangkalan Kersik.

## 3.3 PENERAPAN METODE HUMAN CENTERED DESIGN
Dalam  tahapan  ini,  peneliti  mulai memasuki tahapan untuk membuat rancangan ulang  UI/UX  website  SMA  PGRI  268 Pangkalan Kersik menggunakan metode HCD.
Adapun  tahapan  metode Human  Centered Design menurut  ISO  9241-210:  2019  diawali dengan  memahami  dan  menentukan  konteks pengguna, lalu menentukan kebutuhan pengguna,  kemudian  membuat  desain  solusi, dan terakhir adalah evaluasi desain.
Septamuyassar, Perancangan UI/UX Website SMA PGRI 268 Pangkalan Kersik Menggunakan Metode Human Centered Design , 276-286 | 280 3.3.1 MENENTUKAN KONTEKS PENGGUNA
Pada  tahap  ini  peneliti  melakukan  riset untuk  menentukan  dan  mengevaluasi  awal konteks penggunaan website SMA PGRI 268 Pangkalan  Kersik.  Pada  tahapan ini  diadakan wawancara  dengan  pengguna  dan  juga stakeholder  yang  ada.  Tujuan  pada  tahap  ini yaitu  untuk  mengidentifikasi  individu  atau siapapun yang terlibat dalam penggunaan situs web,  tujuan  penggunaan  situs  web  dan keadaan di mana situs web digunakan.
Berdasarkan hasil analisis yang
dilakukan, didapatkan konteks pengguna yang dijadikan  sasaran  dalam  penelitian  ini  yang diidentifikasi  sebagai  civitas  akademika  yang menggunakan  website  untuk  mencari  dan menerima  informasi  terkait  dengan  informasi sekolah, pendaftaran sekolah, program penelitian, artikel dan berita, pendataan alumni dan sebagainya. Adapun karakteristik konteks pengguna berdasarkan wawancara yang sudah dilakukan, dapat  dilihat dalam tabel berikut :

## Tabel 3. Karakteristik Pnegguna
Pengguna Karakteristik Operator a. Tenaga  pengajar  di  SMA  PGRI
268 Pangkalan Kersik.
b. Bisa menggunakan website
c. Bisa  mengoperasikan  perangkat komputer atau mobile Guru a. Tenaga  pengajar  di  SMA  PGRI 268 Pangkalan Kersik.
b. Bisa menggunakan website
c. Bisa mengoperasikan  Perangkat komputer atau mobile
Siswa a. Siswa  di  SMA  PGRI  268 Pangkalan Kersik b. Bisa menggunakan website
c. Bisa  mengoperasikan  perangkat komputer atau mobile
Setiap  kelompok  pengguna  memiliki tugas  masing-masing  yang  dijalankan  pada website.  Kelompok  pengguna  guru  memiliki tugas  untuk  melihat  informasi  dan  mengisi berbagai  informasi  yang  ada  pada  website salah satunya untuk membuka dan mengupload dokumen-dokumen penting yang memiliki password dalam  penggunaannya sebagai  penunjang  informasi.  Sedangkan untuk  pengguna  siswa,  pengguna  bisa
mengakses website tersebut  sebagai  media informasi  yang  berisi  berbagai  informasi seperti informasi terkait artikel, ekstrakulikuler,  informasi  terkait  berita  acara sekolah tersebut, dan sebagainya.
Selain  karakteristik  tugas  pengguna, karakteristik  lingkungan  sistem  juga  harus diperhatikan.  Karena,  karakteristik  lingukan sistem  bisa  mempengaruhi  kinerja  secara teknis dalam penggunaan website. Berikut ini adalah  karakteristik  lingkungan  sistem  yang dapat mempengaruhi :
Tabel 4. Karakteristik Lingkungan Sistem
Karakteristik Keterangan Hardware (Perangkat Keras) Pendukung  perangkat  keras yang  terdiri  atas  komputer, laptop,  atau handphone untuk mengakses website .
Software
(Perangkat Lunak)
Perangkat  lunak  yang  terdiri atas browser yang  digunakan untuk mengakses website seperti  Google  Chrome  atau Microsoft Edge. Jaringan Jaringan disini berupa koneksi internet yang digunakan untuk terhubung  ke server Ketika mengakses website .  Jaringan bisa  berupa  jaringan internet , wi-fi, ataupun modem.

## 3.3.2 MENENTUKAN KEBUTUHAN PENGGUNA
Setelah mendapatkan informasi terkait konteks  pengguna  dan  dilakukan  wawancara terhadap  para  pengguna,  maka  didapatkan kebutuhan  pengguna  berdasarkan  wawancara yang  telah  dilakukan.  Proses  ini  dilakukan  guna mengidentifikasi  atau  merumuskan  serangkaian kebutuhan(Sabandar et al., 2022). Dilakukan juga kuisioner  usability  testing  menggunakan system usability  scale (SUS)  terhadap  penggunaan website yang sudah ada untuk melihat lebih jauh bagaimana pengalaman pengguna dalam menggunakan website tersebut.
Berdasarkan  hasil  wawancara  terhadap  para pengguna  website  SMA  PGRI  268  Pangkalan Kersik,  maka  didapatkan  kebutuhan  fungsional dan  non  fungsional  dari  website  tersebut.
Kebutuhan  dari  pengguna  dapat  dilihat  melalui tabel dibawah ini :
Tabel 5. Kebutuhan Fungsional
Pengguna

## Kebutuhan Fungsional
Operator - Untuk  akses  sistem  dapat dijalankan  secara  cepat  dan tidak lambat - Sistem  dapat  menampilkan fitur tracer alumni Guru - Untuk  akses  sistem  dapat dijalankan  secara  cepat  dan tidak lambat saat digunakan - Sistem  dapat  menampilkan fitur pendataan alumni
- Sistem dapat menampilkan isi materi pembelajaran - Sistem  dapat  mengunduh materi pembelajaran Siswa - Isi  website  seperti  informasi diperbanyak lagi - Sistem dapat dijalankan
dengan baik Tabel 6. Kebutuhan Non Fungsional Pengguna Kebutuhan Non Fungsional Operator - Tampilan website dibuat lebih sederhana  lagi  dan  mudah digunakan - Warna  dari  website  bisa dirubah  untuk  memperbagus tampilan Guru - Tampilan website dibuat lebih sederhana  lagi  dan  mudah digunakan
- Warna  dari  website  bisa dirubah  untuk  memperbagus tampilan - Tata  letak  tampilan  website bisa dibuat lebih bagus lagi Siswa - Tampilan website yang dibuat lebih bagus dan sederhana lagi - Warna  dari  website  bisa dirubah dan dibuat lebih enak untuk dilihat - Tata letak objek yang ada pada website  bisa  diperbagus  atau ditata supaya terlihat rapi 3.3.3 PEMBUATAN DESAIN SOLUSI
Setelah
mendapatkan serangkaian persyaratan  yang  diberikan  sesuai  dengan kebutuhan  pengguna  website  di  SMA  PGRI 268 Pangkalan Kersik, selanjutnya dilanjutkan dengan  membuat  desain  antarmuka  atau menghasilkan solusi desain.
Pada  tahap  ini  dikumpulkan  hasil kebutuhan melalui wawancara dan
brainstorming yang  telah  diperoleh  dari tahapan  sebelumnya  untuk  kemudian  dibuat solusi  dari  permasalahan  yang  ada.  Berikut merupakan  hasil brainstorming yang  telah dilakukan :
Gambar 2. Hasil Brainstorming
Setelah mengumpulkan hasil dari kebutuhan  pengguna  melalui  wawancara  dan brainstorming ,  selanjutnya  adalah  membuat sitemap yang  digunakan  sebagai  gambaran interaksi  antara  pengguna  dengan  sistem sehingga  pengguna  dapat  memahami  tugas yang ada dalam menggunakan sistem tersebut.
Septamuyassar, Perancangan UI/UX Website SMA PGRI 268 Pangkalan Kersik Menggunakan Metode Human Centered Design , 276-286 | 282
Gambar 3. Sitemap

## 3.3.3.1 LOW-FIDELITY
PROTOTYPE (WIREFRAME)
Wireframe  adalah  kerangka  dasar  di  mana desain  solusi  dibuat.  Dalam  hal  ini wireframe yang  dibuat  yaitu low-fidelity  prototype . Wireframe sendiri  mewakili  sebuah  halaman yang  nantinya  akan  dibuat.  Contoh Wireframe website SMA PGRI 268 Pangkalan Kersik dapat dilihat pada gambar 5.
Gambar 4. Wirefame Halaman Website
SMA PGRI 268 Pangkalan Kersik
Pada  gambar  4,  merupakan wireframe halaman  beranda,  halaman  profil,  halaman informasi,  halaman  direktori,  dan  halaman lainnya.  Bisa  dilihat  pada  halaman  beranda berisi tampilan selamat datang yang ditampikan pada halaman awal. Kemudian ada
penjelasan terkait poin website ini dibuat, yaitu sebagai sarana akademik, visualisasi data, dan juga sebagai media PPDB (Penerimaan Peserta Didik  Baru).  Lalu  pada  halaman  beranda terdapat  sekilas  mengenai  SMA  PGRI  268 Pangakalan  Kersik.  Kemudian  ada  informasi terkait PPDB, dan terdapat tampilan berita dan informasi. Terakhir ada profil data guru tenaga kerja yang ada di halaman beranda.

## 3.3.3.2 HIGH-FIDELITY PROTOTYPE
Setelah  membuat low-fidelity  prototype ,
selanjutnya  yaitu  membuat high-fidelity prototype yang  merupakan  tampilan  desain yang  memiliki  tampilan  visual,  warna,  dan elemen  yang  detail.  Untuk  melihat  contoh high-fidelity  prototype halaman beranda  pada website SMA PGRI 268 Pangkalan Kersik bisa dilihat pada gambar 5.
Gambar 5. Tampilan High-fidelity prototype Halaman Beranda Pada  halaman  beranda,  berisi  tampilan selamat datang yang ditampikan pada halaman awal.  Kemudian  ada  penjelasan  terkait  poin website  ini  dibuat,  yaitu  sebagai  sarana akademik,  visualisasi  data,  dan  juga  sebagai media  PPDB  (Penerimaan  Peserta  Didik Baru).  Lalu  pada  halaman  beranda  terdapat
sekilas mengenai SMA PGRI 268 Pangakalan Kersik. Kemudian ada informasi terkait PPDB, dan  terdapat  tampilan  berita  dan  informasi. Terakhir ada profil data guru tenaga kerja yang ada  di  halaman  beranda.  Pada  bagian  navbar terdapat  5  halaman  utama  yang  akan  dibuat desain  yaitu  halaman  Beranda,  Profil, Direktori, Informasi, dan Lainnya.
Gambar 6. High-fidelity prototype Halaman Profil – Sejarah Sekolah
Pada  gambar  6  adalah  halaman  sejarah sekolah  berisi  semua  penjelasan  mengenai awal  sekolah  SMA  PGRI  268  Pangkalan Kersik  berdiri  sampai  dengan  sekarang  yang sudah mengalami perkembangan. Pada halaman  ini  terdapat  foto  sekolah  nantinya yang digunakan sebagai background pendukung.
Selanjutnya  adalah  tampilan high-fidelity prototype halaman  data  GTK  berisi  semua data profil guru dan tenaga kerja SMA PGRI 268  Pangkalan  Kersik.  Data  tersebut  berisi Nama,  NIY,  NUPTK,  Jabatan  Struktural, Jabatan Fungsional, dan Tahun Aktif. Untuk melihat high-fidelity prototype halaman data GTK, bisa dilihat pada gambar 7.
Gambar 7. Tampilan High-fidelity prototype
Halaman Direktori – Data GTK Selanjutnya  adalah  tampilan  dari high- fidelity  prototype Halaman  Informasi  yaitu Berita. Halaman ini akan berisi semua berita terbaru yang telah dilaksanakan oleh sekolah,
baik  itu repor t  kegiatan  rapat,  informasi akademik, dan yang lainnya. Tampilan high- fidelity  prototype halaman  informasi  berita dapat dilihat pada gambar 8.
Gambar 8. Tampilan High-fidelity prototype Halaman Informasi - Berita
Septamuyassar, Perancangan UI/UX Website SMA PGRI 268 Pangkalan Kersik Menggunakan Metode Human Centered Design , 276-286 | 284
Gambar 9. Tampilan High-fidelity prototype Halaman Lainnya – Materi Pembelajaran
Bisa  dilihat  didalam  gambar  9  adalah tampilan high-fidelity prototype dari halaman lainnya tentang materi pembelajaran. Halaman ini terdapat berbagai materi pembelajaran dari berbagai  kelas  yang  nantinya  bisa  diunduh oleh semua siswa.

## 3.3.4 Evaluasi Desain
Setelah pembuatan desain solusi, langkah selanjutnya  yaitu  mengevaluasi  desain  yang telah dibuat. Evaluasi desain dilakukan dengan cara  melakukan  uji  coba  terhadap  desain prototype website kepada  para  pengguna menggunakan  metode system  usability  scale (SUS).
Pada  pengujian usability sebelumnya
dengan tampilan website yang lama
menggunakan metode SUS, skor rata-rata yang didapatkan yaitu sebesar 67. Yang mana skor tersebut  memiliki  peringkat  D  dengan adjective  rating yaitu Poor. Artinya  website tersebut diperlukan perbaikan.
Pada pengujian prototype tampilan desain yang baru pada tahap usability, menggunakan kuisioner  dari system  usability  scale dengan partisipan sebanyak 20 orang. Yang terdiri atas 5 orang guru dan 15 siswa.
Selanjutnya hasil dari  kuisioner  yang sudah ada dihitung menggunakan rumus dari metode SUS. Rumusnya sebagai berikut :
Gambar 10. Rumus Perhitungan SUS menurut (Damayanti et al., 2022)
Setelah  dihitung  menggunakan  rumus pada  gambar  10,  didapatkan  hasil  rata-rata nilai pada tabel berikut :
Tabel 7. Nilai Rata-Rata SUS Responden Jumlah Nilai R1 35 87.5 R2 31 77.5 R3 31 77.5 R4 25 62.5 R5 26 65 R6 31 77.5 R7 28 70 R8 27 67.5 R9 35 87.5 R10 33 82.5 R11 22 55 R12 25 62.5 R13 19 47.5 R14 18 45 R15 26 65 R16 37 92.5 R17 32 80 R18 23 57.5 R19 33 82.5
R20 34 85 Hasil Rata-Rata 71.37
Berdasarkan  tabel  7  mengenai  rata-rata nilai  SUS  pada  tampilan  desan  baru website SMA  PGRI  268  Pangkalan  Kersik,  didapat akhir  nilai  sebesar  71.37  dengan  peringkat  B dan adjective  rating yaitu Good. Sehingga dengan  nilai  yang  didapatkan,  rancangan tampilan baru desain website SMA PGRI 268 Pangkalan Kersik dapat dikatakan layak untuk dikembangkan.

## 4. SIMPULAN
Berdasarkan  hasil  perancangan design interface website SMA  PGRI  268  Pangkalan Kersik    yang    dibuat  dengan    pendekatan Human  Centered  Design dan  telah  dilakukan pengujian  kegunaan usability menggunakan System  Usability  Scale (SUS),  maka  dapat disimpulkan  bahwa  desain  baru  yang  telah dirancangan  ulang  ini  dengan  metode  HCD bisa dibilang berhasil dengan persentase 70%. Pada prototype  website SMA  PGRI  268 Pangkalan Kersik yang dibuat, ada penambahan fitur dan perbaikan tampilan yang lebih  baik.  Hal  ini  dibuktikan  berdasarkan hasil  pengujian usability dengan  metode System  Usability  Scale dan  memperoleh  skor sebesar  71.37  dengan  peringkat  B  dan adjective  rating yang  didapat  yaitu Good . Dengan  nilai  yang  didapat  tersebut,  desain website dapat dianggap layak untuk dikembangkan.  Untuk  saat  ini, prototype design masih  sebatas design saja  dan  belum dikembangkan.  Penulis  berharap  jika  suatu saat design dari  tampilan website bisa dikembangkan  dan  diimplementasikan  oleh pihak sekolah.

## 5. UCAPAN TERIMAKASIH
Penulis  mengucapkan  terimakasih  yang sebanyak  –  banyaknya  kepada  semua  pihak yang sudah turut membantu dan berkontribusi untuk menyelesaikan hasil dari tugas akhir ini.

## 6. DAFTAR PUSTAKA
Adhiya Adha, I., Voutama, A., Ali Ridha,
A., Ilmu Komputer, F., Singaperbangsa Karawang, U.,
HSRonggo Waluyo, J., Timur, T.,
Barat,  J.  (2023).  Perancangan  Ui/Ux Aplikasi  Ogan  Lopian  Diskominfo Purwakarta  Menggunakan  Metode Design Thinking. JOISIE Journal Of Information  System  And  Informatics Engineering , 7 (1).
Aisyah, S., Saputra, E., Evrilyan Rozanda, N.,  Khairil  Ahsyar,  T.,  Studi  Sistem Informasi,  P.,  Sains  dan  Teknologi, F.,  Sultan  Syarif  Kasim  Riau  Jl Soebrantas  No,  U.  H.,    Baru,  S. (2021).  Evaluasi  Usability  Website
Dinas  Pendidikan  Provinsi  Riau Menggunakan Metode System Usability Scale. Jurnal Ilmiah Rekayasa  Dan  Manajemen  Sistem Informasi , 7 (2), 125–132. https://disdik.riau.go.id.
Damayanti, C., Triayudi, A.,  Sholihati, I.  D.  (2022).  Analisis  UI/UX  Untuk Perancangan Website Apotek dengan Metode Human Centered Design dan System Usability Scale. Jurnal Media Informatika  Budidarma , 6 (1),  551. https://doi.org/10.30865/mib.v6i1.35 26
Ergonomics of human-system interaction- Human-centred design for interactive systems Copyright International
Organization  for  Standardization Provided  by  IHS  under  license  with ISO  Not  for  Resale  No  reproduction or  networking  permitted  without license from Ihs Copyright Protected Document from IHS . (2010).
Ergonomics of human-system interaction-
Human-centred design for interactive systems Copyright Protected Document . (2019). www.iso.org Farid Muzayyani, M., Tolle, H., Cahya, D., Nugraha, A. (2023). Perancangan User Experience Aplikasi Marketplace Handicraft menggunakan Metode Human- Centered  Design (Vol.  7,  Issue  4).
http://j-ptiik.ub.ac.id
Firantoko, Y., Tolle, H.,  Muslimah Az- Zahra, H. (2019). Perancangan User Experience  Dengan  Menggunakan
Septamuyassar, Perancangan UI/UX Website SMA PGRI 268 Pangkalan Kersik Menggunakan Metode Human Centered Design , 276-286 | 286
Metode  Human  Centered  Design Untuk  Aplikasi  Info  Calon  Anggota Legislatif  2019 (Vol.  3,  Issue  3). http://j-ptiik.ub.ac.id
Handayani,  N.,    Hendra  Mayatopani,  ).
(2023).  Perancangan  Ui/Ux  Aplikasi
Destinasi  Wisata  Berbasis  Web Menggunakan Metode Human Centered Design. JOISIE Journal Of Information  System  And  Informatics
Engineering , 7 (1), 35–43.
Isadora,  F.  R.,  Hanggara,  B.  T., Mursityo,  Y.  T.  (n.d.). Perancangan
User  Experience  Pada  Aplikasi Mobile  Homecare  Rumah  Sakit Semen Gresik Menggunakan Metode Design Thinking . https://doi.org/10.25126/jtiik.202184 550
Larasati,  I.  K.,  Hayuhardhika,  W.,  Putra, N.,    Rokhmawati,  R.  I.  (2022).
Perancangan User Experience Aplikasi E-Business Pasar Tradisional  Dengan  Metode  Human Centered Design (Studi Kasus: Pasar
Oro-Oro  Dowo) . 9 (1),  163–172.
https://doi.org/10.25126/jtiik.202295 592
Purnamasari,  S.  D.,    Syakti,  F.  (2020).
Implementasi Usability Testing dalam  Evaluasi  Website  Sekolah. Jurnal  Sisfokom  (Sistem  Informasi
Dan  Komputer) , 9 (3),  420–426. https://doi.org/10.32736/sisfokom.v9 i3.1000
Rahmah, S. N., Muslimah Az-Zahra, H.,
Mursityo,  Y.  T.  (n.d.). Perancangan User  Experience  Website  Travel Mabruro  Menggunakan  Pendekatan Human-Centered Design . https://doi.org/10.25126/jtiik.202294 860
Rohmah, I., Hadi Wijoyo, S.,  Muslimah Az-Zahra, H. (2021). Evaluasi
Website Institut Agama Islam Negeri (IAIN) Jember menggunakan Metode
Human Centered Design (HCD) dan System Usability Scale (SUS) (Vol. 5, Issue 9). http://j-ptiik.ub.ac.id
Sabandar,  V.  P.,  Sussolaikah,  K., Roring, R. S. (2022). Penerapan User-
Centered  Design  Method  Guna Pembaruan Substansi Terhadap Informasi dan Data-Data pada
Website. Journal of Computer System and  Informatics  (JoSYC) , 4 (1),  116– 127.
https://doi.org/10.47065/josyc.v4i1.2 526
Salsabilah,  S.,  Wahyuddin,  Moh.  I., Sari, R. T. K. (2022). Analisa UI/UX
Terhadap Perancangan Website Laundry  dengan  Metode  Human Centered Design dan User Experience  Questionnaire. Jurnal Media  Informatika  Budidarma , 6 (1),
720. https://doi.org/10.30865/mib.v6i1.35
47 Widyono,  S.  F.,  Hendrakusma,  N., Akbar,  M.  A.  (2019). Perancangan User Interface Aplikasi Travelingyuk Berbasis Mobile Menggunakan
Metode  Human  Centered  Design (HCD) (Vol.  3,  Issue  8).  http://j- ptiik.ub.ac.id