Membangun Design System “Persona” – Mengatasi Design Debt di Skala Perusahaan

Konteks & Problem Seiring pertumbuhan pesat Privy sebagai pemimpin layanan identitas digital di Indonesia, muncul tantangan besar: Design Debt yang semakin menumpuk. Dengan lebih dari 10 tim produk bekerja secara paralel, kami mengalami fragmentasi UI/UX yang serius. Setiap tim membuat komponen sendiri, flow behavior dari component sendiri, sehingga timbul inkonsistensi visual, pekerjaan berulang dari desainer dan engineer, serta waktu handoff yang tidak efisien.

Inkonsistensi ini tidak hanya memperlambat kecepatan delivery, namun juga memperberat kerja dari tim design maupun engineering.

Peran Saya Head of Product Designer, saya mengambil inisiatif strategis untuk memulai membangun Design System dari nol. Saya menginisiasi proyek ini secara end-to-end, mulai dari perencanaan, arsitektur sistem, hingga governance yang diadopsi di seluruh tim produk.

Discovery & Research

• Audit menyeluruh terhadap seluruh produk Privy, menemukan lebih dari 4 variasi warna brand dan ribuan nilai spacing bahkan color yang tidak konsisten.
• Tidak semua designer memanfaatkan fitur variable di Figma.
• Wawancara dengan desainer dan engineer dari berbagai tim untuk mengidentifikasi pain point terbesar.
• Berulangnya proses developing karena ada component yang sama memiliki flow berbeda
• Analisis waktu handoff dan effort yang terbuang akibat repeatable rework komponen.

Key Insight: Masalah utama bukan pada kualitas desain individual, melainkan tidak adanya Single Source of Truth yang dapat digunakan bersama.

Solusi: Membangun Design System yang diberi nama “Persona”

Saya memimpin pembangunan Persona Design System dengan pendekatan sistematis:

1. Foundation Layer
   • Design Tokens yang semantic (semantic colors, spacing, typography, elevation).
   • Dukungan penuh Dark Mode dan theming yang fleksibel.
   • Bilingual & responsive menggunakan fitur variable.
2. Component Architecture
   • 150+ komponen atomic dan composable dengan advanced auto-layout.
   • Komponen dirancang responsif dan adaptif terhadap panjang teks (penting untuk lokalisasi multi-bahasa).
3. Documentation & Governance
   • Bersama tim engineer kami membuat dokumentasi lengkap di privy-open-source.github.io/design-system.
   • Proses contribution dan review yang jelas agar tim lain dapat berkontribusi. Setiap 2 pekan kami adakan meeting khusus untuk collect segala macam component yang ada di design Privy. Serta bagaimana issue, behavior dan flow dari component tersebut.
   • Sinkronisasi ketat antara Figma dan production code (Vue untuk web & mobile Android / iOS).
4. Design assets
   • Membangun icon set yang terdiri dari 589 Icon
   • Membangun image asset yang terdiri dari 300 set ilustrasi

Gambar Koleksi 598 icons Persona

Gambar Koleksi Ilustrasi Persona yang mendukung fitur responsive

5. Design System Team

   • Fokus gather segala macam component dan menganalisa bagaimana flow yang paling optimal

   • Dari sekian banyak design system kami jarang menemukan "Pattern". Pattern adalah flow dari component design system untuk menghandle sebuah issue / task. Contoh, bagaimana flow dari search document. Kita rangkum flow tersebut dengan antisipasi terhadap segala case yang sudah kita kumpulkan kemudian dijadikan Pattern search document. Sehingga engineer dan designer tidak perlu lagi re-create flow tersebut.

   • UX research bekerja erat dengan tim Data untuk mencari efektifitas sebuah flow / component dari setiap fitur. Hasilnya selalu di-report dalam pertemuan weekly atau bi-weekly.

     

     

     Gambar inkonsistensi flow yang kita handle dengan Pattern

     

     

     Gambar Pattern yang diprovide untuk seluruh kebutuhan design di perusahaan

6. Strategi Penerapan
   • Kita fokuskan kepada project / task yang akan berjalan. Sedangkan yang sedang berjalan tetap menggunakan cara lama agar tidak menjadi bottle neck proses development. Dengan cara seperti ini designer tidak perlu rework design yang sudah jadi. Karena dalam proses pengerjaan akan tetap menghandle file / fitur lama seperti adanya tambahan flow baru, revisi wording dsb.

Design Decision & Trade-off

• Memilih pendekatan semantic tokens dibandingkan hard-coded value agar sistem lebih future-proof (misalnya untuk rebranding, Dark Mode, responsive, bilingual dll).
• Trade-off: Butuh investasi waktu di awal untuk membangun fondasi yang kuat. Kami mitigasi dengan membangun komponen secara bertahap, data yang lengkap serta menentukan prioritas komponen (MVP → Iteration) dan melibatkan engineer sejak awal.
• Keputusan penting lainnya adalah menjaga keseimbangan antara fleksibilitas dan kontrol agar tim design tidak membuat variasi sendiri lagi.

Results & Business Impact

• Menghemat proses handoff desain ke engineering hingga 50%.
• Mengurangi bobot task engineering terkait komponen hingga 70% (based on sprint card data di Jira).
• Lebih dari 500.000 penggunaan komponen di seluruh ekosistem Privy.
• Tim produk dapat melakukan prototyping dan shipping fitur 2x lebih cepat.
• Mempercepat proses onboarding Designer baru hingga 2x lipat.
• Menurunkan temuan isu UI/Visual (Design Debt bugs) pada fase QA engineering hingga 90%.
• Membantu tim marketing, product manager dan lainnya untuk membuat konsep dalam Hi-Fidelity wireframe
• Memungkinkan perubahan besar (seperti Dark Mode, rebranding color bahkan pergantian wording) dilakukan hanya dengan mengubah nilai token Primary, tanpa harus mengubah manual ribuan file desain.

Key Learnings Proyek ini memperkuat keyakinan saya bahwa peran desainer di perusahaan skalabel bukan hanya membuat interface yang bagus, tetapi juga membangun sistem yang memungkinkan orang lain bekerja lebih cepat, efisien dan konsisten.

“Persona” mengajarkan saya pentingnya berpikir sistemis dan berinvestasi pada infrastruktur desain. Inovasi yang paling impactful seringkali bukan fitur yang kelihatan, tapi pondasi dasar yang kadang tak terlihat tapi membuat seluruh organisasi bekerja lebih efisien.