One design system to rule them all

Saat mengunjungi situs YouTube lewat browser di laptop,

mengakses Google Drive di iPhone, atau membuka Google Search
lewat tablet Android, apakah pernah terpikir olehmu bahwa seluruh
produk Google yang kamu gunakan terasa sebagai suatu
kesatuan? Dalam semua produk Google yang kamu gunakan,
kamu akan menemukan banyak sekali komponen UI, gaya ilustrasi,
sampai user flow yang digunakan secara berulang-ulang.

Pengalaman ini mungkin akan berubah ketika kamu mengakses Bing, mesin pencari milik Microsoft.
Menggunakan Bing akan terasa berbeda saat memakai Google Search, karena memang keduanya
memiliki sistem desain yang tak sama, milik dua perusahaan berbeda.

Perusahaan seperti Google dan Microsoft tentu memiliki puluhan, bahkan mungkin ratusan, orang yang
bekerja sebagai desainer grafis dan UI/UX. Maka dari itu, dibutuhkan sebuah aturan yang disepakati
bersama untuk memudahkan desainer berkomunikasi dalam merancang produk.

Aturan ini berfungsi untuk mematikan seluruh desainer grafis dan UI/UX bisa bekerja dan mendesain
berbagai secara konsisten, terlepas dari perbedaan gaya, taste, dan produk. Tentunya ini membantu
mereka bekerja lebih cepat tanpa perlu pusing memikirkan warna dan tipe font apa yang harus digunakan
setiap kali merancang produk.

Aturan ini biasa kita sebut sebagai design system.

Dari contoh yang saya terangkan di atas, design system atau design language adalah komponen yang
digunakan berulang-ulang yang membentuk identitas suatu produk. Beberapa contoh komponen yang
dimaksud adalah elemen seperti warna, logo, ikon, layout, dan font. Bahkan bisa berupa elemen tidak
kasatmata seperti flow navigasi, persona perusahaan, gaya bahasa, dan sebagainya. Semua komponen ini
harus bekerja sama untuk menghasilkan tampilan visual, identitas, fungsi, dan experience brand yang
konsisten serta menyeluruh.

Singkatnya, design system memiliki beberapa sifat, antara lain:

● Berulang, artinya semua komponen yang digunakan berkali-kali,
● Jelas, artinya diatur oleh standar baku yang disetujui bersama, serta
● Konsisten, artinya berbagai produk bisa memiliki kesamaan feel atau rasa.
Design system pada dasarnya merupakan komponen UI yang digunakan berulang-ulang di dalam cakupan
sebuah produk milik sebuah perusahaan. Komponen UI seperti button, field, modal, dropdown, merupakan
elemen-elemen yang tergabung menjadi sebuah fungsi. Misalnya fungsi field untuk mengisi informasi,
dropdown untuk navigasi, atau button untuk menyelesaikan sebuah aksi.

Komponen dan fungsi merupakan elemen yang tidak bisa berbuat banyak. Tetapi saat digabungkan,
mereka dapat membentuk menjadi sebuah aplikasi yang lebih kompleks. Ini artinya sebuah design system
merupakan salah satu fondasi pembentuk sebuah produk.
Bootstrap, salah satu library komponen UI terpopuler, memiliki style yang sudah terdokumentasi lengkap
mulai dari typeface, grid system, palet warna, sampai komponen UI lainnya. Sebagai sebuah library
komponen visual, Bootstrap merupakan sebuah aturan yang jelas.

Di dalam framework Bootstrap, mereka sudah mengatur besaran header dan paragraf, warna dan bentuk
sebuah button, sampai mendefinisikan grid system yang memudahkan desainer dan programmer
merancang situs web tetap tampil cantik di berbagai ukuran layar berbeda.

Desainer UI bisa dengan mudah melakukan copy paste setiap komponen yang ada di library untuk
membuat mockup high fidelity. Sedangkan di sisi programmer, mereka cukup menggunakan framework
CSS yang sudah disediakan Bootstrap saat membangun produk. Bootstrap memudahkan programmer dan
desainer untuk berkomunikasi satu sama lain.

Salah satu contoh design system terbaik dan terdokumentasi lengkap yang cukup sering kita lihat
sehari-hari adalah Material Design. Diperkenalkan oleh Google pada 2014, Google menciptakan design
system sebagai sebuah panduan yang mengatur tidak hanya bagaimana tampilan produk secara visual,
tetapi juga menentukan cara implementasi komponen dan fungsi yang ada secara fundamental.
Design system dan kaitannya dengan pertumbuhan perusahaan
Dalam membuat sebuah design system yang lengkap dan terdokumentasi dengan baik, seperti Material
Design milik Google, tentu diperlukan proses riset dan user test cukup panjang. Biaya yang diperlukan pun
tidak sedikit demi memastikan setiap komponen dan fungsi di dalamnya bekerja sebagaimana mestinya.

Dari pernyataan di atas, mungkin akan muncul pertanyaan: mengapa harus ada design system? Mengapa
banyak perusahaan rela melalui proses riset panjang dan menggelontorkan banyak uang untuk itu?

Grafik di atas menunjukkan perbandingan proses tradisional dan pendekatan design system dilihat dari sisi
biaya dan durasi pengembangan produk. Di awal masa pengembangan, biaya yang dikeluarkan untuk riset
design system akan terlihat cukup besar ketimbang proses pengembangan tradisional. Namun seiring
waktu, setelah sistem sudah diimplementasikan, kenaikan biaya yang dikeluarkan akan stagnan, berbeda
dengan pertumbuhan konsisten yang dialami proses konvensional.

Dari grafik tersebut, kita bisa melihat bahwa design system sangat cocok digunakan oleh perusahaan yang
bertumbuh. Startup kecil dengan seorang desainer grafis yang hanya memiliki sebuah produk sederhana
mungkin tidak akan merasakan dampak signifikan. Tetapi seiring waktu, ketika perusahaan tersebut
tumbuh pesat menjadi perusahaan multinasional yang memiliki produk berskala besar, peran design
system menjadi sangat krusial.
‘

Tanpa design system, setiap kali tim di dalam perusahaan besar tersebut mengembangkan produk atau
fitur baru, mereka bisa jadi harus merancang fungsi dan tampilan visual yang sama berulang-ulang.
Akibatnya, produk yang mereka ciptakan bisa saja memiliki sepuluh button dengan sepuluh warna biru
yang berbeda.

Contoh yang lebih buruk, mereka akan menghabiskan waktu merancang flow login pengguna untuk tiap
produk yang terpisah. Bisa dibayangkan berapa banyak waktu dan biaya yang terbuang tanpa keberadaan
design system.

Kebutuhan akan adanya design system muncul dari keperluan perusahaan untuk menerapkan efisiensi
dan scalability. Design system yang matang dan terdokumentasi dengan baik akan memberikan
perusahaan banyak waktu dan ruang untuk bereksperimen dan berinovasi.

Dengan design system, tim akan punya lebih banyak waktu dan sumber daya untuk fokus dalam
mengembangkan solusi, tanpa perlu mengkhawatirkan usability dan konsistensi visual sebuah brand.
Design system di sekitar kita
Material Design dan Bootstrap adalah dua dari banyak design system yang lengkap dari sisi fungsi
hingga dokumentasi. Di luar sana, banyak sekali perusahaan yang merancang sendiri design system
sesuai dengan interpretasi dan kebutuhan masing-masing .

Berikut adalah beberapa contoh design system yang bisa menginspirasi kamu.

Airbnb Visual Language

Sebagai perusahaan yang berkembang dengan cepat, Airbnb menyadari pentingnya sebuah pedoman
sistematis demi mengatur cara kerja tim desainer mereka. Bagi Airbnb, desain bagi piranti lunak memiliki
sedikit batasan yang, meski membawa banyak peluang untuk berinovasi, memiliki risiko merusak user
experience.

Empat prinsip yang dipegang Airbnb dalam merancang design system mereka adalah:
● Unified. Setiap komponen harus memiliki peran positif kepada sistem dalam skala besar. Tidak
boleh ada fitur yang terisolasi.
● Universal. Desain harus diterima oleh semua pengguna Airbnb yang tersebar di seluruh belahan
dunia.
● iconic. Sistem harus menggambarkan karakter Airbnb, baik dari sisi desain maupun fungsionalitas,
serta
● Conversational. Desain harus bisa mengomunikasikan produk pada pengguna secara jelas dan
mudah dimengerti.
Polaris oleh Shopify

Sebelum design system Polaris hadir, Shopify terlihat seperti sebuah produk yang dirancang oleh 300
desainer UX. Pendapat ini diucapkan Kyle Peatt, salah seorang periset UX Shopify.

Kenyataannya, mereka hanya memiliki dua orang yang bertugas merancang komponen UI Shopify. Semua
orang yang terlibat dalam perancangan produk sering kali mengubah atau menambahkan elemen dalam
komponen UI yang sudah diciptakan. Akibatnya, inkonsistensi di berbagai tempat pun terjadi.

Polaris hadir dengan dua tujuan besar, yaitu meningkatkan kualitas dasar seluruh proyek Shopify, dan
menciptakan pengalaman konsisten untuk seluruh pengguna produk mereka.

Swarm oleh Meetup

Meetup, sebuah perusahaan penyedia layanan untuk mengelola event dan grup online maupun offline,
juga memiliki sebuah design system yang diberi nama Swarm. Nama Swarm diambil dari definisi design
system mereka yang disebut sebagai sebuah ekosistem “hidup” untuk membantu tim Meetup
menghubungkan pengguna di dunia offline dengan pengalaman terbaik di dunia online.

Design system Swarm mengatur empat komponen utama, desain, brand, konten, dan komponen web.
Swarm mempertemukan para desainer, developer, penulis konten, serta manajer proyek dalam sebuah
aturan yang konsisten.

IBM Design Language

IBM menyadari bahwa seiring peningkatan keberagaman teknologi yang menyokong kebutuhan
manusia—dalam kasus ini, teknologi milik IBM—pengalaman produk akan terasa makin terasing satu
sama lain. Dengan kata lain, harmoni dan konsistensi akan semakin hilang.

Untuk itu, IBM merasa perlu memperkuat value brand mereka lewat design language untuk
menampilkan ciri khas IBM pada setiap hal yang mereka lakukan. Hal ini tercermin tidak hanya
dari tampilan visual produk digital milik mereka (yang diatur secara spesifik oleh Carbon Design
System), tetapi design language juga mengatur visual marketing tradisional, perangkat keras,
event, hingga interior ruangan.

Lewat design system, IBM mengusung prinsip kesatuan, bukan keseragaman. Mengutip dari Eliot
Noyes, desainer industri IBM, “Sebuah perusahaan harus serupa sebuah lukisan. Setiap hal yang
kasatmata harus berkontribusi dalam kesatuan identitas visual secara menyeluruh.”
Perlukah menciptakan design system sendiri?

Sumber gambar: Shopify

Salah satu pelajaran yang bisa diambil dari Kyle Peatt, salah satu orang di balik Polaris, adalah kenyataan
bahwa tidak semua tim memerlukan sebuah design system kompleks dan mengatur segala hal secara
rinci.

Peatt menyatakan bahwa ada problem yang muncul ketika tim diperkenalkan dengan sebuah sistem yang
terlalu kompleks sedari awal. Batasan yang ada bisa menghambat inovasi.

Sering kali sebuah design system yang terlalu rumit lahir dari tim yang terlalu fokus menghindari masalah
di masa depan. Hal ini justru akan menghabiskan banyak waktu dan sumber daya, khususnya bagi startup
kecil yang baru tumbuh.

Sebuah design system perlu berkembang seiring dengan perkembangan produk dan ukuran tim.
Untungnya, banyak sekali design system yang memiliki akses terbuka, contohnya Bootstrap dan Material
Design.

Material Design, contohnya, tidak hanya berfungsi sebagai pedoman internal untuk produk milik Google
saja, setiap orang atau perusahaan bebas menggunakan seluruh komponen visual serta fungsi-fungsi
dasar yang ada. Ini artinya, perusahaan seperti Facebook, Microsoft, Twitter, bahkan perusahaan kamu
sendiri, dapat menerapkan fungsi dan komponen visual Material Design dan menggabungkannya ke
dalam filosofi brand masing-masing individu maupun perusahaan.
Bacaan lebih lanjut
Intro to design system - Zack Lambert, Medium
https://medium.com/@Zacksfunkyfresh/intro-to-design-systems-a983a60fbbaf

What is a design system? - Forumone

https://forumone.com/ideas/what-is-design-system

Design Systems: benefits, challenges & solutions - UXDesign

https://uxdesign.cc/design-systems-62f648c6dccf

Atomic Design - Brad Frost

http://bradfrost.com/blog/post/atomic-web-design/