Skillset UI Designer dalam Sebuah Cerita

4. Membuat Wireframe

Setelah alur pembelian paket wisata selesai dibahas, kemudian Andi membuat wireframe dari tiap halaman.

Kemudian menyatukan semuanya dalam satu gambar, lalu menghubungkan antar halaman menggunakan anak panah.

Andi melakukannya hanya dalam waktu 3 jam. Andi membuat wireframe yang super simple. Karena tujuan Andi membuat wireframe adalah mengkomunikasikan ide yang ia punya terkait dengan letak informasi dan elemen di tiap halaman dan bagaimana perpindahan antar halamannya.

Contoh Wireframe | Sumber: dribbble.com

5. Membuat Moodboard

Setelah membahas mengenai wireframe dan melakukan brainstorming ulang, Akhirnya didapatkan sebuah konsep alur pembelian paket wisata versi pertama.

Sebelum Andi mulai merancang high-fidelity design, yang Andi lakukan adalah membuat moodboard bersama para stakeholder.

Dalam proses pembuatan moodboard, Andi meminta para stakeholder untuk mengumpulkan desain desain dari dribbble, behance, pinterest, pttrns dan situs lainnya.

Andi lalu menanyakan bagian mana yang disukai dan sesuai dengan brand perusahaan.

Pembuatan Moodboard penting agar semua stakeholder memiliki satu pandangan bagaimana tampilan produk ini. Dari mulai warna, style ilustrasi, style icon dan lainnya yang terkait visual.

Contoh Moodboard untuk icon | Sumber: https://dribbble.com/thebuddyman/buckets/406240-FL

Contoh Moodboard untuk aplikasi dengan aksen biru | Sumber: https://dribbble.com/thebuddyman/buckets/402094-Blue-App

6. Mendesain dengan pertimbangan data

Saat membuat high fidelity design, Andi kembali menanyakan beberapa hal terkait user kepada UX Researcher.

Andi menanyakan, “Dari hasil survey yang dilakukan apa yang menjadi pertimbangan seseorang dalam memilih paket wisata?”

Dengan mengetahui jawabannya Andi bisa membuat daftar info apa saja yang perlu ditampilkan. Dan daftar info inilah yang kemudian akan di susun oleh Andi menjadi suatu tampilan yang nyaman untuk dibaca oleh user.

Dengan mendesain dengan pertimbangan data, yang diharapkan adalah user lebih cepat menentukan paket wisata mana yang akan diklik untuk dilihat lebih detail.

Proses High Fidelity Design menggunakan Sketch App

7. Mendesain dengan sudut pandang user

Saat membuat sebuah tombol pemesanan Andi berpikir……

• Tombolnya kekecilan enggak ya?
• Tombolnya mudah dilihat enggak ya?
• Tombol nya kelihatan bisa diklik gak ya?
• User bakal tahu ini tombol gak ya?

Pertanyaan pertanyaan tersebut muncul karena Andi khawatir nantinya design yang ia buat akan susah dipahami dan digunakan oleh user.

8. Jangan melupakan empty state

Salah satu halaman yang sering dilewatkan oleh Andi saat awal bekerja sebagai UI Designer adalah empty state atau halaman ketika tidak ada data untuk ditampilkan.

Maka saat proses pembuatan high fidelity design, Andi membuat daftar halaman apa saja yang akan menampilkan data dari database. Seperti:

• Halaman Pemesanan , ketika user belum pernah melakukan pemesanan
• Halaman Wishlist, ketika user belum memasukkan paket wisata ke dalam wishlist mereka.

Dengan membuat daftar halaman tersebut Andi berharap tidak lagi melewatkan design untuk empty state.

9. Kolaborasi dengan Developer

Jika dihitung, dalam 1 hari Andi bisa bolak balik sampai 5 kali ke meja developer. Hal ini dilakukan untuk memastikan design yang sedang dibuat dapat diimplementasi dengan mudah.

Untuk elemen elemen yang sudah umum Andi merasa tak perlu menanyakan ke developer. Tapi jika terdapat elemen elemen yang sangat custom dengan interaksi yang belum terlalu umum, maka Andi akan menanyakan ke developer apakah elemen tersebut bisa di implementasi.

Dan jika memang susah untuk diimplementasi, maka Andi dan sang Developer akan berdiskusi bersama untuk menemukan cara lain yang lebih cepat untuk diimplementasi, tapi tetap sesuai dengan tujuan , membuat user nyaman dan tidak membuat user bingung.

10. Membuat Prototype & Melakukan Usability Testing

Setelah semua halaman high-fidelity selesai dikerjakan. Berikutnya Andi membuat prototype.

Gambar 1.

Gambar 2.

Prototype yang dibuat oleh Andi cukup sederhana. Hanya menghubungkan antar halaman. Andi memiliki opsi untuk menggunakan Marvel atau Invision.

Untuk mengetahui mengenai prototyping bisa temen temen baca di artikel ini

Andi merasa cukup untuk membuat prototype yang sederhana karena tujuannya adalah agar bisa segera diujikan dan mengetahui bagaimana reaksi user terhadap design yang dibuat oleh Andi.

• Apakah user mengerti?
• Apakah ada elemen yang membingungkan?

Jika terdapat elemen atau halaman yang harus dibenahi maka hal itu bisa dilakukan sebelum sebuah design masuk ke tahap development.

Untuk mengetahui tentang usability testing bisa temen temen baca di artikel ini

11. User Flow, Documentation, Assets

Setelah melakukan usability testing dan membenahi beberapa halaman, Andi merasa design yang ia buat telah siap masuk ke tahap development.

Maka yang dilakukan Andi setelahnya adalah membuat user flow yang akan memudahkan developer membaca alur dari produk tersebut.

Setelah itu Andi menyiapkan dokumentasi agar developer tahu jarak antar elemen. Sehingga implementasi saat development bisa mirip dengan design.

Untuk dokumentasi ini, Andi menggunakan zeplin. Sebuah tools yang menyediakan informasi tentang segala ukuran ukuran dan jarak pada design.

Dan juga dengan zeplin ini, Andi tidak perlu repot repot menyiapkan assets untuk keperluan development. Dengan menandai beberapa elemen terpilih sebagai assets, maka otomatis zeplin akan mengubah elemen pada design menjadi sebuah assets yang siap di download oleh developer.

Zeplin secara otomatis menyediakan informasi mengenai ukuran pada design , sehingga bisa menjadi acuan bagi developer.

 

Zeplin juga secara otomatis men-generate assets yang siap di download.

13. Melakukan Retrospective

Setelah project selesai, maka hal yang biasa dilakukan Andi adalah mengajak beberapa stakeholder untuk berkumpul dan melakukan retrospective. Apa saja hal yang dilalui saat project kemaren.

Apa hal yang menjadi penghambat, Apa hal yang bisa ditingkatkan. Semua hal tersebut dibicarakan dan menjadi catatan untuk project selanjutnya.

14. Menahan Perfeksionisme

Satu hal yang dipelajari oleh Andi setelah beberapa tahun bekerja di industri produk digital adalah menahan perfeksionisme. Andi sadar bahwa setiap produk memiliki batas waktu kapan harus di rilis.

Andi tidak bisa meminta untuk mengundur waktu rilis hanya agar design dari produk/aplikasi tersebut sesuai dengan kemauan Andi.

Andi sadar bahwa keindahan User Interface adalah hal yang penting. Tapi masih ada hal yang lebih penting dari itu.

Jika suatu produk bisa dirilis tepat waktu, maka dari sisi bisnis, perusahaan tidak akan merugi.

Jika suatu produk bisa dirilis tepat waktu, maka produk tersebut bisa segera dicoba oleh banyak user.

Semakin banyak user yang mencoba maka semakin cepat untuk mengetahui bagaimana user merespon produk tersebut.

Semakin cepat mendapatkan respon, maka akan semakin cepat untuk membuat pertimbangan untuk pengembangan selanjutnya.

15. Melakukan Eksplorasi Design

Sebagai UI Designer, Andi terbiasa untuk melakukan eksplorasi. Tujuan eksplorasi diantaranya adalah:

• Melepaskan penat, setelah 5 hari bekerja membuat design dengan banyak pertimbangan dan batasan, maka eksplorasi design adalah cara terbaik Andi untuk bisa membuat design sesuka hatinya tanpa memikirkan berbagai batasan.
• Dan juga , bagi Andi eksplorasi adalah mencoba untuk membuat beberapa pola baru dalam design. Andi selalu bertanya apakah form pencarian di sebuah app bisa lebih baik lagi dari segi layout? , apakah design tab dalam sebuah app bisa dibuat lebih baik lagi?

Bagi Andi, eksplorasi adalah sarana refreshing dan juga sarana riset dalam menemukan sebuah pola design yang baru.

16. Sering mencoba banyak aplikasi

Dalam minggu ini Andi telah mencoba 10 aplikasi pemesanan makanan. Dengan mencoba beberapa aplikasi , Andi mengetahui bagaimana 10 aplikasi tersebut membuat sebuah alur pemesanan makanan, walaupun terlihat sama tapi ternyata terdapat berbagai perbedaan.

Saat mencoba aplikasi ini, Andi juga mencatat beberapa micro-interaction yang membuat user nyaman. Catatan ini nantinya akan menjadi referensi Andi saat membuat sebuah design app.