Proses Desain UI/UX: Contoh Workflow dari Riset sampai Pengujian

Mengenal UI dan UX

UI adalah singkatan dari user interface. UI merujuk pada aspek visual seperti ikon, warna, layout, tipografi, gambar, hingga elemen kontrol dalam sebuah produk digital. Semua yang bisa kamu lihat dan sentuh di layar, itulah hasil karya seorang UI desainer.

Adapun UX desainer adalah singkatan dari user experience. UX ini merupakan seluruh pengalaman yang dirasakan oleh pengguna saat berinteraksi dengan produk digital. Apakah produk digital tersebut memudahkan penggunanya menemukan apa yang dibutuhkan? Apakah tata letaknya membingungkan? Inilah fokus dari seorang UX desainer. 

Fokus kedua desainer ini sangat berbeda namun sangat mempengaruhi satu sama lain. Jika Sobat MinDi kebingungan karena tidak menemukan tombol operasi dalam sebuah aplikasi, tentu akan merasa tidak nyaman meski produk tersebut punya desain yang estetik. 

Begitu pula sebaliknya, dari sisi penggunaan cukup responsif dan mudah dimengerti tapi warna desainnya terlalu terang hingga tulisannya tidak bisa dibaca pastinya membuatmu malas juga untuk menggunakan aplikasi tersebut.

Sehingga UI dan UX desainer, keduanya berkolaborasi untuk menciptakan produk digital yang mampu diterima oleh masyarakat dengan baik. 

Nah, dari sini apakah Sobat MinDi sudah menentukan karir apa yang ingin digeluti? Apakah kamu tertarik mendesain UI dari sebuah produk atau lebih condong pada bagaimana meregulasi pengalaman pengguna sebaga UX desainer?

Apapun pilihan karirmu, kamu bisa mengikuti Bootcamp UIUX/Product Design dari Dibimbing.id. Bootcamp ini memberikan pelatihan bagaimana membuat aplikasi yang user friendly dan interaktif yang bisa diikuti oleh pemula yang tidak memiliki dasar programming sama sekali.

Produk digital yang dikembangkan oleh tim UI dan UX desainer sangatlah beragam, mulai dari aplikasi mobile, website, e-commerce, game, software, dan masih banyak lagi. Mengingat banyaknya produk digital, tentu workflow dari tim UI dan UX cukup beragam sesuai dengan tujuan pembuatannya. 

Contoh Workflow Tim UI Desainer

Agar Sobat MinDi lebih tergambar, MinDi akan berikan contoh workflow tim UI desainer saat mereka membuat aplikasi mobile di bawah ini:

1. Pemahaman Proyek dan Tujuan

Pertama, tim UI desainer harus memahami tujuan dan sasaran proyek. Biasanya akan ada meeting dan diskusi dengan tim UX, developer serta stakeholder untuk mengetahui tujuan serta preferensi mereka untuk desain interface. 

Selain memahami tujuan pembuatan produk, tim UI juga wajib mengumpulkan informasi mengenai siapa target pengguna dan apa yang dibutuhkan mereka supaya desain yang dibuat tepat sasaran.

2. Riset dan Inspirasi

Langkah kedua, tim UI akan melakukan riset untuk mengumpulkan inspirasi. Riset ini bisa dimulai dari melihat tren desain terkini, menganalisis desain interface aplikasi kompetitor, dan mengumpulkan berbagai referensi desain untuk menciptakan UI yang inovatif dan sesuai dengan tren.

3. Pengembangan Skema Warna dan Tipografi

Warna adalah salah satu elemen mencolok yang menjadi identitas sebuah merek. Oleh karena itu tim UI desainer butuh memperhatikan bagaimana skema warna dan tipografi yang sesuai dengan identitas merek dan menarik bagi target audiens.

Setelah menentukan warna yang sesuai, tim UI juga wajib menentukan hierarki visual yang akan digunakan di setiap elemen untuk membantu navigasi pengguna.

4. Pembuatan Wireframe

Wireframe adalah kerangka kerja atau layout dari desain atau halaman yang akan dibangun. Wireframe dibuat secara detail untuk menetapkan elemen-elemen penting dan layout umum.

5. Desain Mockup

Setelah wireframe berhasil dibuat, tim UI akan mengembangkan mockup dari masing-masing elemen desain visual seperti ikon, gambar, hingga elemen interaktif.

Mockup ini menunjukkan tampilan nyata dari UI termasuk warna, tipografi, dan elemen visual lainnya.

6. Prototyping

Setelah mockup jadi, dilanjutkan dengan pembuatan prototipe interaktif untuk menunjukkan bagaimana desain interface dijalankan. Prototyping ini mencakup interaksi seperti klik, scroll, dan transisi antar halaman.

Prototipe yang interaktif dibutuhkan untuk menguji kegunaan dari aplikasi dan mendapatkan umpan balik.

7. Pengujian dan Iterasi

Setelah seluruh desain sudah selesai, maka dilakukan pengujian UI dengan pengguna atau tim internal untuk mendapatkan feedback. 

Dari feedback yang diberikan, tim UI akan melakukan perbaikan pada desain supaya lebih interaktif. 

8. Kolaborasi dengan Tim Pengembangan

Setelah finalisasi desain dan mendapatkan approval dari tim internal, tim UI akan menyerahkan desain ini kepada tim developer untuk mengimplementasikan desain ke dalam kode.

Tim UI wajib memastikan tim developer memahami kegunaan dan filosofi setiap desain yang dibuatnya supaya implementasinya sesuai dengan desain asli dan mampu berfungsi dengan baik di berbagai perangkat dan layar.

9. Evaluasi dan Pembaruan Pasca Peluncuran

Setelah aplikasi selesai dan produk telah diluncurkan, bukan berarti kinerja tim UI selesai. Tim harus tetap memantau bagaimana kinerja desain mereka dan mengecek feedback yang didapatkan dari pengguna. 

Jika ada kesalahan maupun ketidak sesuaian, maka tim UI harus siap untuk melakukan penyesuaian dan pembaruan sesuai kebutuhan untuk meningkatkan desain interface mereka.

Sobat MinDi pasti pernah menemukan tampilan interface dari aplikasi yang berubah. Contohnya bisa dilihat dari halaman explore Instagram di awal rilis dan tampilan explore sekarang, kamu bisa melihat perbedaannya.

Dari sini, bisa diambil kesimpulan bahwa workflow desainer UI ini bersifat iteratif, di mana desain terus disempurnakan berdasarkan umpan balik dan kebutuhan penggunanya. 

Contoh Workflow Tim UX Designer

Workflow designer UX (User Experience) adalah proses yang melibatkan langkah-langkah terstruktur untuk memastikan produk digital memberikan pengalaman pengguna yang optimal. Berikut ini contoh workflow UX designer dalam pembuatan sebuah aplikasi mobile: 

1. Pemahaman Proyek dan Tujuan

Langkah pertama tentu tim UX harus memahami tujuan proyek. Tim UX akan mengadakan meeting dan diskusi dengan stakeholder, tim UI, dan tim developer untuk mengetahui apa aplikasi seperti apa yang akan diluncurkan.

Setelah memahami tujuan aplikasi tersebut, tim UX akan mengumpulkan beragam informasi awal tentang produk, siapa target audiensnya, hingga apa tujuan bisnisnya. Proses ini adalah langkah dasar yang wajib dilakukan sebelum merancang produk digital.

2. Riset Pengguna

Riset dibutuhkan untuk memahami apa saja kebutuhan pengguna dan bagaimana perilaku pengguna. Riset ini bisa dilakukan dengan cara survei, wawancara, atau analisis data pengguna.

Dari riset ini, tim UX bisa mengidentifikasi apa saja pain points atau masalah yang dirasakan pengguna dan apa saja kebutuhan yang belum terpenuhi. 

3. Pengembangan User Persona

Langkah ketiga ini sangat penting, user persona yang dibuat adalah representasi fiktif dari pengguna ideal berdasarkan data riset. Persona ini membantu memahami motivasi, perilaku, dan kebutuhan pengguna. User persona berbeda-beda sesuai tujuan pembuatan aplikasi. 

Misalnya aplikasi game yang dibuat untuk anak-anak, maka user persona yang dibuat bisa berupa anak SD usia 8-12 tahun. Sedangkan jika game yang dibuat ditujukan pada orang dewasa, maka user personanya bisa berupa pria 19-25 tahun, mahasiswa, dan suka nongkrong untuk mabar. 

4. Pemetaan User Journey

User journey adalah gambaran bagaimana pengguna berinteraksi dengan produk dari awal hingga akhir. Tim IX harus punya gambaran apa saja langkah-langkah yang diambil pengguna, bagaimana interaksi mereka dengan produk, hingga emosi yang mereka rasakan.

User journey ini yang nantinya akan berguna dalam pembuatan wireframing. 

5. Arsitektur Informasi dan Wireframing

Dari gambaran user di atas, tim UX akan menentukan struktur informasi dan bagaimana konten akan disusun dalam sebuah produk digital. Selanjutnya, tim UX akan membuat wireframe untuk menetapkan layout dasar dan alur navigasi.

6. Prototyping

Dari wireframe yang telah dibuat, tim UX akan lanjut membuat prototipe berdasarkan wireframe untuk menguji alur kerja dan interaksi. 

Berbeda dengan tim UI yang membuat prototipe berfokus pada estetika, tim UX lebih fokus membuat prototipe yang fungsional bagi pengguna.

7. Pengujian Pengguna

Langkah selanjutnya adalah melakukan pengujian dengan pengguna nyata menggunakan prototipe sementara. Proses ini dibutuhkan untuk mengumpulkan umpan balik tentang kegunaan, intuitifitas, dan efektivitas alur pengguna.

8. Analisis dan Iterasi

Setelah proses pengujian dan mendapatkan feedback dari pengguna maupun tim inti lainnya, tim UX akan menganalisis feedback yang ada dan membuat iterasi pada desain berdasarkan data tersebut. 

Proses Iterasi ini melibatkan perubahan pada wireframe, prototipe, atau bahkan pada konsep dasar pengalaman pengguna.

Setelah dilakukan iterasi dan mendapatkan approval dari stakeholder, tim UX akan berkoordinasi dengan tim UI untuk memastikan bahwa aspek visual produk menyatu dengan pengalaman pengguna.

Setelah UI dan UX selaras, maka langkah selanjutnya adalah bekerjasama dengan tim developer untuk memastikan bahwa pengalaman pengguna yang dirancang dapat diimplementasikan secara teknis.

9. Evaluasi Pasca Peluncuran

Setelah produk jadi dan diluncurkan, tim UX tetap mengumpulkan data dan feedback pengguna untuk evaluasi.

Jika terdapat kekurangan maupun ketidaksesuaian maka akan dilakukan pembaruan berdasarkan umpan balik pasca peluncuran untuk terus meningkatkan pengalaman pengguna.