PERANCANGAN UI/UX WEBSITE INTERNATIONAL OFFICE UNIVERSITAS MUHAMMADIYAH SUKABUMI DENGAN MENGUNAKAN PENDEKATAN USER PERSONA
Perdi Padilah 1* , Didik Indrayana 2 , Fathia Frazna Az-Zahra 3
1,2,3 Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Muhammadiyah Sukabumi Email: 1* perdipadilah006@ummi.ac.id, 2 didik.ind@ummi.ac.id, 3 fathiafrazna@ummi.ac.id
(*: Corresponding Author)
(Naskah masuk: 31 Juli 2023, diterima untuk diterbitkan: 1 September 2023)

## Abstrak
Informasi  adalah  suatu  hasil  dari  pengolahan  data  dan  fakta  yang  dapat  dipahami  dan  disampaikan  untuk menggambarkan suatu keadaan atau kondisi. Pada saat ini informasi merupakan hal penting dan sangat dibutuhkan dalam berbagai bidang. Informasi sangat berguna untuk penggambaran suatu kondisi, seperti pada dunia kerjasama informasi dibutuhkan untuk memberi gambaran tentang mitra yang akan menjalin kerjasama. International Office merupakan  situs  web  informasi  yang  dikelola  oleh  Lembaga  Kerja  Sama  dan  Hubungan  Internasional  (LKHI) untuk memberikan berbagai informasi mengenai Universitas Muhammadiyah Sukabumi (UMMI) kepada seluruh mitra yang menjalin kerjasama. Selain untuk memberikan informasi kepada mitra, selain itu International Office juga  berguna  untuk  memberikan  informasi  kegiatan  internasional  yang  bisa  diikuti  kepada  mahasiswa  serta mempermudah dosen dalam mencari informasi data kegiatan. Setelah beberapa tahun berjalan , International Office mengalami penurunan pengguna yang diakibatkan sudah tidak sesuainya situs web dengan minat dan kebutuhan pengguna saat ini. Penelitian ini bertujuan untuk meningkatkan kembali minat dan ketertarikan pengguna terhadap situs  web  dengan  cara  melakukan  pemahaman  karakteristik  dan  kebutuhan  pengguna  secara  lebih  mendalam menggunakan  pendekatan User  Persona .  Dimana  dari  pemahaman  dengan  pendekatan User  Persona ,  peneliti dapat  memahami  lebih  mendalam  kebutuhan  dan  keinginan  pengguna  terhadap  situs  web  yang  kemudian digunakan  sebagai  dasar  perancangan  ulang User  Interface (UI)  dan User  Experience (UX)  guna  memberikan gambaran  dari  pengimplementasian  karakteristik  dan  kebutuhan  pengguna.  Setelah  adanya  perancangan  ulang UI/UX sesuai dengan pemahaman terhadap minat yang pengguna inginkan penelitian ini menghasilkan tampilan situs  web  yang  lebih  menarik  sehingga  terjadi  peningkatan  ketertarikan  sebanyak  21%  dan  kesukaan  terhadap tampilan  sebanyak  18%  serta  memberikan  gambaran  penerapan  untuk  mempermudah  pengembang  saat melakukan perubahan terhadap situs web.
Kata kunci : User Interface, User Experience, User Persona, Figma

## UI/UX DESIGN OF THE INTERNATIONAL OFFICE UNIVERSITAS MUHAMMADIYAH SUKABUMI SITUS WEB USING A USER PERSONA APPROACH

## Abstract
Information is a result of processing data and facts that can be understood and conveyed to describe a situation or  condition.  At  this  time  the  information  is  important  and  much  needed  in  various  fields.  Information  is  very useful for describing a condition, such as in the world of cooperation, information is needed to give an idea of the partners who will collaborate. The International Office is an information website managed by the Institute for International  Cooperation  and  Relations  (LKHI)  to  provide  various  information  about  the  Muhammadiyah University of Sukabumi (UMMI) to all collaborating partners. In addition to providing information to partners, besides that the International Office is also useful for providing information on international activities that can be followed by students and making it easier for lecturers to find information on activity data. After several years of operation, the International Office has experienced a decline in users as a result of which the website does not match the interests and needs of current users. This study aims to increase user interest and interest in the website by understanding the characteristics and needs of users in more depth using the User Persona approach. Where from  understanding  with  the  User  Persona  approach,  researchers  can  understand  more  deeply  the  needs  and desires  of  users  for  websites  which  are  then used  as a  basis  for  redesigning  the  User  Interface  (UI)  and  User Experience (UX) to provide an overview of the implementation of the characteristics and needs of users. After the UI/UX redesign in accordance with the understanding of the interests that users want, this research results in a
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
more attractive website appearance resulting in an increase of 21% interest and 18% preference for appearance and provides an overview of implementation to make it easier for developers when making changes to the site web.
Keywords: User Interface, User Experience, User Persona, Figma
1. PENDAHULUAN
Informasi merupakan hasil dari suatu pengolahan atau pemrosesan data berdasarkan   fakta yang dapat dipahami dan bermanfaat bagi penerimanya[1].  Di  era  perkembangan  teknologi seperti sekarang, informasi sangat dibutuhkan dalam berbagai  bidang  guna  memberikan  gambaran  suatu kondisi  yang  ingin  diketahui,  seperti  pada  dunia kerjasama  informasi  dibutuhkan  untuk  memberi gambaran  tentang  mitra  yang  akan  menjalin kerjasama.  Dalam  penyampaiannya  informasi  dapat dilakukan dengan 2 cara yaitu langsung tanpa melalui media  dan  secara  tidak  langsung  melalui  media seperti surat atau koran. Saat ini, sudah banyak media informasi  yang  berkembang  pesat,  termasuk  media digital seperti situs web, video, dan aplikasi.
International  Office adalah  situs  web  yang dikelola  oleh  Lembaga  Hubungan  dan  Kerjasama Internasional  (LKHI)  Universitas  Muhammadiyah Sukabumi  (UMMI).  Tujuan  utama  situs  web  ini adalah  untuk  menginformasikan  mitra  internasional UMMI  tentang  kegiatan  universitas  nasional  dan internasional. International  Office berperan  sebagai pusat  informasi  yang  memfasilitasi  kerjasama internasional antara UMMI dengan institusi pendidikan atau lainnya di berbagai negara. Melalui situs  web  ini,  mitra  internasional  UMMI  dapat memperoleh  informasi  terbaru  mengenai  program internasional,  konferensi,  kesempatan  program beasiswa  dan  kegiatan  kerjasama  internasional lainnya.    UMMI  juga  bertujuan  untuk  memperluas pengaruhnya  secara  internasional  dan  menawarkan manfaat yang lebih besar kepada mahasiswa dan staf melalui  kolaborasi  dan  berbagi  pengetahuan  dengan institusi internasional.
Selang beberapa waktu, situs web International Office mulai mengalami penurunan jumlah pengguna. Penurunan  ini  disebabkan  oleh  beberapa  faktor seperti kurangnya keragaman konten yang disajikan, tampilan  yang  monoton  dan  tidak  sesuai  dengan keinginan  pengguna  saat  ini,  serta  kurangnya interaktif  situs  web.    Berdasarkan  faktor-faktor tersebut, tampak bahwa pemahaman yang menyeluruh  tentang  karakteristik  dan  kebutuhan pengguna  sangat  penting  dalam  mengembalikan minat  pengguna  terhadap  situs  web International Office.
Memahami karakteristik dan kebutuhan pengguna dapat dicapai melalui desain User Interface (UI)  dan User  Experience (UX)[2].  Merancang UI/UX    yang  sesuai  dengan  minat  pengguna  sangat penting dalam membantu pengembang mengidentifikasi  potensi  masalah  atau  tantangan pada tahap awal implementasi. Selain itu, pendekatan ini membantu meminimalkan kesalahan  dan
gangguan  yang  dapat  terjadi  selama  proses implementasi dan pengembangan situs web.
Saat mendesain UI/UX yang tepat, pengembang dapat memiliki pedoman yang jelas untuk fokus pada pengembangan  fitur  dan  fungsionalitas  yang  tepat berdasarkan  kebutuhan  pengguna[3],  ini  juga membantu  menghindari  pemborosan  sumber  daya untuk  fitur  yang  tidak  perlu  serta  memungkinkan pengembangan  situs  web  dilakukan  dengan  lebih efisien  dan  sesuai  dengan  keinginan  dan  kepuasan pengguna.
Ada  beberapa  metode  yang  dapat  digunakan untuk mendesain UI/UX antara lain Design Thinking , User  Centered  Design dan User  Persona .  Masing- masing  metode  ini  memiliki  kelebihan  dan kekurangan  yang  berbeda  beda.  Metode design thinking cenderung  mengambil  pendekatan  holistik dan  berfokus  pada  pemecahan  masalah  yang kompleks. Pendekatan ini menggabungkan kreativitas, empati dan analisis untuk mengidentifikasi  masalah  dan  mengembangkan solusi  inovatif,  seperti  Riset  Shirvanadi[4]  tentang desain ulang UI/UX situs web e-learning AMIKOM Center  dan  Vallendito[5]  tentang  Pemodelan User Interface dan User  Experience ,  penggunaan  metode Design  Thinking . User  Centered  Design berfokus pada  kebutuhan,  preferensi,  dan  pengalaman pengguna  sebagai  fokus  dari  proses  desain.  Metode ini menekankan pemahaman yang mendalam tentang kebutuhan  dan  karakteristik  pengguna  dari  awal proses desain hingga implementasi, seperti Riset Arif Satrio[6]  tentang  desain  antarmuka  portal E-sports . Pendekatan User persona berfokus pada pengembangan  profil  dan  fungsi  pengguna  fiktif berdasarkan  data  pengguna  yang  ada[7].  Tujuan utamanya  adalah  untuk  memahami  preferensi  dan kebutuhan pengguna yang berbeda melalui penjelasan rinci tentang karakter pengguna. Penelitian oleh Andhyka Kusuma, Muzakir Ghufron dan  lainnya[8]  tentang  penggunaan user  persona untuk  meningkatkan  ekspektasi  pengguna  terhadap sistem  informasi  akademik  dan  penggunaan user persona oleh  Andhyka  Kusuma,  Rizal,  Ashari  dan lainnya[9]  untuk  meningkatkan  ekspektasi  terhadap perangkat lunak memerlukan studi kasus pada sistem pemrograman  menunjukkan  manfaat  dari  metode user persona . Saat memilih metode desain UI/UX yang tepat, penting untuk mempertimbangkan kebutuhan proyek, sumber  daya  yang  tersedia,  dan  tujuan  akhir  yang ingin dicapai[10]. Setiap metode memiliki pendekatan  yang  berbeda,  tetapi  jika  digunakan dengan  benar,  dapat  memberikan  hasil  yang memuaskan.  Dari  ketiga  metode  yang  disebutkan, pendekatan user  persona paling  cocok  untuk
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
mendapatkan  pemahaman  yang  lebih  mendalam tentang  minat  pengguna  dalam  desain  UI/UX. User Persona membantu  menganalisis  karakteristik  dan kebutuhan pengguna yang berbeda-beda dengan lebih terperinci,  sehingga  memungkinkan  pemahaman yang  lebih  baik  terhadap  minat  dan  kebutuhan mereka.

## 2. METODE PENELITIAN
Metode penelitian merupakan pendekatan yang tersusun  secara  sistematis  dengan  tahapan-tahapan yang  dilakukan  dalam  proses  penelitian.  Tujuan metodologi  penelitian  adalah  alat  untuk  membantu peneliti mengidentifikasi data yang relevan, menentukan  bagaimana  data  akan  dikumpulkan, mempersiapkan kebutuhan penelitian, dan menyusun agenda kegiatan penelitian.

## 2.1 Tahapan Penelitian
Dalam  penelitian  ini,  peneliti  menggunakan pendekatan user  persona untuk  mendesain  UI/UX pada  situs  web International  Office .  Alasan penggunaan  pendekatan user  persona adalah  untuk memudahkan  peneliti  mengidentifikasi  kebutuhan desain  UI/UX,  karena  pendekatan user  persona memudahkan  peneliti  untuk  memahami  minat  dan keinginan pengguna saat menggunakan sistem.

## Gambar 1. Tahapan User Persona
Berikut  adalah  tahapan-tahapan  pendekatan user persona yang peneliti gunakan[8], [9]: a. State Hypothesis
Pada  tahap  ini,  fokus  utamanya  adalah mengidentifikasi  masalah  mendasar  dalam  konteks penelitian  dengan  melibatkan  beberapa  responden yang  berpotensi  menggunakan  aplikasi  atau  produk sebagai contoh penelitian.  Identifikasi masalah dapat dilakukan melalui kuesioner, wawancara tatap muka, dan  kuesioner  sebagai  alat  untuk  mengidentifikasi faktor-faktor  yang  relevan  dan  dapat  diidentifikasi. Setelah  detail  kebutuhan  pengguna  diketahui, langkah  selanjutnya  adalah  membuat  hipotesis. Pembuatan hipotesis menjadi kunci untuk menentukan berapa banyak user persona yang terlibat dalam masalah dan menjelaskan permasalahan yang dihadapi  masing-masing  tersebut  yang  penentuan dilakukan User  Persona dengan  langkah  pada Gambar 2.
Gambar 2. Tahapan Pembuatan Tabel Hipotesa

## b. Identify Behavioural Variables
Pada  tahap  kedua,  variabel  perilaku  pengguna dianalisis,  dimana  variabel  perilaku  diidentifikasi menggunakan  data  yang  dikumpulkan  sebelumnya. Data  ini  mencakup  berbagai  perilaku  kepribadian pengguna yang terkait dengan berbagai aspek minat. Tujuan dari fase ini adalah untuk menghasilkan satu set  variabel  perilaku  yang  dapat  digunakan  untuk mengklasifikasikan  pengguna  berdasarkan  perilaku tipikal mereka. Dengan menganalisis data yang ada, dimungkinkan  untuk  mengidentifikasi  pola  perilaku yang  muncul  dan  mengidentifikasi  variabel  yang saling terkait dalam konteks penggunaan produk atau layanan yang diteliti.

## c. Map Interview Subjects to Behavioural
variables.
Pada fase ini, subjek yang diwawancarai dibagi menjadi  beberapa  kelompok  berdasarkan  perilaku yang  sama  untuk  menghubungkan  setiap  subjek dengan variabel perilaku yang diidentifikasi pada fase kedua. Tujuannya adalah untuk menunjukkan dengan tepat  bagaimana  setiap  responden  dibandingkan dengan responden lain pada setiap variabel.

## d. Identify significant Behaviour Patterns
Pada  fase  ini,  pengelompokan  perilaku  yang tepat  dilakukan  untuk  mengidentifikasi  perilaku responden.  Perbandingan  pola  kemudian  dilakukan dengan menggunakan banyak variabel perilaku yang diamati,  skala  dan  persentase.  Identifikasi  ini bertujuan untuk mengetahui pola perilaku responden dan  hubungan  antar  kelompok  wawancara.  Peta  ini menunjukkan  kelompok  visual  atau cluster yang dibentuk  oleh  dua  orang  atau  lebih  dengan  posisi yang  sama.  Pemetaan  ini  membantu  untuk memvisualisasikan dan membandingkan pola perilaku  responden  yang  berbeda  dalam  kelompok yang sama. Hasil fase ini memberikan informasi lebih rinci  tentang  perilaku  dan  tren  pengguna  yang berbeda  dan  membantu  mengidentifikasi  kesamaan dan  perbedaan  antara  kelompok  responden  yang disurvei.  Informasi  ini  sangat  berharga  untuk merancang  UI/UX  yang  paling  sesuai  dengan kebutuhan dan preferensi setiap kelompok pengguna.

## e. Synthesize Characteristics and Relevant Goals
Pada langkah kelima, dilakukan penjabaran dari karakter  responden  dan  tujuan  yang  sejalan  dengan sistem dalam bentuk dokumen. Tujuan dari dokumen ini  adalah  untuk  mengklarifikasi  setiap  presentasi responden  untuk  mencapai  tujuan  desain  yang diinginkan.  Detail  yang  relevan  dari  setiap  perilaku dan sikap responden dirangkum dalam beberapa poin
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
singkat, dengan mempertimbangkan tingkat kesamaan  dalam  kelompok  perilaku.  Dokumen persona ini memberikan gambaran yang jelas tentang karakteristik,  preferensi  dan  kebutuhan  masing- masing kelompok pengguna yang disurvei. Informasi ini  berfungsi  sebagai  panduan  untuk  desain  UI/UX untuk menyesuaikannya dengan pengguna target dan membantu  memastikan  bahwa  sistem  yang  sedang dikembangkan  dapat  memenuhi  harapan  dan kebutuhan mereka secara memadai.

## f. Check for Redundancy and Completeness
Pada langkah keenam, data perilaku responden diperiksa  ulang  untuk  menghindari  duplikasi  atau ketidaklengkapan  data.  Selain  itu,  dokumen  analisis juga  ditinjau  untuk  menghindari  adanya  data  yang tidak  sesuai  dan  untuk  memastikan  bahwa  semua aspek  kunci  yang  teridentifikasi  selama  pembuatan dan  pemodelan  persona  telah  ditinjau  secara menyeluruh  melalui  pertemuan  partisipatif.    Proses validasi  ini  dilakukan  dengan  memeriksa  dokumen untuk  memverifikasi  keabsahannya.  Jika  dokumen dianggap sesuai, pembuatan persona dapat dilanjutkan tanpa perlu mengoreksi data.

## g. Expand the Description of Attributes and Behaviours
Pada  langkah  ketujuh,  dibuat  dokumen  naratif yang  menjelaskan  secara  detail  isi  dokumen foundation document . Dokumen naratif ini mencakup beberapa hal, antara lain pola perilaku responden saat melakukan  aktivitas  fungsional  dan  berinteraksi dengan sistem. Dalam penyusunan dokumen Person Foundation ,  istilah  " person "  digunakan  untuk merujuk  pada  dokumen  yang  memuat  representasi kesamaan  sifat  dan  perilaku  dari  satu  responden  ke responden lainnya. Dokumen naratif ini memberikan informasi  yang  lebih  detail  dan  jelas  tentang  setiap persona yang teridentifikasi, sehingga dapat menjadi panduan  yang  lebih  kuat  untuk  desain  UI/UX  dan memastikan  sistem  dapat  memenuhi  kebutuhan  dan preferensi setiap orang.

## h. Designate Persona Type
Fase  ini  menentukan  hubungan  antara  setiap orang,  mengasosiasikan  setiap  orang  yang  dibuat dengan  tipe  orang  untuk  menetapkan  prioritas  dan tujuan  utama  dari  desain.  Hasil  penentuan  relasi person  adalah  identifikasi  tipe  persona  primer  dan tipe  persona  sekunder.  Dengan  menganalisis hubungan pribadi, diharapkan setiap tipe orang dapat lebih  menggambarkan  karakteristik,  kebutuhan,  dan tujuan  yang  ingin  dicapai.  Dengan  menentukan hubungan antar individu, responden dengan karakteristik dan tujuan yang sama dapat dikelompokkan  bersama  sehingga  kebutuhan  desain yang  paling  relevan  dapat  diidentifikasi  dan diprioritaskan.    Ini  menyederhanakan  proses  desain UI/UX  dengan  cara  yang  lebih  tepat  sasaran  dan efektif,  memungkinkan  sistem  yang  dikembangkan
untuk  lebih  beradaptasi  dengan  kebutuhan  dan preferensi kelompok pengguna yang berbeda.
i. Build Use Case
Pada  tahap  kesembilan,  dilakukan  pembuatan Annotated  Use  Case  Diagram dan Use  Case Specification berdasarkan jenis orang yang berbeda, sebagai  dasar  persyaratan  peran  dalam  sistem. Diagram use  case beranotasi  digunakan  untuk menggambarkan  dan  menjelaskan  masalah  yang terkait dengan use case . Dengan membuat use case , intinya  adalah  mengidentifikasi  aktivitas  kebutuhan fungsional  yang  sesuai  untuk  peran  masing-masing aktor.  Spesifikasi use  case mencakup  spesifikasi kebutuhan  setiap  orang  dan  merinci  masalah  yang terkait dengan model use case . Use case ini dibangun didasarkan  pada  pertimbangan  hubungan  dengan model dan mekanisme fungsional untuk memetakan kerangka kerja persona dalam proses yang ada.

## j. Implement and Evaluate Prototypes
Pada  fase  kesepuluh,  implementasi  dilakukan melalui  penjabaran  model  sistem  berdasarkan  hasil use  case  diagram  yang  dilakukan  pada  fase sebelumnya  dan  analisis  hubungan  antar  manusia. Melalui  penerapan  model  ini,  proses  penelitian bertujuan untuk mengevaluasi hasil berupa prototipe pertama yang memenuhi kebutuhan skenario masalah yang  dialami  oleh  orang  tersebut.    Pemodelan  ini memberikan  representasi  visual  tentang  bagaimana sistem  akan  terlihat  dan  berinteraksi  dengan pengguna.  Dengan  menerapkan  model  sistem, peneliti  dapat  menggunakan  diagram use  case yang dibuat  untuk  melihat  bagaimana  semua  elemen berinteraksi  satu  sama  lain.  Prototipe  pertama  yang dibuat  memungkinkan  peneliti  untuk  menguji fungsionalitas  dan  kesesuaian  sistem  terhadap kebutuhan  pengguna  yang  diwakili  oleh  orang tersebut. Hal dilakukan untuk mendapat umpan balik dari  pengguna  dan  memastikan  bahwa  desain  dan fitur  UI/UX  yang  diimplementasikan  memenuhi harapan dan kebutuhan pengguna dalam proses yang ada.

## 2.2 Teknik pengumpulan data
Dalam  penelitian  ini,  peneliti  berusaha mengumpulkan data dengan cara sebagai berikut:
a. Wawancara
Peneliti  menggunakan  metode  wawancara untuk mendapatkan data-data yang dibutuhkan untuk mendukung penelitian untuk mendapatkan data yang relevan,  berbagai  mahasiswa,  dosen,  staf  dan  mitra diwawancarai.
b. Observasi/pengamatan Pengamatan dilakukan di situs web International Office untuk memahami penggunaannya secara langsung sebelum mewawancarai responden.
c. Studi Pustaka
Selain  menggunakan  wawancara,  penulis  juga melakukan  studi pustaka untuk  mengumpulkan  data
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
pendukung  dari  sumber  lainya  seperti  jurnal,  buku, dan  website  yang  sejalan  dengan  topik  dan pembahasan dari penelitian yang dilakukan.

## 3. HASIL DAN PEMBAHASAN
3.1 State Hypothesis
Peneliti melakukan pencarian masalah kebutuhan  untuk  menciptakan User  Persona dan kondisi  yang  diperlukan  agar  dapat  memahami keinginan pengguna secara jelas dengan mengumpulkan data dan informasi tentang pengguna potensial.  Untuk itu, peneliti membuat user persona berdasarkan data yang diperoleh melalui wawancara dengan  kelompok  responden  yang  berbeda  yaitu mahasiswa,  dosen,  mitra  dan  staf  Universitas Muhammadiyah Sukabumi.
Dengan  mengumpulkan  informasi  dari  berbagai kelompok  responden,  peneliti  mencoba  untuk  lebih memahami  preferensi,  kebutuhan,  dan  harapan pengguna  potensial.  Data  yang  diperoleh  dari wawancara dengan formulir Google merupakan dasar penting untuk menciptakan persona pengguna, yang menggambarkan  berbagai  karakteristik  dan  tujuan pengguna saat menggunakan produk atau layanan.
Dari  proses  pengumpulan  data  yang  telah dilakukan menghasilkan data sebanyak 56 responden, yang terdiri dari 43 orang mahasiswa, 5 orang Dosen, 3 orang Mitra dan 5 orang Staf universitas yang dapat dilihat pada Tabel 1.

## Tabel 1.  Tabel Hipotesa
Hipotesis Responden Penjelasan H0 Mahasiswa Menginginkan situs web dapat menampilkan informasi yang lebih detail lagi selain informasi kegiatan yang telah saja, tetapi juga informasi tentang beasiswa dan kegiatan yang akan dilakukan serta warna yang digunakan dalam situs web lebih bervariasi lagi untuk estetika pada situs web. H1 Dosen menginginkan situs web dapat menampilkan kegiatan dengan menambahkan label program studi atau fakultas agar mempermudah dosen saat memerlukan data ketika akreditasi. H2 Mitra membutuhkan informasi lebih tentang Universitas Muhammadiyah Sukabumi, untuk membantu mengenali setiap prodi dan kegiatan yang telah dilakukannya. H3 Staf ingin tampilan situs web lebih mudah di akses dimana setiap kegiatan diberikan kategori yang berbeda sesuai dengan
kegiatannya untuk mempermudah perekapan data impalementasi kerjasama.

## 3.2 Identify Behavioral Variables
Pada  bagian  ini,  akan  disajikan  rincian  tentang beberapa pertanyaan yang digunakan untuk observasi
terhadap  mahasiswa,  dosen, mitra,  dan  staf.  Berikut adalah  contoh  pertanyaan  yang  peneliti  ajukan kepada responden:
Tabel 2.  Tabel Range of Behavioral Variable Observed Behavioral
Variable Scale Frekuensi membuka situs web Sangat sering Tidak pernah Penilaian tampilan situs web Sangat Suka
Tidak suka
ketertarikan pengguna terhadap situs web. Sangat menarik Tidak menarik Manfaat situs web bagi pengguna
Sangat bermanfaat

## Tidak Bermanfaat
Selain  dari  beberapa  pertanyaan  diatas,  ada  juga pertanyaan  lainnya  yang  membantu  pembuat user persona seperti  pertanyaan  biodata  singkat  (nama, umur, status/pekerjaan, alamat, pendidikan terakhir), tujuan membuka situs web, fitur yang diinginkan.

## 3.3 Map  Interview  Subjects  to  Behavioral variables
Pada  fase  sebelumnya,  variabel  perilaku diidentifikasi. Langkah selanjutnya adalah mencocokkan  dan  mengelompokkan  responden berdasarkan  respon  terhadap  variabel  perilaku tersebut.  Gambar  3  adalah  hasil  pemetaan  variabel perilaku yang diperoleh.
Gambar 3. Emotion Card
Gambar 4. Persentase Frekuensi Membuka Website
Gambar 5. Persentase Penilaian Tampilan Website
Gambar 6. Persentase Ketertarikan Pengguna Terhadap Website
Gambar 7. Persentase Manfaat Website bagi Pengguna
3.4 Identify significant Behaviour Patterns
Setelah dilakukan pemetaan penggunaan emotion  card pada  fase  sebelumnya,  dapat disimpulkan  bahwa  mayoritas  responden  jarang membuka situs web International Office dan sebagian tidak  pernah  membukanya  serta  sebagian  lain kadang-kadang.  Tanggapan dari responden terhadap tampilan  dan  ketertarikan  terhadap  situs  web cenderung  biasa  saja,  namun  sedikit  minat  terhadap konten  yang  dikandungnya.  Meskipun  demikian, responden menunjukkan bahwa mereka menganggap situs web ini cukup bermanfaat.

## 3.5 Synthesize Characteristics and Relevant Goals
Setelah  menyelesaikan  semua  proses,  dimulai dengan pengumpulan data, identifikasi dan pemetaan, langkah selanjutnya adalah mendeskripsikan karakteristik  dan  tujuan  responden  yang  akan dimasukan  dalam  dokumen  persona.    Dokumen persona dibuat berdasarkan analisis variabel perilaku responden  dan  mencerminkan  setiap  kategori
responden.  Gambar  9,  Gambar  10,  Gambar  11,  dan Gambar  12  adalah  contoh  dokumen  Person  yang mewakili mahasiswa, Dosen, Mitra, dan staf sebagai kelompok responden.
Gambar 8. significant Behaviour Patterns
Gambar 9. Dokumen Persona Mahasiswa
Gambar 10. Dokumen Persona Dosen
Gambar 11. Dokumen Persona Mitra
Gambar 12. Dokumen Persona Staff

## 3.6 Check for Redundancy and Completeness
Setelah  berhasil  membuat  dokumen  persona, langkah  selanjutnya  adalah  memeriksa  kembali apakah  dokumen  persona  sudah  sesuai  dengan  data yang  diambil.  Pemeriksaan  ulang  terhadap  setiap individu  juga  dilakukan  pada  tahap  ini  untuk memastikan  integritas  dan  keragaman  perilaku, demografi sosial, serta kebutuhan yang mencerminkan  realitas.    Pengecekan  ulang  ini bertujuan  untuk  menciptakan  target  desain  yang kohesif dan membantu mengurangi kesalahan dalam interaksi.
Untuk  melakukan  pengecekan  ulang  dapat dilakukan  dengan  metode  validasi  4  tahap.  Tahap pertama  adalah  memeriksa  kembali  semua  variabel perilaku  yang  diisi  oleh  responden.  Tahap  kedua adalah  memvalidasi  data  dengan  responden  lain untuk  mendapatkan  sudut  pandang  yang  berbeda. Tahap  ketiga  adalah  memvalidasi  responden menggunakan  data  yang  belum  ada  pada emotion card .  Tahap  terakhir  adalah  menemukan  dan
menangani  anomali  yang  mungkin  muncul  di dokumen persona.
Setelah pemeriksaan ulang data yang dikumpulkan,  identifikasi  dan  pemetaan  variabel perilaku  dan  dokumen  persona,  tidak  ditemukan kelainan, maka proses penyempurnaan User persona tersebut dapat berlanjut ke tahap selanjutnya.
3.7 Expand  the  Description  of  Attributes  and Behaviors
Setelah  validasi  pada  tahap  sebelumnya  selesai dan  dokumen  persona  dinyatakan  sesuai,  proses penyempurnaan  persona  dapat  dilanjutkan  untuk mengubah  dokumen  persona  yang  awalnya  berpoin menjadi  deskripsi  lengkap  yang  menggambarkan pola  perilaku  dan  variabel  persona.  Gambar  13, Gambar 14, Gambar 15, dan Gambar 16 adalah user persona yang dihasilkan.
Gambar 13. User Persona Mahasiswa
Gambar 14. User Persona Mitra
Gambar 15. User Persona Dosen

## Gambar 16. User Persona Staff
3.8 Designate Persona Type
Setelah  memperoleh User  persona yang mencerminkan persepsi mahasiswa, dosen, mitra dan staf  yang  dituju,  langkah  selanjutnya  adalah menentukan  persona  primer  dan  persona  sekunder. Berdasarkan  masalah  yang  teridentifikasi,  seperti hilangnya  minat  pengguna  pada  situs  dan  analisis Significant Behavior Persona , Mahasiswa dan mitra dipilih sebagai persona utama, karena kedua grup ini adalah  tujuan  utama  Situs  web International  Offic e.
Sedangkan  persona  sekundernya  adalah  dosen  dan staf karena mereka berperan sebagai informan untuk kegiatan yang akan dilihat Mahasiswa dan Mitra.

## 3.9 Build Use Case
Sebelum memulai pemodelan tampilan berdasarkan user persona yang didapatkan, sebaiknya dibuat use case sebagai langkah awal. Use Case ini  bertujuan  untuk  memberikan  gambaran
tentang  berbagai  aktivitas  yang  dapat  dilakukan pengguna (aktor) di situs web atau aplikasi. Gambar 17  ini  adalah Use  Case yang  harus  menjadi  dasar untuk pemodelan.
Gambar 17. Use Case
Tabel 2.  Tabel Use Case Descriptor Aktor Tipe Persona Deskripsi Mahasiswa Primary Mahasiswa dapat melihat kegiatan yang telah dilakukan dan akan
dilakukan oleh UMMI serta dapat melakukan pendaftaran kegiatan. Selain itu mahasiswa juga dapat melihat informasi lengkap mengenai situs web, kemitraan kerjasama, profil UMMI, Fakultas, dan Prodi serta melihat informasi beasiswa yang bisa diikuti.
Mahasiswa dapat memberikan komentar atau tanggapan. Mitra Primary Mitra dapat melihat kegiatan yang telah dilakukan dan akan dilakukan oleh UMMI. Selain itu Mitra juga dapat melihat informasi lengkap mengenai situs web, kemitraan kerjasama, profil UMMI, Fakultas, dan Prodi. Mitra dapat mengajukan kerjasama melalui situs web. Dosen Secondary Dosen dapat melihat kegiatan yang telah dilakukan dan akan dilakukan oleh UMMI. Selain itu Dosen juga dapat melihat informasi lengkap mengenai situs web, kemitraan kerjasama, profil
UMMI, Fakultas, dan Prodi. Staf Secondary Staf harus melakukan login terlebih dahulu bila ingin
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
Aktor Tipe Persona Deskripsi
melihat hasil pendaftaran kegiatan dan beasiswa yang telah diisi oleh mahasiswa. Sama halnya ketika staf ingin melakukan pengelolaan terhadap informasi yang ditampilkan pada website, staf harus melakukan login terlebih dahulu. Informasi yang dapat staf atur antara lain Profil (situs web, UMMI, Fakultas, Prodi) informasi kegiatan yang telah dan akan dilakukan, informasi mitar UMMI, serta Informasi Beasiswa.

## 3.10 Implement and Evaluate Prototypes
Berdasarkan Use  Case,  User  Persona ,  Hasil wawancara  peneliti  akhirnya  dapat  memahami karakteristik  dan  kebutuhan  pengguna  yang  akan dijadikan  sebagai  dasar  pemodelan  tampilan  UI/UX dari  website International  Office menggunakan Figma. Gambar 18, Gambar 19, Gambar 20, Gambar 21,  Gambar  22,  dan  Gambar  23  adalah  hasil pemodelan yang dilakukan.
Gambar 18. tampilan Page Home
Gambar 19. Tampilan Page Activity
Gambar 20. Tampilan Page Detail Activity
Gambar 21. Tampilan Page Pendaftaran Beasiswa
Gambar 22. Tampilan Page About Us International Office
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159

## Gambar 23. Tampilan Page Universitas
Setelah berhasil mengimplementasikan desain dengan Figma, peneliti melakukan evaluasi kembali dengan melakukan wawancara baru dengan responden  mengenai  desain  baru  berdasarkan karakteristik  dan  kebutuhan  pengguna.    Hasil wawancara  kemudian  diolah  untuk  membuat  grafik Gambar 24 dan Gambar 25

## Gambar 24. penilaian desain akhir

## Gambar 25. penilaian ketertarikan akhir
Dari grafik Gambar 24 dan Gambar 25 dapat dilihat setelah  dilakukannya  perancangan  ulang  tampilan UI/UX dari website International Office , ketertarikan dan kesukaan pengguna terhadap website meningkat, peningkatan  yang  terjadi  dapat  dilihat  pada  tabel  3 dan Tabel 4.
Tabel 3.  Tabel Peningkatan penilai tampilan Range Jumlah Akhir Jumlah Awal persentase peningkatan Sangat Suka 32% 14% 18% Suka 43% 25% 18% Biasa 25% 43% -18% Kurang Suka 0% 16% -16% Tidak suka 0% 2% -2% Tabel 4.  Tabel Peningkatan Ketertarikan Pengguna Range Jumlah Akhir Jumlah Awal persentase peningkatan Sangat menarik 36% 16% 20% menarik 41% 20% 21% Biasa 11% 38% -27% Kurang menarik 13% 23% -11% Tidak menarik 0% 4% -4%

## 4. KESIMPULAN
Setelah  dilakukan  pemahaman  karakteristik  dan kebutuhan  pengguna  peneliti  dapat  membuat rancangan  UI/UX  tampilan  Situs  web International Office sesuai  dengan  minat  pengguna  yang dibuktikan  dengan  peningkatan  sebanyak  18%  dari pengguna  yang  memberikan  tanggapan  sangat  suka dan suka pada tampilan situs web  serta peningkatan sebanyak  20%  tanggapan  sangat  menarik  dan  21% tanggapan  menarik  pada  ketertarikan  pengguna. Selain  itu,  dari  perancangan  UI/UX  yang  dilakukan didapatkan  juga  gambaran  dari  situs  web  yang diinginkan  oleh  pengguna  serta  akan  menjadi panduan bagi pengembang saat melakukan perubahan pada situs web.

## DAFTAR PUSTAKA
[1] E.  Effeny,  E.  A.  Siregar,  P.  C.  Fitri,  And  I.  A. Syahbana  Damanik,  “Mengenal  Sistem  Informasi Manajemen Dakwah (Pengertian Sistem, Karakteristik  Sistem),”  Vol.  5,  Pp.  4343–4349, 2023.
[2] S. S. J. Santosa, “Analisis Ui/Ux maximom berbasis User  Persona  dengan  Menggunakan  Pendekatan Google Design Sprint,” Surabaya, 2020.
[3] M. F. Santoso, “Implementasi Konsep Dan Teknik Ui/Ux Dalam Rancang Bangun Layout Web Dengan
Figma,” Jurnal  Infortech ,  Vol.  4,  No.  2,  Pp.  156– 163, 2022, [Online]. Available: Http://Ejournal.Bsi.Ac.Id/Ejurnal/Index.Php/Inforte ch156
[4] E. C. Shirvanadi, “Skripsi Perancangan Ulang Ui/Ux Situs  E-Learning  Amikom  Center  Dengan  Metode Design  Thinking  (Studi  Kasus:  Amikom  Center),” Yogyakarta, 2021.
[5] B. Vallendito, “Pemodelan User Interface dan User Experience menggunakan  Design  Thinking,” Malang, 2020.
Bit (Fakultas Teknologi Informasi Universitas Budi Luhur) Vol. 20,No. 2,September 2023,hlm.149-159
[6] H.  Arif Satrio,  “Perancangan  Antarmuka  Portal  E- Sports  Dengan  Pendekatan  User-Centered  Design Pada Aplikasi Arenasia,” Yogyakarta, 2020.
[7] S.  S.  Jayani  Santosa,  “Analisis  Ui  Ux  Maximom Berbasis  User  Persona  Dengan  Mengunakan Pendekatan Google Sprint,” Surabaya, Aug. 2020.
[8] W.  Andhyka  Kusuma,  K.  Muzakir  Ghufron,  And Fauzan, “Penggunaan User Persona Untuk Evaluasi Dan  Meningkatkan  Ekspektasi  Pengguna  Dalam Kebutuhan  Sistem  Informasi  Akademik,” Sintech , Vol.  3,  No.  2,  Pp.  90–99,  2020,  Doi: Https://Doi.Org/10.31598.
[9] W.  Andhyka  Kusuma,  M.  Rizal  Ashari,  C.  Dwi Oktaviani,  And  A.  Natasya  Na’im,  “Penggunaan User  Persona  Untuk  Evaluasi  Dan  Meningkatkan Ekspektasi  Pengguna  Dalam  Kebutuhan  Perangkat
Lunak(Studi  Kasus :Pengaruh  Kurangnya  Dosen Pengajar  Dan  Ruang  Kelas  Terhadap  Sistem Penjadwakan),” Seminar  Nasional  Teknologi  Dan Rekayasa , Vol. 5, Pp. 171–183, 2020.
[10] M. Agus Muhyidin, M. A. Sulhan, And A. Sevtiana, “Perancangan  Ui/Ux  Aplikasi  My  Cic  Layanan Informasi  Akademik  Mahasiswa  Menggunakan
Aplikasi Figma,” Vol. 10, No. 2, Pp. 208–219, 2020, [Online]. Available: Https://My.Cic.Ac.Id/.