Design Handoff: Apa itu dan Bagaimana Cara Melakukannya?
Isi Artikel
Design handoff merupakan salah satu hal penting dalam fase development produk, baik itu produk berupa software maupun website.
Product designer, UX designer, ataupun role sejenis merupakan pihak yang bertanggung jawab penuh untuk urusan ini.
Jadi, setelah disetujui oleh product manager atau product owner, product designer, UX designer, atau role serupa berkewajiban melakukan dokumentasi desain produk yang telah mereka rancang.
Dokumentasi tersebut sering kali disebut dengan dokumen design handoff yang nantinya akan diberikan kepada developer untuk diterjemahkan ke dalam bahasa pemrograman.
Untuk mengetahui lebih detail tentang apa itu design handoff, kamu bisa menyimak rangkuman yang Glints buat di artikel berikut ini.
Apa Itu Design Handoff?
© Freepik.com
Design handoff adalah salah satu fase development produk di mana developer akan mulai mengimplementasi design yang dibuat oleh product designer atau UX designer ke dalam bahasa pemrograman.
Perlu digarisbawahi bahwa desain produk yang dibuat oleh product designer atau UX designer adalah rancangan yang sudah matang dan telah disetujui oleh product manager, product owner, atau person in charge.
Melansir Phase, agar proses handoff bisa berjalan dengan baik, kolaborasi antara tim product designer dan developer menjadi hal yang sangat vital.
Dalam proses penerapan desain menjadi bahasa pemrograman, designer bukan menjadi eksekutor dari desain yang mereka rancang.
Maka dari itu, designer perlu mengetahui bagaimana cara developer bekerja dan bagaimana cara tepat untuk menyampaikan rancangan yang mereka buat.
Nah, dokumen design handoff menjadi salah satu medium berkomunikasi antara designer dan developer yang terbukti efektif sampai saat ini di industri.
Apa Itu Dokumen Design Handoff?
© Freepik.com
Sederhananya, dokumen design handoff adalah dokumen yang berisi informasi-informasi penting dari rancangan desain yang dibuat oleh product designer untuk developer.
Dokumen tersebut menjadi salah satu medium pendukung komunikasi antara designer dan developer. Fungsinya utamanya tidak lain agar proses development product semakin mudah untuk dilakukan.
Simpel, mudah dimengerti, dan mudah diakses oleh anggota tim yang terlibat menjadi aspek utama yang perlu diperhatikan dalam pembuatan dokumen ini.
Selain itu, product designer atau UX designer perlu untuk menghindari penggunaan jargon-jargon desain ketika menyampaikan pesan dalam dokumen design handoff.
Melansir UX Design, berikut ini adalah komponen layer informasi yang perlu ada dalam dokumen design handoff:
- mockup
- interaction
- copy
- specs & assets
- checklist
5 Komponen Layer Informasi dalam Dokumen Design Handoff
Mockup, interaction, copy, specs & assets, dan checklist merupakan komponen layer informasi yang harus ada dalam dokumen design handoff menurut sumber UX Design.
Di bawah ini, Glints akan membagikan penjelasan dari masing-masing layer yang dimaksud dan bagaimana cara mendokumentasikannya.
1. Mockup
© UXDesign.cc
Mockup adalah visualisasi (tampilan) dari hasil akhir rancangan desain produk (baik itu web atau software), namun tidak dapat berfungsi (statis) karena belum ada elemen interaktif apapun yang diimplementasikan.
Untuk pembuatan mockup, tool yang biasa dipakai antara lain yakni Figma, InVision dan Marvel.
Product designer umumnya akan membuat mockup versi mid-fidelity dan high-fidelity untuk developer. Namun, ada dua hal lain yang tidak kalah penting yang perlu diupayakan, yakni:
Memberi nama file dengan jelas dan konsisten
Nama file dan screen dari mockup produk seharusnya disesuaikan dengan fungsinya.
Selain itu, kita juga perlu untuk menerapkan penggunaan ‘besar-kecil huruf’ secara konsisten dalam penamaan file atau screen. Misalnya: “namaFile”; “Nama file”; “nama file”; dan lain-lain.
Pola penamaan file atau screen yang konsisten akan memudahkan developer ketika melakukan pencarian file yang mereka butuhkan.
Hilangkan elemen-elemen yang tidak lagi diperlukan
Biasanya, mockup akan berisi juga elemen-elemen desain sisa dari proses iterasi atau eksplorasi ketika melakukan perancangan desain produk.
Kamu perlu menghilangkan elemen-elemen tersebut sebelum membuat arsip final-nya untuk developer.
Hal tersebut akan membuat dokumentasi semakin rapi dan mudah dipahami.
2. Interaction
© UXDesign.cc
Interaction adalah salah satu komponen informasi yang penting untuk disampaikan kepada developer. Komponen inilah yang membuat website atau software dapat berinteraksi dengan user.
Cara mengomunikasikan elemen interaction bisa dilakukan melalui dua cara.
Yang pertama pembuatan interactive prototype (rancangan desain web atau software yang interaktif) atau memberikan kalimat penjelasan pada masing-masing mockup screen yang statis (desain rancangan yang tidak interaktif).
Kamu bisa memilih cara yang mana saja, opsi untuk mengkombinasikan dua cara yang dijelaskan di atas juga sangat mungkin dilakukan.
Yang terpenting adalah dokumentasi komponen ini dapat dimengerti dengan baik oleh developer.
Nah, di bawah ini ada dua tips yang bisa kamu pakai ketika harus mendokumentasikan komponen interaction, yakni:
Membuat flow
Membuat mockup merupakan langkah paling awal. Setelah itu, kamu perlu untuk merangkai mockup sesuai dengan flow user journey.
Merangkai flow juga bisa kamu lakukan dengan cara membuat interactive prototype screen. Terlebih untuk screen yang memiliki banyak elemen interaction.
Flow ini akan membuat product manager/product owner lebih mudah memahami bagaimana user journey dari sebuah produk bekerja.
Dokumentasi flow ini juga akan membantu tim developer untuk merencanakan seperti apa pendekatan coding yang cocok untuk mereka terapkan.
Mengecek fidelity tiap screen
Sederhananya, kategori fidelity screen bisa dibagi menjadi tiga level yakni low fidelity, medium fidelity, dan high fidelity.
Low fidelity screen biasanya memiliki sedikit elemen interaction. Sebaliknya, high fidelity memiliki banyak sekali elemen interaction.
Untuk mendokumentasikan elemen interaction pada low fidelity screen, kita masih bisa menjelaskan elemen-elemen interaction-nya melalui paparan kalimat pendek pada mockup statis.
Akan tetapi, jika screen memiliki elemen interaktivitasnya yang begitu rumit, ada baiknya dokumentasi dilakukan dengan cara membuat interactive prototype screen.
Bahkan kalau perlu, developer dan product designer bisa menyempatkan waktu khusus untuk berdiskusi secara langsung mengenai screen tersebut.
Oh iya, sebaiknya hindari penjelasan pola-pola interaksi sederhana yang sudah umum diketahui oleh developer, ya.
3. Teks copy
© UXDesign.cc
Teks copy termasuk elemen selalu ada pada sebuah website maupun software.
Menurut pengakuan dari Bilal Mohammed, seorang product designer, sebagian besar tim produk dan desain yang ada di industri menyisihkan porsi yang cukup kecil untuk proses copywriting.
Meski memang ada juga perusahaan yang mempekerjakan copywriter specialist atau UI/UX writer dalam tim produk mereka.
Terlepas ada atau tidaknya role khusus yang mengurusi pembuatan teks copy dalam suatu tim, penting untuk memastikan semua teks copy terdokumentasikan dengan baik dalam dokumen design handoff.
Nah, langkah-langkah di bawah ini bisa kamu terapkan untuk mendokumentasikan teks copy:
- Gunakan cloud tool seperti Google Sheets atau Dropbox Paper agar dokumen teks copy lebih mudah diakses oleh masing-masing anggota yang terlibat dalam project.
- Buat sebuah tabel yang berisikan 3 kolom. Tiga kolom tadi masing-masing akan diberi nama: tipe, heuristik (kegunaan), dan message.
- Pada kolom tipe, kamu bisa mengelompokkan teks copy berdasarkan screen-nya. Misalnya, teks copy yang ada di screen Homepage, Blog, Daftar, Log In, Kategori, dan lain-lain.
- Di bagian heuristik (kegunaan), kamu bisa menjabarkan situasi atau konteks dari penggunaan copy. Misalnya, “copy A” akan muncul saat user gagal melakukan login karena salah meng-input password.
- Penjelasan semacam ini, akan membantu developer mengerti konteks atau situasi kemunculan pesan.
- Yang terakhir, message. Ini adalah kolom khusus yang akan menjadi tempat teks copy asli atau teks copy versi penuh. Jadi, developer dapat mendistribusikan teks secara langsung ke titik yang diinginkan tanpa perlu menulis ulang.
4. Specs and assets
Design specs merupakan bagian detail dari user interface produk. Menurut sumber Mockplus, elemen ini pada dasarnya mencakup warna, styles, measurements, hingga assets.
Ada dua metode yang bisa kamu pakai untuk mendokumentasikan elemen specs dan assets. Pertama menggunakan tool otomasi dan yang kedua secara manual.
Namun, di artikel ini Glints hanya akan membagikan cara mendokumentasikan specs dan assets yang memanfaatkan tool otomasi saja. Cara yang dimaksud yakni sebagai berikut.
Dokumentasi specs dan assets menggunakan tool otomasi
Cara cepat untuk mendokumentasikan design specs dan assets yakni menggunakan tool otomasi seperti Zeplin, Avocode, InVision Inspect, dan Sympli.
Sejumlah tool tersebut dapat mendokumentasikan design sesuai spesifikasi ukuran, measurement, dan specs yang dibutuhkan.
Tool seperti Avocode tercatat dapat mengubah sketsa design versi desktop menjadi versi iOS, Android, hingga React Native code.
Sementara itu, tool seperti Sympli memiliki plugin Xcode dan Android Studio bisa dimaksimalkan untuk pembuatan responsive design.
Penggunaan tool otomasi bisa membuat penataan layer-layer dan grup-grup lebih rapi. Jadi, developer akan lebih mudah dalam menyerap informasi dan mengimplementasikan coding yang diperlukan.
Memastikan desain terimplementasi dengan tepat
Setelah menyerahkan dokumen design handoff, product designer perlu membantu memastikan bahwa desain yang mereka buat telah terimplementasi dengan baik oleh tim developer.
Biasanya, tim developer akan menggunakan tool seperti Jira atau Trello untuk mendokumentasikan proses development yang mereka lakukan.
Product designer, UX designer, ataupun role yang bertanggung jawab atas pembuatan desain dapat mengecek perkembangan development melalui tool tersebut.
Jika ada hal yang perlu dikonfirmasi, product designer bisa mengajukan tiket melalui Jira atau Trello.
Dengan cara ini, akuntabilitas development produk bisa terjaga dengan baik, komunikasi masing-masing role dapat terdokumentasi dengan baik, dan mampu direspon dengan cepat oleh masing-masing pihak.
5. Checklist
© UXDesign.cc
Dalam proses handoff, ada banyak file desain yang akan di-share dan di-develop. Ketika proses eksekusi desain sudah berjalan, tidak jarang ditemui adanya kasus ‘desain atau file yang hilang‘.
Agar hal semacam itu dapat dihindari, kamu bisa membuat dokumen checklist. Dokumen checklist tersebut bisa dibuat menggunakan Google Sheets maupun Dropbox Paper yang bisa dengan mudah diakses secara online.
Nah, berikut ini cara yang dapat kamu terapkan dalam membuat dokumen checklist yang dimaksud:
- Membuat serta mengelola checklist yang memuat semua poin fitur dan case dari design product versi final.
- Checklist dari poin fitur dan case harus diberi status yang bisa menunjukkan keterangan khususnya. Misalnya, apakah dokumen dari case atau fitur tersebut sudah diambil oleh tim developer atau belum.
- Agar keterangan makin lengkap, ada baiknya untuk menambahkan link yang menerangkan lokasi pengambilan file desain.
- Buatlah kolom yang menerangkan dependency dari semua fitur atau case yang perlu diimplementasi. Tambahkan juga kolom description untuk memperjelas konteks fitur dan case yang dimaksud.
Handoff Meeting: Proses setelah Dokumentasi
© Freepik.com
Setelah mendokumentasikan desain final, tim desainer produk (atau perwakilannya) perlu untuk memberikan informasi lebih jauh terkait rancangan yang sudah mereka buat.
Pertemuan yang bertujuan untuk menjelaskan rancangan desain final ini sering kali disebut dengan handoff meeting.
Handoff meeting bertujuan untuk memastikan semua informasi jelas tersampaikan dan dipahami oleh tim developer (atau perwakilannya), project manager, atau person in charge dalam proyek development produk.
Melansir sumber UX Planet, berikut ini saran poin-poin yang perlu dibahas dalam handoff meeting:
- Menjelaskan background dari project yang sedang dikerjakan.
- Mencoba rangkaian user journey dari sistem desain dan prototipe yang sudah dibuat.
- Memberi penjelasan singkat atas informasi-informasi yang ada dalam dokumentasi design.
- Mengetahui parameter kesuksesan yang akan dinilai dari proses development produk.
- Masing-masing pihak yang terlibat dalam rapat mengetahui timeline, milestone, atau goals dari project yang sedang berlangsung.
- Membuka sesi tanya jawab.
- Product owner, project owner, atau person in charge memberikan dukungan moril untuk seluruh tim yang terlibat dalam project.
Dalam pembuatan dokumen design handoff, designer perlu memberikan informasi yang simpel, mudah dipahami, dan tidak menggunakan jargon-jargon desain.
Cara tersebut akan membuat tim engineer lebih cepat dan mudah dalam melangsungkan proses development.
Handoff boleh dibilang adalah salah satu fase vital dalam development sebuah produk.
Jika terjadi banyak kesalahpahaman dalam fase ini, timeline development bisa molor, launching product bisa mundur dari jadwal, dan rentetan konsekuensi-konsekuensi lainnya.
Maka dari itu, dibutuhkan kolaborasi dan komunikasi yang baik antara anggota-anggota yang terlibat dalam fase ini.
Jadi, bagaimana? Masih haus untuk membaca artikel-artikel informatif lain tentang desain produk atau UI/UX?
Jika iya, kamu bisa mencari bacaan yang sesuai dengan minatmu tersebut di Glints Blog.
Pastinya, informasi yang akan kamu dapatkan bisa menambah skill dan wawasanmu untuk menjadi product designer atau UI/UX designer yang lebih profesional lagi.
Yuk, segera cari bacaan sesuai minatmu di sini!
