CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal PERANCANGAN UIUX SISTEM PENGADUAN MASYARAKAT
PADA DINAS KEPENDUDUKAN DAN PENCATATAN
SIPIL KOTA CIMAHI DENGAN METODE
DESIGN THINKING
Rafiqa Nurul Septieni1.
Henny Alfianti2 Politeknik TEDC Bandung.
Indonesia Corresponding e-mail: rnseptieni@gmail.
Copyright A 2025 The Author This is an open access article Under the Creative Commons Attribution Share Alike 4.
0 International License DOI: 10.
53866/jimi.
Abstract This study discusses the design of a UI/UX Complaint Management System for the Department of Population and Civil Registration (Disdukcapi.
of Cimahi City using the Design Thinking method.
The background of this research arises from the need for more effective, interactive, and accessible public services.
The design was carried out using Figma, resulting in interfaces for both citizens .
ashboard, complaint form, complaint status, and message replie.
and officers .
ashboard, inbox, and message replie.
The evaluation employed UX Metrics, including success rate, time on task, and the System Usability Scale (SUS).
The results show a 100% task completion rate, an average task completion time of 18.
7 seconds for citizens and 7.
7 seconds for officers, and a SUS score of 86.
25%, categorized as excellent.
These findings indicate that the proposed UI/UX design effectively supports citizens in submitting complaints and assists officers in managing services Keywords: UI/UX.
Complaint Management System.
Design Thinking.
UX Metrics Abstrak Penelitian ini membahas perancangan UI/UX Sistem Pengaduan Masyarakat pada Dinas Kependudukan dan Pencatatan Sipil Kota Cimahi dengan metode Design Thinking.
Latar belakang penelitian ini berangkat dari kebutuhan pelayanan publik yang lebih efektif, interaktif, dan mudah diakses masyarakat.
Perancangan dilakukan menggunakan Figma dengan menghasilkan desain pada sisi masyarakat .
ashboard, formulir, status pengaduan, balasan pesa.
dan sisi petugas .
ashboard, pesan masuk, balasan pesa.
Pengujian dilakukan menggunakan UX Metrics meliputi success rate, time on task, dan System Usability Scale (SUS).
Hasilnya menunjukkan tingkat keberhasilan tugas 100%, rata-rata waktu penyelesaian 18,7 detik untuk masyarakat dan 7,7 detik untuk petugas, serta nilai SUS 86,25% yang termasuk kategori sangat baik.
Berdasarkan hasil tersebut, desain UI/UX yang dibuat terbukti efektif dalam mempermudah masyarakat menyampaikan pengaduan serta mendukung petugas dalam mengelola layanan.
Kata Kunci: UI/UX.
Sistem Pengaduan Masyarakat.
Design Thinking.
UX Metrics.
Hlm | 1115 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Pendahuluan Dinas Kependudukan dan Pencatatan Sipil (Disdukcapi.
Kota Cimahi merupakan instansi yang bertanggungjawab dalam memberikan pelayanan publik, termasuk pengelolaan pengaduan masyarakat.
Berdasarkan Peraturan Presiden Republik Indonesia Nomor 76 Tahun 2013, pengaduan masyarakat merupakan bentuk partisipasi aktif warga yang harus dikelola secara cepat, tepat, dan transparan.
Namun, di Disdukcapil Kota Cimahi, pengaduan masih ditangani melalui email Roundcube yang terbukti kurang efektif karena menyulitkan pelacakan status, dokumentasi, serta penyusunan laporan, terlebih ketika jumlah pesan harian dapat mencapai lebih dari 100.
Kondisi ini menimbulkan ketidakteraturan dan berpotensi menghambat kualitas pelayanan.
Meskipun konsep UI/UX telah banyak diterapkan dalam sistem digital, penelitian yang fokus pada perancangan antarmuka dan pengalaman pengguna di layanan pengaduan pemerintah daerah masih terbatas.
Santoso .
menegaskan bahwa penerapan prinsip usability dalam desain UI/UX menggunakan Figma mampu meningkatkan konsistensi, kesederhanaan, dan keterlihatan informasi.
Namun, studi semacam ini belum banyak diadopsi pada konteks layanan publik pemerintah, khususnya sistem pengaduan masyarakat.
Celah penelitian ini penting diisi dengan pendekatan yang berorientasi pada kebutuhan pengguna.
Penelitian ini bertujuan untuk: .
merancang UI/UX sistem pengaduan masyarakat agar lebih terstruktur dan efisien, serta .
menerapkan metode Design Thinking dalam proses perancangan berbasis kebutuhan Hasil penelitian diharapkan dapat meningkatkan kualitas layanan publik di Disdukcapil Kota Cimahi serta memberikan kontribusi akademis mengenai penerapan Design Thinking pada perancangan sistem pelayanan pemerintahan.
Metode Penelitian Penelitian ini menggunakan metode Design Thinking sebagai kerangka perancangan UI/UX.
Metode ini dipilih karena mampu memberikan solusi yang berfokus pada kebutuhan pengguna melalui lima tahapan utama, yaitu empathize, define, ideate, prototype, dan test.
Pendekatan ini terbukti efektif dalam penelitian sebelumnya yang dilakukan oleh Ahmad dan Nugroho .
Hasil dan Pembahasan Penerapan metode design thinking dalam penelitian ini menghasilkan rancangan desain dan prototipe sistem pengaduan masyarakat.
Implementasinya dijelaskan sebagai berikut:
Rancangan Desain UI/UX Sisi Masyarakat Wireframe dirancang sederhana dan jelas agar masyarakat mudah memahami alur penggunaan serta mengakses layanan pengaduan.
Desain yang dibuat mencakup tampilan dashboard pengaduan, pemilihan kategori pengaduan, formulir pengaduan, tampilan status pengaduan yang sedang diproses, serta kolom balasan pengaduan untuk memfasilitasi komunikasi antara masyarakat dan petugas.
Gambar 1.
Tampilan Dashboard Hlm | 1116 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Gambar 2.
Tampilan Pemilihan Kategori Pengaduan Gambar 3 Tampilan Form Pengaduan Gambar 4.
Tampilan Pengaduan Status Dalam Proses Hlm | 1117 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Gambar 5.
Tampilan Kolom Balasan Pengaduan Rancangan Desain UI/UX Sisi Petugas Wireframe untuk petugas disusun secara terstruktur guna mempermudah pemantauan, verifikasi, dan balasan pengaduan sehingga proses penanganan dapat dilakukan dengan lebih cepat dan efisien.
Desain yang dihasilkan mencakup tampilan dashboard pengaduan masyarakat, menu jumlah pesan masuk, kolom balasan pengaduan, serta tampilan pemilihan tanggal untuk mengunduh laporan agar petugas dapat mengakses rekapitulasi data sesuai kebutuhan.
Gambar 6.
Tampilan Dashboard Gambar 7.
Tampilan Menu Jumlah Pesan Masuk Hlm | 1118 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Gambar 8.
Tampilan Kolom Balasan Pengaduan Hasil Implementasi Desain UI/UX Perancangan UI/UX sistem pengaduan masyarakat mengintegrasikan identitas visual Disdukcapil Kota Cimahi melalui kombinasi warna biru tua, hijau, oranye, coklat muda, dan abu tua yang merepresentasikan profesionalisme, kearifan lokal, keterbukaan, empati, serta ketegasan.
Identitas ini diperkuat dengan penggunaan ikon SiPencil sebagai maskot yang bersifat komunikatif dan mudah Desain UI/UX Sisi Masyarakat Pada sisi masyarakat, desain difokuskan pada kesederhanaan dan kemudahan navigasi sehingga warga dapat menyampaikan pengaduan, memantau status, dan menerima balasan dengan nyaman.
Gambar 9.
Desain Dashboard Hlm | 1119 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Gambar 10.
Desain Pemilihan Kategori Pengaduan Gambar 11.
Desain Form Pengaduan Gambar 12.
Desain Balasan Pesan Hlm | 1120 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Desain UI/UX Sisi Petugas Desain dirancang sederhana dan terstruktur untuk mempermudah pengelolaan pengaduan, pemberian balasan, serta pembuatan laporan secara efisien untuk sisi petugas.
Gambar 13.
Desain Dashboard Gambar 14.
Desain Jumlah Pesan Masuk Gambar 15.
Desain Balasan Pesan Hlm | 1121 das-institute.
CITIZEN: Jurnal Ilmiah Multidisiplin Indonesia Vol 5.
No.
4, 2025
ISSN: 2807-5994
https://journal.
das-institute.
com/index.
php/citizen-journal Hasil Pengujian Menggunakan UX Metrics Evaluasi rancangan desain UI/UX dilakukan dengan UX Metrics menggunakan tiga indikator, yaitu Success Rate.
Time on Task, dan System Usability Scale (SUS).
Pengujian UX Metrics yang terdiri dari tiga indikator, yaitu Success Rate.
Time on Task, dan System Usability Scale (SUS), dilakukan pada 20 partisipan yang terdiri dari 10 masyarakat umum dan 10 petugas Disdukcapil.
Seluruh partisipan berada dalam rentang usia 15Ae45 tahun.
Partisipan dari masyarakat umum mencakup pelajar, mahasiswa, dan pekerja, sedangkan partisipan petugas merupakan staf internal Disdukcapil yang berpengalaman dalam pengelolaan pelayanan Hasil pengujian Success Rate menunjukkan tingkat keberhasilan 100% pada seluruh skenario Pada pengujian Time on Task, seluruh partisipan mampu menyelesaikan tugas dengan tingkat keberhasilan 100%.
Rata-rata waktu penyelesaian tugas pada sisi masyarakat adalah 18,7 detik, sedangkan pada sisi petugas hanya 7,7 detik.
Sementara itu, pengujian System Usability Scale (SUS) menghasilkan skor rata-rata 86,25 yang termasuk dalam kategori AuSangat Baik.
Ay Hasil pengujian tersebut menunjukkan bahwa alur interaksi pada kedua sisi pengguna mudah dipahami dan mendukung kelancaran penyelesaian tugas tanpa hambatan berarti.
Rata-rata waktu penyelesaian yang relatif singkat mengindikasikan bahwa sistem mampu digunakan dengan efisien, ditunjang oleh alur yang jelas dan responsif.
Selain itu, skor SUS yang tinggi menandakan bahwa desain sistem pengaduan dinilai optimal, mudah digunakan, serta mampu memberikan pengalaman pengguna yang memuaskan, baik bagi masyarakat maupun petugas Disdukcapil.
Temuan ini sejalan dengan penelitian sebelumnya mengenai evaluasi usability website pemerintahan menggunakan SUS, yang menunjukkan bahwa nilai SUS dapat dijadikan indikator valid untuk menilai kualitas kemudahan penggunaan sistem (Sari & Hidayat, 2021.
Andini & Putra, 2.
Selanjutnya, pendekatan Design Thinking juga berkontribusi terhadap pencapaian tujuan usability seperti efektif, efisien, dan memuaskan, sebagaimana terbukti dalam penelitian perancangan UX aplikasi pembagi tagihan mobile (Pohan et al.
, 2.
Kesimpulan Penelitian ini berhasil merancang UI/UX Sistem Pengaduan Masyarakat Disdukcapil Cimahi dengan metode Design Thinking, menghasilkan desain sederhana dan konsisten untuk sisi masyarakat maupun Pengujian UX Metrics menunjukkan keberhasilan 100%, waktu interaksi yang efisien, serta skor SUS 86,25 .
ategori sangat bai.
Rancangan ini dinilai mampu memenuhi kebutuhan pengguna sekaligus memperkuat identitas visual instansi.
Bibliografi Peraturan Presiden Republik Indonesia Nomor 76 Tahun 2013 tentang Pengelolaan Pengaduan Pelayanan Publik.
Ahmad, & Nugroho.
Perancangan Ulang UI/UX dengan Figma pada Website OK OCE Indonesia Menggunakan Metode Design Thinking.
Andini.
, & Putra.
Evaluasi Usability Website Polrestabes Palembang Menggunakan System Usability Scale.
Jurnal Teknologi Informasi dan Komunikasi, 7.
, 45Ae53.
Pohan.
Kharisma.
, & Brata.
Perancangan UX Aplikasi Pembagi Tagihan Mobile dengan Design Thinking.
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer (J-PTIIK), 7.
, 5678Ae5689.
Sari.
, & Hidayat.
Evaluasi Usability Website Dinas Pendidikan Provinsi Riau Menggunakan Metode System Usability Scale (SUS).
Jurnal Ilmu Komputer, 8.
, 201Ae210.
Hlm | 1122 das-institute.