Di DataCamp, misi kami adalah mendemokratisasi pendidikan ilmu data untuk semua orang, dan dengan lebih dari 2 juta pelajar di seluruh dunia kami membuat kemajuan pesat. Beroperasi pada laju pertumbuhan ini membutuhkan banyak upaya dari semua orang di perusahaan dan menghadirkan banyak tantangan baru yang menarik.
Bagi tim desain, ini berarti kami beralih dari desain halaman per halaman ke cara mendesain yang lebih skalabel. Menggunakan kembali komponen yang ada, mengurangi waktu pengembangan, meningkatkan kegunaan, dan meningkatkan aksesibilitas menjadi semakin penting.
Artikel ini membahas bagaimana kami mulai memahami sebuah design system.
Apa itu design system?
Sebuah design system menyatukan semua komponen yang dibutuhkan untuk mendistribusikan dan mereproduksi suatu solusi desain. Ini bukan sesuatu yang baru atau eksklusif untuk desain produk digital — banyak contohnya dapat ditemukan sepanjang sejarah.
Misalnya, kekaisaran Tiongkok pertama menghadapi masalah bahwa para pemanah tidak bisa menggunakan anak panah milik rekan mereka. Setiap anak panah dirancang khusus untuk busur tertentu, sehingga anak panah lain tidak akan cocok. Kaisar Tiongkok pertama, Ying Zheng, menstandarkan cara anak panah dirancang dan hal itu berdampak besar pada penaklukan militer mereka.
Pada tahun 50-an, setiap stasiun di NYC Transit System memiliki rambu sendiri. Ini menimbulkan banyak kebingungan karena setiap stasiun punya cara navigasi yang berbeda. Akibatnya, banyak orang enggan menggunakan sistem transportasi tersebut karena mereka tidak paham cara kerjanya. Massimo Vignelli dan Bob Noorda membuat NYC Transit Authority — Graphics Standards Manual, yang mendokumentasikan bagaimana rambu harus dibuat dan bagaimana penempatannya di dalam stasiun. Seiring waktu, sistem ini kurang lebih tetap sama dan masih aktif digunakan hingga kini.
Mengapa kita perlu design system?
Ketika setiap halaman dirancang secara terpisah, banyak komponen menjadi duplikat atau memiliki alternatif yang mirip. Ini membuat produk digital sulit dipahami oleh pengguna dan sulit dipelihara oleh tim engineering. Di DataCamp, kami menemukan lebih dari 20 tombol berbeda di seluruh produk kami, masing-masing dengan keunikan sendiri (status hover berbeda, status nonaktif tidak konsisten, dan sebagainya). Sulit untuk melacak semua komponen ini ketika produk berkembang pesat dan hampir mustahil untuk memeliharanya. Di sinilah design system berperan.
Untuk produk digital, sebuah design system menggambarkan komponen antarmuka pengguna yang dapat digunakan untuk membangun antarmuka yang memecahkan masalah dan menghasilkan pengalaman yang kohesif bagi pengguna.
Ketika design system dijalankan dengan baik, ia akan menghasilkan efek berantai yang …
- Mengurangi miskomunikasi
- Mengurangi waktu implementasi
- Mengurangi pekerjaan pemeliharaan
- Mengurangi bug
- Mengurangi tiket dukungan
- Meningkatkan kualitas
- Meningkatkan efisiensi
- Meningkatkan daya tahan jangka panjang
- Meningkatkan kemudahan dipelajari
- Meningkatkan kegunaan
- Meningkatkan aksesibilitas
- Meningkatkan inovasi
- Meningkatkan fokus
- Meningkatkan penjualan
Ini tidak mudah …
Membuat, memelihara, dan menegakkan sebuah design system membutuhkan banyak disiplin dan upaya berkelanjutan dari semua pihak yang terlibat dalam proses pembuatan. Ini bukan hanya urusan desain; engineering dan manajemen produk juga merupakan pemangku kepentingan penting. Semua pihak harus mampu mengajukan pertanyaan sulit seperti: “Mengapa kita membangun ini?”, “Bisakah kita menggunakan kembali komponen ini di tempat lain?”, “Apakah kita sudah punya sesuatu yang serupa?”, “Apakah komponen kustom ini memberikan manfaat yang cukup dibandingkan upaya yang kita keluarkan?”.
Design System 101 di DataCamp
1. Membuat Inventaris Komponen
Tujuan: Memastikan semua orang mengetahui keberadaan dan status suatu komponen.
Saat saya mulai di DataCamp, ada file Sketch yang berisi warna, ikon, font, dan beberapa komponen dasar. Itu jauh dari lengkap namun menjadi titik awal yang baik. Front-end engineering juga memiliki kumpulan komponen yang mereka gunakan lintas proyek.
Bersama-sama kami membuat inventaris di Airtable berdasarkan komponen yang digunakan di produksi. Ini memberi tim desain gambaran tentang apa yang sudah ada dan mencegah kami tanpa sadar membuat komponen baru. Ini juga memberi kami wawasan tentang berapa banyak komponen serupa yang kami miliki dan seberapa buruk situasinya sebenarnya.
2. Gunakan Konvensi Penamaan
Tujuan: Menghindari miskomunikasi antara Desain dan Engineering.
Saat kami mulai membandingkan komponen, kami menyadari Desain dan Engineering tidak menggunakan bahasa yang sama. Misalnya, ‘warna primer’ yang didefinisikan oleh desain adalah ‘warna sekunder’ di kode. Hal seperti ini dapat menimbulkan miskomunikasi saat tim mulai berkembang dan menyebabkan kebingungan serta frustrasi. Kami memastikan kosakata yang sama digunakan di berbagai tim.
3. Optimalkan Alur Kerja Desain
Tujuan: Menghindari hilangnya pekerjaan dan memiliki alur kerja yang transparan.
Bekerja bersama sebagai tim desain menghadirkan tantangannya sendiri. Kami dulu menyimpan desain di Dropbox, tetapi ketika tim kami mulai berkembang, risiko kehilangan pekerjaan dan upaya melacak perubahan meningkat drastis.
Tim desain kami sangat terbuka untuk perubahan alur kerja dan kami mulai menggunakan Abstract. Ini memungkinkan kami melakukan versioning desain dengan tepat, memiliki alur kerja yang transparan, dan lebih percaya diri saat mendesain.
4. Dokumentasi + Onboarding yang Lebih Baik
Tujuan: Mempercepat onboarding karyawan dan mencegah beban komunikasi berlebih.
Kami mulai mendokumentasikan proses dan design system kami menggunakan Slite. Jika kami harus menjelaskan sesuatu lebih dari sekali, maka hal itu harus didokumentasikan dan dibagikan ke tim. Ini menghindari banyak beban komunikasi dan mencegah informasi hilang.
5. Tinjauan Desain
Tujuan: Menetapkan ekspektasi antara Desain dan Engineering.
Penting agar tinjauan desain terjadi dua arah. Desainer harus bisa meninjau front-end, tetapi front-end juga harus bisa meninjau desain. Desainer memiliki dorongan untuk membuat sesuatu yang keren dan baru. Engineer harus mampu mengajukan pertanyaan sulit seperti: “Mengapa kita membuat sesuatu yang kustom?”, “Tidakkah kita bisa menggunakan kembali komponen ini?”, “Bisakah kita membuat komponen ini lebih baik?”, “Apakah komponen ini sepadan dengan upaya pengembangan ekstra?”. Ini tentang membenarkan keputusan dan menetapkan ekspektasi bagi semua yang terlibat.
Kesimpulan
Kami baru mulai menyusun design system kami dan masih berusaha memahami semua komponen duplikat yang kami temukan di seluruh produk. Masih ada jalan panjang ke depan, tetapi dengan setiap komponen yang kami sentuh, kami menciptakan produk yang lebih baik, lebih konsisten, dan lebih mudah dipelajari bagi pelanggan kami.
Kami penasaran bagaimana organisasi lain memahami sebuah design system. Kirimi saya email jika Anda ingin berbagi pengalaman.
Di DataCamp kami selalu mencari orang berbakat untuk bergabung dengan tim kami. Tertarik? Lihat lowongan yang tersedia.
