## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098

## Redesign Web Sekolah Metode User Centered Design
Yoyon Efendi 1,* , Tashid 2 , Helda Yenni 3 , Unang Rio 3 , Rometdo Muzawi 3
1 Teknologi Informasi, STMIK Amik Riau, Pekanbaru, Indonesia
2 Sistem Informasi, STMIK Amik Riau, Pekanbaru, Indonesia
3 Teknik Informatika, STMIK Amik Riau, Pekanbaru, Indonesia Email: 1 yoyonefendi@stmik-amik-riau.ac.id, 2 tashid@sar.ac.id, 3 heldayenni@sar.ac.id, 4 unangrio@sar.ac.id,
5 rometdomuzawi@sar.ac.id Email Penulis Korespondensi: yoyonefendi@stmik-amik-riau.ac.id Submitted: 20/12/2021 ; Accepted: 27/12/2021 ; Published : 31/12/2021
Abstrak− Web sangat diperlukan sebagai media promosi sekolah untuk menarik minat dan info tentang sekolah. Web ini nantinya digunakan untuk mempermudah baik guru, murid, maupun wali murid. Masalah yang sering kita hadapi tampilan website tidak menarik  serta  kurang  informatif.  Mulai  dari  warna  yang  tidak  menarik  juga  berita  dan  informasi  tidak  di  update.  Diperlukan redesign web sekolah agar memberikan tampilan yang menarik dan informatif.  Metode pada penelitian ini menggunakan User Centered Design (UCD) mulai dari Plan, Design, Prototype dan review. Penelitian ini bertujuan untuk menghasilkan website SMK Negeri 1 Perhentian Raja yang informatif dan disukai oleh pengguna.
Kata Kunci: Web; Sekolah; Redesign; UCD; SMK N 1 Perhentian Raja
Abstract −The web is indispensable as a medium for school promotions to attract interest and information about schools. This website will be used to make it easier for both teachers, students, and guardians of students. The problem we often face is that the appearance of the website is unattractive and less informative. Starting from unattractive colors, news and information are not updated. It is necessary to redesign the school web to provide an attractive and informative appearance. The method in this research uses User Centered Design (UCD) starting from Plan, Design, Prototype and review. This study aims to produce a website for SMK Negeri 1 Perhentian Raja that is informative and liked by users.
Keywords : Web; School; Redesign; UCD; SMK N 1 Perhentian Raja

## 1. PENDAHULUAN
SMK  N  1  Perhentian  Raja  merupakan  sekolah  yang  berada  di  Kabupaten  Kampar  Provinsi  Riau.  Masalah  yang dihadapi seperti web sekolah yang kurang menarik dan kurang informatif. Selain itu juga data kurang update dan sulit menemukan menu atau fitur yang dibutuhkan seperti form siswa baru, ektrakurikuler dan lainnya.
Ditambah dengan pandemi yang tak berkesudahan membuat sekolah semakin sulit dalam melaksanakan proses belajar mengajar. Kurangnya tenaga IT disekolah tersebut juga semakin memperburuk keadaan. Lanjut kepala sekolah juga mengatakan pemahaman guru, murid, serta wali murid mengenai  internet juga masih  kurang disebabkan oleh buruknya konektifitas internet dan berbagai macam hal lainnya.
Semakin cepatnya perkembangan zaman, membuat segala hal harus terhubung dengan internet, tak terkecuali sekolah.  Tidak  maksimalnya  penggunaan  teknologi  di  sekolah-sekolah  khusnya  yang  berada  di  daerah  terpencil menyebabkan  sekolah-sekolah  tersebut  susah  untuk  bersaing  dengan  sekolah  yang  berada  di  kota  baik  dari  mutu pendidikan maupun urusan administrasi. Impian untuk  penyamarataan kualitas pendidikan di  Indonesia tidak akan tercapai  jika  daerah-daerah  terpencil  masih  kurang  mendapatkan  literasi  mengenai  internet.  Salah  satu  langkah awalnya  adalah  dengan  membuat  website  resmi  sekolah  dengan  tampilan  antarmuka  yang  simpel  serta  mudah dipahami bagi orang awam.
Website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi  teks, gambar diam atau gerak, animasi suara, dan atau gabungan dari semuanya baik yang bersifat statis maupun  dinamis  yang  membentuk  satu  rangkaian  bangunan  yang  saling  terkait,  yang  maing-masing  dihubungkan dengan  jaringan-jaringan  halaman[1].  Website  ini  nantinya  juga  berguna  sebagai  jembatan  bagi  murid  dan  guru. Semisal guru bisa memposting berita dan pengumuman yang penting di website tersebut dengan harapan para siswa dan wali murid bisa mendapatkan informasi lebih cepat dan akurat. Website adalah kumpulan dari halaman-halaman situs, yang terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalam World Wide Web ( WWW ) di dalam internet[2].
Mengingat seringnya terjadi kehilangan data di SMAN 1 Rangsang, tenaga pengajar juga bisa mengunakan website  ini  untuk  menyimpan  data-data  sekolah  semisal  absensi,  batas  belajar  siswa,  dsb,  dan  pastinya  memiliki keamanan data yang lebih terjaga. Lebih baik lagi informasi mengenai absensi dan batas belajar siswa bisa ditampilkan secara  transparan,  agar  murid  dan  wali  murid  juga  bisa  mengaksesnya,  bahasa  sederhananya  wali  murid  bisa  tahu kegiatan anaknya selama disekolah.
Sebuah desain interface merupakan tampilan yang akan memberikan sebuah hasil perpaduan antara input dari desain yang baik dan output mekanisme yang akan memuaskan kebutuhan user, kemampuan, dan limitasi dengan cara yang seefektif mungkin, sebuah interface yang baik tidak akan terasa oleh user, dan akan menkontrol user untuk fokus pada  informasi  yang  dipresentasikan[3].  User  interface  merupakan  komponen  yang  tidak  dapat  dipisahkan  dengan aplikasi yang bertugas menghubungkan antara aplikasi dengan pengguna agar dapat berinteraksi dengan mudah[4].

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098

## 2. METODOLOGI PENELITIAN
Penelitian ini dimulai dengan plan lalu design menggunakan wireframe figma dan balsamiq. Figma adalah salah satu design  tool  yang  biasanya  digunakan  untuk  membuat  tampilan  aplikasi  mobile,  desktop,  website  dan  lain-lain[5]. Figma  adalah  aplikasi  desain  berbasis  cloud  dan  alat  prototyping  untuk  proyek  digital.  Figma  dibuat  untuk  dapat membantu para penggunanya agar bisa berkolaborasi dalam proyek dan bekerja dalam bentuk tim sekaligus di mana saja[6].
Balsamiq merupakan software yang telah banyak digunakan oleh para desainer web sebelum membuat sebuah Website dan aplikasi, hal ini dilakukan agar mereka bisa membuat sebuah desain Website yang bukan hanya menarik dari sisi tampilan, tapi juga sesuai dengan kebutuhan Customer[7].
Setelah hasil dari penelitian diatas didapatkan, kami langsung melakukan analisa terhadap data tersebut dan mulai  untuk  membangun  prototype  website  berdasarkan  design  yang  telah  dibuat  sebelumnya.  Prototype  adalah Prototype  adalah  model  kerja  dasar  dari  pengembangan  sebuah  program  (software)  atau  perangkat  lunak[5]. prototyping merupakan metode pengembangan perangat lunak, yang berupa model fisik kerja sistem dan berfungsi sebagai  versi  awal  dari  sistem. Dengan metode prototyping  ini akan dihasilkan prototype sistem sebagai  perantara pengembang dan pengguna agar dapat berinteraksi dalam proses kegiatan pengembangan sistem informasi[8] Metode Prototyping menurut Ogedebe dan Peter Jacob merupakan metode pengembangan perangat lunak, yang berupa model fisik kerja sistem dan berfungsi sebagai versi awal dari sistem[9].
Tahapan dalam prototyping adalah sebagai berikut :  pertama Pengumpulan kebutuhan,  kedua proses desain cepat,  ketiga.  membangun  prototype  evaluasi  dan  perbaikan.  Langkah  terakhir  yakni  mereview  design  terkait penelitian ini berdasarkan data-data yang telah didapatkan [10].

## 2.1 Tahapan Penelitian
Metode penelitian yang kami gunakan adalah User Centre Design (UCD), yakni merupakan metode yang biasa dipakai oleh developer dan designer sebuah produk digital agar dapat membuat rancangan senyaman mungkin digunakan oleh user.  Metode  user  centered  design  merupakan  sebuah  pendekatan  untuk  pengembangan  user  interface  dan pengembangan  sistem[11].  Bentuk  pengaplikasiannya  pertama  kami  memulai  dengan  melakukan  planing  untuk memulai penelitian.
Gambar 1. Tahapan penelitian User Centered Design (UCD)

## 1. Plan
Dalam tahap ini, kami melakukan perencanaan dengan cara berdiskusi dengan dosen pembimbing terkait penelitian, mulai dari tempat penelitian, konsep penelitian yang akan diterapkan, dan lain-lain. Kami juga berdiskusi mengenai observasi. Hasilnya adalah dengan menerapkan dua cara. Pertama, perwakilan tim secara langsung mendatangi SMK N  1  Perhentian  Raja  untuk  mewawancarai  Indra  Putra,  S.Kom.  Kedua,  pembuatan  google  form  berisi  tentang pertanyaan-pertanyaan yang nantinya akan dibagikan langsung ke murid SMK N 1 Perhentian Raja  melalui media sosial.

## 2. Design
Penelitian  dilakukan dengan dua tahapan pada bagian ini. Pertama, melakukan desain kasar menggunakan Wireframe Balsamiq, sedangkan untuk design akhir menggunakan figma. Wireframe merupakan kerangka dasar atau blueprint dari satu halaman aplikasi yang akan dibangun oleh pengembang aplikasi. Sedangkan Figma adalah salah satu design tool yang biasanya digunakan digunakan untuk  membuat  tampilan aplikasi  mobile, desktop, website dan lain-lain. Kedua tools ini bisa dikatakan adalah pilihan terbaik bagi para developer untuk mendesign suatu tampilan web.

## 3. Prototype
Setelah  mendapatkan  data  dari  observasi,  kemudian  kami  berdiskusi  untuk  menganalisis  hasil  dari  data  tersebut. Banyak yang kami analisis, salah satunya adalah tampilan website seperti apa yang mestinya dibuat berdasarkan data

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
yang  didapatkan.  Langkah  selanjutnya  adalah  membangun  prototype  web  berdasarkan  design  sebelumnya,  kami membangun web ini menggunakan bahasa pemrograman html, css, javascript, dan php.

## 4. Review
Berdasarkan  analisa  tentang  efektifitas  penggunaan  website  untuk  instansi  pendidikan,  yang  mana  penelitian  ini bertujuan untuk memudahkan kegiatan belajar mengajar di SMK N 1 Perhentian Raja. Proses ini akan menjadi hasil apakah penelitian ini dapat dilanjutkan atau tidak.

## 3. HASIL DAN PEMBAHASAN
Dalam  penelitian  ini,  didapat  hasil  kuesioner  yang  di  isi  oleh  20  orang  siswa,  karyawan  dan  guru  di  SMK  N  1 Perhentian Raja. Maka dapat tabel dan grafik sebagai berikut:
Tabel 1. Hasil Kuesioner sebelum Redesign Web Sekolah
Gambar 2. Grafik Kuesioner sebelum redesign web sekolah
Hasil yang didapat berdasarkan grafik diatas, masih banyak siswa yang kurang meengakses web sekolah karena mulai  dari  tampilan  yang  tidak  menarik,  kurang informatif,  konten  tidak  update  dan  koneksi  internet  yang  kurang stabil. Selain itu, siswa kurang mendapatkan literasi dan pemahaman yang baik mengenai penerapan teknologi internet disekolah,  kemungkinan  disebabkan  oleh  kurangnya  tenaga  IT.  Akibat  lainnya  adalah  website  yang  dimiliki  oleh sekolah  tidak  memiliki  sistem  antar  muka  yang  mudah  di  pahami,  dan  website  tersebut  terlihat  sudah  lama  tidak diperbaharui, sehingga pengunjung akan kesulitan ketika memahami website tersebut. Dan kegiatan belajar mengajar dan administrasi masih banyak dilakukan secara manual, menyebabkan sering terjadi kehilangan data akibat tingkat keamanan yang kurang.
No Nama Status 1 Aulio Nauval Falandy Subekti Siswa 2 Tri Rahmat Aprianto Siswa 3 Septi Wulandari Siswa 4 Galing Afrian Prasetio Siswa 5 Saris Agus Siswa 6 Ahmad Fkhi Fatahillah Siswa 7 Muhammad Riski Siswa 8 Gibran wahyu nirwana Siswa 9 Ika Nur Riskiyanti Siswa 10 Bimo Pratama Siswa 11 Rina Purwati, S.Pd Guru 12 Setyana Dwi Fatmawati, S.Pd Guru 13 Resty Ika Prahesti, S.Pd Guru 14 Eko Rianto Karyawan 15 Aynul Yazin Guru 16 Nur Anisyah Guru 17 Citra Ayu Rahmawati Guru 18 Sis Joko N Guru 19 Sri Indra Putra S Guru 20 Ainul Yakin, ST Guru

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
Gambar 3. Web sekolah sebelum di Redesign
Tampilan  diatas  merupakan  website  asli  milik  SMK  N  1  Perhentian  Raja.  Terlihat  warna  nya  terlalu  cerah sehingga  beberapa  icon-icon  tidak  terlihat  karena  berwarna  kuning  dan  background  putih.  Selain  itu  web  tidak  di perbaharui dan memiliki sistem antarmuka yang terlalu kaku .

## 1. Plan
Pada tahap plan, penelitian dilakukan dengan membuat sketsa di kertas gambaran dari redesign web secara utuh dan keseluruhan. Gambar dari sketsa dari SMK N 1 Perhentian Raja sebagai berikut:

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
Gambar 4. Desain sketsa di kertas pada proses plan

## 2. Design
Pada tahap design  dilakukan menggunakan tool wireframe yang dikenal dengan balsamiq. Pada tahap ini tampilan sudah terlihat  tapi masih  kasar dan pewarnaan masih  standar. Tampilan balsamiq  SMK N 1 Perhentian Raja dapat dilihat pada gambar berikut:
Gambar 5. Tampilan wireframe menggunakan balsamiq
3. Prototyping
Pada tahap prototyping menggunakan software figma. Pada tahap ini penyempurnaan redesign web secara sempurna dan menghasilkan tampilan lebih halus dan menarik. Tampilan hasil figma dapat dilihat dengan beberapa desain mulai dari header, body dan footer serta keseluruhan.
a. Header
Pada header dapat dilihat perbedaan dari sebelum redesdign dan sesudah redesign. Dengan tampilan sebagai berikut:

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
Gambar 6. Tampilan header sebelum redesign
Gambar 7. Tampilan header setelah redesign figma
Pada tampilan dari redesign header menggunakan figma terlihat warna setelah redesign lebih menarik dan font dari header lebih terbaca dengan jelas.
b. Body
Pada body dapat dilihat perbedaan dari sebelum redesdign dan sesudah redesign. Dengan tampilan sebagai berikut:
Gambar 8. Tampilan body sebelum redesign
Gambar 9. Tampilan body setelah redesign figma
Pada tampilan dari redesign body menggunakan figma terlihat warna setelah redesign lebih menarik dan font dari body lebih terbaca dengan jelas.
c. Footer
Pada footer dapat dilihat perbedaan dari sebelum redesdign dan sesudah redesign. Dengan tampilan sebagai berikut:

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
Gambar 11. Tampilan footer setelah redesign figma
Pada tampilan dari redesign footer menggunakan figma terlihat warna setelah redesign lebih menarik dan font dari footer lebih terbaca dengan jelas. Selain itu media sosial tersusun rapi dan ditambahkan fasilitas trafik kunjungan web.
4. Review
Pada tahap review dilakukan oleh siswa, guru, karyawan dan kepala sekolah. Dengan melihat hasil tampilan setelah redesign web sekolah, maka didapat hasil table dan grafik sebagai berikut:
Tabel 2. Hasil Kuesioner setelah Redesign Web Sekolah
Gambar 12. Grafik Kuesioner setelah redesign web sekolah
0 2 4 6 8 10 12 14 16 Sangat Baik Baik Hasil Evaluasi Redesign Web Sekolah
No Nama Status Hasil 1 Aulio Nauval Falandy Subekti Siswa Baik 2 Tri Rahmat Aprianto Siswa Baik 3 Septi Wulandari Siswa Baik 4 Galing Afrian Prasetio Siswa Sangat Baik 5 Saris Agus Siswa Baik 6 Ahmad Fkhi Fatahillah Siswa Baik 7 Muhammad Riski Siswa Baik 8 Gibran wahyu nirwana Siswa Baik 9 Ika Nur Riskiyanti Siswa Sangat Baik 10 Bimo Pratama Siswa Baik 11 Rina Purwati, S.Pd Guru Baik 12 Setyana Dwi Fatmawati, S.Pd Guru Baik 13 Resty Ika Prahesti, S.Pd Guru Baik 14 Eko Rianto Karyawan Sangat Baik 15 Aynul Yazin Guru Baik 16 Nur Anisyah Guru Baik 17 Citra Ayu Rahmawati Guru Baik 18 Sis Joko N Guru Sangat Baik 19 Sri Indra Putra S Guru Baik 20 Ainul Yakin, ST Guru Sangat Baik

## Building of Informatics, Technology and Science (BITS)
Volume 3, No 3, December 2021, Page 317 − 324 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v3i3.1098
Gambar 13. Tampilan Web setelah redesign web sekolah

## 4. KESIMPULAN
Hasil penelitian ini menghasilkan web sekolah yang menarik dan informatif. Dengan solusi ini dapat membawa web sekolah menjadi  wadah yang lebih menarik  dan mudah dipahami dalam menyebarluaskan informasi.  Adapun poin penting yang dapat  diambil dari  penelitian ini yakni  menjadikan web sekolah sebagai  media  informasi  yang dapat diterapkan di SMK N 1 Perhentian Raja. Sebagai media yang akurat dan terpercaya dalam menyampaikan informasi mulai dari info pembelajaran sampai evaluasi yang dilaksanakan oleh pihak sekolah. Mempermudah kinerja tenaga pengajar  dalam  menyimpan,  edit  dan  publish  data.  Mempermudahkan  siswa  dalam  mendapatkan  informasi  yang terpercaya.

## REFERENCES
[1] F. A. Batubara, “Perancangan Website Pada Pt . Ratu Enim Palembang,” REINTEK , pp. 15–27, 2012.
[2] A.  Josi,  “Penerapan  Metode  Prototyping  Dalam  Membangun  Website  Desa  (Studi  Kasus  Desa  Sugihan  Kecamatan Rambang),” Jti , vol. 9, no. 1, pp. 50–57, 2017.
[3] Y. Adhipratama, “perancangan antar muka pengguna dengan metode lean UX pada website hello work dinas tenaga kerja kabupaten pasuruan,” Director , vol. 15, no. 40, pp. 6–13, 2018, [Online]. Available:
http://awsassets.wwfnz.panda.org/downloads/earth_summit_2012_v3.pdf%0Ahttp://hdl.handle.net/10239/131%0Ahttps:// www.uam.es/gruposinv/meva/publicaciones jesus/capitulos_espanyol_jesus/2005_motivacion para el aprendizaje Perspectiva alumnos.pdf%0Ahttps://ww.
[4] D.  A.  Anggara,  W.  Harianto,  A.  Aziz,  T.  Informatika,  U.  Kanjuruhan,  and  S.  Malang,  “Prototipe  Desain  User  Interface Aplikasi Ibu Siaga,” vol. 4, pp. 58–74, 2021.
[5] M.  A.  Muhyidin,  M.  A.  Sulhan,  and  A.  Sevtiana,  “Perancangan  Ui/Ux  Aplikasi  My  Cic  Layanan  Informasi  Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit , vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.
[6] R. Pramudita, R. W. Arifin, A. N. Alfian, N. Safitri, and S. D. Anwariya, “Penggunaan Aplikasi Figma Dalam Membangun Ui / Ux Yang Interaktif Pada Program Studi Teknik,” J. Buana Pengabdi. , vol. 3, no. 1, pp. 149–154, 2021.
[7] D.  S.  Prima  Nur  Hidayati  Putri,  “PENERAPAN  SOFTWARE  BALSAMIQ  UNTUK  MENINGKATKAN  HASIL BELAJAR  PADA  MATA  PELAJARAN  KERJA  PROYEK  SISWA  KELAS  XII  MULTIMEDIA  DI  SMK  NEGERI  1 JOMBANG Prima,” UNES Surabaya , vol. 1, pp. 1–7, 2018.
[8] D. Purnomo, “Model Prototyping Pada Pengembangan Sistem Informasi,” J I M P - J. Inform. Merdeka Pasuruan , vol. 2, no. 2, pp. 54–61, 2017, doi: 10.37438/jimp.v2i2.67.
[9] E.  N.  A.  Sufajar  Butsianto1),  “PENGEMBANGAN  SISTEM  INFORMASI  PENJUALAN  BERBASIS  WEB MENGGUNAKAN METODE PROTOTYPING PADA TOKO BAY STICKER,” SIGMA – J. Teknol. Pelita Bangsa , vol. 10, p. 275, 2020, doi: 10.35393/1730-006-002-014.
[10]  J. Maulindar, “Prototype ‘ Smartcard Shop ’ Untuk,” vol. 9, no. 1, pp. 1–14, 2020.
[11]  F.  N.  Khasanah,  S.  Rofiah,  and  D.  Setiyadi,  “Metode  User  Centered  Design  Dalam  Merancang  Tampilan  Antarmuka Ecommerce Penjualan Pupuk Berbasis Website Menggunakan Aplikasi Balsamiq Mockups,” JAST  J. Apl. Sains dan Teknol. , vol. 3, no. 2, p. 14, 2019, doi: 10.33366/jast.v3i2.1443.