Instruksi:

1. Pilihlah salah satu dari dua opsi berikut:

a.    Desainlah user flow dan wireframe untuk sebuah aplikasi pemesanan makanan online.

b.    Desainlah user flow dan wireframe untuk sebuah platform sosial media.

2. Tuliskan skenario pengguna yang menggambarkan bagaimana pengguna akan berinteraksi dengan aplikasi atau platform yang Anda pilih. Skenario ini harus mencakup langkah-langkah yang diambil oleh pengguna dari awal hingga akhir, termasuk tindakan yang diharapkan dari pengguna.

Contoh skenario pengguna untuk aplikasi pemesanan makanan online:

-       Pengguna membuka aplikasi dan melihat halaman beranda.

-       Pengguna mencari restoran atau makanan yang diinginkan.

-       Pengguna memilih restoran atau makanan yang diminati.

-       Pengguna menambahkan item ke keranjang.

-       Pengguna memasukkan detail pengiriman dan melakukan pembayaran.

-       Pengguna menerima konfirmasi pesanan.

3. Gunakan Figma untuk membuat user flow diagram yang menggambarkan alur pengguna dari langkah ke langkah dalam interaksi dengan aplikasi atau platform. Gunakan fitur Frame, Connector, dan Text dalam Figma untuk membuat diagram user flow.

Langkah-langkah untuk membuat user flow diagram di Figma:

-       Buka Figma dan buat dokumen baru.

-       Buat frame untuk setiap langkah penting dalam alur pengguna.

-       Gunakan Connector untuk menghubungkan frame dan menunjukkan alur pengguna.

-       Berikan label pada setiap frame dan connector untuk menjelaskan langkah dan interaksi yang terjadi.

-       Atur tata letak dan desain user flow diagram agar mudah dibaca dan dimengerti.

4. Berdasarkan user flow diagram yang telah Anda buat, buatlah wireframe untuk setiap langkah penting dalam alur pengguna. Gunakan fitur Rectangle, Text, dan komponen UI lainnya dalam Figma untuk membuat wireframe.

Langkah-langkah untuk membuat wireframe di Figma:

-       Buat frame baru untuk setiap langkah penting dalam alur pengguna.

-       Gunakan Rectangle untuk menggambarkan elemen UI seperti tombol, formulir, dan daftar.

-       Gunakan Text untuk menambahkan teks pada elemen UI dan menjelaskan fungsinya.

-       Gunakan komponen UI yang telah Anda buat sebelumnya atau komponen yang tersedia di Figma untuk mempercepat proses desain.

-       Atur tata letak elemen UI dengan memperhatikan prinsip-prinsip desain yang baik, seperti hierarki visual dan kelompok yang logis.

5. Sertakan penjelasan singkat untuk setiap langkah dalam user flow diagram dan wireframe yang Anda buat. Jelaskan tujuan dan konteks dari setiap langkah serta alasan di balik keputusan desain yang Anda ambil.

6. Buatlah presentasi visual menggunakan Figma untuk menyajikan user flow diagram dan wireframe yang telah Anda buat. Gunakan fitur Present di Figma untuk membuat tampilan presentasi yang dapat dijalankan secara langsung.