Berlatih Membuat User Flow Menggunakan Whimsical

Hello people with the spirit of learning! Ketika membangun suatu aplikasi/website maka tahap utama yang perlu dilakukan adalah merancang alurnya/user flow. 

User flow adalah kumpulan langkah-langkah yang harus dilakukan oleh user saat menggunakan suatu produk untuk menyelesaikan suatu tugas tertentu.

Pada tips kali ini kita akan membuat user flow dengan tugas memesan ojek online. tools yang akan kita gunakan yaitu Whimsical yang bisa kalian akses melalui website https://whimsical.com. Oke langsung aja kita mulai.

Step 1 :  Menentukan Study Case

Disini kita akan merancang user flow untuk fitur memesan ojek online. berikut adalah langkah-langkah untuk membuat user flow :

  1. Menentukan kebutuhan user
  2. Membuat langkah-langkah yang dilakukan user
  3. Membuat User Flow

Step 2 :  Menentukan Kebutuhan User

Untuk menentukan kebutuhan user biasanya kita dapat melakukan riset untuk memahami lebih dalam apa yang user butuhkan dan harapkan. Contoh nya sepeti ini: 

  1. Sebagai user, saya dapat mengetahui lokasi driver ojek terdekat
  2. Sebagai user saya dapat menentukan kemana saya ingin pergi
  3. Sebagai user, saya dapat menentukan dimana saya ingin dijemput

Step 3 : Membuat Langkah-langkah yang dilakukan user

  • Langkah 1 : User membuka aplikasi
  • Langkah 2 : User menentukan lokasi kemana dia ingin pergi
  • Langkah 3 : User menentukan lokasi penjemputan
  • Langkah 4 : User order ojek

Step 4 : Membuat User Flow Menggunakan Whimsical

Pertama buka website https://whimsical.com/, kemudian daftar atau login.

Step 5 : Buat Project Flowchart

Setelah daftar, kemudian buat project baru, lalu pilih menu +Flowchart

Step 6 : Membuat Shape Baru

Berikutnya, untuk membuat sebuah shape baru, kalian bisa menekan S pada keyboard, atau pilih menu Add Shape lalu pilih shape yang ingin kalian pakai.

Step 7 : Membuat User Flow

Untuk menambahkan shape, kalian dapat memilih menu Add Shape lalu pilih element yang ingin digunakan seperti Rectangle, Oval, atau yang lainnya namun harus kita sesuaikan bedasarkan fungsinya.

Fungsi Simbol-simbol dalam Flowchart

Step 8 Finishing User Flow

Setelah itu, kalian bisa lanjut mebuat user flow hingga selesai seperti gambar diatas. 

Dan kalian telah menyelesaikan sebuah user flow yang akan diubah menjadi wireframe pada tahap design berikutnya.

Nah, Sekarang kalian sudah paham kan? Jika masih kesulitan kalian bisa tulis pertanyaan di DM Instagram saya @fransfeby

Jika kalian ingin mempelajari user flow lebih lanjut, kalian bisa mengikuti kelas UI/UX Design: Gestalt Principle. Terimakasih sudah membaca artikel ini. Semoga bermanfaat. :))