Vol. 12 No. 3, pISSN: 2303-0577 eISSN: 2830-7062              http://dx.doi.org/10.23960/jitet.v12i3.4591

## PENERAPAN  METODE  USER  CENTERED  DESIGN DALAM  PERANCANGAN  DESAIN  UI/UX  WEBSITE SMAN 5 KARAWANG
Kris Adiwinata 1* , Bagja Nugraha 2 , Taufik Ridwan 3 1,2,3 Universitas Singaperbangsa Karawang; Jl. HS.Ronggo Waluyo, Puseurjaya, Telukjambe Timur, Karawang, Jawa Barat 41361; (0267) 641177
Received: 21 Juni 2024 Accepted: 31 Juli 2024 Published: 7 Agustus 2024
Keywords: Desain; System Usability Scale; UCD; UI/UX.
Corespondent Email: 2010631250057@student.uns ika.ac.id
Abstrak. Website  dalam  lembaga  pendidikan  berfungsi  sebagai  pusat informasi  resmi  yang  valid  dan  terpercaya.  Tampilan  website  yang  baik memberikan  pengalaman  positif  bagi  pengguna.  Metode  User  Centered Design  (UCD)  menjadikan  pengguna  sebagai  pusat  rancangan  desain,  yang bertujuan meningkatkan antarmuka dan pengalaman pengguna. Penelitian ini bertujuan  menerapkan  metode  UCD  dalam  perancangan  desain  UI/UX website  SMAN  5  Karawang.  Diharapkan  metode  UCD  dapat  mengatasi kendala  antarmuka  dan  pengalaman  pengguna,  dengan  menciptakan  desain yang  ramah  pengguna.  Hasil  penelitian  ini  adalah  rancangan  desain  UI/UX website  SMAN  5  Karawang  yang  dapat  digunakan  sebagai  dasar pengembangan  website  sekolah.  Selain  itu,  hasil  penelitian  menunjukkan peningkatan  pada  skor  evaluasi  SUS  yang  semula  62.8  meningkat  menjadi 78.4.
Abstract. Websites in educational institutions function as valid and reliable centers  of  official  information.  A  good  website  design  provides  a  positive experience for users. The User Centered Design (UCD) method places users at  the  center  of  design,  aiming  to  improve  interfaces  and  user  experiences. This study aims to apply the UCD method in designing the UI/UX of the SMAN 5  Karawang  school  website.  It  is  hoped  that  the  UCD  method  can  address interface  and  user  experience  issues  by  creating  user-friendly  designs.  The result of this research is a UI/UX design for the SMAN 5 Karawang school website that can be used as a basis for the school's website development. The research  findings  also  show  an  improvement  in  the  SUS  evaluation  score, which initially was 62.8 and increased to 78.4.

## 1. PENDAHULUAN
Website adalah sekumpulan halaman terhubung yang menyajikan berbagai informasi dengan  elemen-elemen  seperti  teks,  gambar, animasi,  dan  suara.  Sifatnya  bisa  statis  atau dinamis dan saling terhubung melalui jaringan halaman  [1].  Tampilan  antarmuka  yang menarik akan memberikan pengalaman khusus terhadap pengguna ketika menggunakan aplikasi [3].
SMAN  5  Karawang  merupakan  sekolah tingkat atas yang terdapat di daerah Karawang. Didirikan  pada  tahun  1963.  Pada  tahun  2020 lalu,  SMAN  5  Karawang  telah  berhasil mengembangkan  website  sekolah  mereka  dan menjadikannya  sebagai  sarana  pusat informasi bagi civitas akademika maupun masyarakat luar yang ingin tahu lebih dalam mengenai sekolah ini.  Akan  tetapi,  Tampilan  website  SMAN  5
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Karawang  saat  ini  dirasa  masih  memiliki kendala yang dirasakan oleh para penggunanya.
Dengan menggunakan metode User Centered  Design yang  dibawakan,  diharapkan mampu mengatasi kendala di bidang antarmuka dan  pengalaman  pengguna,  karena  metode tersebut  menjadikan  pengguna  sebagai  pusat perancangan, sehingga akan membantu perancangan  tampilan  antarmuka  yang  ramah pengguna [ 2 ].
Untuk evaluasi dari perancangan desainnya akan  dilakukan usability  testing dengan menggunakan  metode  evaluasi  nya  adalah system usability scale.

## 2. TINJAUAN PUSTAKA

## 2.1 UI/UX
UI/UX adalah singkatan dari User Interface dan User  Experience ,  merujuk  pada  aspek visual  dalam  aplikasi  atau  alat  pemasaran digital, seperti website . UI/UX memiliki potensi untuk  meningkatkan  reputasi  bisnis  atau perusahaan melalui pengalaman pengguna yang baik [5].
User  Experience  (UX)  adalah  interaksi antara  persepsi,  emosi,  kognisi,  motivasi,  dan tindakan  (interaksi  dengan  tempat,  waktu, orang, dan objek) [7].

## 2.2 User Centered Design
User  Centered  Design  (UCD) adalah metode desain yang memprioritaskan pengguna sebagai  fokus  utama  dalam  perancangan.  Ini adalah  pendekatan  perancangan  antarmuka yang  iteratif,  menitikberatkan  pada  kegunaan, karakteristik pengguna, lingkungan, tugas, dan alur kerja [2].

## 2.3 Usability Testing
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].  ), Untuk  sebagian  besar  tes kegunaan,  ukuran  sampel  yang  lebih  kecil sekitar  5-10  pengguna  dapat  mengungkap sebagian  besar  masalah  umum,  namun  untuk pengujian  yang  lebih  komprehensif,  ukuran sampel yang lebih besar dianjurkan [9].

## 2.4 System Usability Scale
System  Usability  Scale merupakan  alat penilaian  kegunaan  yang  digunakan  untuk mengukur  kebergunaan  suatu  produk  atau sistem dari perspektif pengguna. Kuesioner ini digunakan untuk mengevaluasi tingkat kepuasan  pengguna  terhadap  produk  atau sistem yang telah dirancang [4].
Tabel 2.1 Daftar pertanyaan

## 3. METODE PENELITIAN
Metode  penelitian  yang  dilakuan  adalah pendekatan User  Centered  Design  (UCD) . Metode ini diambil karena dirasa cocok dalam sebuah  perancangan  ulang UI/UX  website SMAN  5  Karawang.  Karena  mengedepankan user sebagai dasar dari ide desainnya.

## 3.1 Teknik Pengumpulan Data
Pengumpulan  data  yang  dilakukan  melalui kuesioner yang menargetkan civitas akademika sekolah  SMAN  5  Karawang,  dengan  adanya data  yang  cermat  dan  tepat  maka  akan memudahkan dalam perancangan desain[14].

## 3.2 User Centered Design
User  Centered  Design  (UCD)  adalah pendekatan desain yang menempatkan pengguna sebagai pusat perhatian dalam proses perancangan.  Metode  ini  bersifat  iteratif, dengan  fokus  pada  kegunaan,  karakteristik pengguna, lingkungan, tugas, dan alur kerja[8].
Gambar 3.1 Langkah user centered design
3.2.1 Analisa Konteks Pengguna Pada  tahap  ini  dilakukan  analisis  untuk memahami konteks penggunaan dan
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
permasalahan pada website SMAN 5 Karawang, pada tahap ini dapat dilakukan user persona  untuk  memberikan  hipotesis  terhadap permasalahan yang ada pada tampilan website.

## 3.2.2 Spesifikasikan Kebutuhan Pengguna
Pada tahap ini dilakukan analisis lebih lanjut
terhadap
kebutuhan pengguna
dan
menspesifikasikannya ke dalam bentuk informasi  yang  struktural  agar  memudahkan pada tahap perancangan.

## 3.2.3 Berikan Solusi Desain
Pada  tahap  ini  mulai  dilakukan  rancangan UI/UX  dari  website  berdasarkan  kebutuhan pengguna  yang  sudah  didapat  dari  tahap sebelumnya,  dilakukan  rancangan  wireframe dari  low  fidelity  hingga  high  fidelity,  lalu melakukan prototyping desain.
3.2.4 Evaluasi Desain Terhadap Kebutuhan Pengguna
Pada  tahap  terakhir,  setelah  desain  dibuat maka  harus  dilakukan  pengujian  agar  dapat mengetahui efektivitas desain. Evaluasi didapat dari  hasil  umpan  balik  yang  diterima  oleh pengguna.  Proses  desain  dapat  mengalami perulangan  apabila  hasil  evaluasi  belum mencapai hasil yang optimal.

## 4. HASIL DAN PEMBAHASAN

## 4.1 Tahap Analisis Konteks Pengguna
Tahapan  pertama  metode  UCD  adalah Specify context of use atau memahami konteks penggunaan, dalam tahap ini dilakukan analisis permasalahan dan pemahaman terkait kegunaan website yang akan dibuatkan desainnya. Tujuan dari tahapan ini ialah untuk menentukan calon pengguna, serta menggali informasi dari calon pengguna.  Dalam  tahapan  ini  terdapat  5  poin pengerjaan:

## 4.1.1 Menentukan Calon Pengguna
UCD  merupakan  metode  desain  yang berorientasi pada pengguna, sehingga menentukan  calon  pengguna  membutuhkan kriteria  khusus  untuk  mendapatkan  hasil rancangan desain terbaik. Dikarenakan website ini merupakan website sekolah, jadi kemungkinan besar orang yang mengakses nya pun merupakan bagian dari masyarakat SMAN 5  Karawang,  yakni  Murid  dan  Guru.  Dari
kemungkinan  tersebut,  maka  didapat  hasil kriteria calon pengguna yang dapat dilihat pada table berikut:
Tabel 4.1 Calon pengguna (murid)
Tabel 4.2 Calon pengguna (staff sekolah)
4.1.2 Pengumpulan Data
Untuk pengumpulan data dilakukan kuesioner melalui google form yang menargetkan  siswa/i  dan  para  guru  di  sekolah SMAN 5 Karawang. Tujuan dari data ini ialah untuk  menilai  kepuasan  pengguna  terhadap website  SMAN  5  Karawang  saat  ini  dan  juga memberikan  kritik  ataupun  saran  untuk pengoptimalannya nanti.

## 4.1.3 User Persona
User  Persona  adalah representasi  fiktif  dari sifat  dan  perilaku  unik  yang  dimiliki  oleh sekelompok  orang  yang  menggunakan  produk atau  layanan[13].  Pada  User  Persona  yang dibuat  berikut  ini  menggunakan  komponen seperti demografi user, bio, habit, tech, want & needs,  dan  frustrations.  Untuk  data  Needs  dan Frustrations penulis dapatkan berdasarkan hasil kesimpulan dari kuesioner sebelumnya.
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Gambar 4.1 User Persona 1
Gambar 4.2 User persona 2
Gambar 4.3 User persona 3
Gambar 4.4 User persona 4

## 4.1.4 User Needs
Pada  tahap  ini,  penulis  merangkum  dan mengumpulkan  seluruh  wants  &  needs pengguna dan memasukkannya ke dalam tabel kebutuhan pengguna berikut.

## Tabel 4.3 User needs

## 4.1.5 Pain Points
Pain  points  adalah  keluhan  yang  dialami oleh pengguna ketika mengakses suatu website atau aplikasi. Pain points didapat dari masukkan yang diberikan oleh responden pada kuesioner kepuasan pengguna.
Tabel 4.4 Pain points

## 4.2 Tahap Spesifikasikan Kebutuhan Pengguna
Tahap  selanjutnya  dalam  penelitian  adalah menspesifikasikan kebutuhan pengguna.
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Terdapat  2  hal  yang  akan  dilakukan  pada tahap ini, yaitu:

## 4.2.1 Information Architecture
Pada  bagian  ini  dilakukan  penyusunan struktur  bagian  informasi  pada  website, tujuannya  untuk  memberikan  kemudahan dalam perancangan desain antarmuka pengguna.
Gambar 4.5 Information architecture

## 4.2.2 User flow
Alur  pengguna  saat  menggunakan  aplikasi atau  web  untuk  menyelesaikan  suatu  task dikenal  sebagai  User  Flow.  Disini  penulis membuat  3  User  Flow  yaitu  alur  akses informasi  sekolah,  alur  memberikan  komen pada berita/artikel, dan alur melihat galeri.
Gambar 4.6 Alur akses informasi sekolah
Gambar 4.7 Alur mengirim komentar
Gambar 4.8 Alur melihat galeri sekolah

## 4.3 Tahap Solusi Desain
Pada  tahap  ini,  penulis  memulai  untuk merancang desain UI/UX untuk website SMAN 5 Karawang. Tahapan ini meliputi perancangan
wireframe dari low fidelity hingga high fidelity, dan prototyping.
4.3.1 Low Fidelity
Gambar 4.9 Low fidelity mockup

## 4.3.2 High Fidelity
Gambar 4.10 Halaman home
Pada  halaman  home  memiliki  beberapa section  seperti  carousel,  visi  misi,  tenaga pendidik,  berita,  eskul,  prestasi,  dan  form feedback.
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Gambar 4.11 Halaman profile
Pada  halaman  profile  terdapat  sub  menu sejarah, visi dan misi, sambutan kepala sekolah, tenaga pendidik, lokasi dan denah sekolah. Tiap antarmuka  yang  dibuat  pada  halaman  profil dibuat  dengan  gaya  full-page  layout  yang artinya  isi  konten  halaman  dimuat  tanpa membagi kolom.
Gambar 4.12 Halaman Informasi
Pada  halaman informasi terdapat  sub  menu PPDB, berita, artikel, ekstrakurikuler.

## Gambar 4.13 Halaman Portal SMANLI
Halaman portal SMANLI memuat informasi menuju  link-link  terkait,  halaman  ini  juga menggunakan  gaya  two  styled  column  yang membagi kolom jadi 2 sisi.
Gambar 4.14 Halaman Galeri
Pada  halaman  galeri  terdapat  3  sub  menu yaitu galeri foto, video, dan file unduhan.

## 4.4 Tahap Evaluasi Desain Terhadap Kebutuhan Pengguna
4.4.1 Evaluasi awal
Tahap  evaluasi  dengan  metode  sus  pada tampilan website saat ini dengan 20 responden, didapat data awal sebagai berikut:
Gambar 4.15 Histogram evaluasi awal SUS
Berdasarkan  diagram  skor  SUS  di  atas,  di dapat  rata-rata  nilai  skor  SUS  adalah  62,8 dengan  nilai  minimalnya  38  dan  nilai maksimalnya  80.  Skor  evaluasi  awal  SUS  ini jika  dikategorikan  berada  pada  kategori marginal  low  dengan  grade  D.  Skor  SUS bernilai  acceptable  apabila  melebihi  skor  70 dengan  grade  C.  Oleh  karena itu  perlu  adanya perombakan terhadap desain website SMAN 5 Karawang.

## 4.4.2 Evaluasi akhir
Evaluasi akhir dilakukan dengan rancangan desain  yang  telah  dibuat,  berikut  hasil  yang didapat
Gambar 4.14 Histogram evaluasi akhir SUS Dapat  dilihat  dari  histogram  evaluasi  akhir. Didapat  skor  SUS  dengan nilai  rata-rata yaitu 78,4
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
dengan nilai maksimal nya 95 dan nilai minimal nya 70.  Berdasarkan  perbandingan  tersebut,  terjadi lonjakan  nilai  skor  SUS  sebanyak  15,6.    Skor evaluasi akhir SUS yang didapat apabila menilai dari skala  skor  maka  dapat  dikategorikan  sebagai  good dan acceptable dengan nilai grade nya C.

## 5. KESIMPULAN
a. Permasalahan pengguna
dalam mengakses website SMAN 5 Karawang terletak  pada  tampilan  website  yang belum  optimal  dalam  memudahkan pengguna untuk melakukan navigasi.
b. kebutuhan  pengguna  terkait  fitur-fitur yang  diperlukan  seperti  komentar, denah  sekolah,  dan  lain-lain  berhasil ditambahkan  pada  solusi  desain  yang diberikan.
c. Penerapan metode UCD dapat dilakukan dengan cukup baik, mengingat  metode  ini  menjadikan pengguna  sebagai  pusat  desainnya, sehingga  dapat  memberikan  solusi terhadap  kebutuhan  pengguna.  Hasil dari  data  kebutuhan  pengguna  yang penulis dapatkan dari kuesioner, penulis olah dan analisis sebagai dasar ide  dari  perancangan  desain  UI/UX website SMAN 5 Karawang.
d. Metode UCD dinilai mampu memberikan efektifitas dalam merancang  solusi  desain UI/UX website SMAN  5  Karawang,  dapat dilihat dari peningkatan skor evaluasi  awal  dan  akhir.  Pada  skor awal  evaluasi SUS untuk  tampilan website saat ini mendapat skor rata- rata 62,8. Sedangkan setelah dilakukan perancangan desain menggunakan metode UCD meningkat jadi 78,4

## UCAPAN TERIMA KASIH
Penulis  mengucapkan  puji  Syukur  kepada Allah  SWT  yang  telah  memberi  kemudahan dalam penelitian ini, penulis ucapkan terimakasih  juga  kepada  Pak  Bagja  Nugraha dan  Pak  Taufik  Ridwan  yang  telah  membantu penyusunan,  dan  terimakasih  yang  sebesar- besarnya  terhadap  semua  pihak  yang  terkait dalam penelitian ini.

## DAFTAR PUSTAKA
[1]  Bekti,  H.  B.  (2015).  Mahir  membuat  website dengan  adobe  dreamweaver  CS6,  CSS  dan jquery. Yogyakarta: Andi.
[2] Saputri, I. S. Y., Fadhli, M., & Surya, I. (2017). Penerapan  Metode  UCD  (User  Centered Design)  Pada  E  Commerce  Putri  Intan  Shop Berbasis  Web.  Jurnal  Nasional  Teknologi  dan Sistem Informasi, 3(2), 269-27
[3] Sastika, W. (2016) ‘Analisis Pengaruh Kualitas Website  (WebQual  4.0)  Terhadap  Keputusan Pembelian pada Website e-commerce Traveloka’, Sentika, 2016(Sentika), pp. 18–19.
[4] Haryanto, G. D. P., Ridha, A. A., & Ridwan, T. (2023). Perancangan Ui/Ux Sim Dan Monitoring Tugas Akhir Menggunakan Metode Design  thinking.  JATI  (Jurnal  Mahasiswa Teknik Informatika), 7(2), 1287-1294.
[5] Muhyidin, M. A., Sulhan, M. A., & Sevtiana, A. (2020).  Perancangan  UI/UX  Aplikasi  My  Cic Layanan  Informasi  Akademik  Mahasiswa Menggunakan  Aplikasi  Figma.  Jurnal  Digit: Digital of Information Technology, 10(2), 208- 219.
[6]  Widoseno,  D.,  Voutama,  A.,  &  Ridwan,  T. (2023).  Perancangan  Ui/Ux  Berbasis  Website Pada Penerimaan Peserta Didik Baru (Ppdb) Di SMK Taruna Karya 1 Karawang. JATI (Jurnal Mahasiswa  Teknik  Informatika),  7(2),  1401- 1409.
[7]  Kuliga,  S.  F.,  Thrash,  T.,  Dalton,  R.  C.,  & Hölscher,  C.  (2015).  Virtual  reality  as  an empirical research tool—Exploring user experience  in  a  real  building  and  a corresponding  virtual  model.  Computers, environment and urban systems, 54, 363-375.
[8] Handayani, N., Fandhilah, F., & Mayatopani, H. (2023). Perancangan UI/UX Aplikasi Destinasi Wisata  Berbasis  Web  Menggunakan  Metode Human  Centered  Design. JOISIE  (Journal  Of Information Systems And Informatics
Engineering), 7(1), 35-43.
[9] Sauro, J. (2020). Sample Size Recommendation for Benchmark Studies. MeasuringU. Retrieved from https://measuringu.com/sample-size- recommendations/.
[10]  Sauro,  J.  (2018).  Benchmarking  The  User Experience. Denver: MeasuringU Press.
[11] Multazam, M., Paputungan, I. V., & Suranto, B. (2020).  Perancangan  user  interface  dan  User experience pada placeplus menggunakan pendekatan  User  centered  design.  Automata, 1(2).
[12] Eugenia, M. P., Abdurrofi, M., Almahenzar, B., & Khoirunnisa, A. (2022, November). Pendekatan Metode User-Centered Design dan System  Usability  Scale  dalam  Redesain  dan
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Evaluasi  Antarmuka  Website.  In  Seminar Nasional  Official  Statistics  (Vol.  2022,  No.  1, pp. 573-584).
[13]  Ningsih,  N.  A.,  &  Abidin,  M.  R.  I.  (2021). Perancangan  Design  User  Interface  Website Pada Pet Shop Azria Di Kabupaten Lamongan. BARIK, 2(3), 202-216.
[14]  Rizkhullah,  M.  A.,  &  Voutama,  A.  (2024). Perancangan  Ui/Ux  Aplikasi  Mobile  Untuk Pembelajaran Adaptif Public Speaking Dengan Metode User Centered Design. Jurnal
Informatika dan Teknik Elektro Terapan, 12(2).