Masalah
Alpamayo Intelligence adalah tulang punggung operasional untuk mengelola organisasi, perangkat armada, deployment, dan tugas di jaringan customer Alpamayo. Seiring platform berkembang, UI mulai menumpuk gesekan: deduplication deployment tidak ada, drift tidak ditampilkan dengan jelas, detail node terfragmentasi, pola toolbar dan filter tidak konsisten, dan arsitektur informasi tidak mencerminkan cara kerja operator sesungguhnya. Seiring itu, tidak ada bahasa visual bersama — tidak ada design system, tidak ada standar komponen — sehingga setiap UI baru menjadi keputusan dari nol.
Kendala
- Standar engineering Swiss — setiap perubahan UI ditinjau terhadap akurasi operasional, bukan sekadar estetika
- Manajemen armada adalah use case utama — perubahan harus mencerminkan cara operator melacak versi, status, dan drift lintas perangkat
- Stack PrimeVue + Tailwind CSS + Nuxt 4 — pilihan komponen dibatasi pada ekosistem yang sudah ada
- Design system harus hidup di dalam aplikasi di /design — publik, tanpa auth, dengan token customizer langsung dan ekspor AI
- 32 primitif Alp* harus berbasis severity — kosakata konsisten untuk success, warning, danger, info, help, neutral
- Integrasi MS Teams dan MS Graph — infrastruktur notifikasi dan identitas sudah ada
Pendekatan Kami
Melakukan audit UI/UX terstruktur yang menghasilkan 32 temuan yang diorganisir dalam 6 tema: drift surfacing (A), deduplication deployment (B), tab detail node (C), toolbar dan filter dengan saved views (D), desain informasi (E), dan affordance aksi (F). Setiap temuan diberi peringkat severity dan dikirimkan sebagai set perubahan terfokus, menjaga platform yang berjalan tetap stabil sepanjang proses. Membangun route design system di /design — halaman publik tanpa auth dengan token customizer langsung (primary, accent, semantic, background, logo), showcase komponen, halaman sampel, dan tombol 'Copy for AI' yang mengekspor system prompt DESIGN.md ~600 baris yang mencakup constraint stack lengkap, sistem token, inventaris komponen Volt, inventaris primitif Alp*, 8 pola komposisi, glosarium domain, dan aturan do/don't. Membangun 32 primitif Alp* berbasis severity — StatusPill, StatusDot, Tag, ProgressBar, Avatar, Eyebrow, ColorPicker, PresetCard, KpiCard, dan lainnya — mencakup kosakata visual berulang di platform.
Galeri
Hasil
- Platform manajemen armada yang menghadirkan pelacakan versi, telemetri, status perangkat, notifikasi, dan event stream untuk jaringan customer IoT industrial Alpamayo
- 32 temuan UI/UX dikirimkan dalam 6 tema — drift surfacing, deduplication deployment, tab detail node, toolbar/filter dengan saved views, desain informasi, affordance aksi
- Design system live di /design dengan token customizer langsung dan ekspor DESIGN.md 'Copy for AI' (~600 baris)
- 32 primitif Alp* berbasis severity diadopsi di seluruh platform
Kenapa ini penting
Manajemen armada adalah tempat kredibilitas operasional Alpamayo berada — operator perlu melihat perangkat mana yang drift, deployment mana yang usang, dan aksi apa yang tersedia, semuanya sekilas pandang. Pekerjaan UI/UX yang sistematis, diorganisir sebagai temuan teraudit bukan perbaikan tersebar, berarti setiap perubahan memetakan ke titik nyeri operator yang nyata dan lolos review Swiss. Design system memastikan bahwa seiring platform tumbuh, permukaan baru tidak memecah bahasa visual yang sudah dibangun.