Redesign Website Informasi Publik (PPID)
Optimalisasi antarmuka sistem informasi publik dengan merombak struktur navigasi, menyegarkan skema warna visual, dan mengintegrasikan fitur inklusif agar informasi lebih mudah diakses oleh seluruh lapisan masyarakat.
Peta Jalan Redesign (Roadmap)
Pendekatan sistematis dalam mengoptimalkan tata letak dan pengalaman pengguna tanpa mengorbankan fungsionalitas tema utama institusi.
Audit UX & Visual
Melakukan evaluasi menyeluruh terhadap arsitektur informasi, kontras warna, dan pola navigasi pengunjung untuk menemukan titik masalah utama pada tema Astra yang lama.
Restrukturisasi Navigasi
Merombak hierarki sitemap dan menu dropdown agar dokumen publik yang paling sering dicari masyarakat dapat diakses maksimal dalam 3 kali klik pengarahan.
Penerapan UI Modern
Memodernisasi komponen visual, tata letak grid, dan mengganti palet warna menggunakan alat pembuat halaman visual (Elementor & Essential Addons).
Injeksi Inklusivitas
Menyematkan pustaka skrip aksesibilitas khusus agar website memenuhi standar pedoman pelayanan publik dan ramah bagi penyandang disabilitas visual.
Sorotan Proses Pengembangan
Penyesuaian Kerangka Tema Astra
Tahap awal optimalisasi dilakukan melalui Customizer tema Astra. Saya membenahi manajemen palet warna global agar sejalan dengan citra layanan PPID, mengatur ulang tipografi agar memiliki tingkat keterbacaan (readability) yang tinggi, serta memangkas fitur bawaan yang tidak terpakai agar beban muat situs tetap ringan dan cepat.
Perakitan Visual via Elementor
Halaman beranda dan area layanan utama dirancang ulang menggunakan pembuat halaman Elementor. Saya menyusun struktur kolom informasi layanan, tombol unduh dokumen, dan tata letak pengumuman agar tampil modern, bersih, serta secara otomatis beradaptasi dengan baik saat diakses melalui perangkat ponsel pintar (mobile-responsive).
Peran Saya
UI/UX & Web Developer
Platform
Portal Informasi (CMS)
Instansi
BPMP DIY
Fokus Utama
Hierarki, UI & Inklusivitas
01 Latar Belakang & Tantangan Tampilan Lama
Meskipun website PPID sebelumnya sudah berjalan menggunakan ekosistem tema WordPress, eksekusi desainnya dinilai masih kaku, monoton, dan kurang memandu arah baca pengunjung. Tantangan terbesarnya terletak pada struktur navigasi menu utama yang terlalu menumpuk, sehingga menyulitkan masyarakat (publik) dalam mencari dan mengunduh dokumen regulasi atau informasi layanan yang krusial.
02 Solusi Navigasi & Pembaruan Psikologi Warna
Alih-alih membebani peladen dengan mengganti tema secara keseluruhan, pendekatan teknis yang saya lakukan adalah mengoptimalkan basis sistem yang ada melalui perombakan tata letak (Layouting) secara komprehensif. Langkah strategis tersebut meliputi:
- Mendesain ulang Information Architecture agar pengelompokan tombol dan tautan antar-halaman jauh lebih intuitif dan logis.
- Melakukan penyesuaian skema warna (Color Palette) secara global, memadukan warna profesional khas pemerintahan dengan nuansa yang lebih bersih, terang, dan tidak melelahkan mata.
03 Implementasi Builder & Optimalisasi Komponen
Proses penerjemahan desain ke dalam kode antarmuka dieksekusi secara presisi menggunakan kombinasi perkakas tata letak tingkat lanjut. Dengan memanfaatkan komponen dinamis Elementor dan Essential Addons, saya berhasil mengubah blok-blok halaman teks yang tadinya padat dan membosankan menjadi elemen antarmuka grafis yang interaktif, memiliki transisi halus, dan tertata rapi secara berjenjang.
04 Fokus pada Aksesibilitas Publik (Standar WCAG)
Sebagai portal layanan pemerintah resmi, inklusivitas (kesetaraan akses) adalah sebuah keharusan mutlak. Pada tahap akhir pengembangan, saya mengintegrasikan modul aksesibilitas secara penuh. Fitur ini memungkinkan pengguna dari berbagai kalangan, termasuk kelompok difabel atau mereka yang memiliki keterbatasan visual, untuk mengubah tingkat kontras warna, membesarkan ukuran fon, hingga mengaktifkan sorotan baris baca sesuai kebutuhan personal mereka.
Tech Stack & Tools
- Tema: Astra (Optimasi)
- Builder: Elementor Pro
- UI Kit: Essential Addons
- Utility: Panel Aksesibilitas
Pemenuhan Standar Kompetensi SKKNI (Uji Kelayakan)
J.620100.005.01
Mengimplementasikan User Interface
- Mengidentifikasi dan merombak struktur tata letak (layout) desain menu sebelumnya yang dinilai menghambat alur interaksi pengguna (User Journey).
- Menyusun ulang bentuk style grafis antarmuka dengan mengaplikasikan prinsip tipografi dan skema warna yang lebih konsisten, modern, serta mendukung tingkat keterbacaan yang tinggi.
J.620100.019.002
Menggunakan Library / Komponen Pre-Existing
- Menerapkan integrasi komponen fungsional pihak ketiga (Pre-Existing Library) ke dalam ruang kerja desain tanpa harus merusak inti dari rancangan sistem dasar.
- Memaksimalkan efisiensi waktu pengerjaan dengan memanfaatkan ulang (reuse) blok struktur komponen widget eksternal untuk memperkaya fitur visual secara aman.
J.620100.016.01
Penulisan Kode Sesuai Guidelines & Best Practices
- Memastikan setiap modifikasi desain bersifat sangat responsif (menyesuaikan bentuk otomatis) pada layar komputer desktop, tablet, maupun layar ponsel (Mobile-First Approach).
- Mengoptimalkan implementasi skrip desain tambahan (Custom CSS) sedemikian rupa sehingga ukuran beban halaman (Page Load Size) tetap ringan dan tidak memperlambat kinerja server.
J.620100.025.02
Pencegahan Konflik & Penanganan Galat
- Mengisolasi ruang kerja desain secara hati-hati agar penambahan modul aksesibilitas pihak ketiga tidak menimbulkan bentrokan kode (conflict script) pada fungsi situs web utama.
- Melakukan pemeriksaan dan uji coba menyeluruh pada berbagai jenis peramban (Cross-Browser Testing) untuk memastikan tata letak dan fungsionalitas tombol tidak mengalami galat.
Ingin membuat proyek serupa?
Mari bicarakan bagaimana saya bisa membantu mentransformasi ide Anda menjadi antarmuka digital yang inklusif, modern, dan berdampak nyata bagi penggunanya.
Mari Berkolaborasi