UX Design Process

Panduan Lengkap: Empathize, Define, Ideate, Prototype, Testing

Dengan Referensi Mobbin & Deep Dive User Journey Map

Pendahuluan
UX Design Process atau Design Thinking adalah kerangka kerja inovatif yang berpusat pada
manusia (human-centered) untuk memecahkan masalah secara kreatif dan sistematis. Proses
ini terdiri dari lima fase yang saling terhubung: Empathize, Define, Ideate, Prototype, dan
Testing.

Penting untuk dipahami bahwa UX Design Process bukan alur linear seperti waterfall,
melainkan proses iteratif. Setelah testing, tim bisa kembali ke fase mana pun berdasarkan
temuan baru — bisa kembali ke Empathize jika ada kebutuhan yang belum tergali, ke Define
jika problem statement bergeser, atau ke Ideate jika solusi yang ada belum memadai.

1. Empathize 2. Define 3. Ideate 4. Prototype 5. Testing

FASE 1 EMPATHIZE

Fase pertama adalah memahami pengguna secara mendalam — bukan berdasarkan asumsi,
melainkan data nyata. Tujuannya adalah menggali kebutuhan, perilaku, dan rasa frustrasi
pengguna yang seringkali tidak terucap secara eksplisit.

Metode & Teknik

Metode Deskripsi
User Interview Wawancara langsung dengan pengguna. Fokus pada pengalaman nyata,
bukan opini atau harapan. Gunakan pertanyaan terbuka seperti 'Ceritakan
saat terakhir kamu menggunakan...'
 Metode Deskripsi
Contextual Inquiry Observasi pengguna di lingkungan asli mereka saat menggunakan produk.
Memberi insight tentang konteks penggunaan yang sering tidak muncul di
wawancara formal.
Shadowing Ikuti aktivitas pengguna tanpa mengganggu untuk melihat pola perilaku
organik dan kebiasaan yang tidak disadari pengguna sendiri.
Survey & Kuesioner Kumpulkan data kuantitatif dari banyak pengguna sekaligus untuk
mengidentifikasi tren dan pola yang representatif.

Output Empathy Map • Field Notes • Affinity Diagram • Interview Transcript

FASE 2 DEFINE

Fase Define adalah sintesis semua temuan dari Empathize menjadi pernyataan masalah yang
jelas dan berpusat pada pengguna. Ini memastikan seluruh tim bergerak ke arah yang tepat
sebelum mulai berinovasi.

Metode & Teknik

Metode Deskripsi
Problem Statement Gunakan format: "[User] perlu [kebutuhan] karena [insight]." Atau format
HMW (How Might We): "Bagaimana kita bisa [solusi potensial]?"
User Persona Buat karakter representatif berdasarkan data riil dari wawancara. Bukan
stereotip demografis, tapi karakter dengan motivasi, goal, dan pain point
nyata.
Affinity Mapping Tempel semua temuan pada sticky notes, lalu kelompokkan secara tematik
bersama tim untuk menemukan pola dan insight tersembunyi.
Point of View (POV) Pernyataan spesifik tiga bagian: siapa user-nya, apa kebutuhan mereka, dan
mengapa hal itu penting atau mengejutkan.

Output User Persona • HMW Statement • Problem Statement • Design Brief

FASE 3 IDEATE
Fase Ideate adalah jantung kreativitas dalam UX Design Process. Tujuannya menghasilkan
sebanyak mungkin solusi potensial tanpa filter di awal — kuantitas dulu, kualitas belakangan.
Ideate mencakup berbagai sub-metode, di mana User Journey Map adalah salah satu yang
paling strategis.

Sub-Metode Ideate
Metode Deskripsi
Brainstorming Sesi cepat hasilkan ide tanpa judgement dari siapapun. Lanjut dengan dot
voting untuk memilih ide terkuat secara kolektif.

User Journey Map ★ Visualisasi step-by-step pengalaman pengguna dari awal hingga akhir.
Mengidentifikasi pain points dan opportunities secara sistematis. (Dibahas
lengkap di bawah)
Crazy 8s Setiap anggota tim membuat sketsa 8 ide berbeda dalam 8 menit. Mendorong
eksplorasi cepat tanpa hambatan perfeksionisme.
SCAMPER Framework untuk memodifikasi solusi yang ada: Substitute, Combine, Adapt,
Modify, Put to other uses, Eliminate, Rearrange.
Storyboarding Buat komik strip yang menggambarkan alur penggunaan produk untuk
mengevaluasi apakah narasi pengalaman masuk akal.
Mind Mapping Cabangkan ide dari satu pusat masalah secara bebas dan asosiatif untuk
menemukan koneksi tak terduga antar konsep.

User Journey Map — Deep Dive

User Journey Map adalah alat visualisasi yang memetakan pengalaman menyeluruh pengguna
dari titik pertama bersentuhan dengan produk hingga menjadi pengguna setia. Dokumen ini
menggabungkan perspektif tindakan, emosi, touchpoint, hambatan, dan peluang dalam satu
kanvas terintegrasi.

Mengapa User Journey Map Penting?

• Membantu tim melihat produk dari perspektif pengguna, bukan perspektif internal bisnis
• Mengidentifikasi momen kritis (moments of truth) yang paling memengaruhi keputusan
pengguna
• Menjadi bahasa bersama antar tim — design, product, engineering, dan marketing
• Mengungkap gap antara pengalaman yang diharapkan dan pengalaman aktual
• Menjadi dasar prioritisasi fitur sebelum masuk ke fase Prototype

Komponen Wajib User Journey Map

Komponen Penjelasan
Persona Target Karakter representatif pengguna yang akan mengalami journey ini
Skenario & Tujuan Konteks situasi dan apa yang ingin dicapai pengguna
 Komponen Penjelasan
Tahapan (Phases) Pembagian alur menjadi stage-stage logis (Awareness,
Consideration, dst.)
Tindakan Pengguna Apa yang dilakukan pengguna di setiap tahap secara konkret
Pikiran & Emosi Internal state: apa yang dipikirkan dan dirasakan pengguna
Touchpoint Titik kontak antara pengguna dan produk/brand (app, email, iklan,
dll.)
Pain Points Hambatan, kebingungan, atau frustrasi yang dialami pengguna
Opportunities Celah untuk perbaikan desain atau fitur baru berdasarkan pain point

Contoh User Journey Map — Aplikasi Mobile

Layer Awareness Consideration Decision Onboarding Retention

Melihat iklan / Cek review & Daftar akun, isi Jelajahi fitur utama Pakai rutin, ajak
Tindakan rekomendasi bandingkan fitur data teman
teman

"Apakah ini bisa "Lebih bagus dari "Apakah aman & "Di mana fitur yang "Ini sudah jadi
Pikiran
bantu saya?" yang lain?" mudah?" saya cari?" kebiasaan."

Emosi Penasaran Antusias Ragu Bingung Puas

Instagram, Word of Website, YouTube Landing page, App, Email Push notif,
Touchpoint
mouth Review Form signup welcome Community

Iklan tidak relevan Info fitur tidak jelas Form terlalu Tidak ada tutorial Notif terlalu banyak
Pain Point
panjang

Targeted social Comparison page Social login, Interactive Personalized push,

Opportunity
proof yang jelas progress bar onboarding tour rewards

Cara Membaca User Journey Map

Setiap kolom mewakili satu tahap dalam perjalanan pengguna. Setiap baris adalah lapisan
analisis yang berbeda. Baca secara vertikal untuk memahami satu tahap secara mendalam,
dan secara horizontal untuk melihat evolusi pengalaman pengguna dari waktu ke waktu.

Perhatikan kolom 'Emosi' — grafik naik-turun emosi pengguna (emotional curve) adalah
indikator utama di mana UX berhasil dan di mana ia gagal. Pain points selalu berkorelasi
dengan penurunan emosi, dan opportunities adalah respons langsung terhadap setiap pain
point.

Kolom 'Opportunity' adalah tempat lahirnya ide-ide solusi secara organik dari data riil, bukan
dari asumsi. Inilah yang membuat User Journey Map menjadi jembatan antara riset
(Empathize/Define) dan solusi (Ideate/Prototype).
 User Journey Map • Storyboard • Sketches / Wireframe • Feature Priority
Output
Matrix

FASE 4 PROTOTYPE

Prototype adalah representasi nyata dari solusi yang dipilih dari fase Ideate. Kualitas prototype
disesuaikan dengan tujuan — bisa sangat kasar (kertas) hingga sangat interaktif (hi-fi). Prinsip
utama: gagal cepat dan belajar murah sebelum masuk development.

Tingkatan Fidelitas Prototype

Metode Deskripsi
Paper Prototype Sketsa tangan pada kertas. Paling cepat dan murah. Ideal untuk validasi
konsep awal dan eksplorasi alur navigasi.
Lo-fi Wireframe Grayscale digital layout yang fokus pada struktur dan flow tanpa detail visual.
Dibuat dengan tools seperti Balsamiq atau Figma (tanpa styling).
Hi-fi Prototype Design dengan visual final yang mendekati produk sesungguhnya. Dibuat
dengan Figma atau ProtoPie. Digunakan untuk user testing yang lebih
realistis.
Clickable Mockup Static design yang dihubungkan dengan transisi untuk mensimulasikan
navigasi. Tidak perlu coding, cukup dengan Figma Prototype mode.

Output Figma Prototype • Wireframe Kit • Design System Draft • Interaction Spec

FASE 5 TESTING

Testing adalah validasi prototype dengan pengguna nyata. Tujuannya menemukan apa yang
tidak bekerja sebelum masuk ke development — jauh lebih murah untuk memperbaiki masalah
di tahap ini daripada setelah produk diluncurkan.

Metode Testing
 Metode Deskripsi
Usability Testing Minta pengguna menyelesaikan task nyata menggunakan prototype.
Observer tidak memberikan bantuan — hanya mencatat di mana pengguna
stuck atau bingung.
A/B Testing Bandingkan dua versi desain yang berbeda dengan kelompok pengguna
berbeda secara kuantitatif untuk menentukan mana yang lebih efektif.
Think-Aloud Pengguna memverbalisasi pikiran mereka saat menggunakan prototype.
Protocol Memberikan insight mendalam tentang model mental pengguna.
Heuristic Evaluation Expert UX mengevaluasi desain berdasarkan 10 prinsip Nielsen (visibility,
feedback, consistency, dll). Cepat dan murah tanpa perlu pengguna.
Five-Second Test Pengguna melihat tampilan selama 5 detik, lalu ditanya apa yang mereka
ingat. Mengukur kejelasan hierarchy dan first impression.

Output Usability Report • Bug & Friction Log • Iteration Notes • A/B Test Results

Referensi Mobbin untuk Ideate

Mobbin adalah library referensi UI terbesar yang mengumpulkan screenshot nyata dari aplikasi
mobile dan web terkemuka, diorganisir berdasarkan flow, pattern, dan screen type. Sangat
berguna saat fase Ideate untuk mempercepat eksplorasi solusi dan menghindari re-inventing
the wheel.

Cara Efektif Menggunakan Mobbin saat Ideate

• Cari berdasarkan flow (bukan hanya visual) — misalnya 'onboarding flow', 'checkout
flow', 'empty state'
• Screenshot screen yang relevan dan buat moodboard sebelum sesi Crazy 8s
• Analisis pola UI yang berulang lintas aplikasi — pola yang konsisten biasanya adalah
best practice
• Gunakan sebagai referensi saat sketching, bukan untuk ditiru langsung — adaptasi ke
konteks produkmu
• Perhatikan pattern yang digunakan di segmen industri yang sama dengan produkmu

Pattern Mobbin yang Relevan untuk UX Ideation

Pattern Deskripsi & Referensi App
Onboarding Flow Alur penyambutan pengguna baru yang mencakup value proposition, fitur
utama, dan CTA pertama. Referensi: Duolingo, Airbnb, Notion onboarding
screens.
 Pattern Deskripsi & Referensi App
Empty State Tampilan saat belum ada konten — kesempatan untuk mendorong aksi
pertama dan memandu pengguna. Referensi: Slack, Trello empty board
state.
Navigation Pattern Tab bar, bottom navigation, sidebar, atau hamburger menu. Pilihan
navigasi sangat memengaruhi Information Architecture (IA). Referensi:
Instagram tab, Google Maps side drawer.
Form Design Input fields, validasi real-time, error messaging, dan progress indicator
untuk multi-step forms. Referensi: Stripe checkout, Airbnb booking form.
Search & Filter Pattern pencarian dengan autocomplete, filter chip, dan hasil kosong.
Krusial untuk aplikasi dengan konten banyak. Referensi: Tokopedia search,
Spotify filter.
Feedback & Toast notification, modal konfirmasi, dan success/error state. Memberikan
Confirmation kepastian ke pengguna bahwa aksi berhasil. Referensi: WhatsApp delivery
ticks, Google Pay confirmation.

Kesimpulan
UX Design Process adalah investasi waktu di awal yang menghemat waktu dan biaya besar di
kemudian hari. Setiap fase memiliki perannya masing-masing dalam memastikan produk yang
dibangun adalah produk yang benar-benar dibutuhkan pengguna.

Kunci keberhasilan UX Design Process bukan pada kesempurnaan setiap deliverable,

melainkan pada keberanian untuk terus beriterasi. Temuan dari Testing selalu membawa tim
kembali ke fase yang lebih awal dengan pemahaman yang lebih dalam — dan itulah esensi dari
proses desain yang baik.

Ingat: Design Thinking adalah iterative loop, bukan waterfall. Gagal cepat, belajar
cepat, perbaiki cepat.
Empathize → Define → Ideate → Prototype → Testing → (kembali ke fase yang sesuai)