nekomade Colek neko

← Neko Pokin’ / ↻ Nº 01 · Tak resmi

Gimana kalau
SIMPEG di-revamp?

Eksplorasi desain pribadi: fitur yang sama, tampilan yang lebih ringan.

Tahun
2026
Jenis
Eksplorasi pribadi, tak resmi
Bagianku
Riset UI, wireframe, desain UI
Lingkup
5 layar jadi 7 layar
Tiga layar revamp SIMPEG di ponsel: beranda, aktivitas harian, dan presensi

01 / Tampilan saat ini · SIMPEG v5.01

Yang terlihat hanya sebatas bingkai HP.

Begini SIMPEG sebelum disentuh. Halaman ditampilkan utuh; bagian di bawah garis merah baru terlihat setelah menggulir. Banyak fitur utama ada di sana.

Batas layar HP (390 × 844) Baru terlihat setelah digulir

  • Beranda

    1,9× tinggi layar

    Layar Beranda SIMPEG versi lama, satu halaman penuh batas layar

  • Presensi

    1,5× tinggi layar

    Layar Presensi SIMPEG versi lama, satu halaman penuh batas layar

  • Aktivitas Harian

    2,0× tinggi layar

    Layar Aktivitas Harian SIMPEG versi lama, satu halaman penuh batas layar

  • Pengajuan Cuti

    1,5× tinggi layar

    Layar Pengajuan Cuti SIMPEG versi lama, satu halaman penuh batas layar

  • Riwayat Cuti

    1,2× tinggi layar

    Layar Riwayat Cuti SIMPEG versi lama, satu halaman penuh batas layar

  • Menu hamburger

    19 item · 3 kategori

    Layar Menu hamburger SIMPEG versi lama, satu halaman penuh
  1. 01Urutan informasi

    Fitur yang paling sering dipakai bisa naik ke atas.

  2. 02Panjang halaman

    Formulir dan riwayat bisa dipisah.

  3. 03Keterbacaan huruf

    Orbitron + Rajdhani sulit dibaca di ukuran kecil.

  4. 04Pilihan istilah

    Rumus teknis bisa diganti bahasa sederhana.

  5. 05Pengisian formulir

    Hitungan bisa dibantu otomatis.

Fiturnya sudah lengkap. Yang disentuh hanya penyajiannya.

  • 5 → 7layar. Satu layar, satu tujuan.
  • 5menu di tab bar bawah, gantinya hamburger.
  • 1ketuk buat presensi, langsung dari Beranda.
  • 1jenis huruf, gantinya dua.

02 / Layar demi layar

Yang penting lebih dulu.

  • 01 · Beranda

    Buka aplikasi, langsung tahu harus apa.

    • Presensi ada di paling atas.
    • Ringkasan bulan dalam satu baris.
    • Akses Cepat langsung terlihat, tanpa digulir.
    Layar Beranda versi revamp Langsung terlihat

  • 02 · Presensi

    Presensi dulu, riwayat kemudian.

    • Status lokasi langsung terlihat.
    • Rekap ringkas, kalender jelas.
    Layar Presensi versi revamp

  • 03 · Aktivitas Harian

    Daftar dan formulir tidak lagi bertumpuk.

    • Sisa menit menuju target jelas.
    • Aktivitas dikelompokkan per hari.
    Layar Aktivitas Harian versi revamp

  • 04 · Cuti

    Sisa cuti terbaca tanpa menafsirkan tabel.

    • N-2 dan N-1 jadi 2024 dan 2025.
    • Sisa, riwayat, dan ajukan di satu layar.
    Layar Cuti versi revamp

03 / Prosesnya

Empat tahap, tidak ada yang ditimpa.

  1. Tahap 1
    Desain asli

    Rekonstruksi 5 layar dari screenshot aplikasi yang ada.

    Components, 01 Beranda – 05 Riwayat Cuti
  2. Tahap 2
    Wireframe v1

    Versi mentah: hanya struktur kolom dan judul section, tanpa data.

    WF 01 – WF 05
  3. Tahap 3
    Wireframe v2

    Usulan layout baru dengan alur dan UX yang lebih baik.

    WF2 Components, WF2 01 – 07
  4. Tahap 4
    Desain UI final

    Wireframe v2 diterjemahkan jadi desain siap pakai dengan data contoh.

    UI Components, UI 01 – 07
Desain asliWireframe v2Desain UI final
01 BerandaWF2 01 BerandaUI 01 Beranda
02 PresensiWF2 02 PresensiUI 02 Presensi
03 Aktivitas HarianWF2 03 Aktivitas
WF2 04 Tambah AktivitasUI 03 Aktivitas
UI 04 Tambah Aktivitas
04 Pengajuan CutiWF2 06 Ajukan CutiUI 06 Ajukan Cuti
05 Riwayat CutiWF2 05 Cuti
WF2 07 Cuti – Persetujuan (Kosong)UI 05 Cuti
UI 07 Cuti – Persetujuan (Kosong)

Jumlah layar bertambah dari 5 jadi 7. Aktivitas Harian dipecah jadi daftar dan form. Pengajuan Cuti dan Riwayat Cuti digabung jadi satu layar Cuti, lalu ditambah layar Ajukan Cuti bertahap dan satu tampilan kondisi kosong.

04 / Perubahan global

Berlaku di semua layar.

AspekSebelumSesudahAlasan
Navigasi Menu hamburger di kiri atas Tab bar bawah: Beranda, Presensi, Aktivitas, Cuti, Profil Menu tersembunyi sulit ditemukan. Tab bar menampilkan semua tujuan utama dan ada di jangkauan jempol.
Tombol refresh Tombol bulat mengambang di kanan layar Dihapus; diganti tombol Muat ulang di tampilan kosong Tombol mengambang menutupi kartu dan form. Muat ulang cukup saat dibutuhkan.
Header Nama dan NIP di setiap layar Judul layar di tiap halaman; nama dan NIP hanya di Beranda Judul menjawab “saya sedang di mana”. Identitas cukup tampil sekali.
Tipografi Orbitron (judul) dan Rajdhani (isi) Plus Jakarta Sans untuk semua teks Rajdhani sempit dan tipis, sulit dibaca di ukuran kecil.
Judul section HURUF KAPITAL dengan ikon di kanan Huruf kalimat, tebal, dengan tautan aksi (“Lihat semua”) Kapital panjang lambat dibaca. Tautan aksi memberi langkah berikutnya.
Warna Biru utama; warna status tidak konsisten Biru #0B63CE tetap; hijau berhasil, kuning menunggu, merah alpa/ditolak Identitas tetap, makna warna status sama di semua layar.
Kartu Semua elemen dibungkus kotak bergaris tebal Kartu putih bergaris halus; kotak hanya bila perlu Mengurangi kesan padat dan memperjelas hierarki.
Tombol aksi Di akhir form panjang Menempel di bagian bawah layar Selalu terlihat tanpa menggulir, mudah dijangkau satu tangan.
Sistem desain 5 komponen dasar 8 komponen UI + variabel warna berawalan ui- Ubah komponen sekali, berlaku di semua layar.

05 / Rincian per layar

Apa yang ditambah, diubah, dan dihapus.

DitambahDiubahDipindahDihapus

00 · Semua layar

Menu hamburger → Tab bar

19 item di laci tersembunyi diringkas jadi 5 tujuan yang selalu terlihat di bawah layar.

Sebelum · laci menu

1234

Sesudah · tab bar

15

Ke mana 19 menu lama pindah

Beranda

  • Dashboard
  • Kotak Masuk → lonceng notifikasi

Presensi

  • Mulai Presensi
  • Riwayat Presensi
  • Justifikasi & Setting

Aktivitas

  • Input Aktivitas
  • Pengajuan Aktivitas

Cuti

  • Pengajuan Cuti
  • Riwayat Pengajuan

Profil

  • Data Pegawai
  • Kenaikan Pangkat
  • Ubah Password
  • Dark Mode
  • Tanya / Jawab
  • Pusat Bantuan
  1. 1

    Laci menu tersembunyi → tab bar bawahDiubah

    Tujuan utama terlihat terus, tidak perlu membuka laci dulu.

  2. 2

    Logo & “Versi 5.01” di kepala menuDihapus

    Info versi tidak perlu memakan tempat di navigasi.

  3. 3

    Submenu bertingkat (Aktivitas, Cuti, Presensi)Dihapus

    Submenu pindah jadi isi layar: daftar, tombol, dan tab di dalamnya.

  4. 4

    Label KAPITAL Orbitron → ikon + kata pendekDiubah

    Lebih cepat dikenali; muat di lebar jempol.

  5. 5

    Penanda tab aktifDitambah

    Pengguna selalu tahu sedang berada di layar mana.

01 · Layar

Beranda

Foto profil besar diganti presensi sebagai aksi utama di layar pertama.

Sebelum

15734

Sesudah

123456
  1. 1

    Kartu foto besar → header ringkasDiubah

    Kartu 300 px memakan sepertiga layar tanpa aksi.

  2. 2

    Kartu Presensi Hari IniDitambah

    Tugas harian paling sering, cukup satu ketukan.

  3. 3

    Ringkasan 2 → 3 angkaDiubah

    Capaian, Kehadiran, dan Sisa Cuti sekaligus.

  4. 4

    Akses Cepat 2×2 → satu baris 4 ikonDiubah

    Lebih ringkas; Profil ASN diganti Data PDM.

  5. 5

    Banner PDM turun ke tengah, bisa ditutupDiubah

    Tetap terlihat tanpa menggeser konten utama.

  6. 6

    Tombol notifikasiDitambah

    Pengumuman & status persetujuan punya tempat.

  7. 7

    Chip PNS, usia, dan jabatanDihapus

    Data statis; tempatnya di Profil.

02 · Layar

Presensi

Dulu cuma riwayat. Sekarang tempat presensi, lengkap dengan peta.

Sebelum

7563

Sesudah

712435
  1. 1

    Peta lokasi, radius & akurasi GPSDitambah

    Posisi sah terlihat sebelum menekan tombol.

  2. 2

    Tombol presensi langsung di siniDitambah

    Aksi utamanya dulu tidak ada di layar ini.

  3. 3

    Rekap 6 kotak → 4 kartuDiubah

    Tiga persentase potongan jadi satu angka.

  4. 4

    Pemilih bulanDitambah

    Rekap bulan lalu tanpa pindah layar.

  5. 5

    Chip jam → tanggal + titik statusDiubah

    Kalender lebih ringkas dan cepat dipindai.

  6. 6

    Ikon cangkir hari liburDihapus

    Diganti tanggal merah di Sabtu–Minggu.

  7. 7

    Hari ini dulu, kalender belakanganDiubah

    Info hari ini paling relevan.

03 · Layar

Aktivitas Harian

Satu layar panjang dipecah jadi daftar dan form.

Sebelum

291

Sesudah · 2 layar

2345
67
  1. 1

    Form + daftar → dua layarDiubah

    Satu layar, satu tujuan.

  2. 2

    Capaian dalam menit + sisa targetDitambah

    660 / 6.600 menit, butuh 5.940 lagi.

  3. 3

    Pilihan tanggal minggu iniDitambah

    Pindah hari cukup satu ketukan.

  4. 4

    Filter status + jumlahDitambah

    Yang menunggu verifikasi mudah dicari.

  5. 5

    VERIFIED → Terverifikasi / MenungguDiubah

    Bahasa konsisten, dibedakan warna.

  6. 6

    Form dikelompokkanDitambah

    Detail, Waktu, Laporan, Bukti Dukung.

  7. 7

    Durasi dihitung otomatisDitambah

    Jam mulai–selesai, tanpa salah hitung.

  8. 8

    Simpan Draf & Review di bawahDitambah

    Selalu terlihat selama mengisi.

  9. 9

    Tab Rekap BulananDihapus

    Digantikan kartu capaian dan filter.

04 · Layar

Cuti

Riwayat dan Pengajuan digabung jadi satu layar Cuti.

Sebelum · 2 layar

357
1

Sesudah

234561
  1. 1

    Dua layar → satu layar CutiDiubah

    Saldo, riwayat, dan pengajuan di satu tempat.

  2. 2

    Grafik lingkaran sisa cutiDitambah

    67% sisa jatah, terbaca sekilas.

  3. 3

    Tabel N-2 · N-1 · N → tahun langsungDiubah

    Hak 2026, Sisa 2025, Sisa 2024, Terpakai.

  4. 4

    Tombol Ajukan Cuti menonjolDitambah

    Aksi utama langsung terlihat.

  5. 5

    Riwayat Saya / Persetujuan BawahanDitambah

    Plus filter status untuk riwayat panjang.

  6. 6

    Ikon per jenis cutiDitambah

    Dikenali tanpa membaca judul.

  7. 7

    Garis aksen hijau di kartuDihapus

    Status cukup ditunjukkan badge.

06 / Bahasa

Singkatan jadi kata sehari-hari.

  • % POT. TERLAMBATPotongan tunjangan
  • CUTI N-2 · N-1 · NSisa 2024 · Sisa 2025 · Hak 2026
  • VERIFIEDTerverifikasi
  • KUANTITAS X MENIT AKTIVITAS180 menit

SebelumOrbitron + Rajdhani

AKSES CEPAT SIMPEG

SesudahPlus Jakarta Sans

Akses Cepat

Fiturnya tetap. Cara pakainya yang jadi lebih ringan.

✦ Catatan

Karya pribadi, bukan proyek resmi. Tidak berafiliasi dengan, dan tidak dipesan oleh, produk atau tim aslinya.

Nekonya lagi melek, nih.

Mau bikin apa?

Barang baru, barang lama yang mau dibongkar, atau ide yang agak aneh — ceritain aja, nanti kita otak-atik bareng.

Colek neko

Instagram · GitHub · LinkedIn