PERANCANGAN UI/UX SISTEM INFORMASI BERBASIS WEBSITE PADA IKPM GONTOR CABANG DEPOK

Ikatan Keluarga Pondok-pondok Modern (IKPM) Gontor Cabang Depok
merupakan organisasi alumni yang memiliki kebutuhan akan sistem informasi
berbasis website yang efektif sebagai sarana komunikasi dan representasi digital
lembaga. Berdasarkan observasi awal pada website yang ada dan wawancara
dengan pengurus lembaga, ditemukan permasalahan utama berupa lemahnya
struktur navigasi dan arsitektur informasi yang menyulitkan pengguna dalam
mengakses informasi penting. Perancangan ini bertujuan merancang prototipe
vi
UI/UX sistem informasi berbasis website pada IKPM Gontor Cabang Depok
melalui pendekatan User-Centered Design (UCD). Metodologi UCD diterapkan
dalam lima tahapan kerja: pemahaman pengguna (understand), perumusan
kebutuhan (specify), perancangan solusi (design), evaluasi (evaluate), dan iterasi
(iterate). Perancangan dilakukan sepenuhnya menggunakan perangkat lunak Figma
dengan luaran berupa wireframe, high-fidelity mockup, dan interactive prototype
yang dilengkapi animasi transisi dan elemen visual dinamis (eye-catching) pada
tampilan dekstop. Cakupan perancangan meliputi halaman inti sistem informasi,
sistem login dan dashboard berbasis peran (role-based access) untuk lima kategori
pengguna (alumni, wali santri, santri, pengurus, dan admin) yang mencakup fitur
sistem informasi akademik yang dapat diakses sesuai peran masing-masing
pengguna, serta halaman fitur pendukung. Hasil perancangan dievaluasi melalui
sesi review bersama pemangku kepentingan lembaga, sehingga prototipe yang
dihasilkan dapat menjadi acuan visual dan fungsional bagi pengembangan website
IKPM Gontor Cabang Depok yang lebih profesional, informatif, dan berpusat pada
kebutuhan pengguna.

Ikatan Keluarga Pondok-pondok Modern (IKPM) Gontor Depok Branch is an
alumni organization that requires an effective website-based information system as
a means of communication and digital representation of the institution. Based on
initial observation of the existing website and interviews with the institution's
management, the main issue identified was the weak navigation structure and
information architecture, which hindered users from accessing essential
information. This design research aims to develop a UI/UX prototype of a website
based information system for IKPM Gontor Depok Branch through the User
Centered Design (UCD) approach. The UCD methodology was implemented in five
working stages understanding the user context (understand), specifying user
requirements (specify), producing design solutions (design), evaluating against
requirements (evaluate), and iterating (iterate). The design process was carried out
entirely using Figma software, producing three main outputs: a wireframe, a high
fidelity mockup, and an interactive prototype equipped with transition animations
and dynamic visual elements (eye-catching) for dekstop display. The scope of the
design covers core information system pages, a role-based access login and
dashboard system for five user categories (alumni, students' parents, students,
officers, and system administrators) that includes an academic information feature
accessible based on each user's role, and supporting feature pages. The design
results were reviewed through evaluation sessions with institutional stakeholders,
ensuring that the resulting prototype can serve as a visual and functional reference
for the development of a more professional, informative, and user-centered IKPM
Gontor Depok Branch website.