Beyond Design Handoffs: Mengomunikasikan Desain dengan Developer

Designer dapat menguji solusi lewat usability testing. Setelah lulus uji coba, Developer melihat design specs-nya. Dengan cekatan, Developer menulis barisan code dari design specs tersebut seperti warna, ukuran dan jarak hingga alur interaksi. Dua sprint kemudian, produk dengan fitur terbaru rilis.

Proses memberikan design specs ke Developer, atau disebut juga dengan design handoffs, turut dibantu dengan berbagai tools yang mempermudah Designer memberikan file desainnya ke Developer. Proses design handoffs selama ini terlihat berjalan baik-baik saja, hingga interaksi Designer dan Developer hanya sebatas menyerahkan tugas dari satu tangan ke tangan lain. Kolaborasi menjadi dingin. Saling memberi masukan harusnya menjadi budaya dalam kolaborasi tim.

Kolaborasi yang berkelanjutan baik pada tahap desain maupun implementasi akan membuka ruang terhadap pandangan-pandangan baru. Mari bandingkan dua kondisi berikut:

Kondisi pertama: Designer mengirimkan design specs ke Developer. Developer melakukan implementasi desain. Selesai.

Kondisi kedua: Designer mengikutsertakan Developer pada tahap sebelum desain dikerjakan, saat desain diimplementasi, hingga setelah hasil implementasi dirilis.

Pada kondisi pertama, kolaborasi hanya sebatas menyerahkan tugas dari Designer ke Developer. Tidak ada ruang untuk memberikan feedback dari sudut pandang masing-masing. Bandingkan dengan kondisi kedua, kolaborasi secara berkelanjutan akan membuka ruang kepada anggota tim untuk memberikan feedback, idea, dan input yang sesuai keahlian mereka, selain itu juga bisa memberikan shared sense of purpose ke tim lain.

🔄 Kolaborasi yang Berkelanjutan

Saya pernah membaca sebuah pertanyaan di suatu forum, “Apa ya toolspaling recommended untuk ngasih desain ke developer?”. Saya tersenyum saat mendengar salah satu jawaban, “Tools terbaik? Kursi. Duduklah di samping mereka”.

“Benar juga,” kata saya dalam hati. Interaksi paling efektif terkadang memang interaksi tatap muka. Diskusi akan lebih sering terjadi. Sudut pandang terhadap masalah dan solusinya menjadi lebih luas.

Pada suatu sesi sprint update mingguan, Product Manager menginisiasi, “Untuk project yang ini mari kita adakan update mingguan terpisah, karena banyak hal yang harus dibahas”. Di update mingguan tersebut, Designer dan Developer saling menyampaikan ide dan concerns mereka. Diskusi Designer dan Developer masih berlanjut hingga di meja kerja. Kolaborasi ini membuat interaksi dalam tim jadi lebih erat.

Beberapa minggu kemudian, project itu siap untuk masuk ke tahap uji coba oleh tim Quality Assurance (QA). Designer dan Developer pun masih ikut dilibatkan hingga tahap akhir uji coba tersebut.

User Interface Designer membantu mencari apakah ada design specs yang belum sesuai. Interaction Designer ikut serta menguji hasil implementasi dengan konsep awal. Product Copywriter dan Copy Editor memastikan tiap copy di desain sudah sesuai. Developer dan QA memastikan semua fitur telah bekerja dengan baik. Semua bekerja sama demi memberi better experienceuntuk User.

Saat itu, saya menyadari bahwa semua orang di tim punya kepedulian yang sama agar User mendapatkan pengalaman terbaik.

Berikut beberapa hal yang dapat dilakukan untuk kolaborasi Designer dan Developer yang lebih baik.

💬 Sesuaikan Bahasa dengan Developer

“Artefak desain bentuknya bisa macam-macam, bisa file desain itu sendiri, dokumen, diagram, atau malah hanya coretan di kertas. Tentukan seberapa detail artefak desain yang diperlukan, berdasarkan kepada siapa desain tersebut akan dipresentasikan.” – kata Arie, User Interface Designer di Traveloka dalam sync mingguan kami.

Menyesuaikan artefak desain berdasarkan audiensnya sangat penting dalam kolaborasi. Mengapa? Karena jika yang dipresentasikan sesuai dengan audiens, feedback yang didapat akan sangat membantu dan relevan.

Penyesuaian serupa juga berlaku dalam design handoffs. Sebelum mengerjakan desain, setujui aturan-aturan bersama Developer.

Aturan-aturan dalam design specs, misalnya:

• Selalu sertakan semua kemungkinan user interface (UI) states (Tampilan error, tampilan ketika tidak ada data, dll.)
• Tentukan pola untuk nama layer yang mudah dimengerti, dan konsisten dalam satu dokumen.

Tentukan pola penamaan layer yang konsisten.

• Susun layer ke dalam folder berdasarkan komponen UI-nya (Buttons, Header, Text Fields, dll.)
• Tambahkan links ke dokumentasi di tools kolaborasi dengan Developer yang digunakan.

Atur urutan screens di tools untuk design handoffs-mu dengan Developer agar mudah dipahami.

• Jangan menunggu hingga semua desain selesai untuk mulai merapikan desainmu. Namun, rapikan sembari sedang mengerjakan desain halaman tersebut.

⚡ Memberikan Actionable Feedbacks

Bantu Developer dan QA dengan memberikan actionable feedbacks atau dengan lingkup masalah yang sempit dan spesifik. Feedback yang sangat spesifik pada tahap akhir uji coba penting untuk membantu Developer menyelesaikan implementasinya.

Misalnya, untuk membantu Developer memperbaiki implementasi desain yang kurang sesuai dengan mudah, dapat kita dukung dengan menyertakan dokumen design specs.

Sertakan referensi dokumen (misalnya dokumen design specs) untuk membantu Developer memperbaiki hal yang kurang sesuai dengan mudah.

Beri contoh hasil implementasi yang diharapkan.

Memberikan actionable feedbacks saat tahap uji coba akhir misalnya membuat daftar hal-hal apa saja yang belum sesuai dengan desain yang diharapkan. Sertakan screenshot hasil implementasi oleh Developer. Sertai juga screenshotdari desain yang diharapkan. Kemudian berikan solusi yang bisa dilakukan oleh Developer dalam bentuk dokumen design specs yang lebih detail.

Lebih jauh tentang hal-hal yang harus diketahui sebelum memberikan feedback dapat dibaca di artikel berikut.