Belajar Product Designer - Wireframe & Prototype (Lo-fi → Hi-fi)

#Pendahuluan

Setelah di episode 6 kita menyusun sitemap dan user flows Sehati, pada episode ini ide mulai berwujud. Kita bergerak dari abstrak ke visual: wireframe dan prototype, dari tingkat ketelitian paling rendah (sketsa kertas) hingga prototype hi-fi yang bisa diklik dan dirasakan.

Pertanyaan yang selalu muncul: "kok tidak langsung desain hi-fi saja?" Jawabannya ada di biaya umpan balik. Pada tahap lo-fi, mengubah arah semahal mengganti kertas; pada tahap hi-fi, mengubah arah semahal mengganti seluruh komponen visual. Dengan naik bertahap, kalian memvalidasi struktur dulu (murah), baru kosmetik (mahal) — ini sama dengan prinsip fail fast di episode 3.

#Tingkat Ketelitian (Fidelity)

Aturan praktisnya: mulai serendah mungkin, naik hanya jika pertanyaan yang harus dijawab butuh detail lebih. Mau validasi "apakah user paham urutannya?" — lo-fi cukup. Mau validasi "apakah warna tombol memengaruhi kepercayaan?" — baru butuh hi-fi.

#Sketsa ke Wireframe Lo-fi

Mulailah dengan sketsa 5 layar inti fitur cek gejala di kertas (atau FigJam). Lalu pindahkan ke Figma sebagai wireframe: kotak untuk gambar, garis untuk teks, X untuk tombol.

┌──────────────────────┐
│ Sehati            ⌂  │
├──────────────────────┤
│ HASIL CEK GEJALA     │
│                      │
│  [⚠️ ]  Gejala kuning │
│  Perlu perhatian     │
│                      │
│  ▸ Rekomendasi dokter│
│  ▸ Saran perawatan   │
│                      │
│  [ Booking Sekarang ]│
│  [ Kembali ke Home ] │
└──────────────────────┘

Pada tahap ini, jangan pikirkan warna atau font. Yang diuji: apakah urutan langkah masuk akal? Jalankan kembali flow episode 6 dan pastikan wireframe mewakili setiap langkah.

#Prototype Interaktif di Figma

Setelah wireframe dirasa benar, naik ke prototype interaktif. Di Figma, prototype dibangun dari tiga hal:

1. Frame + interactions — sambungkan frame dengan trigger "on tap", "on drag", dst.
2. Variables — simpan data seperti nama dan hasil triase agar bisa dipakai lintas frame (fitur text dan mode).
3. Conditionals — alur bercabang: jika gejala merah, arahkan ke booking; jika hijau, ke tips mandiri.

Frame: 01 Intro
  → Frame: 02 Q1 (variabel: jawaban1)
  → Frame: 03 Q2 (variabel: jawaban2)
  → Frame: 04 Hasil (conditional: skor ≥ 2 → merah, dsb.)
  → Frame: 05a Booking (jalur merah)
  → Frame: 05b Tips mandiri (jalur hijau)

Prototype hi-fi menambahkan desain visual penuh di atas struktur ini: warna sesuai design tokens (episode 8), teks nyata, dan transisi yang masuk akal. Penting: prototype hi-fi bukan produk final — ia alat untuk menguji dan alat untuk presentasi ke stakeholder.

#Menguji Prototype

Prototype tidak berguna jika tidak diuji. Lakukan prototype walkthrough cepat: minta 2-3 orang menjalankan skenario (misal "kalian merasa pusing, coba cari tahu perlu ke dokter atau tidak"), amati di mana mereka berhenti, dan catat langkah yang tidak mereka temukan. Cocokkan dengan flow episode 6.

#Penutup

Inti yang harus dibawa pulang:

• Naikkan fidelity bertahap: sketsa → lo-fi → mid-fi → hi-fi, sesuai pertanyaan yang harus dijawab.
• Wireframe memvalidasi struktur dan flow, bukan tampilan.
• Prototype Figma memakai interactions, variables, dan conditionals untuk alur bercabang.
• Hi-fi adalah alat pengujian dan presentasi, bukan produk final.
• Prototype harus diuji dengan skenario nyata sebelum masuk development.

Di episode 8 selanjutnya kita akan membahas design systems & governance — menyusun tokens, komponen, dan aturan pemeliharaan agar semua layar Sehati (termasuk yang belum dibuat) tetap konsisten dan terkelola. Sampai jumpa di episode 8!