Mengembangkan High-Fidelity Prototype Interaktif untuk UMKM
Materi Pembelajaran — Sub CPMK: Mengembangkan High-Fidelity prototype yang interaktif untuk memvisualisasikan solusi desain kepada pemilik UMKM (Tools: Figma)
Infografis: 5 tahapan mengembangkan high-fidelity prototype — dari memahami masalah UMKM hingga visualisasi & feedback interaktif.
High-Fidelity Prototype Figma Desain Visual Interactive Prototyping
1. Apa itu High-Fidelity Prototype & Bedanya dengan Low-Fi
High-fidelity (Hi-Fi) prototype adalah rancangan antarmuka yang sudah mendekati produk akhir — lengkap dengan warna, tipografi, gambar/ikon realistis, dan interaksi antar halaman yang bisa dicoba langsung layaknya aplikasi sungguhan. Berbeda dari low-fidelity wireframe yang hanya berupa kotak abu-abu untuk menentukan tata letak, Hi-Fi prototype digunakan untuk memvisualisasikan solusi desain secara meyakinkan kepada pemilik UMKM sebelum produk benar-benar dikembangkan oleh tim teknis.
Perbandingan tampilan kartu produk yang sama pada tahap Low-Fidelity (kiri, tanpa warna) dan High-Fidelity (kanan, lengkap dengan warna, tipografi, & ikon).
Contoh Tambahan 1 — Perbandingan Halaman Beranda
Perbandingan halaman beranda: struktur (navbar → banner → kategori → grid produk) tetap sama, hanya "kulit visual" yang berubah.
Contoh Tambahan 2 — Perbandingan Halaman Checkout
Perbandingan halaman checkout: daftar item & tombol bayar tetap di posisi yang sama, kini dengan detail visual produk & harga yang jelas.
2. Mengubah Low-Fi Menjadi High-Fi Prototype
Transformasi dari wireframe Lo-Fi menjadi prototype Hi-Fi dilakukan bertahap di Figma, tanpa mengubah struktur tata letak yang sudah disepakati sebelumnya — yang berubah hanyalah "kulit visualnya".
| Langkah | Penjelasan |
|---|---|
| 1. Duplikasi frame Lo-Fi | Salin frame wireframe yang sudah disetujui sebagai dasar, agar struktur & posisi elemen tidak berubah |
| 2. Ganti placeholder dengan konten nyata | Kotak silang diganti foto produk asli, balok teks diganti judul & deskripsi sesungguhnya |
| 3. Terapkan style guide/design system | Gunakan palet warna brand, tipografi, dan komponen (button, card) yang konsisten di seluruh halaman |
| 4. Rapikan spacing & alignment | Sesuaikan jarak antar elemen (padding/margin) agar tampilan terasa rapi secara visual, bukan sekadar fungsional |
| 5. Uji tampilan di berbagai ukuran layar | Pastikan tampilan tetap nyaman dilihat pada frame mobile maupun desktop |
3. Menambahkan Elemen Visual (Warna, Tipografi, Ikon)
Tiga elemen visual utama yang membedakan Hi-Fi dari Lo-Fi adalah warna, tipografi, dan ikon/gambar. Ketiganya harus dipilih secara konsisten agar produk terasa profesional dan mencerminkan identitas UMKM.
| Elemen | Prinsip Penerapan | Contoh untuk UMKM |
|---|---|---|
| Warna | Gunakan 1 warna utama (primary), 1 warna aksen (accent) untuk tombol aksi, dan warna netral (abu-abu/putih) untuk latar & teks | Coklat tua sebagai warna utama toko kopi, oranye sebagai aksen tombol "Beli Sekarang" |
| Tipografi | Pilih maksimal 2 jenis huruf (1 untuk judul, 1 untuk isi teks) dengan ukuran yang jelas berjenjang (heading > subjudul > isi) | Font tebal untuk nama produk, font reguler untuk deskripsi & harga |
| Ikon & Gambar | Gunakan satu gaya ikon yang konsisten (line icon atau solid icon, jangan dicampur) dan foto produk beresolusi cukup tinggi | Ikon keranjang, pencarian, dan profil bergaya line-icon seragam di seluruh halaman |
4. Membangun Interaksi Antar Halaman (Prototyping)
Setelah tampilan visual selesai, langkah terakhir adalah menghubungkan antar halaman menggunakan fitur Prototype di Figma, sehingga pemilik UMKM bisa mengklik langsung dari satu halaman ke halaman lain layaknya aplikasi sungguhan — bukan sekadar gambar statis.
Contoh Alur Interaksi yang Dihubungkan di Figma
| Fitur Figma | Fungsinya |
|---|---|
| Prototype Tab | Mode khusus untuk menghubungkan satu frame ke frame lain lewat titik koneksi (interaction) |
| Trigger "On Click / On Tap" | Menentukan aksi apa yang memicu perpindahan halaman, misalnya saat tombol/gambar produk ditekan |
| Smart Animate | Membuat transisi perpindahan antar halaman terasa halus, elemen yang sama akan "bergerak" otomatis antar frame |
| Overlay | Menampilkan elemen seperti pop-up konfirmasi atau menu tanpa harus berpindah ke frame baru sepenuhnya |
| Preview / Present | Menjalankan prototype dalam mode tampilan penuh agar bisa dicoba langsung oleh pemilik UMKM seperti aplikasi asli |
5. Studi Kasus: High-Fidelity Prototype untuk UMKM "Kopi Lereng Merapi"
Melanjutkan studi kasus wireframe pada materi sebelumnya, tim desain kini mengembangkan wireframe Lo-Fi "Kopi Lereng Merapi" yang sudah disetujui menjadi high-fidelity prototype interaktif untuk dipresentasikan ke pemilik usaha.
5.1 Menentukan Identitas Visual dari Brand yang Sudah Ada
Sumber warna: tim mengambil warna coklat tua & krem dari kemasan produk kopi yang sudah dipakai selama ini, ditambah aksen oranye yang terinspirasi dari logo toko, agar tampilan digital terasa menyatu dengan identitas yang sudah dikenal pelanggan setia.
Tipografi: dipilih font tebal & sedikit playful untuk judul (mencerminkan kehangatan kedai kopi), dipadukan font reguler yang mudah dibaca untuk deskripsi produk dan harga.
Ikon: seluruh ikon (keranjang, pencarian, profil) menggunakan gaya line icon yang seragam agar terlihat rapi dan tidak "ramai".
5.2 Hasil Transformasi per Halaman
| Halaman | Perubahan Utama saat Menjadi Hi-Fi |
|---|---|
| Beranda | Banner promosi diberi warna gradasi oranye hangat, kategori produk berbentuk pill berwarna sesuai contoh pada bagian 1, foto produk asli menggantikan kotak silang |
| Detail Produk | Tombol "Tambah ke Keranjang" diberi warna oranye mencolok mengikuti prinsip aksen warna, foto produk resolusi tinggi ditambahkan untuk tiap varian roasting |
| Checkout | Ringkasan pesanan ditampilkan dengan thumbnail produk berwarna dan total harga ditonjolkan dengan warna kuning keemasan agar mudah dibaca sekilas |
5.3 Membangun Interaksi untuk Sesi Presentasi
Tim menghubungkan seluruh frame Hi-Fi menggunakan fitur Prototype di Figma mengikuti alur pada bagian 4 di atas (Beranda → Detail Produk → Checkout → Konfirmasi), lalu menjalankannya dalam mode Present saat sesi presentasi ke pemilik usaha — sehingga pemilik dapat langsung mencoba mengetuk tombol "Tambah ke Keranjang" dan melihat perpindahan halaman secara langsung, tanpa perlu membayangkan dari gambar statis.
Studi kasus ini menegaskan bahwa high-fidelity prototype bukan sekadar "mempercantik" tampilan, melainkan alat komunikasi yang membuat pemilik UMKM bisa memberi masukan yang tepat sasaran — karena mereka benar-benar merasakan pengalaman calon pembeli, bukan sekadar membayangkannya dari penjelasan verbal.
6. Referensi Jurnal Penelitian Terkait
Berikut beberapa penelitian nasional yang menerapkan pembuatan high-fidelity prototype interaktif menggunakan Figma dalam perancangan platform digital UMKM maupun sejenisnya:
- Perancangan Prototype UI/UX Aplikasi Home Service Kendaraan Berbasis Mobile dengan Pendekatan Design Thinking. Journal of Information System and Application Development (JISAD). Menjelaskan proses penyempurnaan wireframe menjadi high-fidelity prototype dengan menambahkan warna, gambar, dan ikon. Baca selengkapnya
- Perancangan Prototipe UI/UX Layanan Pemesanan Berbasis Mobile Website pada UMKM Letra Studio Menggunakan Metode Design Thinking. Jurnal Riset Multidisiplin Edukasi. Studi kasus UMKM studio fotografi di Jimbaran. Baca selengkapnya
- Widayati, S. & Rokoyah, K. (2026). Perancangan UI/UX Aplikasi UMKM dengan Metode Design Thinking Menggunakan Figma. Journal of Information System, Informatics and Computing (JISICOM), 10(1), 36–48. Baca selengkapnya
- Pembuatan Desain UI/UX dengan Metode Prototyping pada Aplikasi Layanan Pengadilan Negeri Bale Bandung Menggunakan Figma. Menerapkan proses prototyping bertahap dari alur penggunaan, kerangka, sketsa, hingga desain akhir interaktif. Baca selengkapnya
- Perancangan Ulang UI/UX dengan Figma pada Website OKE OCE Indonesia Menggunakan Metode Design Thinking. Journal of Information System Research (JOSH). Studi kasus pemberdayaan UMKM komunitas melalui prototype interaktif. Baca selengkapnya
- Desain UI/UX Aplikasi Edukasi FIDEXA-SD Menggunakan Design Thinking dan Figma. METIK Jurnal. Membahas penerapan interactive prototyping & elemen visual pada Figma. Baca selengkapnya
7. Kesimpulan
High-fidelity prototype menjadi jembatan komunikasi paling efektif antara tim desainer dan pemilik UMKM, karena mampu menampilkan solusi desain secara visual dan interaktif — bukan sekadar sketsa. Dengan mengubah wireframe Lo-Fi menjadi Hi-Fi secara bertahap, menambahkan elemen visual (warna, tipografi, ikon) yang konsisten dengan identitas usaha, serta membangun interaksi antar halaman menggunakan fitur prototyping di Figma, pemilik UMKM dapat merasakan langsung pengalaman calon pelanggannya sebelum produk benar-benar dikembangkan — mempercepat keputusan dan mengurangi risiko investasi yang salah arah.
Disusun sebagai materi pembelajaran mata kuliah UX/HCI — Sub-CPMK: High-Fidelity Prototype Interaktif untuk UMKM.
Post a Comment