Personas & User Flows — UI/UX

Memahami User — Personas dan User Flows Persona card template: avatar, name, role, goals, pain points, and key quote.Budi, 28Product ManagerGoals• Ship features

Memahami User — Personas dan User Flows

<title id="pers-t">Persona card template: avatar, name, role, goals, pain points, and key quote.</title>Budi, 28Product ManagerGoals• Ship features cepat• Data-driven decisionPain Points• Dashboard lambat• Export ribet"Saya butuh lihat metrics dalam 3 klik."
Template persona: context singkat + goals + pain points + quote asli.

Sebelum mendesain, kita harus memahami siapa yang akan menggunakan produk dan bagaimana mereka menggunakannya.

User Persona

Persona adalah representasi fiktif dari target user berdasarkan data nyata:

Contoh Persona:

Rina, 28 tahun — Junior Web Developer

  • Baru belajar coding 1 tahun
  • Menggunakan HP Android mid-range
  • Koneksi internet kadang lambat
  • Tujuan: belajar web development secara terstruktur
  • Frustasi: tutorial yang terlalu teknis tanpa penjelasan konteks

Mengapa Persona Penting?

  1. Fokus desain — "Apakah Rina akan mengerti ini?" lebih konkret dari "apakah user akan mengerti?"
  2. Empati — membantu tim memahami kebutuhan user yang berbeda dari mereka
  3. Keputusan — saat ada disagreement, kembali ke "apa yang terbaik untuk persona kita?"

User Flow

User flow adalah diagram langkah-langkah yang dilalui user untuk menyelesaikan tugas:

Landing Page → Klik "Mulai Belajar" → Sign Up Form
→ Verifikasi Email → Pilih Learning Path → Lesson Pertama

Cara Membuat User Flow

  1. Tentukan goal — apa yang ingin user capai?
  2. Identifikasi entry point — dari mana user mulai?
  3. Map setiap langkah — termasuk decision points dan error paths
  4. Simplify — kurangi langkah, hapus yang tidak perlu

Journey Mapping

Journey map lebih detail dari user flow — mencakup emosi user di setiap tahap:

Tahap Aksi Emosi Pain Point
Discovery Cari tutorial Excited Terlalu banyak pilihan
Sign Up Isi form Neutral Form terlalu panjang
First Lesson Mulai belajar Engaged Loading lambat
Stuck Tidak mengerti Frustrated Tidak ada help

Tips untuk Developer

  1. Baca persona saat mulai mengerjakan fitur — ini konteks penting
  2. Trace user flow sebelum coding — pastikan alur logis
  3. Edge cases = real cases — user dengan internet lambat, device tua, screen reader

Yang akan kamu pelajari