Apa itu storyboard UX?

Storyboard UX adalah gambar berurutan (kayak komik) yang nunjukin gimana user berinteraksi dengan aplikasi atau website kamu dari awal sampai akhir. Fungsinya buat bantu tim ngelihat dan ngerasain perjalanan si pengguna dari sudut pandangnya sendiri.

Contohnya: Kamu bikin aplikasi toko online. Storyboard bisa nunjukin gimana caranya pengguna login, cari produk, sampai akhirnya checkout.

Langkah-langkah bikin storyboard UX

Langkah 1: Tentukan tujuan dan kumpulkan ide

Tanya dulu ke diri sendiri dan tim:

• Storyboard ini buat apa?

• Mau fokus ke fitur apa?

• Ada masalah di mana yang mau diselesaikan?

Kamu bisa dapet ide dari:

• Hasil tes pengguna

• Wawancara pengguna

• Data analitik (contoh: banyak user gagal checkout)

• Tujuan desain yang udah dibuat

Jangan bikin terlalu banyak masalah dalam satu storyboard, cukup fokus satu topik atau alur saja.

Langkah 2: Pilih jenis dan gaya storyboard

Storyboard bisa dibuat:

• Low fidelity (sederhana): gambar tangan, pakai stickman, kotak-kotak. Cocok buat brainstorming.

• High fidelity (detail): pakai tampilan layar, screenshot, desain awal. Cocok untuk presentasi ke stakeholder.

Kamu juga bisa pilih mau bikin di:

• Kertas / sticky notes: gampang diubah-ubah pas meeting langsung.

• Digital (misalnya di FigJam): lebih rapi, bisa diakses online, cocok buat kerja tim jarak jauh.

Langkah 3: Buat tokoh utama dan situasi cerita

Tokoh utama = pengguna kamu (pakai data dari persona yang udah ada).

Contoh:

• Nama: Lily, baru pakai aplikasi

• Tujuan: cari komunitas musik favorit

• Masalah: bingung nyari fitur “cari artis”

• Solusi: aplikasi punya fitur pencarian yang jelas

Bikin juga "skenario singkat": Misalnya, "Seorang pengguna dengan gangguan penglihatan menggunakan fitur zoom di aplikasi saat mau checkout."

Langkah 4: Tulis alur cerita

Bayangin kamu jadi si pengguna. Tulis langkah-langkah yang mereka lakukan dari awal sampai selesai.

Misalnya:

1. Buka aplikasi

2. Klik tombol “Cari Artis”

3. Masuk ke halaman pencarian

4. Ketik nama artis

5. Bergabung ke komunitas

Bisa juga tambahkan:

• Apa yang user rasakan (senang, bingung, frustrasi)

• Reaksi dari fitur aplikasi

• Notifikasi atau error yang muncul

Langkah 5: Tambahkan gambar dan teks

Setiap langkah ditaruh di satu panel (kayak kotak komik). Isinya:

• Judul (misal: “Langkah 1: Buka Aplikasi”)

• Gambar (bisa sketsa atau tampilan layar)

• Teks penjelasan (apa yang user lakukan dan rasakan)

• Arah panah buat tunjukin urutan antar panel

Fokusnya bukan desain yang cantik, tapi cerita dan alurnya jelas.

Review dan perbaiki

Setelah storyboard selesai, cek lagi:

• Ada langkah yang kurang?

• Ada bagian yang bikin bingung?

• Perasaan user udah kelihatan jelas belum?

• Solusi dari aplikasimu udah ngebantu belum?

Storyboard ini bisa bantu tim:

• Nentuin prioritas perbaikan

• Bikin wireframe atau desain yang lebih fokus

• Komunikasi lebih mudah sama developer dan stakeholder

Contoh storyboard singkat

Contoh 1: Aplikasi komunitas musik

• Tokoh: Lily, pengguna baru

• Skenario: Nyari komunitas artis favorit

• Langkah:

  1. Buka aplikasi

  2. Klik “Cari Artis”

  3. Masuk ke halaman pencarian

  4. Ketik nama artis

  5. Temukan komunitas dan join

Contoh 2: Pesan kue online

• Tokoh: Jane, orang tua sibuk

• Skenario: Mau pesan kue custom buat wisuda anak

• Langkah:

  1. Klik “Order” di homepage

  2. Pilih “Cookies”

  3. Pilih rasa dan desain

  4. Isi info acara dan upload referensi

  5. Bayar dan konfirmasi