## ANALISIS UI/UX WEBSITE INFORMASI AGENDA MIKAEL DENGAN METODE DESIGN THINKING

## Ispandi
Informatika, Universitas Nusa Mandiri Jalan Jatiwaringin Raya No. 2, Jakarta Timur, Indonesia Ispandi.ipd@nusamandiri.ac.id

## ABSTRAK
Tempat peribadatan Mikael didirikan pada tahun 1981 sebagai hasil dari perkumpulan kecil di sekitar Grup Strada.  Sejak  tahun  2000,  gereja  ini  mulai  mengeluarkan  informasi  mengenai  kegiatan-kegiatan  untuk menyebarkan  informasi  Paroki  kepada  umat.  Mengingat  pentingnya  gereja  sebagai  tempat  ibadah  yang memfasilitasi  aktivitas  liturgis,  pembahasan  dilakukan  dengan  menggunakan  pendekatan  semiotika  untuk menginterpretasi  tanda  dan  makna  dalam  arsitektur  guna  mempertahankan  ekspresi  sakralnya.  UI/UX  dibagi menjadi  2  yaitu  User  Interface    dan  User  Experience.  User  Interface  menentukan  semua  komponen  sistem interaktif  (perangkat  lunak  atau  perangkat  keras),  yang  menyediakan  informasi  dan  cara  mengelolanya,  yang memungkinkan  pengguna  melakukan  tugas  tertentu  dengan  bantuan  sistem  interaktif.  Situs  informasi  agenda Mikael  dirasa  memiliki  konten  situs  tersebut  tampaknya  memiliki  kekurangan  yang  membuat  pengunjung kesulitan. Eksplorasi awal terfokus pada penilaian khusus terhadap situs informasi agenda Mikael dengan tujuan mengembangkan  rencana  atau  model  yang  memperbaiki  kelemahan  yang  ada  dan  memenuhi  kebutuhan pengguna  yang  belum  terpenuhi..  Berdasarkan  penelitian  yang  telah  dilakukan  meng  hasilkan  bahwa  situs informasi agenda Mikael masing-masing mendapatkan nilai 55 dan 57. Nilai tersebut menagalami peningkatan dan indikator penilaian Acceptabillity Ratings , Adjective Ratings dan Grade Scale tidak mengalami perubahan, yang  masing-masing  menghasilkan  kategori  Marginal  predikat Awful ,  dan rating E.  Hasilnya  adalah perencanaan  ulang  situs  agenda  Mikael  menggunakan  alat  desain  seperti  Figma,  dengan  nilai  tingkat ketergunaan sistem (System Usability Scale) yang lebih baik dibandingkan dengan situs yang sudah ada
Kata kunci :  UI/UX, Design Thinking, Agenda Mikael , Website

## 1. PENDAHULUAN
Tempat peribadatan Mikael didirikan pada tahun 1981  sebagai  hasil  dari  perkumpulan  kecil  di  sekitar Grup  Strada.  Sejak  tahun  2000,  gereja  ini  mulai mengeluarkan  informasi  mengenai  kegiatan-kegiatan untuk  menyebarkan  informasi  Paroki  kepada  umat. Mengingat  pentingnya  gereja  sebagai  tempat  ibadah yang  memfasilitasi  aktivitas  liturgis,  pembahasan dilakukan dengan menggunakan pendekatan semiotika  untuk  menginterpretasi  tanda  dan  makna dalam  arsitektur  guna  mempertahankan  ekspresi sakralnya[1].
Sejarah surat Agenda memiliki akar yang dalam dalam  sejarah  manusia,  terutama  sejak  penemuan mesin cetak oleh Gutenberg. Perkembangan teknologi telah  sangat  memengaruhi  produksi,  distribusi,  dan konsumsi  informasi  oleh  masyarakat  melalui  surat Agenda[2].  Meskipun  terjadi  revolusi  digital  dan munculnya  internet  sejak  awal  milenium  baru,  surat Agenda  tetap  menjadi  salah  satu  media  massa  yang menarik  untuk  dikaji.  Distribusi  Agenda  terus berlangsung  secara  konsisten,  namun  aktivitas pemberian  buletin  setelah  Misa  terhenti  pasca masuknya pandemi virus Corona, yang mengakibatkan  informasi  hanya  dapat  diakses  secara daring.
Pada  November  2021,  gereja  meluncurkan website  sistem  informasi  agenda  Mikael  sebagai respons  terhadap  situasi  tersebut.  Situs  ini  dibuat
untuk  mengakomodasi  akses  ke  data  gereja,  dengan tujuan  mengurangi  penggunaan  kertas,  menghemat biaya, dan mengurangi risiko penularan virus Corona. Menu  yang  disediakan  di  website  Agenda  Mikael meliputi  berbagai  layanan  seperti  intensi  doa  online, layanan  sakramen,  prosedur  pendaftaran,  teks  liturgi, berita  dari  berbagai  seksi  dan  wilayah,  serta  sumber daya spiritual lainnya. Jumlah total umat yang tercatat di  tempat  peribadatan  ini  adalah  294  orang.  Dalam siklus pemeriksaan, peneliti mengidentifikasi berbagai kekurangan yang dialami oleh situs tersebut melalui pengamatan dari berbagai kelompok pengguna.
UI/UX  dibagi  menjadi  2  yaitu  User  Interface dan  User  Experience.  User  Interface  menentukan semua  komponen  sistem  interaktif  (perangkat  lunak atau  perangkat  keras),  yang  menyediakan  informasi dan  cara  mengelolanya,  yang memungkinkan pengguna  melakukan  tugas  tertentu  dengan  bantuan sistem  interaktif.  Dengan  kata  lain,  User  Interface adalah  perantara  antara  manusia  dan  komputer, membina  interaksi;  kegunaan  adalah  alat  yang menyediakan  aktivitas  interaksi  yang  efektif  untuk mencapai  tujuan  tertentu  [3].  Sedangkan  User Experience  merupakan  Pada  saat  yang  sama,  User Experience  terkait  dengan  bagaimana  pengguna berinteraksi dengan sistem yang melibatkan perasaan pengguna  dan  sikap.  Demikian  pula,  menyatakan bahwa  User  Experience  berfokus  pada  memahami
pengguna, kebutuhan, minat, kekuatan, dan keterbatasan agenda mikael. agenda mikael menekankan  bahwa  menyelidiki  User  Experience membantu  meningkatkan  interaktivitas  pengguna dengan  sistem  dan  meningkatkan  interaksi  mereka persepsi. Bahwa User Experience melibatkan persepsi pengguna  tentang  kegunaan,  yang  memeriksa bagaimana  pengguna  memandang  kegunaan  dan efektivitas sistem atau aplikasi [4]. Sebuah cara yang berhasil  untuk  mengimplementasikan  UI/UX  adalah dengan menerapkan konsep Design Thinking. Design Thinking adalah suatu pendekatan yang dipopulerkan oleh  David  Kelley  dan  timnya.  Pendekatan  ini berfokus  pada  kebutuhan  pengguna.  Menurut  Tim Brown,  Design  Thinking  adalah  suatu  proses  kreatif yang menggabungkan kebutuhan klien dengan ide-ide yang  praktis,  inovatif,  dan  berpotensi  menjadi peluang  bisnis  yang  menguntungkan  [5].  Keempat aspek  yang  tercakup  dalam  Design  Thinking  adalah berorientasi pada pengguna (People Centered), sangat kreatif (Highly Creative), melibatkan tindakan praktis (Hands On) di luar ruangan, dan bersifat iteratif, yang berarti  melakukan  proses  perbaikan  berulang-ulang [6].

## 2. TINJAUAN PUSTAKA
UI/UX  terdiri  dari  dua  kata  yaitu  UI  (User Interface) dan UX (User Experience)

## 2.1.  User Interface
User  Interface  adalah  Pengguna  dan  sistem dalam  suatu  program  berko-munikasi  satu  sama  lain melalui  situs  web,  aplikasi  seluler,  atau  perangkat lunak.  Persyaratan  pengguna  sangat  memengaruhi cara  kerja  antarmuka  pengguna.  Tema  ramah pengguna  dibuat  oleh  desainer  UI  tersebut  untuk memenuhi  kebutuhan  dasar  pengguna  akan  aplikasi web atau seluler [7]. Menurut Deacon, User Interface terbagi menjadi 4 elemen yaitu:

## 2.2.  User Experience
User Experience menurut ISO 9241-210, adalah reaksi seseorang untuk menggunakan produk, sistem, atau  layanan  serta  persepsi  mereka  tentang  hal  itu. Tingkat  kepuasan  dan  kemudahan  penggunaan seseorang dengan produk, sistem, atau layanan diukur dengan  pengalaman  pengguna  (UX).  Aturan  dalam membangun  UX  adalah  bahwa  orang  banyak memiliki  kemampuan  untuk  menentukan  tingkat kepuasan  mereka  sendiri.  Tidak  peduli  seberapa bagus keunggulan suatu produk, kerangka kerja, atau layanan,  tanpa  audiens  yang  dapat  merasakan pemenuhan,  aturan,  dan  kenyamanan  dalam  bekerja sama, tingkat UX akan rendah. Pengalaman pengguna menjadi  lebih  kompleks  dan  beragam  sebagai  hasil dari  perkembangan  dunia  digital  dan  seluler. Konfigurasi  user  experience  saat  ini  mengalami perkembangan,  karena  pengalaman  menggunakan sebuah  gadget  tidak  sama  dengan  gadget  lainnya. Seperti  saat  membuka  situs  dari  PC,  akan  sangat
berbeda  saat  membuka  situs  dari  ponsel.  Kehadiran media  sosial  juga  turut  andil  dalam  tampilan  media digital  yang  semakin  beragam.  Agar  tetap  fokus, konsep  pengalaman  pengguna  masih  memerlukan penelitian tambahan [8].

## 2.3. Desain Thinking
Pendiri  IDEO,  David  Kelley  dan  Tim  Brown yang  mempopulerkan  Desain  Thinking  adalah strategi  inovatif  yang  menggabungkan  apa  yang dibutuhkan  pengguna  dengan  apa  yang  layak  secara teknologi dan dapat digunakan sebagai peluang bisnis yang menguntungkan. Ini dilakukan dengan menggunakan cara berpikir dan teknik desainer [9].

## 2.4 . User Flow
User  Flow  adalah  representasi  okuler,  baik dalam  bentuk  tulisan  atau  digital,  dari  aliran  atau metode penggunaan aplikasi pengguna. Diagram atau flowchart biasanya digunakan untuk menggambarkan user  flow  secara  optis.  Titik  awal  diagram  dimulai saat  pengguna  mengakses  halaman  pertama  aplikasi dan  berakhir  saat  pengguna  menyelesaikan  tujuan pencapaian,  seperti  berhasil  membeli  produk. Pengalaman  pengguna  sangat  dipengaruhi  oleh  user flow.  Untuk  mengevaluasi  dan  meningkatkan pengalaman  pengguna  suatu  aplikasi  atau  situs  web sehingga  bisa  menjadi  yang  terbaik,  ada  baiknya mempelajari user flow [10].

## 2.5 . Wireframe
Wireframe adalah mendesain halaman situs web atau antarmuka ap-likasi, setelah kerangka dasar. Hal ini merupakan langkah penting dalam desaind produk yang  perlu  dipahami  secara  menyeluruh  sebelum pemangku  kepentingan  menyepakati  tata  letak aplikasi dan desain antarmu-ka pengguna[11]

## 2.6 . Figma
Figma  adalah  salah  satu  alat  perencanaan  yang biasanya  digunakan  untuk  membuat  keberadaan aplikasi  portabel,  area  kerja,  situs  dan  lain-lain. Figma  dapat  digunakan  pada  kerangka  kerja Windows,  Linux  atau  Macintosh  dengan  terhubung ke  web[12].  Untuk  sebagian  besar,  Figma  umumnya digunakan  oleh  seseorang  yang  bekerja  di  UI/UX, komposisi  situs  web,  dan  bidang  komparatif  lainnya. Figma  memiliki  keunggulan  memungkinkan  banyak orang  untuk  berkolaborasi  dalam  satu  proyek meskipun  mereka  berada  di  lokasi  yang  berbeda, selain  memiliki  fitur  yang  lengkap  seperti  yang dimiliki  Adobe  XD.  Ini  dikenal  sebagai  kerja kelompok,  dan  karena  kemampuan  aplikasi  figma, ban-yak  desainer  UI/UX  sekarang  menggunakannya untuk  membuat  prototipe  situs  web  atau  aplikasi dengan cepat dan efektif [13].

## 3. METODE PENELITIAN
Peneliti  membuat  tahapan-tahapan  penelitian dalam  proses  penelitian  tersebut,  yaitu  populasi  dan sampel,  teknik  pengumpulan  data,  dan  pengolahan data yang berisikan tahapan-tahapan Design Thinking.

## 3.1. Populasi dan Sampel
Populasi  dari  objek  penelitian  tersebut  adalah pengunjung website informasi agenda Agenda mikael berasal  data  Google  Analitic  dengan  syarat  umur  13 tahun  keatas,  berjumlah  1177  Orang.  Sedangkan Sampel dari penelitian tersebut didapatkan dari rumus Slovin.  Rumus  Slovin  merupakan  Persamaan  yang digunakan  untuk  mengetahui  jumlah  sampel  yang dapat digunakan sebagai model dalam suatu populasi informasi  [14].  n  =  N/(1+Ne2)  merupakan  rumus slovin,  dimana  n  merupakan  sampel,  N  merupakan populasi  dan  e  merupakan  toleransi  kesalahan  dalam bentuk  persen.  Dalam  proses  penelitian  ini,  batas toleransi  kesalahan  adalah  10%.  Setelah  perhitungan sampel  menggunakan  rumus  slovin,  jumlah  sampel yang didapatkan berjumlah 92.

## 3.2. Teknik Pengumpulan Data
Peneliti menggunakan teknik pengumpulan data yang akan dijabar menjadi 3 bagian yaitu :
a. Studi Pustaka
Studi  pustaka  adalah  peneliti  menggunakan  studi literatur  untuk mengumpulkan data  bahan referensi  yang  sebanding  dengan  yang  digunakan dalam  skripsi  dan  jurnal  yang  telah  dikutip sebelumnya.
b. Observasi Peneliti  melihat  hal-hal  yang  berkaitan  dengan objek eksplorasi, khususnya situs Agenda Mikael, khususnya  jalannya  pelayanan  yang  diadakan  di situs tersebut.
c. Wawancara Peneliti melaksanakan wawancara dengan beberapa  sumber,  untuk  mengetahui  data  tentang elemen,  manfaat  dan  kerugian  dari  situs  tersebut, serta  dukungan  untuk  menyebarkan  survei  dan pertanyaan  yang  diajukan  oleh  peneliti  terlepas dari  apakah  mereka  memenuhi  pedoman  kualitas dari organisasi non profit.
d. Kuesioner Peneliti  mengedarkan  kuesioner  yang  berisi pertanyaan-pertanyaan yang didukung oleh organisasi  non  profit  dan  siap  untuk  dilakukan penyebaran secara luas.

## 3.3. Pengolahan Data
Tahapan-tahapan Design Thinking adalah bagian  dari  proses  pengolahan  data  yang  dilakukan peneliti.  Tahapan-tahapan  yang  dimaksud  adalah sebagai berikut.
a. Empathy
Empathy adalah Design Thinking fase awal. Sejak awal,  klien  memikirkan  bagaimana  terhubung
dengan  sekitar  dan  masalah  apa  yang  harus diselesaikan.  Terlebih  lagi,  tahap  ini  sangat penting  dalam  menyusun  rencana  yang  berfokus pada  objek  yang  berfokus  pada  manusia  dan menjadikan simpati sebagai pengalaman pendidikan tentang klien dan kebutuhan mereka.
b. Define
Define  adalah  membedakan  subjek  pemikiran kritis yang terfokus pada klien dengan mempertimbangkan  sedikit  pengetahuan  dan kebutuhan  klien  untuk  mengaturnya.  Pemikiran- pemikiran  yang  telah  dibedakan  untuk  membantu peneliti  dalam  merencanakan  rencana  dan memberdayakan desainer untuk menangani masalah dengan seminimal  mungkin,  maju dalam tahap mendefinisikan.
c. Ideate
Ideate adalah cara paling umum untuk menghasilkan  penalaran  kreatif  dalam  menyusun rencana, serta mempunyai pilihan untuk mengelola  pokok  permasalahan  pada  periode fundamental  siklus  “Welas  Asih”  sehingga tahapan  ini  mengarah  pada  anggapan,  pemikiran, kontemplasi,  komitmen  yang  akan  dilaksanakan dan dengan cara yang diatur.
d. Prototype
Prototype  adalah  rencana  atau  peningkatan pemrograman sepenuhnya bertujuan untuk membuat rencana tersebut jelas sehingga aktivitas web  atau  aplikasi  serbaguna  dengan  mudah dianggap sebagai sebuah siklus.
e. Testing Testing adalah proses fase akhir Design Thinking. beberapa  tes  yang  dipilih  secara  random,  peneliti akan  mengujinya.  Hasil  pengujian  menunjukkan bahwa  tujuan  pengujian  prototype  adalah  untuk mendapatkan  feedback  dari  pengguna,  menjawab pertanyaan  tentang  penempatan  fitur,  struktur warna,  dan  bagaimana  diagram  alur  desain digunakan.

## 4. HASIL DAN PEMBAHASAN
Memuat  hasil,  Pengujian  dan  pembahasan tentang skripsi yang telah dilakukan.
4.1. User Flow
Home Manu Utama Kalender Kegiatan Artikel Kabar Agenda Alamat Arsip
Gambar 1. User Flow Website Agenda Mikael.

## 4.2. Cara menghitung SUS
Ini  adalah  cara  menghitung  SUS  ( System Usabillity Scale ) [15].
a. Nilai  dikurangi  1  apabila  pertanyaan  terkait berangka ganjil.
b. Nilai  awal  5  akan  dikurangi  nilai  tersebut apabila pertanyaan terkait berangka genap.
c. Nilai  akan  dikalikan  2,5  per  respondennya  agar menghasilkan nilai SUS per responden.

## 4.3. Indikator penilaian SUS
Ini  adalah  indikator  penilaian  SUS  ( System Usabillity Scale ) yang digunakan dalam penelitian ini [16].
a. Acceptabillity adalah evaluasi berasaskan perspektif penerimaan pengguna.
b. Grade  Scale adalah  evaluasi  berasaskan perspektif ukuran kualitas.
c. Adjective  Ratings adalah  Perspektif  yang menentukan peringkat kegunaan menjadi landasan evaluasi.

## 4.4. Pertanyaan-Pertanyaan SUS
Ini  adalah  pertanyaan  yang  akan  disebarkan  ke responden  untul  mendapakan  nilai  SUS  ( System Usabillity Scale )
Tabel 1. Daftar Kuesioner SUS ( System Usabillity Scale ).
No.
Pertanyaan
KEMUDAHAAN MENEMUKAN DAN AKSES SITUS WEB AGENDA MIKAEL
1. Situs web Agenda Mikael mudah dicari di mesin pencarian internet.
2. Sebagian besar Umat Paroki Kranji sudah mengetahui situs web Agenda Mikael, sehingga saya mudah mendapatkan informasinya
3. Situs web Agenda Mikael mudah diakses ( responsive ) oleh perangkat mobile contoh: handphone, laptop, PC atau desktop
4. Saya memerlukan bantuan seseorang untuk mengakses situs web Agenda Mikael.
DESAIN & ASTETIK SITUS WEB AGENDA MIKAEL
5 Desain logo situs web Agenda Mikael menarik dan sudah sesuai
6 Tampilan desain situs web Agenda Mikael menarik dan modern
7 Warna yang ada di situs web Agenda Mikael tidak menggangu kenyamanan Anda.
8 Tata letak menu dan informasi mudah diingat.
9 Tata letak pengelompokan kategori seperti: artikel, postingan popular, Agenda Seksi, Agenda Wilayah, dan sebagainya sudah tepat dan mudah dimengerti.
10 Tampilan tata letak artikel merpermudah Anda untuk mencari informasi
11 Pilihan font baik jenis maupun ukuran sudah tepat dan membuat Anda nyaman

## ISI KONTEN DAN RESPONSIVITAS
12 Isi konten yang terdapat didalam situs web Agenda Mikael ramah terhadap lansia.
13 Isi konten yang terdapat didalam situs web Agenda Mikael relevan untuk anak muda.
14 Judul konten jelas dan informatif
15 Gambar, atribut, atau informasi sesuai dengan isi artikel
16 Struktur setiap halaman sudah konsisten dan seragam
17 Intensi online direspon dengan baik walaupun proses pendaftaran melalui website
18 Kalimat atau kata-kata digunakan dalam artikel sudah sesuai dengan kaidah penulisan berita online
19 Saya mudah menemukan informasi media sosial Paroki lainnya di situs web Agenda Mikael
20 Saya menemukan informasi tentang alamat, nomor telepon Paroki dengan mudah di situs Web Agenda Mikael

## 4.5. Paint Point
Setelah  proses Empathy , di dapatkan nilai SUS, saran dan kritik dari rseponden. Untuk jadikan paint point dalam proses Define . Paint point permasalahan dari website agenda mikael.
Tabel 2. Paint Point Permasalahan dari Website Agenda Mikael Pemahaman Informasi
1. Lebih User Friendly.
2. Kurangnya Informasi.
3. Tingkatkan lagi berita dan info lowongan kerja.
4. Lebih banyak publikasi dan tambahkan dan tingkatkan fitur.
5. Berikan fitur dark mode agar user dapat memiliki preferensi pilihan antarmuka.
6. Perbanyak informasi tentang gereja dan kegiatannya.
7. Perbanyak informasi kegiatan Paroki yang sedang menjadi trend di Paroki lain.
8. Tingkatkan konten untuk mendekatkan antara umat dengan Paroki.
9. Tidak menggunakan berbagai jenis font, melainkan hanya 1 jenis font untuk seluruh website.
10. Lebih sering update berita lagi.
11. Peletakan dan desain iklan dibuat lebih menarik
12. Layout dan penempatan konten dalam 1 halaman terlalu banyak sehingga overcrowded.
13. Banyak konten yang menggunakan gambar dan  bukan component kode, sehingga tidak terlalu interaktif dengan
pengguna.
14. Model component yang digunakan memiliki bentuk yang tidak terlalu relevan pada model desain web 2.0.
15. Tambahkan artikel seputar kegiatan OMK setiap wilayah.
16. Design UI dibuat lebih informatif seperti website pemerintahan.
17. Font artikel bisa diperbesar untuk lansia yang menjadi pembaca.
18. Tidak pernah update, warna tidak enak dilihat, tulisan dan trigger tidak responsif.
19. Tampilannya dibuat lebih modern lagi.
20. Tambah Dasboard dan beberapa atribut navigasi supaya tidak terjadi penumpukan konten.
21. Warna terlalu kontras, lebih baik ditambahkan gradasi
22. Informasi Lama bisa di arsip.
23. Warnanya lebih diseragamkan karena terlalu warna-warni.
24. Memperbaiki agar tidak terkesan ramai di websitenya.
25. Design Logo mungkin harus sedikit diubah, agar membentuk kesan estetika modern.
26. Bagi non jemaat mungkin ditingkatkan lagi dalam segi UInya.
27. UI dari website simple karena tinggal scroll atau search, tetapi hal itu melah membuat UInya kurang menarik menurut orang seumuran Saya.
28. Tingkatkan lagi kerapihannya.
29. Desainnya harus mengikuti zaman.
30. UI/UX diperbaiki lagi dari segi warna dan lebih konsisten.
31. Mengubah design menjadi lebih sederhana.
32. Merapihkan beberapa detail kecil pada halaman web.
33. Membuat bagian web lebih tertata.
34. Pengelompokkan tiap menu bisa diatur kembali agar lebih rangkum.
35. Web butuh pengembangan desain yang lebih menarik Karena cenderung kaku.
36. Skema warna web serta pemilihan gambar, font dan lainnya bisa saling menyesuaikan antar tone warnanya.
37. Designnya bisa dibuat lebih kreatif agar tidak terkesan baku.
38. Tuliskan riwayat sejarah Paroki Kranji.
39. Sebutkan Romo dan Karyawan-karyawannya dari dulu hingga sekarang.
40. Tampilan lebih diringkas dan minimalis, tetapi jelas dan informatif.
41. Dirapihkan site di dekat footer
4.6. How Might We Question
Gambar 2. How Might We Question Website Agenda Mikael.
How  Might  We  Question merupakan  siklus pemikiran  yang  dibuat  selama  interaksi  konfigurasi menu  yang  akan  dilakukan.  Idenya  berasal  dari kebutuhan  klien  sebagai  beberapa  pertanyaan. How Might We Question akan ditampilkan dalam gambar 2
4.7. Ideate
Dalam  fase Ideate ,  terdapat  fase brainstorming yang  merupakan  proses  pemilihan How  Might  We Question terbaik.  Ini  adalah  proses brainstorming yang ditampilkan dalam gambar berikut.
Gambar 3. Brainstorming Website Agenda Mikael.
4.8. Website Agenda Mikael Berikut  adalah website Agenda  Mikael  yang berasal  dari  pengembangan brainstorming menjadi
aplikasi mockup . tampilan website dibuat di software Figma.
Gambar 4. Tampilan Website Homepage Website Agenda Mikael .
Gambar  IV.4  menampilkan  informasi  kabar tebaru  dari  agenda  mikael  dan  juga  menampilkan kabar  berita  mikael  terdahulu,  di  bagian  tengah terdapat  agenda  kegiatan  yang  akan  di  lakukan  di mikael,  berikut  informasi  informasi  bagi  jemaat  dan di  gabian  akhir  di  tutup  dengan  alamat  lengkap  dari kabar mikael.
Gambar 5. Tampilan Menu Humburger Pada Homepage Website Agenda Mikael .
Gambar 5 menampilkan huburger (umat Kristen diwajibkan  untuk  memberikan  persepuluhan  di
gereja. Persepuluhan terdiri dari 10 persen penghasilan)untuk gereja mikael.
Gambar 6. Tampilan Website Humburger Menu Pilihan Paroki Kranji Website Agenda Mikael .
Gambar  6  menampilkan  pilihan  paroki  (daerah (kawasan)  penggembalaan  umat  Katolik  yang dikepalai  oleh  pastor  atau  imam)website  agenda mikael,  Paroki adalah komunitas kaum beriman yang dibentuk secara tetap dengan batas-batas kewilayahan tertentu dalam Keuskupan (Gereja Partikular). paroki pun  pertama-tama  adalah  himpunan  orang,  bukan sekadar wilayah, walaupun sifat kewilayahan sebagai aspek yang tetap juga inheren padanya (Kitab Hukum Kanonik Gereja Katolik, di dalam prinsip organisasinya.
Gambar 7. Tampilan Humburger Menu Pilihan Sekretariat Website Agenda Mikael .
Gambar  7  menampilkan  alamat  dari  sekretariat paroki kabar mikael yang bisa atau dapat di kunjungi oleh jemaat.
Gambar 8. Tampilan Humburger Menu Pilihan Agenda Paroki Website Agenda Mikael .
Gambar    8  menampilkan  tampilan  hamburge kemudia  di  dalamnya  terdapat  menu  menu  pilihan agenda kegiatan paroke pada website agenda mikail.
Gambar 9. Footer Website Agenda Mikael .
Gambar  9  adalah  tampilan  dari  footer  website agenda  mikael  yang  menampilkan  alamat  gereja mikael,  kabar  seksi,  kabar  wilayah  dan  pelayanan sekretarial ST. mikael.
Gambar 10. Tampilan Berita kegiatan agenda mikael
Gambar  10  adalah  tampilan  isi  dari  berita kegiatan yang telah di laksanakan di ST. mikael yang akan  di  baca  oleh  khususnya  jemaat  maupun  banyak orang.

## 4.9. Testing
Setelah tampilan website agenda Mikael, selesai kemudian  melakukan testing . Testing adalah  proses design  thinking yang  terakhir. Usability juga diperoleh dari sistem pengujian. Teknik pengujiannya adalah SUS ( System Usability Scale ). Semua populasi yang terkait dalam penyelesaian survei akan memiliki kesempatan untuk menjadi responden serta penganalisis  untuk  menyelesaikan  survei  selama sistem  pengujian. Simple  Random  Sampling akan menjadi teknik pilihan penganalisa. Karena populasinya  sama,  maka  masing-masing  penguji  ini akan mewakili populasinya adalah proses perhitungan SUS  ( System  Usabillity  Scale ) testing website yang akan ditampilkan dalam tabel berikut
Tabel 3. Hasil Pengujian Website Agenda Mikael R P1  P2 P3 P4 P5 P6 P7 P8 P9 P10 R1 3 2 1 2 2 2 3 3 3 1 R2 2 2 3 4 4 1 4 1 4 0 R3 2 1 3 3 2 2 2 0 3 1 R4 1 2 3 3 2 1 4 1 2 1 R5 4 0 4 2 4 0 4 0 4 0
Dari  tabel  IV.  3,    R1  merupakan  responden pertama  dampai  dengan  R10  yang  berarti  responden ke  sepuluh,  P1,  P2,  P3..  dsr  adalah  Pertanayaan pertama  sampai  dengan  pertanyaan  ke  sepuluh, sedangkan  angka  0  adalah  sangat  tidak  setuju,  1 merupakan  tidak  setuju,  2  :    netral,  3  :    setuju,  4: sangat setuju.
Tabel 4. Hasil Pengujian Website Agenda Mikael R  P11  P12  P13  P14  P15  P16  P17  P18  P19  P20 R1  3 2 1 2 2 2 3 3 3 1 R2  2 2 3 4 4 1 4 1 4 0 R3  2 1 3 3 2 2 2 0 3 1 R4  1 2 3 3 2 1 4 1 2 1 R5  4 0 4 2 4 0 4 0 4 0
Dari  tabel  IV.  3,    R1  merupakan  responden pertama  dampai  dengan  R10  yang  berarti  responden ke  sepuluh,  P11,  P12,  P13..  dsr  adalah  Pertanayaan kesebelas    sampai  dengan  pertanyaan  ke  dua  puluh, sedangkan  angka  0  adalah  sangat  tidak  setuju,  1 merupakan  tidak  setuju,  2  :    netral,  3  :    setuju,  4: sangat setuju.
Tabel 5. Hasil Pengujian Website Agenda Mikael Final. R Jumlah Nilai Nilai SUS R1 41 51,25 R2 50 62,5 R3 42 52,5 R4 44 55 R5 50 50 Total 57
Dilihat  berdasarkan  Tabel  IV.5  hasil  dari pengujian  website  agenda  mikael  menghasilkan  SUS ( System Usabillity Scale ) diatas  setelah di jumlahkan Responden  pertama  mendapatkan  jumlah  nilai  41 dengan nilai sus 51,25, responden kedua mendapatkan  jumlah  nilai  50  dengan  nilai  sus  62,5, responden ke 3 mendapatkan nilai 42 dengan nilai sus 52,5, responden ke 4 mendapatkan jumlah 44 dengan nilai  sus  55dan  responden  5  mendapatkan  nilai  50 dengan nilai sus 50, setelah di total  tampilan website Agenda Mikael mendapatkan nilai SUS sebesar 57

## 5. KESIMPULAN DAN SARAN
Berdasarkan  penelitian  yang  telah  dilakukan meng  hasilkan  bahwa  situs informasi  agenda  Mikael masing-masing  mendapatkan  nilai  55  dan  57.  Nilai tersebut  menagalami  peningkatan  dan  indikator penilaian Acceptabillity  Ratings , Adjective  Ratings dan  Grade  Scale tidak  mengalami  perubahan,  yang masing-masing  menghasilkan  kategori  Marginal predikat Awful , dan rating E.
Diharapkan  untuk  penelitian  berikutnya  agar dapat  menyeragamkan  warna website,  Humburger Menu akan  ditambahkan  menu  media  sosial, Mengurangi kesan overcrowded dengan cara merapihkan Homepage, menu menu Kalender Liturgi
Informasi  Lowongan  Kerja,  Daftar  Pengunjung Website,  Pasang  Iklan  dan  sebagainya  akan dipindahkan  dari  luar  Agenda  Terbaru  ke  samping kanan  Agenda  Terbaru,  Footer  dirapihkan  seperti didalam  Agenda  Seksi  dan  Agenda  Wilayah  yang terdapat submenu akan diurutkan, menu media sosial akan  ditambahkan  beserta  Ikuti  media  sosial  Paroki yang berada diluar menu Media Sosial

## DAFTAR PUSTAKA
[1]  M.  Chrisylla,  “Architectural  Design  Symbolism Catholic  Church  of  Saint  Peter  and  The  Virgin Mary  Catholic  Church  Santa  Grief  Seven  in Bandung,” ARTEKS  J. Tek. Arsit. , vol. 1, no. 1, pp. 1–14, 2019, doi: 10.30822/arteks.v1i1.20.
[2]  R. Saptya, M. Permana, and A. Abdullah, “Surat Agenda  dan  Perkembangan  Teknologi:  Sebuah Tinjauan  Komunikatif,” J.  Ilmu  Polit.  dan Komun. , vol. 10, no. 1, pp. 1–23, 2020.
[3]  K.  V.  Vlasenko et  al. ,  “UI/UX  design  of educational  on-line  courses,” CEUR  Workshop Proc. ,  vol.  3085,  pp.  184–199,  2022,  doi: 10.55056/cte.114.
[4]  A.  Al-Hunaiyyan,  R.  Alhajri,  B.  Alghannam, and A. Al-Shaher, “Student Information System: Investigating  User  Experience  (UX),” Int.  J. Adv. Comput. Sci. Appl. , vol. 12, no. 2, pp. 80– 87, 2021, doi: 10.14569/IJACSA.2021.0120210.
[5]  T.  Sharma  and  S.  L.  Aarthy,  “An  automatic attendance  monitoring  system  using  RFID  and IOT using Cloud,” Proc. 2016 Online Int. Conf. Green  Eng.  Technol.  IC-GET  2016 ,  pp.  1–4, 2017, doi: 10.1109/GET.2016.7916851.
[6]  A.  Singh,  S.  Meshram,  T.  Gujar,  and  P.  R. Wankhede,  “Baggage  tracing  and  handling system  using  RFID  and  IoT  for  airports,” Int. Conf. Comput. Anal. Secur. Trends, CAST 2016 , pp. 466–470, 2017, doi:
10.1109/CAST.2016.7915014.
[7]  H.  Himawan  and  M.  Yanu, Interface  User Experience ,  Pertama.  Yogyakarta:  Lembaga Penelitian  dan  Pengabdian  kepada  Masyarakat UPN Veteran Yogyakarta, 2020.
[8]  R.  Auliazmi,  G.  Rudiyanto,  and  R.  D.  W. Utomo,  “Kajian  Estetika  Visual  Interface  Dan User  Experience  Pada  Aplikasi  Ruangguru Aesthetic  Studies  of  Visual  Interface  and  User Experience  of  the  Ruangguru  Application,” J. Seni  dan  Reka  Ranc.  J.  Ilm.  Magister  Desain ,
vol.  4,  no.  1,  pp.  21–36,  2021,  doi: 10.25105/jsrr.v4i1.9968.
[9]  F.  Nurliana,  G.  Hanifati,  and  F.  Ali,  “Analisis User  Experience  terhadap  User  Interface Website  dengan  Design  Thinking,” Magenta  | Off.  J.  STMK  Trisakti ,  vol.  6,  no.  02,  pp.  971– 991, 2022, doi: 10.61344/magenta.v6i02.90.
[10]  A.  E.  Ifurnholic et  al. ,  “Analisis  Perbandingan
User Flow Dari Aplikasi E-Catalogue
Ifurnholic,” J.  DKV  Adiwarna ,  vol.  1,  no.  18, 2021.
[11]  M.  S.  Hartawan,  “Penerapan  User  Centered Design  (Ucd)  Pada  Wireframe  Desain  User Interface  Dan  User  Experience Aplikasi Sinopsis  Film,” Jeis  J.  Elektro  Dan  Inform. Swadharma , vol. 2, no. 1, pp. 43–47, 2022, doi: 10.56486/jeis.vol2no1.161.
[12]  M.  Ronaldo  and  D.  Pasha,  “Sistem  Informasi Pengelolaan  Data  Santri  Pondok  Pesantren  an- Ahl  Berbasis  Website,” Telefortech ,  vol.  2,  no. 1, pp. 17–20, 2021.
[13]  M.  A.  Muhyidin,  M.  A.  Sulhan,  and  A. Sevtiana, “Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan  Aplikasi  Figma,” J.  Digit ,  vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.
[14]  S.  AMRI,  “Pengaruh  Penempatan  dan  Beban Kerja  Terhadap  Motivasi  Kerja  Pegawai  pada Kantor Dinas Pengairan Provinsi Aceh,” JEMSI (Jurnal  Ekon.  Manajemen,  dan  Akuntansi) ,  vol.
6, no. 1, pp. 23–31, 2020, doi: 10.35870/jemsi.v6i1.335.
[15]  D.  Ariska  and  S.  Nurlela,  “Analisis  Dan Perancangan UI/UX Aplikasi Lazada Menggunakan  Metode  Design  Thinking,” J. Infortech , vol. 4, no. 2, pp. 86–91, 2022.
[16]  I. A. A. Idawati and I. G. S. Pratama, “Pengaruh Literasi  Keuangan  Terhadap  Kinerja  dan Keberlangsungan  UMKM  di  Kota  Denpasar,” Warmadewa  Manag.  Bus.  J. ,  vol.  2,  no.  1,  pp. 1–9, 2020, doi: 10.22225/wmbj.2.1.1644.1-9.
[17]  B.  Permata  Sari,  D.  Rimbano,  B.  Marselino,  C. Aprilia Sandy, and R. Ria Hairum, “Determinasi Literasi  Keuangan  dan  Inklusi  Keuangan Terhadap  Kinerja  dan  Keberlangsungan  Usaha UMKM,” Owner , vol. 6,  no.  3, pp. 2865–2874, 2022, doi: 10.33395/owner.v6i3.928.