JDS Rilis ‘Design System’, Kuatkan Produk Digital Karya DigiTeam
Sejak didirikan 2 tahun silam, JDS sudah menghasilkan banyak produk digital berupa website dan aplikasi mobile untuk permudah layanan buat Wargi Jabar. Proses pengembangan produk-produk ini tak hanya melibatkan seluruh tim di Jabar Digital Service, tapi turut menyertakan stakeholder, pemerintah, komunitas, bahkan penggunanya.
Waktu pembuatan produk-produk di JDS juga bervariasi, ada yang memakan waktu bulanan sebelum merilisnya ke publik, ada pula yang proses pengembangannya berdasarkan request “tahu bulat” atau dibuat dadakan & siap saji untuk tujuan mendesak! Inilah yang membuat produk-produk digital ciptaan Digiteam JDS jadi beragam.
Guna mempercepat proses pembuatan desain, pengembangan produk, serta penyediaan produk yang konsisten, bulan Juni lalu, DigiTeam telah merilis JDS Design System. Penulis berbincang dengan Vian Pua Meno, UI Designer JDS dan Surya Kusuma A., Graphic Designer di JDS untuk tahu proses pembuatan library JDS Design System tahap pertama. Baca obrolan kami selengkapnya di sini!
JDS punya Design System, nih! Boleh ceritakan alasan dibalik pembuatan JDS Design System?
Vian: Iya, nih kami baru rilis JDS Design System! Jadi sebenarnya alasan kita bikin design system diinisiasi dari UI Designer di JDS. Biasanya dari alur pengerjaan produk, UX Researcher dan UI Designer bikin riset dan prototype produknya dulu. Uniknya, di JDS setiap UI Designer/ UX Researcher akan ditugaskan untuk handle project yang berbeda dengan UI Designer/UX Researcher lainnya, begitu pun teman-teman developer di Divisi IT JDS.
Masalah mulai timbul, ketika UI Designer sudah mulai bekerja masing-masing, jadi output desain tiap proyek yang dikerjakan ini berbeda-beda: mulai dari penempatan ikon, pemilihan warna, dan komponen desain lainnya. Front-End Engineer pun menghasilkan kode pemrograman yang berbeda di setiap produk yang dikerjakan, karena menyesuaikan desain produk yang telah dibuat oleh UI Designer.
Hingga akhirnya, kami berdiskusi dan memutuskan perlu adanya standar desain produk dan kode pemrograman yang bisa memudahkan Designer dan Developer untuk kembangkan produk yang seragam. Selain memudahkan teman-teman developer dalam mengembangkan produk, kita juga pikirkan sisi user experience-nya. Dengan adanya JDS Design System, kami berharap user bisa jadi lebih familiar dengan “pakem” desain produk yang khas dari JDS. Jadi, branding produknya juga dapat!
Surya: Sepakat! Bagi graphic designer, JDS Design System ini jadi batasan dan pedoman buat kita berkarya. Apalagi dalam prosesnya setiap orang bawa style masing-masing. Di satu sisi, JDS pengembangan produknya juga kolaboratif melibatkan ragam divisi; IT Dev, Implementasi, Konten & Komunikasi, Analisis, Data, HR/GA, dan tentunya, stakeholder terkait. Kumpulan library desain ini bakal memandu kita untuk merancang produk, bahkan bisa lebih efisiensikan waktu pengerjaan untuk proyek-proyek besar dan berkelanjutan.
Kalau di tahap pertama ini, apa saja yang sudah dirilis di portal JDS Design System?
Vian: Ada 23 komponen user interface (UI) dan setengahnya sudah di-developed beserta kode pemrogramannya oleh teman-teman Front End Developer, meliputi: JDS Landing Page, JDS Desktop/Web komponen, JDS Color System, dan JDS Desktop Heading yang bisa diakses di https://www.figma.com/@jds_jabar.
Teman-teman UI Designer dan IT developer (terutama Front End Engineer) bisa duplicate komponen design systemnya ke figma atau pemrograman mereka, dan langsung bisa dipakai untuk kembangkan websitenya. Di tahap ini memang kami baru bisa fasilitasi untuk desain website dan beberapa bagian untuk mobile. Kode pemrogramannya pun baru ter-developed 10 kompenen, karena keterbatasan resource yang fokus untuk pengerjaan riset design system ini.
Apa yang unik dari JDS Design System?
Vian: JDS Design System ini user centrist, ya. Proses pembuatannya melalui riset ke pengguna-pengguna produk kita. Kita jadi tahu produk desain yang memudahkan pengguna seperti apa, pilihan desain seperti apa yang mereka suka, dan banyak pertimbangan lainnya untuk develop produk digital kita. Dari riset ini, misalnya, kita jadi tahu user lebih suka bentuk ilustrasi komponen yang tidak kaku, untuk ikon mereka lebih suka yang tidak kotak presisi, tapi lebih melengkung, dan sebagainya.
Surya: Kalau keunikan mungkin lebih ke karakter yang dibangun, ya. Dari sisi desain grafis, kita lebih clear dimana gaya desainnya sederhana namun jelas; relateable, dimana metafora bahasa visualnya lebih lekat dengan budaya lokal; desainnya juga lebih efisien, komposisinya tidak rumit dan tidak menggunakan banyak ornamen. Mengikuti hasil risetnya, desain kita bisa dibilang lebih humanis, karena memang dibuat untuk layani Wargi Jabar.
Vian: Ya, color system-nya mungkin bisa dibilang “Jabar banget”, ya? Kita identik di warna hijau, kuning, biru, menyesuaikan primary colour Provinsi Jawa Barat. Pemilihan warna ini juga dilakukan karena kita ingin mempertahankan konsistensi & sense ke user kita, jangan sampai menghambat pengalaman pengguna (user experience) untuk mempelajari ulang atau menyesuaikan dengan tampilan produk-produk kita.
Kedepannya, kita juga ingin rilis, nih library ilustrasinya. Jadi semua bentuk ilustrasi kepala, karakter, akan ada library-nya. “Humaaans” jadi salah satu illustration library yang jadi referensi kita.
Oh, ya. Ngomong-ngomong soal referensi, boleh tahu pembuatan design system ini benchmarking kemana?
Vian: Ya, ada beberapa yang jadi acuan kita, seperti GOV.UK Design System dari UK Government Digital Service, Carbon Design System punya IBM, Material.io punyanya Google, juga Atlassian.
Material.io menurut saya pribadi adalah salah satu yang paling lengkap ya dibandingkan dengan design system lainnya, sudah include library untuk icons dan ilustrasi juga.
Surya: Kami juga melihat beberapa kiblat yang kembangkan design system, seperti; Uber, Bukalapak, Gojek. Kenapa belajar dari perusahaan komersil? Karena dari segi desain lebih matang ya, kita lihat teori desainnya dan penggunaannya baik di apps dan website cukup konsisten terapkan desain.
Siapa saja yang terlibat dalam proses pembuatan JDS Design System?
Vian: Teman-teman yang terlibat dalam proses pembuatan JDS Design System meliputi teman-teman DigiTeam; Mas Thofhan Hannanto (Product Manager JDS), Teh Ashri Permana aka Aci dan Teh Endah Nursalehah(Lead UX Researcher); saya sebagai Lead UI Designer; Adrian dan Adzhar Amrullah (Lead Front End Developer); juga Alexander Randika (Lead Content & Communication), beserta timnya.
Namun, dalam proses risetnya, sebenarnya kita dipandu dan disupervisi oleh UK Government Digital Service (GDS) selama hampir 4 bulan ya. Mereka sudah punya design system juga dan kita banyak belajar metode risetnya dengan mereka.
Apa rencana pengembangan JDS Design System selanjutnya?
Surya: Design system meskipun sebagai pedoman, dia akan terus berkembang mengikuti zaman, pun akan di-update sebaik mungkin mengikuti kebutuhan user kita.
Vian: Ya, kita pribadi berharap ini bisa dimanfaatkan oleh Organisasi Perangkat Daerah (OPD) lainnya di Jabar, cuma kita belum tahu juga apakah mereka sudah punya desain UI yang tetap atau tidak.
Pastinya JDS Design System ini akan terus disempurnakan. Rencana di kuartal 4 bisa launching UI untuk mobilenya juga, mudah-mudahan. Kita ingin bangun hype dulu, sembari launched desktop design, kita juga ingin kumpulkan feedback dari masyarakat untuk pengembangan selanjutnya.
