Belajar Dari Membangun Design Language System — Part 1

Sering kita mendengar istilah “Design System” bahkan saya yakin itu sudah tidak asing lagi untuk kita para UI/UX Designer mendengar kata “Design System”. walaupun mungkin kita akan mengartikan itu dengan berbeda-beda.

Rifki Muhammad

Published in

lp-productdesign

9 min readMar 31, 2021

Illustration by Pakket : Design Language System

😉 Jadi apa sih Design System??

Dari banyaknya perusahaan yang sudah memiliki design system seperti Google Material Design, Carbon Design System — IBM, Polaris — Shopify, semuanya tidak memiliki isi yang sama karna setiap perusahaan jelas memiliki persepsinya masing-masing tentang apa yang mereka buat.

Dari beberapa pengertian design system yang saya baca, menurut saya design system itu 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. Dan pastinya design system bukan product yang one-size-fits-all, artinya kita harus membuatnya sesuai dengan kebutuhan team kita.

Ada satu quotes tentang design system yang bagus menurut saya

“A design system is like a pet. It’s easy to like the idea of having one but if you do go ahead and pull the trigger you are taking on a big responsibility,

ketika masih kecil bermain dengan design system terasa menyenangkan, mengajarinya trik baru dengan membuat sebuah component baru, dan itu tidak akan menghabiskan banyak waktu. tapi ketika design system sudah bertumbuh menjadi besar itu akan menghabiskan waktu dan tanggung jawab yang lebih dari sebelumnya.
— Apurv Ray : The UX Designer’s Role in Design Systems

Mungkin awalnya design system kita akan dimulai dari circle yang paling kecil yaitu dari UI Kit yang dipakai sehari-hari oleh designer. tapi semakin berjalannya waktu design system tidak hanya berbicara dengan UI kit, kita perlu kolaborasi dengan digital marketing, engineer, brand guideline perusahaan hingga coorporate identity.

Dalam tulisan ini saya ingin bercerita tentang pengalaman saya membangun Design Languages System dari sudut pandang seorang UI Designer. Dan apa yang saya lakukan sebagai UI Designer dalam pembangunan design system ini.

Important questions about the design system 🙄

Kapan team kita membutuhkan sebuah design system?

Dari salah satu artikel yang saya baca tentang Design System Reflections on building an MVP design system in 3 months saya menemukan kata-kata ini

“All complex systems that work evolved from simpler systems that worked.”

“A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: a complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a simple system.” — John Gall

mungkin kata-kata itu membuat saya yakin bahwa memulai untuk membuat Design System secepat mungkin bukanlah hal yang buruk

Kalo kalian masih bertanya-tanya kapan waktu ideal untuk membuat design system kalian bisa melihat materi dari Diana Mounter — Design System Manager GitHub tentang “Introducing Design Systems Into Chaos” yang sangat saya rekomendasikan untuk kalian lihat.

Apakah design system akan membatasi kreativitas designer?

Beberapa dari kita mungkin akan khawatir tentang design system akan membatasi kreatifitas designer atau mungkin kita akan berfikir jika designer kedepannya akan membuat antarmuka hanya dengan menyusun nyusun komponen dan mengubah kata-kata saja.

Namun sebenarnya design system membantu mengurangi effort designer dalam menyelesaikan masalah-masalah umum seperti penggunaan card, button, palet warna bahkan kombinasi tulisan. Dan juga design system memberikan designer waktu yang lebih intens untuk menyelesaikan kasus-kasus unik atau flow yang lebih kompleks.

The process of building software is about a lot more than assembly, we need designers to look beyond components to usability, task flow, and how the interactions are driving users towards success.” — Gavin Harvey a platform design manager at Google

Sebenarnya ada banyak sekali manfaat dari design language system jika kalian tertarik untuk mengetahuinya kalian bisa membaca artikel berikut untuk mengetahui manfaat dari DLS — Design Language System — Why You Need It?

Design system connecting the dot 🎁

Setelah sedikit paham tentang design system pertanyaan selanjutnya apa yang harus kita lakukan, apa yang harus kita buat untuk design system ini? seberapa kompleks design system yang akan kita buat? apakah design system itu cukup dengan kumpulan componen UI kit? atau sejauh apa design system ini akan dibuat?

Photo by Volodymyr Hryshchenko on Unsplash

Saya merangkum beberapa poin yang perlu kita lakukan saat akan memulai pembuatan design system dari materi yang disampaikan oleh “Introducing Design Systems Into Chaos” Diana Mounter — Design System Manager GitHub. Berikut adalah poin-poin tersebut:

1. Manage UI Kit/Library

Mulai dari apa yang kita bisa sebagai desinger. Manfaatkan Fitur Component dalam figma/slack sebaik mungkin dari mulai color system, types system, hingga component-component utama.

- Why we need it?

Membuat UI library/Kit akan memulai semuanya dari hal yang paling dasar bagi kita sebagai designer. Dimulai dari megumpulkan component- component design yang kita punya disatu tempat yang sama (atur sesuai fungsinya masing-masing) lalu mengubahnya menjadi component yang bisa digunakan berulang oleh team. Ingat kata-kata sebelumnya “all complex systems that work evolved from simpler systems that worked”.

UI kit akan sangat membantu pekerjaan kita sebagai designer. Membuat konsistensi dan membuat pekerjaan jauh lebih efektif. Dengan memiliki UI kit setidaknya kita sudah memulai langkah pertama untuk memiliki Design Language System nantinya.

- Start from audit your component

Mulai lakukan audit pada component yang sudah dikumpulkan. Pada tahap ini mungkin kita akan menemukan hal yang tidak konsisten pada design yang kita buat. Mungkin warna yang kita gunakan berbeda-beda untuk hal yang sama, ukuran padding/margin, hingga banyak bentuk interksi yang berbeda untuk fungsi yang padahal sama.

Illustration by Pakket : Design Language System — Gambar tentang skema Atomic Design Metodology

Penggunaan metode Atomic Design Methodology yang dipopulerkan oleh Brad Frost akan sangat membantu pada tahap ini. dengan metode ini kita akan memecah component menjadi bagian-bagian modular hingga yang paling kecil.

- Make it flexible and Easy to Modify

Membuat design yang flexible dan mudah dimodifiaksi akan membantu design system kita berkembang. Selain itu dengan pola design yang flexible code yang dibuat engineer akan sangat modular sehingga pengembangan design akan mudah diimplementasi kedepannya.

2. Knowing Your Team

Langkah ini tidak kalah penting dengan poin sebelumnya, kalian harus mengetahui apa kondisi team kalian saat ini, misal apakah sudah ada UI Kit untuk designer atau tidak? apakah engineer sudah mendokumentasikan code-nya?.

Tabel diatas adalah “The four stages of design system maturity” kita bisa jadikan tabel diatas sebagai pembanding dengan keadaan team kita saat ini — *Source: Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy*.

Lalu pertanyaan lain yang akan muncul adalah apakah kita perlu memiliki dedicated designer dan engineer untuk membuat design system?, sebanyak apa designer yang kita butuhkan?, apakah perlu ada project manager untuk memimpin proyek ini?.

—

Nathan Curtis menulis artikel pada tahun 2015 yang membahas tentang Team Models for Scaling a Design System, dalam artikel itu dia membahas ada tiga skema cara perusahaan mengatur team dalam pembuatan design system, yaitu;

Solitary Model — Overlord: Pada model ini semua keputusan design system akan dipimpin oleh satu orang atau team ahli. Team itu akan fokus pada hal utama yang dibutahkan oleh kebutuhan team.
Centralized Model : Pada model ini akan ada team core yang khusus dibentuk untuk membuat design system untuk digunakan oleh team lain. Team ini akan melayani setiap kebutuhan dari team lainnya.
Federated Model : Pada model ini design system akan dibuat secara kolaborasi dari beberapa kontributor team. Pada model ini design system akan terus disesuaikan dengan kebutuhan-kebutuhan dan masalah-masalah baru kedepannya.

A. Team Model #1: Solitary, B. Team Model #2: Centralized, C. Team Model #3: Federated — Illustration by Nathan Curtis

Ada satu model lagi yang bisa kalian terapkan yaitu Cyclical Team Model. Model itu diterapkan oleh Salesforce. Dalam artikel The Salesforce Team Model for Scaling a Design System pada tahun 2015 yang ditulis oleh Jina Anne.

Illustration by Jina Anne — The Cyclical Team Model: A Centralized Design Systems team + a Federated group of Design Systems contributors, both informing each other

Cyclical Team Model : Model ini sebenarnya adalah penggabungan dari dua model sebelumnya Centralized & Federated. Team Core akan bertindak sebagai fasilitator, librarian, dan distributor. Lalu kontributor dari masing-masing team akan memastikan semuanya akurat, up to date, dan berguna untuk team.

Model ini akan memastikan juga bahwa Team core dan kontributor akan saling bertukar informasi dan bekerja sama dalam pembuatan design system.

The Design System informs our Product Design. Our Product Design informs the Design System. — Jina Anne

—

Kalian dapat membuat team sesuai dengan kondisi perusahaan kalian. Team models yang sesuai akan membantu kalian bagaimana design system kalian akan dibuat.

3. What Prioritize?

Pembuatan design system ini akan memakan banyak waktu dan tenaga karna design system sendiri bisa dibilang project yang akan terus berkembang dan tidak ada akhirnya.

Menentukan tujuan adalah hal yang juga penting dalam pembuatan design system. Kapan design system akan dibuat, apa plan kalian dalam Q1, Q2, Q3 dan Q4. Berapa lama design system ini akan siap untuk digunakan dll.

Pembuatan prioritas akan mempermudah semuanya berjalan. Misal apakah perlu melakukan riset dengan team marketing? atau apa hal yang sangat penting yang paling utama dan yang paling dibutuhkan oleh team?

Illustration by Product Plan — Gambar diatas adalah “4 different categories of initiatives” | MoSCoW Prioritization

Penggunaan teori MoSCoW Prioritization dapat membantu kita dalam penyusun skala prioritas yang kita butuhkan dalam pembuatan design system nanti.

Hal yang saya pelajari dan baru saya pahami selama membuat Design System? 😊

Selain menambah pengalaman baru, banyak hal baru yang saya pelajari sebagai UI Designer selama berkontribusi dalam pembuatan design system.

Beberapa hal dibawah ini yang saya dapatkan selama 5 bulan terakhir ini.

Kolaborasi

Design system tidak hanya dibuat oleh kita. Pembuatan design system memakan banyak effort dari designer lainnya. Bukan hanya itu kita juga banyak melakukan kolaborasi dengan team digital marketing, brand, dll. Dan yang paling utama adalah kolaborasi dengan team Engineer.

Pantang Menyerah

Pembuatan design system yang sangat kompleks dan tentunya sangat menantang dan perlu dedikasi yang sangat besar. Buat saya sendiri ini adalah hal yang sangat baru ketika designer yang sehari-hari menggunakan banyak kreativitasnya untuk menyelesaikan masalah, sekarang saya harus berkutat dengan hal-hal yang berbau principles yang sangat teoritical.

System thinking

Design system menuntut saya sebagai UI Designer untuk berfikir secara strategis dan sistematis. Ketika membuat design system maka bukan hanya berfikir secara tampilan namun secara aturan (seperti color system, type system, grid & spacing, voice tone, writing style dan terutama component UI) yang bagaimana caranya harus dapat beradaptasi dalam berbagai kasus dan dapat terus dikembangkan.

Understanding Developer

Memahami bagaimana cara code bekerja adalah salah satu skills yang saya sadari saat membuat design system ini.

Design system ini akan menjadi jembatan antara Designer dan Engineer.

Dengan adanya design system pengerjaan akan menjadi sangat efektif dan juga akan meningkatkan kepercayaan dan saling memahami antara designer dan engineer seperti;

Bagaimana caranya membuat component yang reusable dan flexible sehingga component itu akan tetap konsisten namun tetap dengan mudah untuk dikembangkan oleh Engineer.
Konsep variables (Design Token) yang baru saya ketahui saat membuat design system ini.
Menulis dokumentasi dengan baik sehingga engineer paham fungsi dan cara penggunaa dari tiap variant component.

🤥 Epilog

Mungkin itu beberapa hal yang mau saya bagi dalam tulisan pertama ini. Design system yang saya dan team buat masih dalam tahap pengembangan, jadi kedepannya akan ada beberapa tulisan yang akan saya bagi lagi tentang pengembangan design language system yang sedang kami buat ini.

Menyenangkan bisa berbagi pengalaman dalam tulisan ini, semoga membantu. Silahkan tulis dikolom komentar untuk kalian yang ingin berbagi pengalaman tentang pembuatan design system yang pernah kalian lakukan.