Kembali ke Karya

HALO MASBUP

Redesign Sistem Layanan Aspirasi Masyarakat Kabupaten Kediri. Tiga halaman terpisah dirapikan jadi satu landing page, supaya warga bisa melapor dan mengecek status aspirasi tanpa berpindah halaman.

Klien
Pemerintah Kabupaten Kediri
Bidang
Layanan publik
Platform
Website
Lingkup
Audit alur · Wireframe · UI · Handoff

Dua kali pindah halaman sebelum bisa melapor.

Dari landing page, warga dibawa ke halaman portal, lalu ke halaman baru lagi untuk setiap jenis laporan. Formulir minyak goreng dan laporan kejadian berdiri sendiri, dan pantau laporan ada di tempat lain.

One Page LandingHalaman baruPortal InformationHalaman baru
Laporan Minyak GorengLaporan KejadianPantau Laporan

Satu halaman, semua aksi.

Semua dipindah ke satu landing page. Formulir minyak goreng dan kejadian digabung jadi satu, dibedakan lewat tipe laporan, dan cek status ada di tab yang sama.

One Page LandingGabung semuaSatu formulir dengan tipe laporan + cek status
CATATAN DESAIN

Setiap keputusan ditulis langsung di wireframe.

  1. 01
    Hero

    Tombol utama diberi aksi yang lebih jelas dan tidak ambigu.

  2. 02
    Tentang

    About dan tujuan digabung jadi satu paragraf, ditambah dua poin dengan ikon supaya lebih menarik.

  3. 03
    Tab layanan

    Setiap tab punya fungsi berbeda sesuai kebutuhan warga: cek status, lapor lewat website, atau lewat WhatsApp.

  4. 04
    Laporan website

    Lokasi diminta otomatis saat tab laporan dibuka, jadi warga tidak perlu mengetik alamat dari nol.

  5. 05
    Alur

    Alur pengaduan ditampilkan utuh tanpa perlu diklik, jadi lebih enak dibaca.

  6. 06
    Penghitung

    Jumlah laporan ditampilkan untuk menunjukkan bahwa layanan ini aktif dipakai.

  7. 07
    Footer

    Footer dibuat lebih bersih dan informatif, tanpa aksi yang berulang.

Merah Kediri, dipakai seperlunya.

Merah hanya untuk aksi utama, tab aktif, dan penanda. Sisanya putih dan abu-abu supaya formulir dan tabel status mudah dibaca.

HALO MASBUP homepage
Arahkan kursor untuk menggulir halamanGeser di dalam bingkai untuk menggulir
PALET

Status yang langsung terbaca.

Setiap status aspirasi punya warna sendiri, dari diproses sampai selesai. Hero dan tab layanan juga disiapkan sebagai komponen dengan beberapa varian.

Badge status
Varian hero
State tab layanan

Didokumentasikan sampai kasus gagal.

Developer menerima alur lengkap: pelaporan, cek status, dan negative case seperti formulir yang belum lengkap atau aspirasi yang tidak ditemukan.

01Alur pelaporan aspirasi
02Cek status aspirasi
03Negative case: pelaporan
04Negative case: cek status
05Aspirasi tidak ditemukan
  • 01Audit alur lama & konsep baru
  • 02Wireframe dengan catatan desain
  • 03UI desktop homepage
  • 04Komponen: navigasi, hero, info, tab layanan, badge status
  • 05Dokumentasi alur & negative case untuk developer

Bisnis Anda perlu dirapikan seperti ini?