Perancangan UI/UX Website PDM Kebumen dengan  Metode User Centered Design (UCD)

Muhammad Haedar Zhafran Hidayatullah; David Fitrianto; Muhamad Rosidin; Muhammad Fauzan Gustafi; Khairina Eka Setyaputri

doi:10.33506/insect.v12i01.5500

Authors

Muhammad Haedar Zhafran Hidayatullah Program Studi PJJ Sistem Informasi, Universitas Siber Muhammadiyah
David Fitrianto Program Studi PJJ Sistem Informasi, Universitas Siber Muhammadiyah
Muhamad Rosidin Program Studi PJJ Sistem Informasi, Universitas Siber Muhammadiyah
Muhammad Fauzan Gustafi Program Studi PJJ Sistem Informasi, Universitas Siber Muhammadiyah
Khairina Eka Setyaputri Program Studi PJJ Sistem Informasi, Universitas Siber Muhammadiyah

DOI:

https://doi.org/10.33506/insect.v12i01.5500

Keywords:

Bootstrap, Muhammadiyah, UCD, UI/UX

Abstract

Pimpinan Daerah Muhammadiyah (PDM) Kebumen merupakan organisasi kemasyarakatan yang memiliki jangkauan dengan basis warga yang luas. Penyebaran informasi saat ini bersifat sangat fragmentaris, sehingga warga sering mengalami kesulitan dalam megkases informasi secara terpadu. Penelitian ini bertujuan untuk merancang antarmuka (User Interface) dan pengalaman pengguna (User Experience) pada website PDM Kebumen yang inklusif dan responsif. Metode yang digunakan adalah User Centered Design (UCD), pendekatan yang menempatkan kebutuhan warga Muhammadiyah sebagai pusat dari proses perancangan melalui empat tahapan utama: understand context of use, specify user requirements, design solutions, dan evaluate against requirements. Perancangan ini juga mengintegrasikan pedoman identitas visual resmi Muhammadiyah, seperti penggunaan tone warna hijau biru khas organisasi, untuk membangun kredibilitas dan pengenalan instan bagi pengguna. Implementasi teknis dilakukan menggunakan framework Bootstrap guna memastikan fleksibilitas dan responsivitas desain pada berbagai perangkat komunikasi. Hasil penelitian berupa prototipe website yang divalidasi menggunakan metode System Usability Scale (SUS) untuk mengukur tingkat efektivitas dan kepuasan pengguna. Hasil akhir pengujian menunjukkan rata-rata skor 4,26 dengan skala 1-5. Penerapan metode UCD dan framework Bootstrap berhasil menciptakan media informasi yang tidak hanya selaras dengan nilai-nilai visual organisasi, tetapi juga mudah digunakan oleh warga Muhammadiyah dengan berbagai tingkat literasi digital.

References

[1] Fyroza Mustika Akhlis, “Ideologi Muhammadiyah,” J. Manaj. dan Pendidik. Agama Islam, vol. 2, no. 5, pp. 43–48, 2024, doi: 10.61132/jmpai.v2i5.483.

[2] N. Nasikhin, R. Raaharjo, and N. Nasikhin, “Moderasi Beragama Nahdlatul Ulama dan Muhammadiyah dalam Konsep Islam Nusantara dan Islam Berkemajuan,” Islam. Rev. J. Ris. dan Kaji. Keislam., vol. 11, no. 1, pp. 19–34, 2022, doi: 10.35878/islamicreview.v11i1.371.

[3] S. Ramadhan, Y. Kusumawati, and H. Hermansyah, “Penguatan Gerakan Dakwah Muhammadiyah Melalui Program Pendampingan Partisipatif Di Tingkat Ranting Muhammadiyah Desa Kananga,” Taroa J. Pengabdi. Masy., vol. 3, no. 1, pp. 50–63, 2024, doi: 10.52266/taroa.v3i1.2552.

[4] M. Yunus, J. Jarab, U. Islam, N. Imam, and B. Padang, “Jurnal Manajemen dan Keberlanjutan Jurnal Manajemen dan Keberlanjutan,” vol. 6, no. 4, pp. 1–18, 2025.

[5] P. P. Muhammadiyah, “Risalah Islam Berkemajuan Muhammadiyah 2022,” p. 93, 2023.

[6] A. Prayogi and A. D. Saputro, “Majalah Suara Muhammadiyah sebagai Amal Usaha dalam Mendukung Dakwah Islam di Era Modern: Satu Kajian Deskriptif,” J. Multidisiplin Ilmu Akad., vol. 2, no. 1, pp. 663–673, 2025, [Online]. Available: https://doi.org/10.61722/jmia.

[7] M. Islahuddin, R. Romelah, and M. Nurhakim, “Moderasi Muhammadiyah Dalam Bingkai Dakwah Kultural,” Tamaddun, vol. 24, no. 1, p. 006, 2023, doi: 10.30587/tamaddun.v24i1.5887.

[8] Hasan, “Muhammadiyah dan Tantangan Dakwah di Era Digital,” Tanwir.id, no. 3, 2021, [Online]. Available: https://tanwir.id/muhammadiyah-dan-tantangan-dakwah-di-era-digital/

[9] M. H. Z. Hidayatullah, “Faktor-Faktor yang Mempengaruhi User Experience Aplikasi Mobile Banking,” 2023.

[10] M. Makhful, H. C. Pratama, A. Y. Badharudin, and A. A. Azhar, “Pendampingan Pengembangan Website Informasi Pesantren Muhammadiyah Banyumas sebagai Media Dakwah Menuju Pesantren Berkemajuan,” PengabdianMu J. Ilm. Pengabdi. Kpd. Masy., vol. 10, no. 11, pp. 2361–2372, 2025, doi: 10.33084/pengabdianmu.v10i11.10443.

[11] H. Apias Risky, D. Irmayanti, and M. Hafid Totohendarto, “Redesign Ui/Ux Aplikasi Mobile My Pertamina Menggunakan Metode User Centered Design (Ucd),” JATI (Jurnal Mhs. Tek. Inform., vol. 7, no. 3, pp. 1823–1829, 2023, doi: 10.36040/jati.v7i3.6965.

[12] E. N. Sulastri, D. Satria, Y. Kartika, A. Rezha, and E. Najaf, “Penerapan Metode User Centered Design Pada Desain Ui / Ux Aplikasi,” JJITET (urnal Inform. dan Tek. Elektro Ter., vol. 12, no. 3, pp. 2201–2209, 2024, [Online]. Available: https://journal.eng.unila.ac.id/index.php/jitet/article/view/4702

[13] M. S. Hartawan, “Desain User Interface Dan User Experience,” J. Elektro Inform., vol. 02, pp. 43–47, 2022.

[14] Abyan Haidar Luthfi and Ika Arfiani, “Perancangan UI/UX Aplikasi Sampahocity Menggunakan Pendekatan UCD (User Centered Design),” J. Ilmu Komput. dan Sist. Inf., vol. 7, no. 1, pp. 24–36, 2024.

[15] Widya Silviana, Elfitra, and Heru Kurniawan, “Perancangan Desain UI/UX Aplikasi Penjualan Batik Berbasis Website Pada Toko Batik Jambi Ariny Menggunakan Metode User Centered Design (UCD),” J. Komput. Teknol. Inf. Sist. Inf., vol. 4, no. 2, pp. 687–698, 2025, doi: 10.62712/juktisi.v4i2.486.

[16] Y. T. Yanutiar and D. A. Prabowo, “Perancangan Desain UI/UX Aplikasi Mobile Antrean Online Menggunakan Metode UCD (Studi Kasus: BAPENDA Kabupaten Pemalang),” JIKO (Jurnal Inform. dan Komputer), vol. 8, no. 1, p. 12, 2024, doi: 10.26798/jiko.v8i1.954.

[17] A. F. S. Basyar, M. Arifin, and D. L. Fithri, “Optimalisasi Sistem Penjualan E-Commerce dengan User-Centered Design di Pepito Kudus,” Sist. J. Sist. Inf., vol. Volume 14, pp. 801–812, 2025, [Online]. Available: http://sistemasi.ftik.unisi.ac.id

[18] A. A. Alatas and S. Kusumadewi, “Desain Ulang Website Lumiere Menggunakan Metode User Centered Design (UCD),” J. Sains, Nalar, dan Apl. Teknol. Inf., vol. 4, no. 2, pp. 173–181, 2025, doi: 10.20885/snati.v4.i2.40640.