## PENGGUNAAN USER CENTERED DESIGN DALAM PEMBUATAN WEBSITE PORTAL MGBK SMA KOTA MALANG
Hilman Nuril Hadi 1) , Arif Tirtana 2) , Adnan Zulkarnain 3)
1,2 Program Studi Teknik Informatika, STIKI Malang
3 Program Studi Sistem Informasi, STIKI Malang
1,2,3 Jl. Raya Tidar 100, Malang Email: 1 hilman@stiki.ac.id, 2 arif.tirtana@stiki.ac.id, 3 adnan.zulkarnain@stiki.ac.id

## Abstract
Technology  developments  that  have  entered  the  Society  5.0  era  encourage  organizations  to  accelerate  the  digital transformation  process,  also  encourage  MGBK  SMA  Malang  City  to  develop  a  website  portal  to  facilitate  the organization's business processes in providing a broad impact on the organization. However, the obstacle that often arises in making websites is the incompatibility of the interface with the wishes of the user. Therefore, this study using a user- centered design method to suit the needs of users and organizations. This study indicates that the use of user-centered design methods serves to improve the fit between user needs and the organization's business processes .
Keyword: User Centered Design, Website, Portal, User Experience, User Interface

## Abstrak
Perkembangan teknologi memasuki era Society 5.0 mendorong organisasi untuk mempercepat proses transformasi digital, hal tersebut juga mendorok MGBK SMA Kota Malang untuk menyusun sebuah portal website untuk memudahkan proses bisnis  organisasi  dalam  memberikan  dampak  yang  luas  pada  organisasi.  Namun  kendala  yang  sering  muncul  dalam pembuatan website adalah ketidaksesuaian antarmuka dengan keinginan pengguna. Oleh karena itu dalam penelitian ini menggunakan metode user centered design untuk menyesuaikan antara kebutuhan pengguna dan organisasi. Hasil dari penelitian ini menunjukkan bahwa dengan menggunakan metode user centered design berfungsi untuk meningkatkan kesesuaian antara kebutuhan pengguna dan proses bisnis organisasi
Kata Kunci: User Centered Design, Website, Portal, User Experience, User Interface

## 1. Pendahuluan
Perkembangan  era  Society  5.0  ini  mendorong manusia  untuk  menggunakan  aspek  teknologi  dalam menunjang  setiap  kegiatannya  [1].  Hal  tersebut mendorong  organisasi  untuk  mempercepat  proses transformasi  digital  untuk  menyesuaikan  dengan kebutuhan  pelanggan  [2].  Transformasi  digital merupakan  proses  dan  penerapan  strategi  dengan menggunakan  teknologi  informasi  untuk  dapat merubah  proses  bisnis  organisasi  dengan  harapan dapat meningkatkan efisiensi dan efektivitas organisasi  guna  memberikan  nilai  lebih  kepada pelanggan [3]. Ada beberapa aspek untuk menunjang implementasi transformasi digital berhasil  diterapkan dalam  sebuah  organisasi,  yaitu  orang,  bisnis,  dan teknologi  [4].  Dari  aspek  teknologi  ada  banyak teknologi  yang  dapat  diterapkan  untuk  mempercepat transformasi  digital,  seperti  e-commerce  untuk memudahkan  proses  jual  beli  produk  [5],  maupun teknologi  yang  lain.  Namun  apabila  organisasi  ingin meningkatkan kesadaran masyarakat terkait organisasi dan  mempermudah  pengguna  dalam  mengakses
informasi  terkait  organisasi,  maka  organisasi  dapat menerapkan portal website [6].
Portal website merupakan salah satu media masa yang  memiliki  peran  penting  dalam  menyebarkan informasi  [7].  Namun  terdapat  permasalahan  yang sering  terjadi  dalam  penerapan  portal  website  dalam sebuah  organisasi,  seringkali  organisasi  hanya berfokus  pada  tujuan  bisnisnya  saja,  tidak  berfokus dalam keterlibatan pengguna [8]. Hal tersebut menjadi penting  karena  pengguna  akhir  dari  sebuah  sistem adalah  pengguna  itu  sendiri,  sehingga  perlu melibatkan  pengguna  akhir  dalam  pengembangan sebuah sistem. Menurut salah satu asosisasi antarmuka pengguna menyatakan bahwa banyak waktu terbuang dalam penggunaan sistem dikarenakan engguna tidak dapat menemukan informasi yang diinginkan dan hal tersebut berdampak terhadap penurunan produktivitas sehingga dapat meningkatkan frustasi [9].
Musyawarah  Guru  Bimbingan  dan  Konseling (MGBK) SMA Kota Malang telah dilaksanakan sejak tahun  2017.  Seiring  berjalannya  waktu  MGBK  SMA Kota  Malang  memiliki  keinginan  untuk  memberikan
kontribusi lebih khususnya bagi siswa/i SMA di Kota Malang.  Namun  hal  tersebut  terkendala  keterbatasan sumber daya, baik dari sisi sumber daya manusia serta biaya  operasional  untuk  mempubikasikan  kegiatan, berita  dan  informasi  terkini  serta  untuk  proses melayani  konseling  siswa/i  SMA/MA  seluruh  area Kota Malang akan menghabiskan banyak sumber daya jika  dilakukan  secara  konvensional.  Oleh  karena  itu MGBK  SMA  Kota  Malang  memerlukan  media komunikasi  yang  juga  berfungsi  sebagai  media publikasi  kegiatan,  berita,  kerjasama  dan  untuk melakukan  konseling  untuk  meningkatkan  efisiensi dan  efektivitas  kegiatan  dari  MGBK  SMA  Kota Malang yaitu dengan menggunakan portal website.
Berdasarkan  latar  belakang  diatas,  maka  dalam penelitian  ini  menggunakan  metode  User  Centered Design  (UCD)  dalam  proses  perancangan  portal website  MGBK  SMA  Kota  Malang  karena  lebih berfokus  kepada  pengguna  sebagai  pusat  dari  proses pengembangan  portal  website  yang  memandu  dalam pembuatan desain dan usability.

## 2. Metode Penelitian
Pada  penelitian  ini  menggunakan  metodologi penelitian User  Centered  Design  (UCD) yang mengacu  pada  ISO  9241-210  tahun  2010.  Pada dokumen  tersebut  menyatakan  bahwa  UCD merupakan  metode  yang  digunakan  dalam perancangan  dan  pengembangan  sistem  yang bertujuan  untuk  menyesuaikan  sistem  dengan kebutuhan pengguna, karena dalam
pengembangannya  melibatkan  pengguna  secara langsung [10]. Adapun detail langkah-langkah dalam penelitian ini mengacu pada  [11] yang secara detail akan dijelaskan pada paragraf di bawah ini.
Understand context of Use Specify User Requirements Design Solutions Evaluate Againts Requirements Plan Human- Centered Design Process
Designed Solution Meets User Requirements

## Gambar 1. Tahapan User Centered Design

## Plan Human-Centered Design Process
Pada tahapan  ini  dilakukan  penyusunan perencanaan  yang  akan  dilakukan  untuk  sebagai tahap  awal  sebelum  masuk  pada  tahap  selanjutnya pada  metode  UCD  [12].  Pada  tahap  plan  human- centered design process dilakukan proses wawancara dan  observasi  [13].  Proses  wawancara  dilakukan untuk  memahami  kebutuhan  data  terkait  dengan pembuatan  antarmuka  dan  berfungsi  untuk mengetahui  gambaran  kondisi  saat  ini.  Proses wawancara  dilakukan  kepada  Ketua  MGBK SMA/MA Kota Malang.
Dari  hasil  wawancara  didapatkan  bahwa  MGBK SMA/MA  Kota  Malang  selama  ini  belum  memiliki website  dan  prosesnya  selama  ini  dilakukan  secara manual.  Oleh  karena  itu  prosesnya  cenderung  lama dan memakan banyak biaya operasional, dan cakupan area layanan tidak luas karena keterbatasan wilayah
dan  jarak.  Harapannya  kedepan  MGBK  SMA/MA Kota  Malang  memiliki  website  sendiri  yang  secara detail terdapat pada tabel 1 di bawah ini.
Tabel 1. Hasil Wawancara & Observasi
Pertanyaan Kondisi saat ini Harapan Bagaimana selama ini proses penyampaian berita kegiatan
MGBK SMA/MA Kota Malang? Pembagian berita hanya melalui grup Whatsapp Grup saja, seringkali tidak dapat diketahui pihak diluar Whatsapp Grup MGBK SMA/MA Kota Malang memiliki portal website sendiri untuk menunjang publikasi kegiatan Bagaimana proses pelaksanaan konsultasi? Proses dilakukan oleh masing- masing guru BK di masing- masing sekolah Terdapat platform untuk memungkinkan konsultasi secara daring,
untuk memudahkan proses konsultasi dan keterjangkauan

## Understand Context of Use
Tahap  ini  berfungsi  untuk  mengetahui  siapa  saja pengguna  akhir  yang  akan  menggunakan  portal website MGBK SMA/MA Kota Malang dan mengerti karakteristik  penggunanya.  Pada  tahap  ini  dibagi menjadi dua proses yaitu proses identifikasi pengguna dan karakteristik pengguna [14].

## Identifikasi Pengguna
Hasil identifikasi pengguna yang telah dilakukan sebelumnya terdapat pada tabel 2 berikut.
Tabel 2. Identifikasi Pengguna
Pengguna Deskripsi Administra tor Pengelola  portal  website  yang berfungsi  mengelola  seluruh  data pengguna, konten website. Guru BK Memberikan  informasi  berupa berita, acara, konseling, dan file Pengguna Mengakses  portal  website  untuk melihat berita, konseling, dan file

## Karakter Pengguna
Pada  tahap  identifikasi  pengguna  yang  telah dilakukan sebelumnya, selanjutnya adalah memahami  karakter  dari  pengguna.  Karakter pengguna  pada  portal  website  MGBK  SMA/  MA Kota Malang terdapat pada tabel 3 berikut.
Tabel 3. Karakter Pengguna Jenis Keterangan Usia Siswa: 15-18 tahun Guru BK: 30-55 tahun Administrator: 30-55 tahun Literasi Komputer Sebagian besar pengguna portal website memiliki pengetahuan penggunaan komputer dan internet Specify User Requirements Tahap  ini  bertujuan  untuk  memahami  kebutuhan pengguna  secara  spesifik.  Adapun  cara  yang dilakukan adalah mewawancarai pengguna sehingga didapatkan  hasil  akhir  kebutuhan  pengguna  yang terdapat pada tabel 4 berikut.
Tabel 4. Kebutuhan Pengguna Pengguna Kebutuhan Pengguna 1. Melihat halaman home 2. Melihat halaman berita
3. Melihat halaman acara
4. Melihat halaman konseling
5. Melihat halaman kerjasama 6. Melihat dan mengunduh file pada halaman download 7. Melihat halaman tentang Guru BK
1. Registrasi pada portal website 2. Login ke dalam portal website
3. Mengunggah berita 4. Mengunggah acara
5.  Mengunggah  nomor  pada halaman konseling 6. Mengunggah kerjasama
7. Mengunggah file Administrator 1. Verifikasi akun Guru BK 2. Mengelola berita 3. Mengelola acara 4.  Mengelola  nomor  halaman konseling
5. Mengelola kerjasama
6. Mengelola file download

## Design Solutions
Tahap  ini  berfungsi  untuk  merancang  serta melakukan  implementasi  desain  yang  telah  dirancang. Adapun fase dalam tahap ini adalah pembautan user flow dan pembuatan mock-up sistem yang akan dijelaskan pada poin berikutnya.

## Pembuatan User Flow
Halaman Login 2 Pengguna memilih menu login Halaman Home 1 Proses verifikasi username & password Input username & password 3 Pengguna memilih kolom username & password Verifikasi Berhasil Pengguna Login 4 Gambar 2. User Flow Halaman Login
Pengguna Mengakses Portal Website 1 Halaman Home 2 Pengguna memilih menu home Gambar 3. User Flow Halaman Home
Halaman Berita 2 Membaca Berita 3 Pengguna memilih menu home Halaman Home 1 Pengguna memilih berita Gambar 4. User Flow Halaman Berita
Halaman Acara 2 Membaca Acara 3 Pengguna memilih menu home Halaman Home 1 Pengguna memilih acara Gambar 5. User Flow Halaman Acara Halaman Konseling 2 Melihat Kontak 3 Pengguna memilih menu konseling Halaman Home 1 Pengguna memilih kontak konseling Gambar 6. User Flow Halaman Konseling Halaman Download 2 User Download File 3 Pengguna memilih menu download Halaman Home 1 Pengguna memilih file
Gambar 7. User Flow Halaman Download

## Pembuatan Mock-up Portal Website
Pada  penelitian  ini mock-up digunakan  sebagai rancangan  awal  dari  portal  website  yang  akan  dibuat. Dalam  pembuatan mock-up ini  menggunakan  alat  bantu Microsoft  Visio.  Adapun mock-up sistem  yang  dibuat terdapat pada gambar berikut.
LOGO
Sign in
Forgot password? User ID Password Show password Keep me signed in. Sign in New Account Create new account Sign Up for LOGO account
Gambar 8. Mock-up Login Berita Utama Deskripsi Berita MGBK SMA/MA KOTA MALANG Home Berita Acara Konseling Download Tentang Login Judul Acara Deskripsi Acara Judul Kerjasama Deskripsi Kerjasama
Gambar 9. Mock-up Halaman Home
Berita Terbaru
MGBK SMA/MA KOTA MALANG Home Berita Acara Konseling Download Tentang Login Judul Berita Deskripsi Berita Judul Berita Deskripsi Berita Judul Berita Deskripsi Berita Gambar 10. Mock-up Halaman Berita MGBK SMA KOTA MALANG Home Berita Acara Konseling Download Tentang Login Judul Acara Detail Acara Judul Acara Detail Acara Judul Acara Detail Acara Acara Terbaru Gambar 11. Mock-up Halaman Acara MGBK SMA/MA KOTA MALANG Home Berita Acara Konseling Download Tentang Login Konseling Nama Kontak Konseling Nama Kontak Konseling Nama Kontak
Gambar 13. Mock-up Halaman Konseling
MGBK SMA KOTA MALANG
Home Berita Acara Konseling Download Tentang Login Nama file Deskripsi file Nama file Deskripsi file Nama file Deskripsi file
Gambar 14 . Mock-up Halaman Download

## Evaluate Againts Requirements
Pada  tahap  ini  akan  dilakukan  pengujian  dari mockup sistem yang telah dibuat. Adapun pengujian yang dilakukan adalah Usability Testing.

## Usability Testing
Pengujian usability  testing merupakan  metode untuk mengukur fungsionalitas dari sebuah sistemz [15], salah  satunya  adalah Hallway  Testing [11].  Adapun langkah  yang  dilakukan  dalam  melakukan Hallway Testing yaitu menyusun beberapa skenario untuk menguji fitur  sistem  dan  di  uji  coba  kan  kepada  beberapa pengguna,  secara  umum  skenario  pengujian usability testing terdapat pada tabel di bawah ini.
Tabel 5. Skenario Pengujian No.  Nama Mockup Skenario 1 Login Pengguna  berhasil  login  ke dalam  sistem  menggunakan username dan password yang telah diberikan 2 Beranda Pengguna  dapat  mengakses halaman beranda pada  portal website 3 Berita Pengguna  dapat  mengakses halaman  berita  pada  portal website 4 Konseling Pengguna  dapat  mengakses halaman  konseling  pada portal website dan membuka kontak  Guru  BK  yang terdapat pada halaman konseling 5 Download Pengguna  dapat  mengakses halaman download pada portal website dan mengunduh file yang terdapat pada halaman download
3. HASIL DAN PEMBAHASAN
Designed Solution Meets User Requirements
Gambar 15. Halaman Login Gambar 16. Halaman Home Gambar 17. Halaman Berita Gambar 18. Halaman Acara
Gambar 19. Halaman Konseling
Gambar 20. Halaman Download

## Hasil Usability Testing
Pengujian  usability  dilakukan  kepada  lima pengguna portal website. Adapun hasil pengujian usability testing terdapat pada tabel berikut. Tabel 6. Hasil Pengujian Tester Fitur Log in Bera nda Berita Konsel ing Downl oad User 1 OK OK OK OK OK User 2 OK OK OK OK OK User 3 OK OK OK OK OK User 4 OK OK OK OK OK User 5 OK OK OK OK OK
Dari  hasil  pengujian  diatas  dapat  disimpulkan  bahwa mock  up  yang  dibuat  dapat  berjalan  sesuai  dengan skenario yang dibuat sebelumnya.

## 4. KESIMPULAN DAN SARAN
Dari  hasil  penelitian  diatas,  dapat  disimpulkan bahwa  dengan  menerapkan user-centered  design pada proses perancangan dan pembuatan portal website MGBK SMA/MA  Kota  Malang  memiliki  tingkat  fungsionalitas 100%.  Dengan  demikian  dengan  menerapkan  metode user-centered  design dapat  dipergunakan  untuk meningkatkan keberhasilan sebuah sistem.
Saran  bagi  penelitian  selanjutnya  adalah  dalam tahap evaluate againts requirements dapat menggunakan pendekatan kuantitatif dengan menggunakan Delone and Mclean  IS  Success  Model seperti  kualitas  informasi, kualitas sistem, dan kualitas layanan.

## Daftar Pustaka
[1] B.  Wibowo,  K.  Adi,  and  E.  Sediono, “PENGEMBANGAN DAN EVALUASI SISTEM INFORMASI DI INSTALASI GIZI RSJ PROF  DR  SOEROJO  MAGELANG,” J.
Teknoinfo , vol. 15, no. 1, p. 1, Jan. 2021.
[2] N. M. Widnyani et al. , “Penerapan Transformasi Digital Pada Ukm Selama Pandemi,” vol. 6, no. 1, pp. 79–87, 2021.
[3] R.  Oktavenus,  “Analisis  Pengaruh  Transformasi Digital  dan  Pola  Perilaku  Konsumen  Terhadap Perubahan  Bisnis  Model  Perusahaan  di Indonesia,” J. Manaj. Bisnis dan Kewirausahaan , vol. 3, no. 5, p. 44, 2019.
[4] L.  Y.  Siregar  and  M.  I.  P.  Nasution, “Perkembangan  Teknologi  Informasi  Terhadap Peningkatan  Bisnis  Online,” HIRARKI  J.  Ilm. Manaj.  dan  Bisnis ,  vol.  02,  no.  01,  pp.  71–75, 2020.
[5] A.  Tirtana,  A.  Zulkarnain,  B.  K.  Kristanto,  S. Suhendra, and M. A. Hamzah, “Rancang Bangun Aplikasi  E-Commerce  Untuk  Meningkatkan Pendapatan UMKM,” J. Ilm. Teknol. Inf. Asia , vol. 14, no. 2, p. 101, 2020.
[6] T.  K.  Ahsyar,  A.  Jakawendra,  and  Syaifullah Syaifullah,  “Analisa  Usability  Website  Berita Online  Menggunakan  Metode  User  Centered Design,” J.  Ilm.  Rekayasa  … ,  vol.  6,  no.  2,  pp. 165–172, 2020.
[7] P. Tantri  Fajarini,  N.  K. Ayu Wirdiani,  and  I.  P. Arya  Dharmaadi, “Evaluasi Portal Berita Online pada  Aspek  Usability  Menggunakan  Heurtistic Evaluation dan Think Aloud,” J. Teknol. Inf. dan Ilmu Komput. , vol. 7, no. 5, p. 905, 2020.
[8] Y.  Sugandi,  “Pengembangan  Sistem  Aplikasi Portal  Informasi  Perguruan  Tinggi  di  Indonesia Berbasis Website,” J. Pengemb.  Teknol.  Inf. dan Ilmu  Komput. ,  vol.  2,  no.  12,  pp.  6169–6175,
2018.
[9] I.  S.  Yatana  Saputri,  M.  Fadhli,  and  I.  Surya, “Penerapan Metode UCD (User Centered Design) Pada  E-Commerce  Putri  Intan  Shop  Berbasis Web,” J. Nas. Teknol. dan Sist. Inf. , vol. 3, no. 2, pp. 269–278, 2017.
[10] D.  L.  Kaligis  and  R.  R.  Fatri,  “Pengembangan Tampilan  Antarmuka  Aplikasi  Survei  Berbasis Web  Dengan  Metode  User  Centered  Design,” JUST  IT    J.  Sist.  Informasi,  Teknol.  Inf.  dan Komput. , vol. 10, no. 2, p. 106, 2020.
[11] A.  Zulkarnain,  “Penerapan  Mobile-First  Design pada  Antarmuka  Website  Profil  Sekolah Menggunakan  Metode  Human-Centred  Design (Studi Kasus: SMPN 21 Malang),” J. Ilm. Teknol. Inf. Asia , vol. 13, no. 2, pp. 125–136, 2019.
[12] S.  Supardianto  and  A.  B.  Tampubolon, “Penerapan  UCD  (User  Centered  Design)  Pada Perancangan  Sistem  Informasi  Manajemen Aset TI  Berbasis Web  di  Bid TIK  Kepolisian  Daerah Kepulauan  Riau,” J. Appl.  Informatics  Comput. , vol. 4, no. 1, pp. 74–83, 2020.
[13] G.  Karnawan,  “Implementasi  User  Experience Menggunakan  Metode  Design  Thinking  Pada Prototype Aplikasi  Cleanstic,” J.  Teknoinfo ,  vol. 15, no. 1, p. 61, 2021.
[14] L.  M.  Kopf  and  J.  Huh-Yoo,  “A  User-Centered Design  Approach  to  Developing  a  Voice Monitoring  System  for  Disorder  Prevention,” J. Voice , vol. 3200, 2020.
[15] N. A. Dewananto, H. Tolle, and H. M. Az-zahra, “Perancangan  User  Experience  Menggunakan Metode  Human  Centered  Design  Pada Aplikasi Mobile  Portal  Berita  Tabloidjubi,” J.  Pengemb. Teknol.  Inf.  dan  Ilmu  Komput.  Univ.  Brawijaya , vol. 3, no. 3, pp. 2916–2922, 2019.