Jabar Design System adalah laman open source dari Jabar Digital Service yang dapat digunakan untuk membangun aplikasi web dan mobile bagi lingkungan pemerintahan Jawa Barat.
Berawal dari banyaknya permintaan di dalam instansi pemerintahan terkait pembuatan aplikasi berbentuk digital, kami tim UI Designer dari Jabar Digital Service (JDS) merasakan adanya sebuah masalah yang menyebabkan konsistensi dari branding JDS semakin menurun. Selain itu, tim UI Designer pun mulai bertambah banyak dan mereka kesulitan untuk memahami pola dari branding JDS yang berbeda-beda.
Challenge
Bagaimana membuat sebuah sistem agar tim UI Designer memiliki pola yang sama terhadap branding JDS dan bagi tim UI Designer yang baru bergabung dapat dengan mudah mempelajari pola tersebut.
Journey
Dari challenge ini, kami dari tim UI Designer yang beranggotakan 4 orang pada saat itu memulai ideation dengan menggunakan metode How-Might-We untuk mendapatkan solusi cepat.
Goals & Objective
Dari masalah dan challenge yang ada, kami sepakat untuk membangun sebuah Design System yang akan divalidasi oleh tim internal dari JDS dan melewati tes untuk menunjang aksesibilitas.
Section II
Design Process
❖ Project Masterplan
Setelah menentukan tujuan, maka kami mulai membuat rencana dari project ini yaitu membangun sebuah design system dengan menggunakan sebuah fitur dari figma yaitu Master Component guna untuk mempermudah pekerjaan tim UI Designer di Jabar Digital Service, sehingga penggunaan komponen ini dapat digunakan berulang kali oleh tim UI Designer serta menjaga konsistensi pola dari brand JDS.
Figma Master Components
❖ Project Constraint & Criteria
Selain penggunaan Master Component, kami juga berfokus pada beberapa hal yang menjadi fokus utama pada project design system ini, yaitu:
Konsistensi Brand
Salah satu tujuan dari project ini adalah membangun sebuah sistem yang memiliki konsistensi pada setiap pola dan memiliki standard yang sama terhadap brand JDS.
Pengujian aksesibilitas
Menurut penelitian dari tim UX Research, rata-rata user dari sistem yang di bangun oleh JDS berusia sekitar 40+ tahun, sehingga dari sisi aksesibilitas wajib diperhatikan.
Auto layout & variant
Fitur ini bertujuan untuk mempermudah tim UI Designer dalam membangun sebuah sistem yang kompleks dan mempermudah pekerjaan tim developer.
❖ Research/Analysis
Pada awal pembuatan design system ini, kami menggunakan analisis secara kompetitif yang bertujuan untuk mendapatkan best practice dari sebuah design system yang sudah matang. Kami menganalisa beberapa design system seperti material design milik google, human interface guideline milik apple, gov.uk, dll. Project ini juga dibantu oleh tim UX Research dari JDS untuk memvalidasi komponen-komponen yang telah kami buat dan dari tim UI Designer pun secara iteratif meng-enchance design system ini sesuai dengan kebutuhan user kami.
Kompetitif Analisis
❖ Exploration
Setelah kami menggali beberapa insight dari hasil kompetitif analisis, saatnya kami memulai explorasi untuk membangun sebuah komponen yang dapat menjaga konsistensi dari brand JDS serta menunjang dari sisi aksesibilitas untuk user kami.
Exploration Design System JDS
Section III
Design Showcase
Foundations
Components
Design System Organism
Notes
Dibangun oleh 6 orang UI Designer, 3 Frontend Web, 1 Frontend Mobile dan 1 Project Manager. Di dalam pembuatan design system ini, saya bertanggung jawab untuk menghandle keseluruhan mobile component. Design system ini masih dalam tahap pengembangan dan telah dipublikasi di figma comunity sebagai bentuk keterbukaan dari Jabar Digital Service untuk masyarakat lokal maupun mancanegara. Thanks for watching ❤️
