Dari sprint backlog Scrum minggu lalu menuju rancangan antarmuka: prinsip UI/UX, riset pengguna, wireframe, dan prototipe klik-uji sebelum masuk ke pengembangan web.
RPS MINGGU 10 • 2X50 MENIT
Tujuan Pembelajaran Hari Ini
Setelah pertemuan ini, Anda diharapkan mampu merancang antarmuka aplikasi startup yang berpusat pada pengguna dan menghasilkan prototipe yang siap diuji.
CAPAIAN 1
PRINSIP
Membedakan UI (tampilan) dan UX (pengalaman), dan menerapkan prinsip desain dasar pada layar aplikasi.
CAPAIAN 2
RISET
Menyusun user persona dan user journey map dari kebutuhan pengguna sasaran startup.
CAPAIAN 3
WIREFRAME
Membuat wireframe low-fidelity dan high-fidelity untuk fitur utama produk digital.
CAPAIAN 4
UJI
Merancang usability testing sederhana dan menghitung tingkat keberhasilan tugas pengguna.
Bagian 1 dari 4
Prinsip UI/UX untuk Startup
Apa itu antarmuka yang baik, dan mengapa startup tidak boleh menganggapnya remeh.
UI vs UX: Dua Hal yang Sering Tertukar
UI — User Interface
Tampilan visual: warna, tombol, ikon, tipografi
Yang dilihat dan disentuh pengguna di layar
Contoh: warna hijau khas tombol pesan di Gojek
Fokus: estetika & konsistensi visual
UX — User Experience
Alur & perasaan pengguna memakai produk
Yang dirasakan: mudah, cepat, tidak membingungkan
Contoh: berapa langkah untuk checkout di Tokopedia
Fokus: efisiensi & kepuasan penggunaan
Analogi sederhana: UI adalah wajah aplikasi Anda, UX adalah bagaimana rasanya berbicara dengan wajah itu. Aplikasi bisa cantik (UI bagus) tapi menyebalkan dipakai (UX buruk), atau sebaliknya.
Lima Prinsip Desain yang Wajib Dipegang
Prinsip
Maksud
Contoh Penerapan
1. Clarity
Pengguna langsung paham fungsi elemen tanpa berpikir
Ikon keranjang = belanja, bukan simbol ambigu
2. Consistency
Warna, ikon, dan istilah sama di semua halaman
Warna aksen hijau selalu berarti "aksi utama"
3. Feedback
Sistem merespons setiap aksi pengguna
Loading spinner saat menunggu pembayaran QRIS
4. Hierarchy
Elemen penting tampil lebih menonjol
Tombol "Beli Sekarang" lebih besar dari "Lihat Detail"
5. Accessibility
Bisa dipakai pengguna dengan keterbatasan
Kontras teks cukup, ukuran tombol mudah disentuh
Kenapa UX Buruk Bisa Membunuh Startup
RISIKO 1
CHURN
Pengguna install lalu uninstall dalam hitungan menit karena bingung navigasi.
RISIKO 2
REVIEW BURUK
Rating rendah di Play Store/App Store menurunkan kepercayaan calon pengguna baru.
Riset industri (Nielsen Norman Group) menunjukkan setiap Rp 1 yang diinvestasikan di UX bisa menghemat hingga Rp 100 biaya perbaikan pasca-peluncuran — karena mengubah kode yang sudah dipakai ribuan pengguna jauh lebih mahal daripada mengubah wireframe di atas kertas.
Bagi startup dengan modal terbatas, desain yang matang di awal adalah mitigasi risiko, bukan biaya tambahan.
Bagian 2 dari 4
Riset Pengguna: Persona & Journey Map
Sebelum menggambar satu kotak pun, kenali dulu siapa yang akan memakai produk Anda.
User Persona: Wajah dari Pengguna Target Anda
Persona adalah profil fiktif yang mewakili segmen pengguna nyata, disusun dari hasil riset (wawancara, survei, observasi) — bukan karangan bebas tim.
Contoh Persona — Aplikasi Titip Belanja Pasar Tradisional
Nama: Bu Sari, 34 tahun
Pekerjaan: Karyawan swasta di Semarang
Perilaku: Terbiasa belanja online lewat Shopee, jarang sempat ke pasar pagi
Tujuan: Dapat bahan masakan segar tanpa antre
Frustrasi: Aplikasi rumit membuatnya malas mencoba
Kutipan: "Saya cuma punya 10 menit sebelum berangkat kerja."
User Journey Map: Memetakan Perjalanan Pengguna
Journey map menelusuri tahap yang dilalui pengguna, tindakan yang dilakukan, dan perasaannya di tiap tahap — mengungkap titik pain point yang perlu diperbaiki desain.
Bagian 3 dari 4
Wireframe: Dari Sketsa ke Mockup
Menerjemahkan riset pengguna menjadi kerangka visual, bertahap dari kasar ke rinci.
Tiga Tingkatan Fidelity Wireframe
LOW-FIDELITY
SKETSA
Kertas & pensil, kotak dan garis kasar. Cepat dibuat, murah diubah.
MID-FIDELITY
DIGITAL POLOS
Digambar di Figma/Balsamiq, tanpa warna & font final, fokus struktur.
HIGH-FIDELITY
MOCKUP
Warna, font, gambar mendekati produk jadi, siap diuji ke pengguna.
Prinsip kerja: mulai dari low-fidelity. Jangan langsung mendesain high-fidelity — ubah dulu ide di kertas yang murah, baru investasikan waktu di detail visual setelah struktur disepakati tim.
Alat Bantu yang Bisa Anda Pakai
Alat
Fidelity
Catatan untuk Startup Mahasiswa
Kertas & Pensil
Low
Gratis, tercepat untuk brainstorming tim
Figma
Mid – High
Gratis untuk tim kecil, kolaborasi real-time, standar industri
Canva
Mid
Mudah dipelajari, cocok pemula non-desainer
Balsamiq
Low – Mid
Gaya sketsa "kasar" sengaja dibuat agar fokus ke struktur
Untuk tugas kelompok pertemuan ini, gunakan Figma (versi gratis cukup) — fitur kolaborasi memudahkan seluruh anggota tim menggambar bersamaan.
Komponen Umum Wireframe Aplikasi Mobile
Hitung dari Nol: Anggaran Riset UX Sederhana
Startup mahasiswa dengan bujet terbatas tetap bisa riset UX murah. Tim menyiapkan Rp500.000 untuk uji 5 responden dengan insentif pulsa/e-wallet.
Langkah
Perhitungan
Nilai
1. Anggaran total riset
diketahui
Rp500.000
2. Jumlah responden target
diketahui
5 orang
3. Insentif per responden
Rp500.000 ÷ 5
Rp100.000
4. Alokasi insentif (80%)
80% × Rp500.000
Rp400.000
5. Sisa untuk konsumsi/cetak
Rp500.000 − Rp400.000
Rp100.000
6. Biaya per menit sesi (30 menit/orang)
Rp100.000 ÷ 30
≈ Rp3.333/menit
HASIL
Rp100.000 / responden
Bagian 4 dari 4
Prototipe & Usability Testing
Menghubungkan wireframe menjadi alur klik-uji, lalu mengukur apakah pengguna benar-benar bisa memakainya.
Dari Wireframe Statis ke Prototipe Interaktif
Wireframe Statis
Gambar diam, tidak bisa disentuh
Menunjukkan tata letak & struktur
Cocok untuk diskusi internal tim
Prototipe Interaktif
Layar terhubung lewat tombol yang bisa diklik
Menyimulasikan alur pemakaian nyata
Cocok untuk diuji ke calon pengguna
Di Figma, fitur Prototype mode memungkinkan Anda menyambungkan tombol "Pesan Sekarang" di satu layar menuju layar "Konfirmasi Pesanan" berikutnya — persis seperti aplikasi asli, tanpa satu baris kode.
Hitung dari Nol: Success Rate Usability Testing
Tim menguji prototipe "pesan produk" ke 8 responden. Setiap responden diminta menyelesaikan satu tugas: memesan 1 produk sampai layar konfirmasi.
Langkah
Perhitungan
Nilai
1. Total responden diuji
diketahui
8 orang
2. Berhasil selesai tanpa bantuan
diketahui
5 orang
3. Berhasil tapi perlu dituntun
diketahui
2 orang
4. Gagal menyelesaikan tugas
8 − 5 − 2
1 orang
5. Success rate (murni)
5 ÷ 8 × 100
62,5%
6. Success rate (termasuk dituntun)
(5+2) ÷ 8 × 100
87,5%
TARGET INDUSTRI UMUM
≈ 78%
Coba Sendiri: Hitung Success Rate Pengujian Anda
Ubah jumlah responden dan hasil pengujian, lalu bandingkan success rate prototipe Anda dengan benchmark industri 78%.
Langkah Menyusun Sesi Usability Testing
Tahap
Aktivitas
Durasi Umum
1. Siapkan tugas
Rumuskan 1–3 tugas konkret, mis. "pesan 1 produk"
—
2. Rekrut responden
5–8 orang cukup untuk temukan sebagian besar masalah
—
3. Jalankan sesi
Amati tanpa menuntun, catat setiap kali responden ragu
15–30 menit/orang
4. Rekap & revisi
Hitung success rate, perbaiki titik yang paling sering gagal
—
Aturan Jakob Nielsen: 5 responden sudah cukup menemukan sekitar 85% masalah usability — tim startup tidak perlu menunggu puluhan responden untuk mulai memperbaiki desain.
Ringkasan Pertemuan Ini
Yang Sudah Kita Bahas
UI (tampilan) vs UX (pengalaman) — dua hal berbeda, sama pentingnya
Lima prinsip desain: clarity, consistency, feedback, hierarchy, accessibility
User persona & journey map sebagai dasar riset pengguna
Prototipe hari ini menjadi acuan langsung pengembangan web
Bawa hasil wireframe kelompok ke sesi berikutnya
Latihan Kelompok Hari Ini
Instruksi (dikerjakan 40–50 menit di kelas, dilanjutkan sebagai tugas):
Susun 1 user persona untuk pengguna utama startup kelompok Anda (gunakan format Slide 8).
Gambar user journey map singkat (4 tahap) untuk persona tersebut.
Buat wireframe low-fidelity (sketsa kertas atau Figma) untuk 1 fitur inti aplikasi — minimal 3 layar.
Sambungkan ketiga layar itu jadi prototipe interaktif sederhana di Figma (Prototype mode).
Uji ke 2 teman sekelas di luar kelompok, catat apakah mereka berhasil menyelesaikan tugas tanpa dituntun.
Kumpulkan tautan Figma kelompok (akses publik "can view") sebelum pertemuan berikutnya. File ini akan menjadi acuan langsung pengembangan landing page di Pertemuan 10.