Belajar Dari Membangun Design Language System — Part 2
Beberapa bulan terakhir ini team design di perusahaan tempat saya bekerja sedang membangun design system. Silahkan mulai dari tulisan sebelumnya Belajar Dari Membangun Design Language System — Part 1.
Dari tulisan sebelumnya menurut saya design system adalah
“sebuah framework atau pola fikir design yang sistematis dan saling terintegrasi untuk membantu dan mempermudah proses pengembangan sebuah product. Selain itu design system akan memberikan standarisasi design brand yang jelas untuk digunakan.
Pengertian design system yang lebih sederhana menurut Marcin Treder (co-founder and CEO at UXPin)
A design system is the architectural core of a product(s) for ensuring design and code consistency and product development efficiency.
Why we need it?
Masalah inconsistency design pada produk kami saat ini adalah salah satu issue besar yang belum bisa kami selesaikan. Masalahnya ini selalu bertambah seiring pengembangan produk yang kami lakukan.
- Inconsistent = Different patterns for the same action make user confusion
- No reusable Item = Slow design process (everything is created from scratch)
- No documentation = Spending time to find or ask each other
- Difficult onboarding = Misexpectation, misunderstanding, and misinterpretation
Design system yang ada akan membantu menyelesaikan masalah-masalah tersebut. Kesalahpahaman antar designer dan engineer akan berkurang, dan bisa lebih produktif untuk fokus memikirkan user experience, penyelesaian masalah, dan membuat produk yang lebih baik.
Starting point ✨
Mengikuti cara atomic design- Brad Frost bekerja adalah cara terbaik ketika membuat design system. Color system, typography, spacing system, dan icon family adalah pondasi utama yang kami siapkan dalam pembuatan design system. Tanpa pondasi tersebut masalah inconsistency pada produk akan terus terulang…
Sederhananya akan selalu muncul pertanyaan-pertanyaan baru seperti :
- Warna button harus apa?
- Text header atau paragraph harus sebesar apa?
- Kapan text harus menggunakan sentance case/title case?
Sebelum membuat komponen tentunya masalah tersebut harus diselesaikan… akan menjadi masalah yang lebih besar ketika tidak ada jawaban yang jelas untuk pertanyaan-pertanyaan tersebut, dan setiap designer pastinya akan membuat design dengan cara mereka sendiri.
Yang tidak kalah penting juga adalah melakukan audit komponen design pada existing product. Selama proses tersebut kami;
Memilah dan memilih apa yang akan terus di pakai, mana yang harus diperbaiki, dan apa yang harus kita eleminasi.
1 per 1 komponen kami audit untuk mendapatkan hasil yang sesuai dengan kebutuhan produk kami. Proses yang menyenangkan karna bisa saling sharing dan terkadang mendapat prespektif baru tentang design dari designer lain.
Namun selama proses audit tersebut ada pertanyaan yang sering ditanyakan dari designer, bahkan dari stakeholder lain;
Kapan kita implementasi semua komponen yang baru ini?
Apakah mobile engineer harus menyelesaikan komponen baru ini sekaligus lalu komponen baru tersebut baru diimplementasikan. Atau kita ubah 1 per 1 mengikuti alur development produk. Pertanyaan tersebut sebenarnya membuat satu pertanyaan lain “kita harus mulai implementasi dari mana?”.
So what next?
Sampai tulisan ini dibuat proses pembuatan design system kami masih terus berjalan. Beberapa foundations dan component UI masih kami persiapkan untuk kita mulai implementasi code di beberapa sprint kedepan. Memulai untuk di implementasi code dan kolaborasi dengan engineer adalah sebuah tantangan baru.
Sebagian foundations dan component UI sudah digunakan, dan beberapa part masih dalam tahap pengembangan. Membagi 2 fase pengerjaan harapannya akan meningkatkan efektifitas waktu dalam pengerjaan design system in.
Fase 1 kita mulai dengan scope yang kecil. Memulainya dari yang kecil akan lebih baik dibandingkan harus menunggu semua system selesai, itu akan memakan waktu yang sangat lama. Dengan dibagi fase ini juga kami akan mengetahui plan terbaik saat kolaborasi dengan team engineer.
Thanks…
Stay Safe And Stay Healthy 😊
