## PERANCANGAN UI/UX PADA WEBSITE SMK NEGERI 1 CIKAMPEK DENGAN METODE DESIGN THINKING
Lintar Muhammad Lias, Rini Mayasari, Garno
Program Studi Informatika, Fakultas Ilmu Komputer, Universitas Singaperbangsa Karawang Jl. HS. Ronggo Waluyo, Telukjambe Timur, Karawang, Jawa Barat, Indonesia - 41361 lintar.ml19026@student.unsika.ac.id

## ABSTRAK
SMK Negeri 1 Cikampek merupakan sekolah yang memanfaatkan teknologi berupa website sebagai media untuk  mengolah  data  dan  informasi.  Namun  layanan  tersebut  masih  memiliki  keterbatasan  mulai  dari  segi tampilan User Interface dari sejak peluncuran website , mayoritas berisi ungkapan kekecewaan, kebingungan dan keluhan terhadap website . Dalam penelitian ini metode yang akan digunakan dalam menganalisis desain adalah Design Thinking untuk menentukan solusi dari masalah website . Pada tahap pengujian hasil prototype ini akan dilakukan dengan menggunakan metode pengujian Sytem Usability Scale ( SUS ) yang memiliki  skor  penilaian 1-5,  dan  hasil  dari  skor SUS adalah  bernilai  80,5. di benchmark SUS perbandingan desain sebelum redesign dan sesudah redesign juga mengalami peningkatan pengalaman pengguna, yang sebelumnya kategorikan dalam kategori Not Acceptable Poor (Buruk) menjadi Acceptable Good (bagus).
Kata  kunci: Website, SMK  Negeri  1  Cikampek ,  User  Interface,  User  Experience,  Design  Thinking,  System Usability Scale

## 1. PENDAHULUAN
Di  era  kemajuan  teknologi  dan  modernisasi, orang  sangat  bergantung  pada  teknologi.  Hal  ini menjadikan  teknologi  sebagai  kebutuhan  pokok  bagi setiap  orang.  Seluruh  masyarakat  menggunakan teknologi dalam berbagai aspek untuk kehidupan yang berkelanjutan.  Contohnya  Teknologi website dapat mengelolah  data  menjadi  sebuah  informasi  dengan cara mengidentifikasi, mengumpulkan, mengelola dan menyediakan  untuk  dapat  diakses  secara  bersama- sama.
SMK  Negeri  1  Cikampek  merupakan  sekolah yang memanfaatkan teknologi berupa website sebagai media untuk mengolah data dan informasi. Pemanfaatan  penggunaan website sendiri  tidak  luput dari tampilan User Inteface (UI) yang baik juga. User Interface (UI)  atau  antarmuka  pengguna  dirancang sebagai  perangkat  informasi  yang  memungkinkan pengguna dapat berinteraksi dengan komputer melalui device  yang  dipakai.  Menurut  Muhyidin    [1],  dalam jurnal  ilmiahnya  menjelaskan  bahwa User  Interface adalah ilmu yang mempelajari tentang tata letak desain grafis  pada  tampilan  sebuah website atau  aplikasi. User  Interface yang  baik  harus  dapat  memberikan pengalaman yang ramah ketika pengguna berinteraksi dengan  suatu  antarmuka  baik  itu  ketika  didengar, dilihat, ataupun disentuh. UI juga harus berdampingan dengan User Experience . User Experience (UX) atau Pengalaman pengguna  merupakan tanggapan  impresi serta  kesan  pengguna  saat  seseorang  menggunakan produk,  sistem,  atau  suatu  layanan.  Disisi  lain  juga mengukur  seberapa  puas  dan  nyaman  perasaan pengguna  ketika  menggunakan  produk,  sistem,  dan layanan.
SMK Negeri 1 Cikampek, memiliki keluhan dari pengguna  terkait  antarmuka  pengguna  (UI)  dan pengalaman pengguna (UX). Pengembang menyadari
kurangnya  perhatian  pada  aspek  UI/UX  sejak peluncuran  tanpa  evaluasi  secara  berkala.  Penelitian ini  merekomendasikan  redesain  dengan  pendekatan Design  Thinking ,  fokus  pada  pemahaman  kebutuhan dan  keinginan  pengguna.  Sebuah  penelitian  oleh Ja’Far dkk [2], mengimplementasikan pengembangan UI/UX pada aplikasi “Usahaqqu”. Pada penelitian ini membantu  para  produsen  dari  sisi  desainer  dan inovator untuk menciptakan inovasi dan memfasilitasi pembelian antara pemasok dan distributor.
Penelitian  lain  oleh  Widiyantoro  F,  dkk.  [3] melakukan  penelitian  tentang  desain  dan  manajemen kue aplikasi mobile yang bernama “garox’s cakeshop” dengan  menggunakan  metode Design  Thinking. Kemudian pada pengujian aplikasi dengan menggunakan Usability  Test didapatkan  rata-rata tingkat  keberhasilan  85  dari  100,  ini  membuktikan bahwa Design  Thinking memberikan  peningkatan pada UI/UX
2. TINJAUAN PUSTAKA

## 2.1. Penelitian Sebelumnya
Berdasarkan  literatur,  metode  Design  Thinking banyak  digunakan  dalam  penelitian,  mencakup berbagai  input  untuk  menghasilkan  hasil  penelitian yang beragam.
Dalam pada penelitian Danang Haryuda, dkk [4], mereka merancang website pada perusahaan Laportea Company  dengan  menggunakan  metode design thinking yang  bertujuan  untuk  menarik  minat pengguna.  Data  dikumpulkan  melalui  kuesioner  15 responden  dan  dianalisis  dengan  menggunakan usability testing.
Pada  penelitian Aria Ar Razi, dkk [5], membuat perancangan aplikasi “kembaliin” dengan menerapkan metode design  thinking yang  bertujuan  untuk
memecahkan  masalah  pada  kasus  kehilangan  barang dan temuan barang tercecer.
Pada  penelitian  Isadora,  dkk.  [6],  berkaitan dengan  penurunan  pasien  dan  pendapatan  Rumah Sakit  Semen  Gresik  selama  pandemi.  Rumah  sakit berupaya  menyediakan  layanan  kesehatan  di  rumah melalui  aplikasi HomeCare untuk  memudahkan pasien.  Fokus  utama  pada  kenyamanan  pengguna, dengan  metode Design  Thinking digunakan  untuk merancang User  Experience aplikasi  sehingga kenyamanan  pengguna  terpenuhi.  Dari  proses design thinking yang  sudah  dilalui  didapatkan  solusi  desain untuk diuji menggunakan User Experience Questionnaire (UEQ) untuk mengevaluasi  efektivitas dan pengalaman calon pengguna.
Dalam  penelitian  Kristin  Angelina,  dkk  [7], membuat  desain  UI/UX  pada  aplikasi  penjualan dengan  berfokus  pada  kebutuhan  bisnis.  Pembuatan desain  ini  dengan  menggunakan  pendeketan design thinking .  Pada  tahap testing dilakukan  menggunakan Usability  Testing dengan  memanfaatkan User Scenarios ,  hasil  dari Usability  Testing ini  memiliki tingkat keberhasilan sebesar 100%.

## 2.2. User Interface
Menurut  Aulia  T,  dkk  dalam  penelitian  [8], dalam karyanya yang berupa jurnal ilmiah, dijelaskan bahwa User Interface (UI) merupakan suatu tampilan visual dari produk yang menghubungkan antara sistem dengan pengguna yang memiliki fungsional bermanfaat.  Fokus  utama  UI  adalah  pada  aspek estetika  tampilan  suatu website atau  aplikasi.  Tugas seorang  desainer  UI  melibatkan  pengaturan  elemen- elemen seperti teks, warna, garis, tombol, gambar, dan semua  elemen  lainnya  dalam  tampilan website atau aplikasi. UI dikenal dengan tampilan dari suatu produk yang  dapat  dilihat  ataupun  dipandang  oleh  pengguna secara  langsung.  Oleh  karena  itu,  desain  antarmuka pengguna harus dibuat sebaik mungkin.

## 2.3. User Experience
User Experience (UX) adalah suatu pendapat dan asumsi masyarakat tentang penggunaan suatu produk. Menurut  Pratama  &  Henisa  dalam  penelitiannya  [9], UX  dapat  dilihat  dari  kemudahan  pengguna  dalam menggunakan produk digital tersebut. UX dinilai dan dievaluasi  tingkat  kenyamanan  pengguna  kepada pemanfaatan  produk  dengan  dilihatnya  peningkatan kenyamanan pengguna dengan produk yang digunakan.  UX  memiliki  dasarnya  sendiri  dalam ditentukannya  peningkatan  kepuasan  user.  Dengan memerhatikan UX yang berfokus pada pengguna, oleh karena  itu  akan  meningkatkan  peluang  keberhasilan produk di pasar.

## 2.4. Figma
Figma, diluncurkan pada 2015, awalnya sebagai versi  beta,  menjadi  produk  publik  pada  2016,  dan produk  berbayar  pada  2017.  Versi  gratis  membantu mendapatkan pelanggan awal. Meskipun menghadapi
tantangan  kepemimpinan  dan  frustrasi  karyawan selama peluncuran beta, Figma berhasil mendapatkan pendanaan ventura sebesar $2 miliar USD pada April 2020.  Menarik  perhatian  klien  terkemuka  seperti Microsoft, Airbnb, GitHub, Square, Zoom, dan Uber, Figma  semakin  diakui  sebagai  pesaing  utama  Adobe dalam desain inovatif dan kolaboratif. Aplikasi Figma bersifat online dan membutuhkan perangkat terhubung dengan jaringan internet. Sehingga dapat berkolaborasi dengan sesama anggota tim secara real time  dan  penyimpanannya  pun  berbasis  cloud  yang real  time  dengan  otomatis  tersimpan  tanpa  harus melakukan simpan file secara manual [10].

## 2.5. Website
Website ialah  media  publikasi  elektronik  yang terdiri  dari  halaman  web  yang  dihubungkan  satu dengan  yang  lain  menggunakan  tautan  yang  terletak pada  teks  atau  gambar. Website dibuat  pertama  kali oleh Tim Bamers Lee pada pada tahun 1990. dibangun dengan  menggunakan  HTML  dan  memanfaatkan protokol  komunikasi  HTTP  yang  terletak  pada aplication layer pada refensi layer OSI.

## 2.6. Design Thinking
Menurut Kelly dan Brown pada penelitian  [11], Design  Thinking adalah  pendekatan  inovatif  yang berpusat pada manusia dengan tujuan menggabungkan kebutuhan pengguna, potensi teknologi, dan persyaratan  bisnis  untuk  menciptakan  ide  kreatif. terdapat  lima  tahapan  yang  ada  pada  pendekatan Design Thinking . [6], diantaranya sebagai berikut.
Gambar 1. Tahapan d esign thinking
1. Tahap Emphatize ,  merupakan  pemanfaatan  dan pemahaman  dari  suatu  permasalahan  kepada calon  pengguna  dengan  proses  observasi, wawancara,  atau  survey  agar  mendapatkan insight yang luas.
2. Tahap
Define , mendefinisikan suatu permasalahan yang ditemukan dengan menerapkan  proses  berupa  kerangka  berfikir yang  berguna  untuk  memahami  masalah, sehingga bisa menggali informasi yang jelas.
3. Tahap Ideate , langkah di mana seorang desainer mulai  mengembangkan  ide-ide  solusi  kreatif untuk menanggapi permasalahan pengguna.
4. Tahap Prototype ,  desainer  menciptakan  model solusi dalam bentuk rancangan prototype.
5. Tahap Test ,  merupakan  langkah  akhir  di  mana seluruh  produk  diuji  melalui  prototype  untuk memastikan  bahwa  produk  tersebut  sesuai  dan mudah digunakan oleh pengguna.
2.7. User Persona
User persona merupakan gambaran dari karakter pengguna yang bersifat fiksi yang dibuat menyerupai pengguna  sebenarnya  dari  sebuah  produk.  Manfaat dari  dibuatnya  user  persona  adalah  untuk  membantu desainer dalam memahami pengguna [12].

## 2.8. Pain Point
Pain point adalah masalah spesifik yang dialami oleh  calon  pengguna  dalam  berbagai  aspek. Sederhananya, pain point adalah segala kesulitan atau keresahan yang mereka hadapi. Tujuan dari pain point ini  adalah  untuk  meminimalisasi  kesulitan  pengguna akan  meningkatkan  kepuasan  mereka  pada  saat menggunakan  aplikasi dan  meningkatkan kesuksesan proses bisnis.
2.9. System Usability Scale (SUS) Penelitian menggunakan Skala Kegunaan Sistem (SUS) dengan kuesioner 10 pernyataan. Dalam sampel 10 responden yang dipilih secara purposive, berfokus pada siswa, guru, alumni. Metode SUS dipilih karena validitas  dan  reliabilitasnya  teruji,  bahkan  dengan sampel responden yang relatif kecil. Hasil perhitungan SUS  dikonversi  menjadi  skor  1-100  sebagai  penentu kelayakan produk, terlihat pada Gambar 2.

## Gambar 2. Parameter SUS
Usability  adalah  evaluasi  kualitatif  untuk mengukur  kemudahan  penggunaan  aplikasi.  Metode pengukuran  termasuk  System  Usability  Scale  (SUS) dan  platform  Maze,  dengan  indikator  yang  berbeda. SUS  menggunakan  kuesioner  sepuluh  pertanyaan, dengan  ganjil  positif  dan  genap  negatif,  dinilai menggunakan skala Likert [13].
𝑥̅ = ∑ 𝑥 𝑛 (1) Keterangan: 𝑥̅ :  Skor rata-rata ∑ 𝑥 :  Jumlah  skor System  Usability  Scale (SUS) 𝑛 :  Jumlah dari responden
2.10. Usability Testing
Usability Testing adalah sebuah  metode untuk dapat  mengevaluasi  sebuah  produk  tampilan  dengan melakukan pengujian langsung kepada calon pengguna.  Tujuannya  untuk  menganalisis  dan mengidentifikasi  sebuah  masalah  usabilitas  seperti
mengumpulkan data, pengukuran kemudahan, mengukur  efisiensi,  dan  menentukan  kepuasan pengguna dengan produk tampilan  yang telah dibuat. Menurut  Nielsen  pada  penelitian  N.  Luh  Putri  Ari Wedayanti,  dkk  [14],  dalam  melakukan  pengujian usability  testing aplikasi  atau website dengan  lima orang,  sudah  mencakup  80  persen  permasalahan pengguna.

## 3. METODE PENELITIAN
Penelitian  ini  mengadopsi  metode Design Thinking dengan  5  tahap  utama:  empathize,  define, ideate, prototype, dan test. Flowchart penelitian dapat dilihat pada Gambar 3.
Gambar 3. Flowchart penelitian
1. Tahap emphatize, dilakukan  wawancara  terhapar 10  responden  untuk  memahami  masalah  dan kebutuhan  pengguna.  Pada  diakhir  wawancara diberikan kuesioner SUS yang berisi 10 pertanyaan dengan skala penilaian subjektif terhadap usability . Responden  diminta  mengisi  kuesioner  setelah berinteraksi dengan website , dan hasilnya dianalisis  menggunakan  Microsoft  Excel  untuk membandingkan  sebelum  dan  sesudah  penerapan solusi perbaikan desain.
2. Tahap define ,  pada  tahap  ini  merupakan  tahapan untuk  menentukan  permasalahan  yang  berfokus pada  pengguna  yang  spesifik  dan  berdasarkan wawasan  dan  kebutuhan-kebutuhan  pengguna sesuai  dengan  hasil  dari  tahap  empathize.
Kemudian dari permasalahan tersebut diolah untuk menjadi user  persona , pain  point dan how  might we .
3. Tahap ideate, pada tahap ini dilakukan dengan cara brainstorming yaitu mengeluarkan dan merealisasikan  ide-ide  berupa  solusi  dari how- might  we yang  telah  dilakukan  pada  tahap define yang  kemudian  ide  solusi  tersebut  dikelompokan dalam bentuk affinity diagram . Pada tahap ini juga dibuat information  architecture yaitu  penyusunan struktur website yang  berguna  untuk  acuan pengguna  dalam  menjalankan website ,  acuan- acuan  tersebut  berupa  navigasi-navigasi  dan bertujuan  untuk  memudahkan  pengguna  dalam
menggunakan prototipe website dan juga pembuatan wireframe atau  gambaran  kasar  dari solusi desain.
4. Tahap  selanjutnya  yaitu prototype, tahap  ini dilakukan  dengan  cara  membuat User  Interface dari hasil pembuatan wireframe sebelumnya yang selanjutnya akan dibuat prototipe untuk mengimplementasikan information  architecture yang telah dibuat. Pembuatan prototipe dilakukan agar  bisa  dilakukan usability  testing pada  saat tahap test oleh responden dan lebih efisien karena tidak memakan biaya yang mahal. 5. Test adalah tahap akhir  yang  melibatkan usability
testing terhadap prototype hasil rekomendasi solusi desain. Evaluasi dilakukan dengan kuesioner SUS untuk  membandingkan  hasil  sebelum  dan  setelah perbaikan  desain.  Jika  perlu,  dilakukan  perbaikan berdasarkan evaluasi tahap sebelumnya
4. HASIL DAN PEMBAHASAN
4.1. Tahap Emphatize
Pada  tahap emphatize ,  melakukan  wawancara dan  memdistribusikan  kuesioner System  Usability Scale kepada  responden  untuk  diisi  berdasarkan pengalaman  mereka  terhadap website SMK  Negeri  1 Cikampek sebelum dilakukan evaluasi desain.

## 4.1.1. Wawancara
Wawancara dilakukan terhadap sepuluh orang responden  dengan  kriteria  pria  atau  wanita, berhubungan  dengan  sekolah  langsung  seperti  siswa, guru, alumni. Wawancara  menggunakan google form sebagai  media  dan  dilakukan  secara  offline.  Seperti dilihatkan pada Gambar 4 dan 5.
Gambar 4. Item pertanyaan wawancara

## Gambar 5. Hasil wawancara
4.1.2. User Testing
Diakhir  wawancara,  dilakukan  pengujian user testing dengan metode System Usability Scale (SUS).
Data  kuesioner  SUS  dikumpulkan  melalui google form .  Penilaian  menggunakan  skala likert (1-5)  dari tiap-tiap pertanyaan, seperti yang terlihat pada Gambar 6.

## Gambar 6. Item pertanyaan SUS
Hasil  kuesioner  menjadi  output  dan  dijadikan dasar  untuk  merancang  rekomendasi  solusi  desain UI/UX.
Gambar 7. Hasil analisis sebelum redesign
Prototype yang  belum  akan  diuji  untuk mengidentifikasi  kelemahan  dan  menguji  desain.  Uji kegunaan  menggunakan  metode System  Usability Scale (SUS) dengan 10 pertanyaan (5 ganjil, 5 genap) untuk  mendapatkan  bobot  tertentu.  Hasil  uji terdokumentasi dalam Tabel 1.
Tabel 1. Hasil pengukuran SUS sebelum redesign
R Question 1 2 3 4 5 6 7 8 9 10 1 2 3 1 4 2 3 1 4 1 5
2 2 4 1 5 3 4 1 3 2 3 3 1 5 1 5 3 4 2 3 3 3 4 2 4 3 5 1 5 3 4 1 3
5 2 2 3 3 2 4 4 2 3 3 6 1 5 1 5 2 5 1 3 3 5 7 2 3 2 3 1 3 5 3 4 1 8 2 2 1 3 3 4 4 5 4 5 9 3 4 2 3 1 5 3 2 1 3 10 1 3 4 4 1 5 3 1 1 4
Data yang terkumpul dari Tabel 1, akan melalui proses kalkulasi dengan pendekatan tertentu. Pertanyaan ganjil memiliki nilai skor dikurangi 1 (X- 1), sementara pertanyaan genap dikurangkan dari 5 (5- X).  Skor  SUS  dihitung  dengan  mengalikan  hasil perhitungan  dengan  faktor  2.5,  seperti  terlihat  dalam Tabel 2.
Tabel 2. Hasil perhitungan sebelum redesign R Question 1 2 3 4 5 6 7 8
9 10 1 2 -1=1 5 -3=2 1 -1=0 5 -4=1 2 -1=1 5 -3=2 1 -1=0 5 -4=1 1 -1=0 5 -5=0 2 2 -1=1 5 -4=1 1 -1=0 5 -5=0 3 -1=2 5 -4=1 1 -1=0 5 -3=2 2 -1=1 5 -3=2 3 1 -1=0 5 -5=0 1 -1=0 5 -5=0 3 -1=2 5 -4=1 2 -1=1 5 -3=2 3 -1=2 5 -3=2 4 2 -1=1 5 -4=1 3 -1=2 5 -5=0 1 -1=0 5 -5=0 3 -1=2 5 -4=1 1 -1=0 5 -3=2 5 2 -1=1 5 -2=3 3 -1=2 5 -3=2 2 -1=1 5 -4=1 4 -1=3 5 -2=3 3 -1=2 5 -3=2 6 1 -1=0 5 -5=0 1 -1=0 5 -5=0 2 -1=1 5 -5=0 1 -1=0 5 -3=2 3 -1=2 5 -5=0 7 2 -1=1 5 -3=2 2 -1=1 5 -3=2 1 -1=0 5 -3=2 5 -1=4 5 -3=2 4 -1=3 5 -1=4 8 2 -1=1 5 -2=3 1 -1=0 5 -3=2 3 -1=2 5 -4=1 4 -1=3 5 -5=0 4 -1=3 5 -5=0 9 3 -1=2 5 -4=1 2 -1=1 5 -3=2 1 -1=0 5 -5=0 3 -1=2 5 -2=3 1 -1=0 5 -3=2 10 1 -1=0 5 -3=2 4 -1=3 5 -4=1 1 -1=0 5 -5=0 3 -1=2 5 -1=4 1 -1=0 5 -4=1
Tabel 2, menampilkan hasil setelah data dihitung, kemudian  dikalikan  dengan  faktor  2.5,  dan  total akhirnya terlihat pada Tabel 3.
Tabel 3. Hasil perhitungan sebelum redesign R Question Jumlah Nilai (jumlah x 2,5) 1 8 20 2 10 25
3 10 25 4 9 22,5 5 20 50 6 5 12,5 7 21 52,5 8 15 37,5 9 13 32,5 10 13 32,5 Total 310 Skor Rata-Rata 31
Setelah  memperoleh  data  hasil  penghitungan dengan  rumus  SUS  dan  menjumlahkan  seluruh  data responden,  dilakukan  perhitungan  rata-rata  untuk mendapatkan  hasil  akhir  menggunakan  rumus  yang dapat dilihat pada sub bab 2.8.

## 4.2. Tahap Define
Langkah  ini  fokus  pada  identifikasi  masalah pengguna dengan merujuk pada hasil kuesioner tahap empathize. Pendefinisian masalah melibatkan pembuatan  pain  point  dan  how-might-we  untuk merinci  masalah  dan  memahami  lebih  lanjut kebutuhan pengguna.

## 4.2.1. User Persona
Data  dari  kuesioner  dan  wawancara  diolah untuk  membuat  user  persona  yang  mencerminkan karakteristik  calon  pengguna  aplikasi.  User  persona mencakup  identitas,  latar  belakang,  tujuan,  frustrasi, dan  tingkat  pengetahuan  teknologi  pengguna. Detailnya dapat ditemukan di Gambar 8.
Gambar 8. User Persona

## 4.2.2. Pain Point
Tabel 4, memuat daftar berbagai permasalahan dan  kesulitan  yang  dihadapi  oleh  pengguna,  yang dikelompokkan dalam pain point. Pemetaan permasalahan  ini  menjadi  sumber  penting  untuk pengembangan  aplikasi.  Berikut  adalah  rangkuman dari permasalahan yang dihadapi oleh pengguna.
Tabel 4. Pain point
Pain point 1. Tidak adanya maps sekolah 2. Terbatasnya akses informasi sekolah, informasi tidak up to date dengan aktivitas sekolah
3. Font, warna, icon dan navbar tidak konsisten
4. Alur BKK yang menyulitkan calon pekerja
5. Website nya kurang tertata dengan baik
6. Kebingungan dengan tampilan website , konten minim
7. Layout antar konten tidak konsisten 8. Sulit bertanya dan berdiskusi dengan guru secara langsung mengenai pekerjaan dan informasi.
9. Designnya kurang menarik dan sangat monoton
10. Terganggu Adanya konten video yang seharusnya tidak perlu dimasukkan ke website
4.2.3. How Might We Tabel  5,  menampilkan how-might-we yang dibuat  untuk  menjelajahi  langkah-langkah  potensial dalam mengatasi permasalahan pengguna berdasarkan pain  point  yang  diidentifikasi.  Berikut  adalah how- might-we yang telah disusun dalam penelitian ini.

## Tabel 5. How Might We
How Might We
1. Memberikan kemudahan dalam informasi aktivitas sekolah
2. Dibuatkan fitur diskusi antar siswa, guru, alumni dan masyarakat
3. Memberikan kemudahan dalam melakukan mendaftar di BKK
4. Membuat warna, font dan icon secara konsisten
5. Perlu adanya penambahan konten dan merombak tampilan dan navigasi dalam website
6. Memperbaiki konsistensi antar konten
7. Membuat design tampilan website
dari UI menjadi lebih modern sesuai trend masa kini
8. Menata ulang konten video yang seperlunya
9. Dibutuhkan suatu fitur yang dapat membantu pengguna untuk mengetahui lokasi sekolah

## 4.3. Tahap Ideate
Pada tahap ideate dalam penelitian ini, dilakukan upaya  untuk  menemukan  ide-ide  solusi  yang  dapat mengatasi  masalah,  berdasarkan how-might-we yang telah  dirumuskan  pada  tahap  define.  Pendekatan dilakukan  melalui brainstorming ,  pembuatan affinity diagram, information architecture dan wireframe.

## 4.3.1. Brainstorming
Proses  brainstorming  menghasilkan  ide-ide rekomendasi  solusi  desain  untuk  mewujudkan how- might-we yang  dirumuskan  dalam  rangka  mengatasi permasalahan pengguna.
4.3.2. Affinity Diagram Ide-ide rekomendasi solusi dari tahap brainstorming, dipresentasikan melalui affinity diagram  untuk  mengelompokkan  ide-ide  ke  dalam beberapa kategori. Berikut ide-ide rekomendasi solusi yang dikelompokkan berdasarkan kategori menggunakan  metode  affinity  diagram,  yang  dapat diakses pada Tabel 6.
Tabel 6. Affinity Diagram
Beranda Menambahkan fitur Google Maps di website Perlu memperbanyak konten pada beranda dan memperbaiki tampilan website Perlu mengurangi konten-konten video yang seharusnya tidak perlu Informasi Perlu menambahkan informasi lainnya seperti berita, kontak, dan fitur maps Visualisasi Perlu adanya konsistensi warna, font dan icon Perlu penataan ulang website Perlu adanya konsisten antar layout Membuat tampilan UI menjadi lebih modern sesuai trend masa kini Umum Perlu menambahkan semacam panduan pada halaman BKK Fitur Perlu menambahkan fitur chat untuk pengguna

## 4.3.3. Information Architecture
Dari  ide  solusi  yang  telah  diprioritaskan, dibuatlah  sistem  navigasi  dalam  bentuk  information architecture.  Gambar  9  merupakan  information architecture  yang  dibuat  berdasarkan  ide  solusi  yang telah diprioritaskan.
Gambar 9. Information architecture
4.3.4. Wireframe (Lo-Fi)
Gambar  10,  menunjukkan  wireframe  dengan tingkat  low  fidelity  yang  dibuat  dalam  penelitian  ini menggunakan  aplikasi  Figma.  Ini  memberikan gambaran  awal  tampilan  halaman  prototype  sebelum dilakukan  proses  perancangan  antarmuka  pengguna, dengan  penjelasan  rinci  terlampir  pada  gambar tersebut.
Gambar 10. Wireframe
4.3.5. Komponen Visual Desain
Menjelaskan komponen visual desain, termasuk  warna,  ilustrasi,  ikon,  dan  tombol.  Rincian lebih lanjut dapat ditemukan dalam gambar 11, untuk memberikan gambaran yang lebih jelas.
Gambar 11. Komponen visual desain

## 4.4. Tahap Prototype
Pada  tahap  prototype,  antarmuka  pengguna dibuat  berdasarkan  wireframe  yang  direncanakan sebelumnya. Tampilan antarmuka yang selesai dibuat diubah menjadi prototype untuk diuji oleh responden.
4.4.1. User Interface (Hi-Fi)
Setelah  menyelesaikan  komponen  visual desain, langkah selanjutnya adalah membuat prototype berupa  high-fidelity  menggunakan  Figma,  merujuk pada  wireframe  low-fidelity  sebelumnya.  Hasil
prototype untuk solusi desain website SMK Negeri 1 Cikampek dapat dilihat pada Gambar 12.
Gambar 12. UI high-fidelity

## 4.5. Tahap Test
Dalam  tahap  uji  coba,  sepuluh  responden  dari tahap empathize menggunakan System Usability Scale untuk mengevaluasi prototype website SMK Negeri 1 Cikampek  setelah  proses  evaluasi  desain.  Tujuannya adalah agar mereka dapat mengalami perbedaan antara aplikasi sebelum dan sesudah proses evaluasi desain.

## 4.5.1. Hasil Pengukuran SUS Sesudah Redesign
Tabel  7,  menggambarkan  konversi  skor jawaban  peneliti,  mengubah  skala  awal  1-5  menjadi rentang  1  (sangat  tidak  setuju)  hingga  5  (sangat setuju), dengan nilai 3 sebagai jawaban netral, sesuai dengan konvensi pada Gambar 6.
Tabel 7. Hasil skor SUS sesudah redesign R Question 1 2 3 4 5 6 7 8 9 10 1 4 2 4 1 4 3 5 2 3 1
2 5 1 5 2 4 2 4 1 3 2
3 5 1 5 2 5 1 4 1 4 3
4 4 1 5 1 3 1 5 2 3 2
5 5 1 5 1 4 2 5 2 5 1
6 5 3 5 1 3 2 4 3 5 3
7 5 3 5 3 3 1 5 1 3 1
8 4 2 5 3 2 2 5 3 5 1
9 5 3 4 1 5 2 3 3 5 3 10 5 2 5 2 3 3 4 1 5 3
Tabel  8,  menggambarkan  perhitungan  data dengan mengurangkan 1 pada pertanyaan ganjil dan 5 pada  pertanyaan  genap.  Skor  System  Usability  Scale (SUS)  dihitung  dengan  mengalikan  skor  tersebut dengan faktor 2.5, sebagaimana terlihat pada Tabel 8.
Tabel 8. Hasil perhitungan sesudah redesign R Question 1 2 3 4 5 6 7 8 9 10 1 4-1=3 5-2=3 4-1=3 5-1=4 4-1=3 5-3=2 5-1=4 5-2=3 3-1=2 5-1=4 2 5-1=4 5-1=4 5-1=4 5-2=3 4-1=3 5-2=3 4-1=3 5-1=4 3-1=2 5-2=3 3 5-1=4 5-1=4 5-1=4 5-2=3 5-1=4 5-1=4 4-1=3 5-1=4 4-1=3 5-3=2 4 4-1=3 5-1=4 5-1=4 5-1=4 3-1=2 5-1=4 5-1=4 5-2=3 3-1=2 5-2=3 5 5-1=4 5-1=4 5-1=4 5-1=4 4-1=3 5-2=3 5-1=4 5-2=3 5-1=4 5-1=4 6 5-1=4 5-3=2 5-1=4 5-1=4 3-1=2 5-2=3 4-1=3 5-3=2 5-1=4 5-3=2 7 5-1=4 5-3=2 5-1=4 5-3=2 3-1=2 5-1=4 5-1=4 5-1=4 3-1=2 5-1=4 8 4-1=3 5-2=3 5-1=4 5-3=2 2-1=1 5-2=3 5-1=4 5-3=2 5-1=4 5-1=4 9 5-1=4 5-3=2 4-1=3 5-1=4 5-1=4 5-2=3 3-1=2 5-3=2 5-1=4 5-3=2 10 5-1=4 5-2=3 5-1=4 5-2=3 3-1=2 5-3=2 4-1=3 5-1=4 5-1=4 5-3=2
Tabel  9,  menampilkan  hasil  perhitungan  data yang  telah  dikalikan  dengan  faktor  2.5  dan dijumlahkan, dengan rincian lebih lanjut tersedia pada tabel dibawah ini.
Tabel 9. Hasil Perhitungan sesudah redesign
R Question Jumlah Nilai (jumlah x 2, 5 1 31 77,5 2 33 82,5 3 35 87,5 4 33 82,5 5 37 92,5 6 30 75 7 32 80 8 30 75 9 30 75 10 31 77,5 Total 805 Skor Rata-Rata 80,5
Gambar  13  menunjukkan  hasil  akhir  penilaian SUS yang berdasarkan rataan keseluruhan pertanyaan. Hasil  dari  skor  yang  diperoleh  bergantung  pada  nilai yang didapat dari jawaban responden  di google form , yang dapat dilihat pada Gambar 13.
Gambar 13. Penilaian akhir SUS sesudah redesign

## 4.6. Pembahasan
Gambar  13  menunjukkan  keberhasilan  analisis desain dengan pendekatan Design Thinking . Redesign
pada tahap uji coba meningkatkan tingkat pengalaman pengguna dengan nilai Acceptable Good (Baik).
Gambar 14. Hasil sebelum dan sesudah redesign

## 5. KESIMPULAN DAN SARAN
Penelitian  ini  menghasilkan  desain  prototype yang  berasal dari analisis UI/UX pada Website SMK Negeri  1  Cikampek,  diterapkan  melalui  pendekatan Design  Thinking menggunakan  Figma.  Terdapat sembilan  rekomendasi  solusi  untuk  memperbaiki desain  dan  menambah  fitur  yang  disesuaikan  dengan kebutuhan pengguna, serta diuji menggunakan metode System Usability Scale (SUS). Hasil dari rekomendasi perbaikan  desain Website SMK  Negeri  1  Cikampek dengan  pendekatan Design  Thinking menunjukkan peningkatan  rata-rata,  yaitu  dari  31  ke  80,5.  Dengan perbaikan  ini,  grafik  skala  awal  yang  berada  pada kategori Not  Acceptable  Poor (rendah)  telah meningkat menjadi Acceptable Good (baik). Harapannya,  penelitian  selanjutnya  terkait  analisis UI/UX pada website SMK Negeri 1  Cikampek  dapat mengoptimalkan  tahap  pengumpulan  data  terkait kebutuhan  dan  masalah  pengguna.  Peningkatan jumlah  responden  pengujian  serta  pengujian  dengan metode  yang  berbeda  diharapkan  dapat  memberikan perbandingan  hasil  antara  metode  lainnya.  Prototype yang dihasilkan dalam penelitian ini diharapkan dapat menjadi  salah  satu  solusi  desain  untuk  mengatasi permasalahan  yang  ada  pada Website SMK  Negeri  1 Cikampek.

## DAFTAR PUSTAKA
[1]  M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan  Ui/Ux  Aplikasi  My  Cic  Layanan Informasi  Akademik  Mahasiswa  Menggunakan
Aplikasi
Figma,”
2020. doi:
10.51920/jd.v10i2.171.
[2]  M.  R.  P.  Ja’far,  Ahmad  Zaky  Nadimsyah, “Pengemabangan  UI  /  UX  Pada  Aplikasi Usahaqqu  Dengan  Metode  Design  Thinking,” MDP Student Conf. 2022 , no. 2021, pp. 392–397, 2022.
[3]  M. F. Widiyantoro, N. Heryana, A. Voutama, and N. Sulistiyowati, “Perancangan UI / UX Aplikasi
Toko  Kue  Dengan  Metode  Design  Thinking,” Inf.  Manag. Educ.  Prof.   J.  Inf.  Manag. ,  vol.  7, no. 1, p. 1, 2022, doi: 10.51211/imbi.v7i1.1949.
[4]  D.  Haryuda  Putra,  M.  Asfi,  and  R.  Fahrudin, “PERANCANGAN  UI/UX  MENGGUNAKAN METODE  DESIGN  THINKING  BERBASIS WEB PADA LAPORTEA COMPANY,” 2021.
[5]  A.  A.  Razi,  I.  R.  Mutiaz,  and  P.  Setiawan, “Penerapan  Metode  Design  Thinking  Pada Model Perancangan Ui/Ux Aplikasi Penanganan Laporan  Kehilangan  Dan  Temuan  Barang Tercecer,” Desain  Komun.  Vis.  Manaj.  Desain dan Periklanan , vol. 3, no. 02, p. 219, 2018, doi: 10.25124/demandia.v3i02.1549.
[6]  F.  R.  Isadora,  B.  T.  Hanggara,  and  Y.  T. Mursityo,  “Perancangan  User  Experience  Pada Aplikasi Mobile HomeCare Rumah Sakit Semen Gresik Menggunakan Metode Design Thinking,” J. Teknol. Inf. dan Ilmu Komput. , vol. 8, no. 5, pp. 1057–1066, 2021, doi: 10.25126/jtiik.2021844550.
[7]  K.  Angelina,  E.  Sutomo,  and  V.  Nurcahyawati, “Desain  UI  UX  Aplikasi  Penjualan  dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking,” Temat.  J. Teknol.
Inf.  Komun. ,  vol.  9,  no.  x,  pp.  70–78,  2022, [Online]. Available: https://doi.org/10.38204/tematik.v9i1.915
[8]  T.  Aulia,  A.  #1,  D.  Permata,  S.  #2,  and  R. Andrian,  “Perancangan  User  Interface  Mobile App  untuk  Kumpulan  Start-Up  Coffee  Shop  di Wilayah Jakarta Timur sebagai Wadah Pemasaran  Produk  dengan  Metode  Design Thinking,”  vol.  11,  no.  1,  2023,  doi: 10.26418/justin.v11i1.54947.
[9]  C. Pratama and  W. Henisa, “PERANCANGAN WEBSITE PROTOTYPE PADA UMKM EKSPOR  CV.  RISMAN  WIJAYA  KERAMIK BERDASARKAN
ANALISIS
UI/UX
DENGAN METODE DESIGN THINKING,” J. Multidisiplin  Indones. ,  vol.  2,  no.  2,  2023,  doi: 10.58344/jmi.v2i2.178.
[10]  S. Suryaningsih, Y. Riandika, A. Hasanah, and S. Anggraito, “Aplikasi  Wakaf Indonesia Berbasis Blockchain,” Edumatic J. Pendidik. Inform. , vol. 4, no. 2, pp. 20–29, 2020, doi: 10.29408/edumatic.v4i2.2402.
[11]  M. L. Lazuardi and I. Sukoco, “Design Thinking David  Kelley  &  Tim  Brown:  Otak  Dibalik Penciptaan  Aplikasi  Gojek,” Organum  J. Saintifik Manaj. dan Akunt. , vol. 2, no. 1, pp. 1– 11, 2019, doi: 10.35138/organum.v2i1.51.
[12]  E. D. Wahyuni, W. A. Kusuma, H. R. Abdillah, and  H.  Y.  Sari,  “Perspektif  Awam  Dalam Implementasi Elisitasi Kebutuhan Menggunakan User  Persona,” Sistemasi ,  vol.  9,  no.  3,  p.  468, 2020, doi: 10.32520/stmsi.v9i3.854.
[13]  A. M. Nur Fauzi, A. Triayudi, and I. D. Sholihati, “Mengukur  Tingkat  Kepuasan  Pengguna Aplikasi Kearsipan Menggunakan System
Usability  Scale  Dan  Pieces  Framework,” JIPI
(Jurnal Ilm. Penelit. dan Pembelajaran Inform. , vol.  7,  no.  1,  pp.  231–239,  2022,  doi: 10.29100/jipi.v7i1.2452.
[14]  N.  Luh  Putri  Ari  Wedayanti,  N.  Kadek  Ayu Wirdiani, and I. Ketut Adi Purnawan, “Evaluasi Aspek Usability pada Aplikasi Simalu
Menggunakan Metode Usability Testing,” J. Ilm. Merpati  (Menara  Penelit.  Akad.  Teknol. Informasi) ,  vol.  7,  no.  2,  p.  113,  2019,  doi:
10.24843/jim.2019.v07.i02.p03.