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

## RANCANGAN
ULANG

## UI/UX
WEBSITE SISTEM INFORMSI KELAUTAN MENGGUNAKAN

## PENDEKATAN DESIGN THINKING
Angga Fadzar 1* , Muhammad Azkal Azkiya 2 , Nur Annisa Vian Husaine 3 , Annisa Nur Fadillah 4 1,2,3,4, Marine Information System, Universitas Pendidikan Indonesia, Bandung, Jawa Barat 40154
Received: 23 Juni 2024 Accepted: 31 Juli 2024 Published: 7 Agustus 2024

## Keywords:
System Usability Scale ; Website; UI/UX .
Corespondent Email: anggafadzar21@upi.edu
Abstrak. Kehadiran teknologi pada zaman sekarang dapat menjadi informasi yang  mudah  diakses  melalui  internet,  seperti website Sistem  Informasi Kelautan  (SIK). Website SIK  merupakan  sebuah  media  yang  berisi  tentang informasi  mengenai  program  studi  SIK.  Namun,  pada  implementasinya website ini  memiliki  permasalahan  pada  desain  halamannya,  seperti  tidak eye-catching .  Selain  itu,  penggunaan  ukuran  teks  membuat  pengguna  sulit membaca.  Untuk  mengatasi  permasalahan  tersebut,  peneliti  menggunakan pendekatan design  thinking.  Design  thinking merupakan  pengintegrasian seluruh  ide  dari  banyak  pikiran  sehingga  dapat  menciptakan  sebuah  solusi. Penelitian  ini  bertujuan  untuk redesign  website SIK  menggunakan pendekatan design  thinking dan  mengujinya  dengan system  usability  scale. Hasil  penelitian  menunjukkan  bahwa website SIK  berhasil  didesain  ulang dengan  total  rata-rata  skor  SUS  91,25  dengan  nilai  skala  “A”  dan “ Acceptable ”.  Hasil  ini  diharapkan  dapat  memberikan  pengguna website kenyamanan dan kemudahan dalam mencari informasi di website SIK.
Abstract. The  presence  of  technology  today  can  make  information  easily accessible  via  the  internet,  such  as  the  Marine  Information  System  (GIS) website.  The  SIK  website  is  a  medium  that  contains  information  about  the SIK  study  program.  However,  in  its  implementation,  this  website  has problems with the page design, such as not being eye-catching. In addition, applying  a  pre-selected  text  size  makes  it  difficult  for  users  to  read.  To overcome  this  problem,  researchers  used  a  design  thinking  approache. Design  thinking  is  the  integration  of  all  ideas  from  many  minds  so  that  a solution  can  be  created.  This  research  aims  to  redesign  the  SIK  website using a design thinking approach and testing it with a usability scale system. The research results show that the SIK website was successfully redesigned with  a  total  average  SUS  score  of  91.25  with  scale  values  of  "A"  and "Acceptable".  It  is  hoped  that  these  output  will  provide  website  users  with comfort and convenience in searching for information on the SIK website.

## 1. PENDAHULUAN
Kehadiran  teknologi  pada  zaman  sekarang memiliki  perkembangan  yang  sangat  cepat setiap  hari.  Semua  orang  seharusnya  tidak terkejut  dengan  majunya  teknologi  karena kemajuan teknologi ini memiliki faktor utama.
Eksistensi  pengguna  teknologi  selalu  dapat ditemukan pada kehidupan sehari-hari, contohnya untuk mendapatkan dan memberikan informasi [1]. Selain itu, pemakaian  teknologi  informasi  khususnya media  daring  sudah  menjadi  bagian  pokok
dalam elemen masyarakat. Pemberian informasi  dapat  dicari  secara  mudah  dengan membuka suatu media internet, seperti website
[2].  Salah  satu  contoh  penerapan  teknologi informasi  melalui  media  internet  adalah website program  studi  Sistem  Informasi Kelautan (SIK).
Website SIK merupakan sebuah media yang menyediakan  sejumlah  informasi  mengenai suatu jurusan di kampus Universitas Pendidikan  Indonesia  yang  berkawasan  di Serang  yaitu  Sistem  Informasi  Kelautan. Informasi  pada website ini  terdiri  dari  profil program  studi  Sistem  Informasi  Kelautan, seperti  sejarah,  visi  misi,  akreditas,  struktur organisasi,  dan  dosen.  Selain  itu, website ini juga  berisi  informasi  tentang  hal  akademik, fasilitas, kemahasiswaan, hingga berita tentang perkuliahan.  Selanjutnya,  pada website SIK terdapat  gambar  pendukung  pada  setiap informasinya. Penggunaan gambar pada website sangat  krusial  karena  dengan  gambar pendukung  dapat  memberikan  pemahaman yang mudah untuk pengguna [3]. Namun, pada pengimplementasiannya,  eksistensi website SIK  memiliki  beberapa  permasalahan,  salah satu  di  antaranya website SIK  tidak eye- catching .
Permasalahan  dalam  implementasi website SIK memiliki dinamika, seperti tampilan yang kurang eye-catching dan  informasi  tambahan yang  kurang  lengkap.  Pada  dasarnya, website program  studi  SIK  yang  dapat  diakses  oleh khalayak  umum,  termasuk  non  mahasiswa seharusnya  memiliki  fitur  tambahan  untuk membantu  dalam  memahami  suatu  informasi [4].  Selain  itu,  ada  juga  penggunaan  ukuran teks  yang  membuat  pengguna  sulit  untuk membaca  tulisan  tersebut.  Warna  dari  tulisan pada website dapat  mempengaruhi  pengguna dalam  membaca.  Warna  tulisan  juga  menjadi komponen  utama  dalam  sebuah website [5].
Konten  dalam website SIK  juga  terisi  kurang menarik  karena  terdapat  pemilihan  diksi  yang kurang tepat.
Masalah-masalah tersebutlah yang mendorong peneliti dalam melakukan penelitian  perancangan  ulang  UI/UX website Sistem  Informasi  Kelautan.  Ini  bertujuan  agar website SIK  memiliki  tampilan  lebih  baik untuk  digunakan  oleh  pengguna.  Tampilan website yang diperbaiki dan diperbaharui dapat menarik  kesan  untuk  pengguna.  Isi  konten
yang  menarik  pada website juga  dapat membuat pengguna nyaman membaca informasi di dalamnya [6]. Peneliti mengimplementasikan pendekatan design thinking dalam  merancang  ulang  UI/UX website Sistem Informasi Kelautan.
Beberapa  penelitian  terdahulu  yang  telah menggunakan    pendekatan design  thinking untuk    mendesain  ulang website .  Penelitian yang  mengaplikasikan  pendekatan design thinking salah  satunya  dari  seorang  peneliti yaitu Fiqriansyah dan Suranto (2023) mengolah    antarmuka user serta  pengalaman user pada website Besurek Coffee menggunakan  pendekatan design  thinking . Penelitian  tersebut  menghasilkan  sebuah  nilai yang  didasarkan  dari System  Usability  Scale dengan  rata-rata  skor  84.  Artinya,  penelitian tersebut dapat dikatakan diterima atau acceptable dan nilai skala berada di Tingkat B. Hal tersebut dapat diterima dan digunakan oleh pengguna  karena  telah  memenuhi  persyaratan [7].
Penelitian  lain  yang  menggunakan  metode design  thinking dalam  mendesain  ulang aplikasi  yaitu  penelitian  yang  dilakukan  oleh Novita  dan  kawan-kawan  (2024),  mengolah perancangan  UI/UX  dengan  mengaplikasikan pendekatan design  thinking di  dalam  aplikasi jasa  penyewaan  motor  (SAREMO).  Penelitian tersebut memakai skala likert untuk pengujiannya.  Pada  penelitian  itu,  dihasilkan nilai  akhir  sebesar  71,625  dengan  kata  lain memiliki hasil “ Acceptable ”. Namun, kekurangan dari penelitian ini pada pembahasan define yang  tidak  menunjukkan penjelasan gambar [8].
Penelitian  terakhir  yang  didapat  melalui penelitian  Zidhan  dan  kawan-kawan  (2024) merancang  UI/UX  pada  aplikasi  sayur  mayur online  (SAMARON)  menggunakan  metode design  thinking .  Pada  penelitian  ini,  Zidhan menggunakan  aplikasi  Figma  untuk  tahapan prototype .  Hasil  dari  penelitian  ini  diuji menggunakan system  usability  testing dan didapatkan  skor  76,25.  Ini  merupakan  nilai yang  tergolong  “ Acceptable ”.  Digunakannya teknik design  thinking dan  dilakukannya  uji coba system  usability  scale disimpulkan  dapat membantu  proses  dari  mendesain  ulang  suatu aplikasi atau website [9].
Penelitian  ini  bertujuan  untuk redesign website SIK  menggunakan  pendekatan design
thinking dan  mengujinya  dengan system usability scale. Penelitian ini diharapkan dapat menghasilkan  suatu website Sistem  Informasi Kelautan  menjadi  lebih  baik  lagi.  Selain  itu, hasil  dari redesign dapat  membuat  pengguna website menjadi  lebih  nyaman  saat  membaca informasi di dalamnya.
2. TINJAUAN PUSTAKA
2.1. User Interface
UI atau  singkatan  dari User  Interface bisa disebut  ketika  sistem  dan user saling  berkerja sama  dengan  perintah  dalam  memakai  konten serta  pemasukan  data  [10]. Web atau  aplikasi bidang  ilmu  mengenai  komposisi  geografis merupakan  pengertian  dari User  Interface (UI).  Seluruh  atribut  yang  berkolaborasi dengan user,  text  entry  fields ,  gambar,  tulisan atau teks, pengguna yang diklik dengan tombol disebut  cakupan  UI.  Tidak  hanya  itu,  untuk layout ,  transisi,  juga  animasi,  serta  seluruh kegiatan  kecil  juga  termasuk.  Seluruh  elemen visual  yang  didesain  oleh  UI  terlihat  dari bagaimana user mengakses halaman web serta ditampakkan di halaman web [11].

## 2.2. User Experience
User  Experience (UX)  dikatakan  juga sebagai experience yang  dikaitkan  bersama tindakan,  perspektif,  watak  emosi,  juga  pola pikir  pengguna  saat  mengaplikasikan  sistem [12].  UX  sangat  vital  karena  sebuah  aplikasi atau website yang dirancang harus menampilkan  kualitas  dan  keefektifan.  Saat sebuah tampilan terlihat kurang baik, maka itu akan berdampak pada pengguna yang menggunakan  aplikasi  atau website tersebut [13].

## 2.3. Figma
Figma  merupakan software yang  dapat dengan  mudah menjembatani  pengguna  dalam merancang  desain  kreatif prototype  website atau  aplikasi  secara online [14].  Peneliti melakukan  pendesainan  atau  perancangan tampilan redesign  website menggunakan Figma. Peneliti dapat dengan mudah melakukan redesign menggunakan aplikasi ini.

## 2.4. Design Thinking
Design  thinking merupakan  suatu  proses gabungan  dengan  mengumpulkan  seluruh  ide dari banyak pikiran agar menghasilkan sebuah
solusi.  Metode  ini  menawarkan  suatu  solusi dalam  menyelesaikan  suatu  permasalahan. Design  thinking memilki  lima  proses,  seperti empathize,  define,  ideate,  prototype, dan test [15].
2.4.1. Empathize
Empathize merupakan  proses  yang  sangat bermanfaat  supaya  mengetahui  keinginan pengguna.  Tahapan  ini  difokuskan  untuk memahami  perasaan  pengguna.  Perasaan pengguna itu didapatkan dengan cara observasi,  seperti  wawancara  atau  kuesioner. Ini  bertujuan  untuk  mengumpulkan  keinginan pengguna [16].

## 2.4.2. Define
Define merupakan tahap pendefinisian yang bertujuan  untuk  mendefinisikan  dengan  cara menganalisis  permasalahan  yang  terjadi,  lalu mendefinisikan  konsep  dasar  pemecahan masalah  yang  dapat  dipilih  [17].  Pada  tahap ini,  peneliti  mengajak  beberapa  responden untuk  menganalisis  hal  apa  saja  yang  menjadi permasalahan  dari website SIK,  lalu  mencari solusi dasar dari masalah tersebut, solsui inilah yang mendasari penggambaran ide. Pada tahap ini juga  dilakukan  pendataan  daftar  kebutuhan pengguna.

## 2.4.3. Ideate
Ideate merupakan  pengembangan  dari define. Pada tahap ini peneliti mulai merepresentasikan penyelesaian, lalu mengevaluasi  bersama  tim,  lebih  lanjut mencampurkan ide kreativitas tim perancangan desain.  Pada  tahap  ini  mulai  terbentuk kerangka  dari  solusi  permasalahan  tersebut [18].

## 2.4.4. Prototype
Setelah solusi menjadi kerangka, selanjutnya dibuat prototype pembuatan desain website UI/UX yang dapat menjawab permasalahan yang terjadi. Prototype merupakan  implementasi  ide  yang  sudah dirancang menjadi sebuah bentuk yang terlihat [19].  Pada  tahap  ini  dilakukan  pembuatan desain yang akan diimplementasikan.

## 2.4.5. Test
Test merupakan  pengujian  dari  solusi terkait  permasalahan  yang  terjadi  [20].  Pada tahap  ini  dilakukan  pengujian  terhadap  desain
website. Peneliti melibatkan banyak responden untuk menilai, apakah masalah yang responden alami,  sudah  teratasi  dan  apakah prototype yang  peneliti  buat  sudah  memiliki  tingkat penggunaan yang lebih baik.

## 2.5. System Usability Scale
SUS  atau  disebut  juga System  Usability Scale merupakan  cara  pengujian  terhadap aplikasi atau website, dengan cara memberikan pertanyaan  yang  memiliki  pilihan  mudah kepada pengguna terkait pengalaman pengguna  dalam  berinetarksi  dengan  aplikasi atau website tertentu  [21].  Pada  tahun  1986 John  Brooke  memperkenalkan  cara  ini,  cara yang bisa dipakai guna melaksanakan beberapa macam  penilaian  produk  salah  satunya perangkat website juga aplikasi [22]

## 3. METODE PENELITIAN
Tahapan ini akan memaparkan dengan rinci dari  setiap  proses  penelitian  yang  dilakukan, yang  diawali  dari  analisis  masalah,  studi literatur, penerapan design thinking , pengujian system usability scale (SUS), hingga kesimpulan.  Pada  gambar  1  ditunjukkan tahapan penelitian yang digunakan.
Gambar 1. Alur Metode Penelitian
Peneliti  akan  memaparkan  proses-proses pada  gambar  1  secara  jelas  dari  metode penelitian yang akan dilakukan, antara lain:

## 3.1. Analisis Permasalahan
Tahap ini dilakukan penganalisisan masalah yang  terdapat  pada website Sistem  Informasi Kelautan  melalui  pertanyaan-pertanyaan  yang diajukan  melalui  kuesioner  kepada  mahasiswa program  studi  Sistem  Informasi  Kelautan. Pemberian  kuesioner  sangat  berguna  untuk menemukan  masalah  dan  kebutuhan  dari website Sistem  Informasi  Kelautan  [23].  Hasil dari kuesioner itu akan disimpulkan permasalahan  utama  dan  kebutuhan  apa  saja untuk pengguna website tersebut.

## 3.2. Studi Literatur
Penelitian  ini  mengimplementasikan  studi literatur  dengan  membaca  semua  hal  yang berkaitan  dengan  penelitian  rancang  ulang design  website menggunakan  metode design thinking . Peneliti memutuskan untuk memakai pendekatan design  thinking sebagai  metode merancang  ulang website Sistem  Informasi Kelautan  setelah  membaca  semua  teori mengenai metode tersebut. Peneliti mengobservasi  melalui  bacaan  dari  hal  yang terkait  mengenai  pengujian  menggunakan system  usability  scale .  Pengimplementasian design  thinking beserta  uji  coba system usability scale dapat membantu mengumpulkan  permasalahan  dan  kebutuhan serta  menjadi  solusi  bagi  pengguna  dalam melakukan  rancang  ulang  desain website Sistem Informasi Kelautan [24].

## 3.3. Design Thinking
Peneliti  memilih  metode design  thinking sebagai  proses  membantu  desain  ulang website .  Alasan  pemilihan  metode  ini  karena penyelesaian  dari  suatu  masalah  dilakukan dengan  mendekatkan  kepada  pengguna  [25]. Ini  sangat  membantu  peneliti  dalam  membuat solusi untuk permasalahan dan kebutuhan yang diuraikan  oleh  pengguna  [26].  Proses  ini memiliki 5 tahapan rincinya, sebagai berikut:
Gambar 2. Design Thinking
3.3.1. Empathize Proses ini diimplementasikan guna menganalisis  kebutuhan peneliti  pada  suatu permasalahan website Sistem Informasi Kelautan  dapat  diketahui  dari  pengguna.  Ini dilakukan dengan pemberian kuesioner kepada mahasiswa  program  studi  Sistem  Informasi Kelautan  untuk  menguraikan  permasalahan yang  ada  pada website serta  kebutuhan  yang seharusnya ada pada website tersebut. Pemberian  kuesioner  ini  akan  membuat  data menjadi terpercaya [27].

## 3.3.2. Define
Proses  yang  kedua  ini  memiliki  tujuan untuk  menyimpulkan  permasalahan  dari  data yang diperoleh melalui tahap pertama, empathize .  Peneliti  akan  melakukan  analisis secara spesifik dengan data sebelumnya. Hasil dari  pengerucutan  masalah  dan  kebutuhan pengguna  akan  memudahkan  peneliti  untuk memberikan solusi [28].

## 3.3.3. Ideate
Proses ideate memiliki  fungsi  untuk membuat penyelesaian dari uraian masalah dan kebutuhan  yang  sudah  dipaparkan  oleh pengguna website .  Uraian  itu  dikembangkan menjadi  sebuah  ide  yang  berpeluang  menjadi solusi [29].

## 3.3.4. Prototype
Pada prototype ,  peneliti  mempraktikkan semua ide yang hadir dari tahap ideate menjadi kenyataan.  langkah  ini  akan  ditampilkan desain website sebelum  diubah  dan  setelah diubah. Desain yang baru akan dibuat tampilan yang lebih baik daripada sebelum diubah [30].

## 3.3.5. Test
Berdasarkan langkah testing , peneliti mengimplementasikan
uji
coba dengan memberikan kuesioner kembali kepada pengguna,  terutama  mahasiswa  program  studi
Sistem Informasi Kelautan. Kuesioner itu akan menampilkan tampilan desain yang baru untuk dinilai oleh mereka [31].

## 3.4. System Usability Scale
Penilaian  dari  uji  desain  baru  kepada pengguna menggunakan metode system usability  scale .  Peneliti  akan  memberikan pertanyaan  dengan  5  nilai  yang  berbeda kepada  mahasiswa  yang  mengisi  kuesioner. Uji  coba system  usability  scale menjadi penilaian yang nyaman untuk digunakan [32].
4. HASIL DAN PEMBAHASAN
4.1. Design Thinking
Gambar 3. Empathy Map
Proses empathize dilakukan untuk mengidentifikasi  tampilan website https://sik- kdserang.upi.edu/ agar ramah pengguna. Peneliti  mencari  responden  untuk  mengisi suatu  kuesioner.  Peneliti  berharap  dengan dilakukannya  kuesioner  akan  mendapatkan rumusan  masalah  lebih  lanjut  yang  akan diproses nanti.

## 4.2. Define
Gambar 4. Affinity Diagram
Pada define diterapkan agar bisa ditentukan masalah  serta  keinginan user dari  pembuatan tabel  keinginan user yang  telah  dimiliki  pada tahap empathize .

## 4.3. Ideate
Ketika  semua  masalah  dan  keinginan pengguna  didapatkan,  pada  tahap ideate peneliti akan mengimplementasikan pengidentifikasian  masalah  dari  tabel affinity diagram .  Ini  berfungsi  agar  semua  ide dihasilkan dan mendapatkan suatu
penyelesaian  masalah  dan  akan  memandu peneliti dalam membuat desain ulang.
Masalah Solusi Prioritas Teks pada navigasi website sulit dibaca. Gunakan font yang lebih  besar  dan mudah dibaca untuk  teks  pada navigasi website . Tinggi Konten website terlalu  padat dan sulit dipahami. Bagi konten website menjadi beberapa bagian yang  lebih  kecil dan mudah dibaca. Gunakan heading dan subheading untuk memperjelas struktur konten. Tinggi Beberapa kalimat  pada website terlalu panjang  dan berbelit-belit. Buat  kalimat  pada website yang lebih singkat dan jelas. Sedang Website ini menggunakan terlalu banyak istilah teknis. Berikan penjelasan yang mudah dipahami untuk setiap istilah teknis yang digunakan pada website. Sedang Tabel 1. Ideate

## 4.4. Prototyping
Setelah  menyelesaikan  tahap  ideate  untuk mengidentifikasi  solusi  atas  masalah  dan kebutuhan  pengguna,  langkah  selanjutnya adalah prototyping .  Pada  tahap  ini,  peneliti
menggunakan plugin html.to.design pada aplikasi  Figma  untuk  mempermudah  proses merancang ulang website. Plugin ini memungkinkan  peneliti  untuk  memasukkan URL website SIK  UPI  Serang  dan  secara otomatis  menghasilkan  desain  website  di Figma.  Pendekatan  ini  menawarkan  beberapa keuntungan:
• Efisiensi: Menghemat  waktu  dan  tenaga dalam proses desain ulang website.
• Ketepatan: Memastikan  desain  ulang website  tetap  konsisten  dengan  struktur dan konten website yang ada.
• Kolaborasi: Memudahkan kolaborasi antar  desainer  dan  pemangku  kepentingan dalam proses pengembangan website.
Gambar 5. Beranda Header Sebelum Redesign
Pada  bagian  beranda  dari website SIK sebelumnya,  terdapat  beberapa  hal  yang kurang,  seperti  pada  bagian  yang  paling  atas kurang  jelas  penulisan  dan  latar  belakang gambarnya.
Gambar 6. Beranda Profil Sebelum Redesign Pada bagian ini terdapat ketidakkonsistenan, yaitu penggambaran profil digabung dengan bagian tautan cepat. Gambar 7. Beranda PMB Sebelum Redesign
Pada gambar beranda penerimaan mahasiswa  baru  memiliki  kekurangan,  yaitu antara gambar dan penjelasan terlalu dekat.

## Gambar 8. Beranda Berita Sebelum Redesign
Pada  bagian  ini,  penulisan  berita  terkini seharusnya  berada  di  tengah.  Selain  itu, terdapat  fitur  ikon  geser  kanan  –  kiri  untuk menggeser berita.
Gambar 9. Beranda Akademik Sebelum

## Redesign
Pada  bagian  beranda  akademik,  tampilan terlihat kurang lengkap. Lebih baik, ditambahkan  bagian  tautan  cepat  pada  bagian ini.
Gambar 6. Beranda Statistik & Testimoni Sebelum Redesign
Pada  bagian  statistik  ukuran font terlihat kecil.  Begitu  juga  denga  bagian  testimoni mahasiswa.
Gambar 7. Profil Sejarah Sebelum Redesign
Gambar 8. Profil Visi Misi Sebelum Redesign
Gambar 9. Profil Akreditasi Sebelum Redesign
Pada  gambar  7,  8,  dan  9  dari website SIK sebelum redesign , tampilannya terpisah. Seharusnya,  ketiga  tampilan  ini  dijadikan dalam satu halaman.
Peneliti  membuat  solusi  untuk  mengatasi semua permasalahan di atas. Berikut penawaran solusi dari peneliti untuk menyelesaikan permasalahan di atas:
Gambar 10. Beranda Header Setelah Redesign
Pada  bagian  ini,  tulisan  pada Header menjadi  lebih  jelas.  Latar  belakang  gambar juga terlihat lebih jelas.
Gambar 11. Beranda Profil Setelah Redesign Pada bagian ini sudah berikan penyelesaian, yaitu membuat tampilan menjadi khusus untuk pengenalan profil website SIK dan memindahkan tampilan tautan cepat ke bagian akademik. Gambar 12. Beranda PMB Setelah Redesign Pada tampilan beranda Penerimaan
Mahasiswa  Baru  setelah  didesain  ulang  ini, antara  gambar  dan  penjelasan  sudah  diberi jarak.
Gambar 13. Beranda Berita Setelah Redesign
Pada judul berita terkini sudah dipindahkan menjadi  di  tengah,  serta  sudah  diberikan  fitur ikon  geser  kanan  -  kiri  agar  lebih  terlihat interaktif.
Gambar 14. Beranda Akademik Setelah Redesign
Pada  tampilan  akademik  ini  ditambahkan tampilan tautan cepat lainnya.
Gambar 15. Beranda Statistik & Testimoni Setelah Redesign
Pada  tampilan  ini,  ukuran font sudah  lebih diperjelas.  Penggunaan  istilah  yang  sulit dimengerti  dihilangkan  agar  pengguna  mudah memahami.
Gambar 16. Profil Setelah Redesign 1
Gambar 17. Profil Setelah Redesign 2
Pada  tampilan  profil  sebelum  di  desain ulang  belum  digabungkan.  Setelah  di  desain ulang,  tampilan  profil  digabungkan  menjadi satu  tampilan.  Ini  membuat  pengguna  mudah untuk  mendapatkan  informasi  sekaligus  dari tampilan profil tersebut tanpa harus berpindah- pindah halaman.

## 4.5. Test
Pada tahapan test ini, peneliti mengimplementasikan pengujian terhadap hasil  desain  ulang website Sistem  Informasi Kelautan.  Pengujian  ini  dilakukan  pada  para responden  yang  sebelumnya  sudah  mengisi kuesioner  pada  tahap empathize .  Ini  bertujuan untuk  memberikan  evaluasi  pada  hasil  desain ulang  yang  telah  dibuat.  Hasil  penilaian tersebut akan menentukan penelitian berikutnya.  Ada  10  responden  menyampaikan bahwa  tampilan  baru website SIK  menjadi lebih  menarik.  Semua  ikon  dan  tombol  yang
ada  di website sangat  mudah  dimengerti. Sehingga,  dapat  disimpulkan  perancangan desain  ulang  pada website SIK  berhasil diselesaikan.    Pengujian  ini  didukung  dengan metode pengujian system usability scale [33].
4.5.1. Hasil System Usability Scale
(SUS)
Langkah  pengujian system  usability  scale , peneliti  menggunakan  Google  Form  untuk membuat kuesioner untuk diberikan kepada 10 responden. Responden diminta untuk memberikan  pilihan,  jika  tidak  sesuai  maka memilih    “Sangat  Tidak  Setuju”  sedangkan jika responden merasa sesuai, maka pilihannya “Sangat  Setuju”  dengan  nilai  1–5.  Total  dari pertanyaan yang diberikan adalah 10 pertanyaan  yang  harus  dijawab  [33].  Berikut merupakan daftar pertanyaan yang diberikan:
No. Pertanyaan
1. Saya  merasa  akan  memakai  sistem saat ini.
2. Saya pikir sistem ini sulit dipakai.
3. Saya pikir sistem ini mudah dipakai.
4. Saya  harus  dibantu  seseorang  untuk memakai sistem ini.
5. Saya rasa semua fitur berfungsi.
6. Saya  rasa  banyak  hal  tidak  konsisten dalam sistem ini.
7. Saya  pikir  seseorang  akan  mudah memahami secara cepat sistem ini.
8. Saya  pikir  sistem  ini  sangat  bingung dipahami.
9. Saya  pikir  tidak  terhambar  dalam menggunakan sistem ini.
10.  Saya harus adaptasi
dalam
menggunakan sistem ini.
Tabel 2. Pertanyaan SUS
Peneliti memberikan 10 responden pertanyaan  yang  harus  dijawab.  Jawaban  dari pertanyaan responden memiliki rumus penghitungannya. Skala likert memiliki perhitungan  berbeda  pada  soal  ganjil  dan genap. Pada soal ganjil, skor akan dihitung X- 1.  Pada  soal  genap  dihitung  dari  5-X.  Setelah itu,  total  skor  responden  akan  dikalikan  2,5. Lalu,  untuk  mendapatkan  hasil  rata-ratanya akan  ditambahkan  semua  dan  dibagi  10  [34]. Berikut  data  dari  pengujian system  usability scale .
R Skor Responden SUS Q 1 Q 2 Q 3 Q 4 Q 5 Q 6 Q 7 Q 8 Q 9 Q 1 0 R1 5  1  5  1  5  1  5  1  5  1 100 R2 5  2  5  2  5  2  5  2  5  2 80 R3 5 3 5 3 5 1 5 3 5 1 80 R4 5 1 5 1 4 1 4 1 5 2 92,5 R5 5 1 5 1 5 2 4 1 5 2 92,5 R6 4 1 5 1 5 2 5 1 5 2 92,5 R7 5 1 5 1 5 1 5 1 5 1 100 R8 4 1 4 1 5 1 5 3 5 1 90 R9 4 1 4 1 5 2 5 1 5 1 92,5 R1 0 5 2 5 2 4 1 5 1 5 1 92,5 Total SUS 912,5
Tabel 3. Total Nilai SUS
Berikut  merupakan  penghitungan  untuk mencari  rata-rata  dari  total  SUS  yang  didapat menggunakan rumus sebagai berikut:
∑ 𝑥 𝑥 = 𝑛 912,5 𝑥 = 10 𝑥 = 91,25
x = rata-rata nilai SUS ∑x = total nilai semua SUS
n = jumlah responden
Gambar 18. Parameter SUS
Penelitian  ini  membuahkan  hasil  berupa, perancangan  desain  ulang website Sistem Informasi  Kelautan  berhasil  dilakukan  dengan nilai skala “A” serta “ Acceptable ”.
Berdasarkan parameter Adjetive Ratings mendapatkan  “ Best Rangeable ”.  Peneliti menyimpulkan dari hasil-hasil tersebut
redesign UI/UX website SIK  sudah  mencapai tujuan untuk kebutuhan pengguna.

## 5. KESIMPULAN
Penelitian  yang  telah  direalisasikan  dari redesign UI/UX website Sistem  Informasi
Kelautan didapatkan penarikan hasil kesimpulan berupa:
a. Hasil dari prototype website SIK memakai design  thinking sebagai  pendekatan,  serta memberikan  hasil redesign UI/UX  pada beberapa fitur, yaitu profil dan beranda.
b. Hasil  penelitian  menunjukkan  bahwa website SIK  berhasil  didesain  ulang dengan  total  rata-rata  skor  SUS  91,25 dengan  nilai  skala  “A”  dan “ Acceptable ”.
Berdasarkan  parameter Adjetive  Ratings mendapatkan “ Best Rangeable ”.

## UCAPAN TERIMA KASIH
Peneliti  menghaturkan  syukur  kepada peneliti  terdahulu  karena  sudah  memberikan informasi  mengenai  perancangan  UI/UX dengan menerapkan pendekatan design thinking dan system  usability  scale (SUS). Peneliti tak lupa ucap terima kasih pada dosen pembimbing  sekaligus  yang  mengampu  mata kuliah  Interaksi  Manusia  Komputer  dan Kerekayasaan Informasi, Bapak Ishak Ariawan.,  S.  Pd,  M.  Kom.  Tidak  ada pendanaan  eksternal  yang  digunakan  untuk penelitian ini.

## DAFTAR PUSTAKA
[1] A. C. Billan, D. Kurniawan, A. Rifai, P. E. Sevtiyuni, and A. Meiriza,
“Perancangan  Prototype  UI  /  UX  Pada
Pelacak Kendaraan Operasional Dengan  Menggunakan  Metode  Design Thinking ( Studi Kasus Penerapan Pada Instansi  BUMN  ),”  vol.  4,  no.  5,  pp. 2596–2606, 2024, doi: 10.30865/klik.v4i5.1843. [2] L.  Safitri,  N.  Dalilah,  and  M. Murtiwiyati, “Perancangan User
Interface Dan User Experience Website Reservasi  Rima  Villa  Ciwidey  Dengan Metode  Design  Thinkings,” J.  Penelit. Teknol.  Inf.  Dan  Sains ,  vol.  2,  no.  2, 2024. [3] Destiarini, “Sistem Informasi
Percetakan  Mandiri  Creative  Berbasis Website Dengan Menggunakan Codeignite,” J.  INTECH ,  vol.  5,  no.  1,
pp. 28–34, 2024.
[4] F. Azzahro, I. Saputra, F. Amsury, and M.  R.  Fahdia,  “Pengabdian  kepada masyarakat dasar dan kegunaan website di  RW013  Cipinang  Melayu  Jakarta Timur,” GENDIS  J.  Pengabdi.  Masy. , vol.  2,  no.  1,  pp.  1–4,  2024,  doi: 10.56724/gendis.v2i1.258.
[5] I.  R.  Shaliha  and  S.  Doriza,  “Persepsi Mahasiswa  Pengguna  Website  Teori
Belajar,” J. Pendidik. dan Pembelajaran ,  vol.  16,  no.  1,  pp.  46– 54, 2024, doi: 10.35457/konstruk.v16i1.2229. [6] M. F. A. K. Safa, M. Z. Adinata, M. M. Putra,  I.  K.  Yusrianto,  and  R.  Alit, “Redesain  Website  Labschool  UNESA dengan Memperhatikan Kebutuhan Pengguna,” J.  Ilmu  Tek. ,  vol.  1,  no.  2, pp. 79–88, 2023.
[7] R. Fiqriansyah and B. Suranto, “Perancangan  Antarmuka  Pengguna Dan Pengalaman Pengguna Pada Website Besurek Coffee Dengan Metode Design Thinking,” EDUSAINTEK  J.  Pendidikan,  Sains dan  Teknol. ,  vol.  11,  no.  2,  pp.  643– 656, 2023, doi: 10.47668/edusaintek.v11i2.1028. [8] Viana  Novita,  S.  E.  R.  Latifa,  Rizky Aditya, Riri Safitri, and Husnul Fauzan, “Perancangan Ui/Ux Pada Aplikasi Jasa Rentak  Motor  (Saremo)  Menggunakan Metode  Design  Thinking,” J.  Inf.  Syst. Manag.  Digit.  Bus. ,  vol.  1,  no.  2,  pp. 123–132, 2024, doi: 10.59407/jismdb.v1i2.348.
[9] M.  Zidhan,  Finanta  Okmayura,  Haana Udtari  Anjani,  Nur  Fadilah  Achmad, and  Febby  Wilyani,  “Perancangan
Ui/Ux  Pada  Aplikasi  Sayur  Mayur Online (Samaron) Menggunakan Metode  Design  Thinking,” J.  Inf.  Syst. Manag.  Digit.  Bus. ,  vol.  1,  no.  2,  pp.
96–106,
2024, doi: 10.59407/jismdb.v1i2.347. [10] F.  E.  Nugroho,  “Perancangan  Sistem Informasi  Penjualan  Online  Studi Kasus  Tokoku,” Simetris    J.  Tek. Mesin,  Elektro  dan  Ilmu  Komput. ,  vol.
7, no. 2, p. 717, 2016, doi:
10.24176/simet.v7i2.786. [11] R.  Wati,  “Perancangan  E-Katalog Berbasis  Web  Pada  RR  Collection Sampit Sebagai Media Branding Menggunakan  Aplikasi  Figma,” J. Comput.  Technol.  Informations  Syst. , vol. 2, no. 1, pp. 8–13, 2022.
[12] H.  Joo,  “A  study  on  understanding  of UI  and  UX,  and  understanding  of design  according  to  user  interface change,” Int. J. Appl. Eng. Res. , vol. 12, no. 20, pp. 9931–9935, 2017.
[13] I.  Zahra  and  A.  Voutama,  “Rancangan User  Persona  Dan  Customer  Journey Map  Sebagai  Representasi  Kebutuhan Pengguna  Media  Sosial  X  Pada  Fitur Pencarian,” J. Mhs. Tek. Inform. , vol. 8, no. 3, pp. 2686–2691, 2024.
[14] R.  Bagus  Bambang  Sumantri,  R. Suryani,  and  R.  Agus  Setiawan, “Pelatihan  Desain  Prototipe  Sistem Informasi  Siswa  SMK  Menggunakan FIGMA,” J.  Pengabdi.  Masy. ,  vol.  2, no. 3, p. 2023, 2023.
[15] I.  A.  Maosul,  “Perancangan  Ui/Ux
Aplikasi Pencarian Pekerjaan Didamel.Id Menggunakan Metode
Design  Thinking,” J.  Inform.  dan  Tek. Elektro  Terap. ,  vol.  12,  no.  2,  2024, doi: 10.23960/jitet.v12i2.4159.
[16] M.  N.  Rafi  Taqiyuddin  and  B. Indryanti,
“Perancangan Aplikasi Laundry  Berbasis  Android  Dengan Menggunakan Metode Design Thinking,” J.  Inform.  dan  Tek.  Elektro
Terap. ,  vol.  12,  no.  2,  2024,  doi: 10.23960/jitet.v12i2.4266.
[17] N.  Vadilla,  “Pengembangan  E-Lkpd
Berbasis  Model  Discovery  Learning Pada Materi Termokimia Untuk
Mengukur  Keterampilan  Sains  Siswa,”
Educenter  J. Ilm. Pendidik. , vol. 1, no.
3, pp. 152–164, 2022, doi:
10.55904/educenter.v1i3.63.
[18] E. Susanti, E. Fatkhiyah, and E. Efendi,
“Pengembangan  Ui/Ux  Pada  Aplikasi
M-Voting Menggunakan Metode Design  Thinking,” Simp.  Nas.  RAPI XVIIII FT UMS , pp. 364–370, 2019.
[19] A.  F.  M.  Candra,  “Penerapan  Metode Design  Thinking  Dalam  Rancang
Prototipe Aplikasi Berbasis Web
Sistem Peminjaman Dokumen Arsip Di Dinas  Komunikasi  Dan  Informatika Provinsi  Jawa  Timur,” Science  (80-.  ). , vol. 7, no. 1, pp. 1–8, 2022.
[20] K.  Hasna,  M.  Defriani,  and  M.  H. Totohendarto,  “KLIK:  Kajian  Ilmiah Informatika  dan  Komputer  Redesign User  Interface  Dan  User  Experience Pada  Website  Eclinic  Menggunakan Metode  Design  Thinking,” Media Online ,  vol.  4,  no.  1,  pp.  84–92,  2023, doi: 10.30865/klik.v4i1.1072.
[21] V.  Y.  P.  Ardhana,  “Analisis  Usability Testing  pada  SITIDES  Menggunakan System  Usability  Scale  dan  PIECES Framework,” Bull.  Informatics  Data Sci. ,  vol.  1,  no.  2,  p.  89,  2022,  doi:
10.61944/bids.v1i2.41.
[22] D. W. Ramadhan, “Pengujian Usability Website Time Excelindo Menggunakan System  Usability  Scale  (SUS)  (Studi Kasus: Website Time Excelindo),” JIPI (Jurnal Ilm. Penelit. dan Pembelajaran Inform. , vol. 4, no. 2, p. 139, 2019, doi: 10.29100/jipi.v4i2.977.
[23] W. S. A. Pratama and A. D. Indriyanti, “Perancangan  Design  UI/UX  E- Commerce TRINITY Berbasis Website Dengan  Pendekatan  Design  Thinking,” J. Emerg. Inf. Syst. Bus. Intell. , vol. 04, no. 01, pp. 50–61, 2023.
[24] M.  F.  Ardiansyah  and  P.  Rosyani, “Perancangan UI/UX Aplikasi Pengolahan Limbah Anorganik Menggunakan Metode Design Thinking,” Log.  J.  Ilmu  Komput.  dan Pendidik. ,  vol.  1,  no.  4,  pp.  839–853, 2023, [Online]. Available: https://journal.mediapublikasi.id/index. php/logic/article/view/2193 [25] H.  N.  Utomo,  M.  Muhtarom,  and  I. Dwijayanti, “Eksplorasi Media
Interaktif  Googles  Site  Dengan  Alur Merdeka Berbasis Design Thinking,” J. Ris. dan Inov. Pembelajaran , vol. 4, no.
1, pp. 42–58, 2024, doi:
10.51574/jrip.v4i1.1262.
[26] I. Roudhotul Rohmah, A. D. D. Saputri, H.  Y.  Ramadhani,  Z.  Aryanta,  and  K. Auliasari,  “Penerapan  Metode  Design Thinking  pada  Pengembangan  Aplikasi Pencarian  Kerja  GETJOB,” Digit. Transform.  Technol. ,  vol.  3,  no.  2,  pp.
735–745, 2023, doi: 10.47709/digitech.v3i2.3280.
[27] I.  A.  Adha,  A.  Voutama,  and  A.  A. Ridha,  “Perancangan  Ui  /  Ux  Aplikasi Ogan  Lopian  Diskominfo  Purwakarta Menggunakan Metode Design
Thinking,” J.  Inf.  Syst.  Informatics Eng. , vol. 7, no. 1, pp. 55–70, 2023.
[28] F.  Salim,  “Perancangan  UI  /  UX Aplikasi Pencari Tempat Gym Berbasis
Mobile  dengan  Menggunakan  Metode Design Thinking Designing UI / UX of a Mobile-Based
Gym
Locator
Application  Using  Design  Thinking
Methodology,” J.  Ilm.  Inform.  dan
Komput. , vol. 1, pp. 1–11, 2024.
[29] A.  Camelia  and  Z.  Nadia,  “Studi Literatur  Tahapan  Pembuatan  Design User  Interface  Aplikasi  Kesehatan
Berdasarkan Metode Design Thinking,”
J.  Desain ,  vol.  11,  no.  1,  pp.  105–115,
2023, [Online]. Available:
https://doi.org/10.30998/jd.v11i1.15711
[30] D.  Haryuda,  M.  Asfi, and  R.  Fahrudin, “Perancangan  UI/UX  Menggunakan Metode Design Thinking Berbasis Web
Pada  Laportea  Company,”
J.  Ilm.
Teknol.  Infomasi  Terap. ,  vol.  8,  no.  1,
pp. 111–117, 2021, doi: 10.33197/jitter.vol8.iss1.2021.730.
[31] M.  Saad,  N.  Ishlah,  N.  S.  R.  I.
Wahyuni, and L.
Karlitasari,
“Perancangan  Antarmuka  Pengguna Aplikasi  Mobile  Sistem  Informasi Akademik  (  SIMAK  )  menggunakan Metode  Design  Thinking  (  Studi Kasus :  SIMAK  Universitas  Pakuan  ) User Interface Design for the Academic Information  System,” J.  Ilmu  Komput. Agri-Informatika ,  vol.  11,  pp.  86–99,
2024.
[32] T.  M.  Saddyah  and  S.  P.  Saragih, “Perancangan  Ui/Ux  Delivery  Mobile App  Dengan  Metode  Design  Thinking
Dan  Usability  Scale,” Comput.  Based Inf.  Syst.  J. ,  vol.  12,  no.  1,  pp.  39–51,
2024, doi: 10.33884/cbis.v12i1.8242.
[33] N.  Noya  and  N.  Setiyawati,  “User
Experience  dan  Usability  Testing  Bank Maluku Malut Mobile Banking Menggunakan User Experience Questionnaire  dan  System  Usability Scale,” Kesatria  J. Penerapan Sist. Inf.
(Komputer dan Manajemen) , vol. 5, no.
1, pp. 336–344, 2024.
[34] I.  M.  Herawati  and  D.  Azahra, “Evaluasi  Usability  Website  Jasuda.net Menggunakan  System  Usability  Scale
(SUS),” J. Ilm. Penelit. dan Pembelajaran  Inform. ,  vol.  9,  No.  2, pp. 994–1000, 2024.