Belajar UX Designer - User Flows & Journey Mapping
Membuat user flow sebagai peta langkah di dalam produk dan journey map yang menangkap perjalanan pengguna lintas channel beserta emosinya, lalu mempraktikkannya dengan journey map JagaKota dari melihat masalah hingga laporan terselesaikan.
#Pendahuluan
Setelah di episode 5 kita menyusun IA JagaKota, sekarang kita memetakan gerak pengguna — baik di dalam aplikasi maupun melintasi seluruh ekosistem. Dua alat yang sering tertukar: user flow dan journey map. Keduanya penting, tapi menjawab pertanyaan berbeda.
User flow adalah peta langkah dalam produk; journey map adalah perjalanan pengguna secara utuh — termasuk momen di luar aplikasi, channel lain, dan emosi. Untuk JagaKota, journey dimulai jauh sebelum aplikasi dibuka: ketika warga melihat lubang jalan di rute mengantar anaknya ke sekolah.
#User Flow: Peta Langkah di Dalam Produk
User flow menggambarkan urutan langkah untuk menyelesaikan satu tugas, lengkap dengan percabangan dan kondisi. Fungsinya: menemukan titik buntu, langkah berlebihan, dan keputusan yang membebani pengguna.
Perhatikan alur "gagal" (H → I): user flow yang baik selalu menyertakan jalur error, bukan hanya jalur bahagia. Jalur error inilah yang sering menentukan apakah pengguna menyerah atau bertahan.
Alur kedua yang wajib digambar: memeriksa status laporan — tugas yang sama seringnya dengan melapor.
Alur status ini sepele, tapi justru di sinilah kepercayaan warga dibangun — detailnya dibahas di episode 19-20.
Tip
Saat menyusun user flow, hitung jumlah keputusan di jalur utama. Semakin banyak percabangan yang harus dilewati pengguna, semakin besar beban kognitifnya (dibahas detail di episode 10). Sederhanakan dengan membuat keputusan default yang cerdas.
#Journey Map: Lebih Luas dari Aplikasi
Journey map memetakan perjalanan pengguna melintasi waktu dan channel, dengan tambahan: pikiran, emosi, touchpoints, pain points, dan peluang. Bedanya dari user flow: journey map mencakup momen sebelum dan sesudah produk, serta emosi yang menyertainya.
#Journey Map JagaKota
| Tahap | Menemukan masalah | Mencari cara lapor | Melapor | Menunggu | Menerima hasil |
|---|---|---|---|---|---|
| Channel | Nyata (jalan) | Medsos, grup WA | Aplikasi | Aplikasi, notifikasi | Notifikasi, aplikasi |
| Pikiran | "Jalanan ini bahaya untuk anak" | "Lapor ke mana ya?" | "Apa laporanku sampai?" | "Kok belum ada kabar?" | "Akhirnya beres" |
| Emosi | Cemas | Bingung | Ragu | Frustrasi | Lega (atau kecewa) |
| Touchpoint | — | Twitter, hotline, teman | Form lapor | Status laporan | Status, follow-up |
| Pain point | Tidak tahu saluran | Info tercecer | Form panjang | Kotak hitam | Kadang tidak ada kabar |
| Peluang | Notifikasi kontekstual | Panduan "melapor itu mudah" | Pre-fill lokasi | Update status otomatis | Konfirmasi tertutup |
Dari journey map ini muncul insight berharga: momen emosi terendah justru saat menunggu, bukan saat mengisi form. Ini mengubah arah desain — bukan hanya membuat form lebih cepat, tapi membangun sistem status dan kabar lanjutan. Inilah cara journey map mengarahkan prioritas: desain yang berdampak lahir dari titik frustrasi terbesar, bukan dari halaman yang paling sering dibuka.
#Membuat Journey Map Sendiri
Langkah praktis:
- Tentukan persona dan skenario (misal Bu Ratna melapor lubang jalan).
- Tuliskan tahapan dari sebelum sampai sesudah (5-7 tahap sudah cukup).
- Isi setiap baris: tindakan, pikiran, emosi, touchpoint.
- Tandai pain points dan peluang perbaikan.
- Prioritaskan: pilih 1-2 pain point terbesar untuk dikerjakan.
Temuan utama: frustrasi puncak ada di tahap "Menunggu".
Peluang terbesar: status laporan otomatis + estimasi waktu.
Aksi: desain halaman Detail Status dan notifikasi proaktif.#Common Pitfalls
- Menggambar journey untuk semua pengguna sekaligus — pilih satu persona dan satu skenario agar fokus.
- Hanya menampilkan momen bahagia — journey map tanpa emosi negatif adalah brosur, bukan alat desain.
- Terlalu banyak tahap — di atas 8 tahap, sulit dibaca dan kehilangan nilai.
- Mengabaikan channel di luar aplikasi — medsos dan mulut ke mulut adalah bagian perjalanan JagaKota yang tidak boleh dihapus.
#Penutup
Inti yang harus dibawa pulang:
- User flow memetakan langkah dalam produk, termasuk jalur error; journey map memetakan perjalanan lintas channel dan emosi.
- Journey map mengungkap bahwa titik frustrasi terbesar sering berada di luar layar.
- Prioritaskan perbaikan berdasarkan pain point terbesar, bukan halaman yang paling sering dilihat.
- Selalu sertakan jalur error di user flow — di sanalah pengguna sering menyerah.
Di episode 7 selanjutnya kita akan membahas wireframing dan prototyping — dari low-fidelity di kertas hingga clickable prototype di Figma — dan langsung membuat prototype alur utama lapor JagaKota. Siapkan frame 390 × 844 kalian!