Ketika Desain bertemu Rekayasa di Traveloka

Ini bukan kisah cinta biasa.

Catatan: Ini hanya salah satu interaksi antara Desain dan Rekayasa. Saya berbicara dari satu spektrum kecil dari semua interaksi antara Desain dan Rekayasa di Traveloka. Dan ini adalah kisah saya.

Seiring berjalannya waktu, Traveloka telah ada selama 6 tahun. Dalam perjalanan ini, kami mengakui bahwa kami memiliki banyak bug visual yang telah ada cukup lama, seperti nuansa oranye yang berbeda untuk tombol atau margin yang tidak konsisten di antara kartu.

Tim desain memprakarsai upaya untuk menstandarkan bahasa visual kita dengan membangun kit desain kita sendiri untuk mencegah anomali visual baru yang menyimpang dari standar kita. Kami sudah mencoba, tetapi entah bagaimana masalah ini tidak pernah terpecahkan. Bahkan setelah kami memiliki kit desain kami sendiri, kami masih melihat ketidakkonsistenan visual pada produk kami.

Di sisi lain, teknisi kami perlu bekerja lebih efisien. Mereka lebih suka membangun komponen yang sama dari awal daripada melihat ke atas untuk menemukan komponen yang sama untuk digunakan kembali. Karena mencari komponen-komponen ini adalah gesekan dalam alur kerja mereka saat ini.

Selama ini, tim Desain dan tim Teknik berusaha memecahkan masalah mereka sendiri tanpa berkomunikasi satu sama lain. Itu memunculkan pertanyaan tentang kemungkinan Desain dan Rekayasa bekerja bersama untuk memecahkan masalah yang kita berdua temui setiap hari. Siapa yang tahu bahwa Desain dan Rekayasa dapat berjalan beriringan dan menumbuhkan cinta dalam prosesnya?

Kapan pertama kali mereka bertemu?

Pembicaraan dimulai pada awal 2018 ketika tim Teknik melakukan penelitian tentang React Native dan React Native Web (React Native adalah kerangka kerja untuk membangun aplikasi seluler menggunakan JavaScript). Ketika penelitian ini dimulai, Pengembang Web UI dari tim Desain terlibat.

Selama proses tersebut, tim Teknik memiliki ide untuk menggunakan React Native sebagai basis untuk pengembangan lintas platform. Ini termasuk pengembangan Web Seluler di mana Pengembang Web UI dapat melibatkan untuk membuat komponen di dalamnya.

Ketika inisiatif ini dimulai, kami sangat bersemangat untuk mempelajari React Native dan memanfaatkan yang terbaik karena kami dapat membuat dampak yang lebih signifikan dan membuat komponen untuk semua platform yang tersedia dari satu sumber kode. Dan di sinilah kita pertama kali saling mengenal.

Bagaimana cinta itu tumbuh?

Kami bertemu satu sama lain beberapa kali setelah itu, tetapi tidak ada yang muncul dalam hati kami. Tapi kemudian, percikan muncul ketika kita memiliki magang ini. Semuanya dimulai sesederhana proyek magang.

Magang ini adalah insinyur Asli Bereaksi dan ditugaskan untuk membangun apa pun yang dapat memperlancar kolaborasi antara Desain dan Rekayasa. Dia mulai membangun perpustakaan komponen, beberapa plugin sketsa yang menakjubkan untuk para desainer, dan meneliti kemungkinan kolaborasi lainnya antara Desain dan Rekayasa.

Selain itu, tim Desain juga memiliki inisiatif untuk membuat sumber tunggal berbasis kebenaran (SSOT) berbasis kode untuk token dan komponen desain. Kedua gerakan ini menginspirasi kami untuk berkolaborasi dalam misi ini. Di sinilah cinta menyala, dan kami percaya bahwa kami mengalami masa depan yang lebih cerah bersama.

Kemana cinta membawa kita?

Setelah beberapa kali berkencan (baca: rapat), akhirnya kami sepakat untuk membawa hubungan kami ke level selanjutnya. Itu bukan jalan yang mudah untuk dilalui, tetapi kami percaya bahwa ini adalah jalan yang tepat untuk kami. Memahami satu sama lain adalah kunci penting untuk hubungan yang baik, bukan? Dan itulah yang kami lakukan ketika kami memutuskan untuk berkolaborasi.

Kami mulai dengan memahami cara kerja satu sama lain. Dan setelah malam-malam penuh mimpi buruk dan jalan-jalan yang penuh dengan rintangan, kami akhirnya menuju kolaborasi yang lebih baik. Berikut adalah komitmen kami untuk mencapai kolaborasi yang lebih baik antara Desain dan Rekayasa:

1. Sistem desain berbasis kode.

Kolaborasi antara Desain dan Rekayasa cukup menantang. Jembatan antara desain dan kode tidak cukup kuat dan itu membuat pekerjaan menjadi sulit di antara kami.

Kami kemudian mendapat ide untuk membuat sistem desain berbasis kode. Kami menempatkan token desain kami dalam JavaScript, yang merupakan cara termudah untuk digunakan insinyur, namun masih cukup sederhana untuk dikelola oleh perancang.

Kami bekerja sama untuk membangun komponen kerajinan tangan kami sendiri yang memenuhi standar Desain dan Rekayasa. Komponen-komponen itu akan digunakan pada semua platform untuk membangun konsistensi pada desain kami.

2. Sketsa plugin.

Plugin Sketch ini berfungsi seperti jembatan antara desain dan kode. Di sisi Desain, ini membuat kolaborasi lebih mudah karena desainer tidak perlu membuat komponen yang sama berulang kali. Ini juga akan membantu perancang untuk membangun antarmuka pengguna mereka berdasarkan komponen standar.

Di sisi Teknik, plugin ini akan menerjemahkan antarmuka pengguna ke dalam kode yang dapat dengan mudah diimplementasikan oleh insinyur. Ini akan mengurangi waktu kerja insinyur karena mereka tidak perlu mencari komponen yang ada dari desain sebelumnya.

3. Desain linter dan pengujian visual terintegrasi.

Setelah bekerja dengan antarmuka pengguna dan kode, langkah selanjutnya adalah memastikan bahwa keduanya terstandarisasi. Di sinilah linter desain dan pengujian visual terintegrasi mengambil bagian. Kami saat ini sedang meneliti kemungkinan untuk mengembangkan linter desain dan pengujian visual terintegrasi untuk bekerja seperti sebagai jaring pengaman untuk antarmuka dan kode pengguna kami. Dari sisi desain, desain linter akan mendorong Desainer UI untuk menggunakan komponen standar. Sementara itu dari sisi teknik, pengujian visual akan mengurangi kemungkinan anomali visual ketika produk dirilis. Ini akan membuat kehidupan desainer dan insinyur menjadi lebih mudah di masa depan.

4. Desain dokumentasi sistem.

Saat berkolaborasi dengan tim yang berbeda, senang memiliki pedoman yang bisa Anda rujuk. Dokumentasi sistem desain berfungsi sebagai Alkitab desain yang dapat diakses oleh semua pemangku kepentingan, termasuk Manajer Produk, insinyur dan sesama desainer. Ini penting untuk memastikan bahwa semua orang berada di papan yang sama tentang mengapa keputusan desain dibuat. Ini juga akan membantu untuk menghindari ketidaksepakatan desain antara tim karena setiap desain dipertimbangkan dengan cermat.

Ilustrasi oleh Ralistu Hayu Pratiwi

Dengan semua langkah kecil ini, kami percaya bahwa kami dapat membuat kolaborasi dan integrasi yang lebih baik di masa depan antara satu sama lain. Kolaborasi ini juga akan membuka kemungkinan untuk menciptakan produk yang lebih baik.

Pada akhirnya, mendesain produk bukan hanya bagaimana membuatnya terlihat cantik dan menarik. Ada juga banyak upaya rekayasa untuk membuat desain bekerja dengan sempurna. Ini menggambarkan pentingnya kolaborasi antara Desain dan Rekayasa; karena kita tidak bisa hidup tanpa satu sama lain dalam membangun produk yang baik. Seperti yang dikatakan Steve Jobs,

“Desain tidak hanya seperti apa dan rasanya. Desain adalah cara kerjanya. "