Project.Planning UX/UI

  • 🧠🎨 PROYEK DESAIN UI/UX GOPAY DENGAN FIGMA






    • https://www.figma.com/design/ASl4Ih4veIIwo9UH0ONpxH/Aplikasi-Gopay--Komunitas-?t=YztLRfIVI0TbLen9-0


    🎨✨ Panduan Lengkap Mendesain UI/UX Aplikasi GOPAY di Figma

    🧠 1. Riset & Analisis Awal

    Sebelum mendesain, kamu harus memahami fungsi dan kebutuhan pengguna dari aplikasi GOPAY.

    🔍 Apa itu GOPAY?

    GOPAY adalah dompet digital dari Gojek yang digunakan untuk:

    • Kirim & terima uang

    • Bayar tagihan

    • Transaksi di merchant

    • Isi ulang saldo

    • Pindai kode QR

    🎯 Tujuan Desain Ulang:

    • Membuat UI yang lebih segar, bersih, dan intuitif

    • Meningkatkan UX agar alur transaksi lebih cepat dan aman

    • Menonjolkan fitur utama tanpa membingungkan pengguna

    👥 Target Pengguna:

    • Rentang usia: 17–40 tahun

    • Melek teknologi, terbiasa menggunakan Gojek/fintech

    • Ingin efisiensi dan keamanan saat bertransaksi

    🗺️ 2. Alur Pengguna (Alur Pengguna)

    Membuat peta interaksi utama pengguna di aplikasi:

    1. Masuk ke Beranda
   ↓
2. Klik "Bayar"
   ↓
3. Scan QR atau pilih kontak
   ↓
4. Masukkan nominal
   ↓
5. Konfirmasi & Bayar
   ↓
6. Transaksi Berhasil 🎉

    Alur lainnya:

    • Isi Ulang Saldo

    • Lihat Riwayat Transaksi

    • Kelola Akun / Pengaturan

    🛠 Kamu bisa membuat diagram flow ini di Figma menggunakan bentuk & konektor , atau menggunakan alat seperti Whimsical, Miro, atau FigJam.

    🧱 3. Wireframe (Fidelitas Rendah)

    Buat sketsa kasar tampilan utama aplikasi tanpa warna atau gambar.

    📱 Contoh Wireframe Halaman Utama:

    |----------------------------------|
| 💰 Saldo: Rp 150.000             |
| [⬆ Top Up] [➡ Kirim] [📷 Scan]  |
|----------------------------------|
| 🔄 Riwayat Transaksi             |
| 💬 Promo & Cashback              |
| 📢 Info Keamanan & Tips          |
|----------------------------------|

    Buat juga wireframe untuk:

    • Halaman Top Up

    • Halaman Scan QR

    • Halaman Profil

    • Halaman Riwayat

    Kiat:

    Gunakan layout grid 8pt untuk menyusun elemen secara konsisten!

    🎨 4. Desain UI High-Fidelity (Tampilan Final)

    🧾 Panduan Gaya:

    Elemen Gaya
    🎨 Warna Utama #03AC0E (Hijau Gojek) atau Biru cerah
    🔤 Huruf Poppins / Inter / Roboto
    🔲 Ikon Sederhana, datar, minimal
    Tombol ⬜ Bulat, lebar penuh untuk aksi utama
    Kartu 🟪 Dengan bayangan halus (ketinggian)

    ✨ Komponen UI Utama:

    • Navbar bawah : Beranda | Bayar | Riwayat | akun

    • Tombol Aksi Cepat : Isi Ulang, Pindai QR, Kirim Uang

    • Spanduk Promo : Dapat digulir horizontal

    • Transaksi Kartu : Ringkas & bersih

    🧩 5. Komponen Reusable

    Agar desain lebih efisien dan konsisten, buat komponen di Figma seperti:

    • 🟦 Tombol primer & sekunder

    • 📦 Kartu transaksi

    • 🧍🏻‍♂️ Avatar & kartu profil

    • 📄 Bidang masukan

    • 📍 Navigasi Bawah

    Gunakan Auto Layout di Figma agar responsif dan rapi!

    🖱️ 6. Pembuatan Prototipe (Interaktif)

    Gunakan tab Prototipe di Figma:

    • Buat transisi antar halaman

    • Tambahkan efek animasi (misalnya slide, fade)

    • Simulasikan aliran pengguna seperti:

      • Klik “Pindai QR” → Kamera terbuka

      • Klik “Kirim” → Formulir input terbuka

      • Sukses → Halaman konfirmasi dengan animasi 🎉

    💡 Tes hasil prototipe kamu di Figma Mirror (di HP) agar tahu pengalaman pengguna-nya secara langsung!

    🧪 7. Pengujian & Umpan Balik

    Sebelum mengklaim desain akhir:

    • Lakukan usability test (bisa ke teman atau mentor)

    • Amati apakah pengguna:

      • Bingung navigasi?

      • Gagal menemukan fitur penting?

      • Suka visual dan flow-nya?

    Lalu, perbaiki desain berdasarkan masukan mereka.

    📁 Struktur File Figma Rekomendasi

    📁 GOPAY_UI_REDESIGN
├── 🎨 Style Guide
├── 🧱 Wireframes
├── 🏠 Home Screen
├── ➕ Top Up
├── 💸 Kirim Uang
├── 📷 Scan QR
├── 👤 Profil
├── 📜 Riwayat
└── 🧪 Prototype Interaktif

    🔗 Bonus: Tips UI/UX Estetik

    • Gunakan ruang putih dengan berani

    • Gunakan maksimal 2–3 bobot font

    • Hindari terlalu banyak warna — tetap minimalis

    • Terapkan gerakan (interaksi mikro) bila perlu

    📌 Kesimpulan

    Dengan mengikuti panduan ini, kamu bisa membuat desain ulang aplikasi GOPAY yang:

    • Lebih modern & user-friendly

    • Menekankan pengalaman transaksi cepat & aman

    • Cocok untuk menampilkan portofolio UI/UX kamu

    Kalau kamu mau, aku bisa bantu:

    • Buatkan kerangka desain awal (file Figma) 🛠️

    • Buat contoh kartu UI & komponen ✏️

    • Buat desain navigasi & tata letak utama

    Cukup bilang saja:

    "Bantu buat layout awal GOPAY di Figma!" atau
    "Buat komponen UI utama GOPAY"




    Comments

    Post a Comment

    Popular posts from this blog

    Melby.Sifa

    Tentu! Berikut adalah artikel blog lengkap yang merangkum semua eksperimen kamu menggunakan Flutter di zapp.run — termasuk penjelasan, kode, dan cara menjalankannya. Kamu bisa copy-paste ini langsung ke blog kamu. 🚀 Belajar Flutter di zapp.run: Menampilkan Gambar, Teks, dan Tombol dengan Gaya Android Flutter adalah framework buatan Google untuk membangun aplikasi mobile, web, dan desktop dari satu codebase. Dalam eksperimen ini, saya menggunakan zapp.run — platform online yang memungkinkan kita menjalankan Flutter tanpa perlu instalasi. Pada artikel ini, kita akan membahas bagaimana cara: Menampilkan gambar dari internet Menampilkan gambar dari assets lokal Menambahkan teks dan tombol Mengatur warna pada UI Flutter 🛠️ Persiapan: Menggunakan zapp.run Buka https://zapp.run Buat project Flutter baru Ganti isi file main.dart dengan kode yang akan saya berikan Jalankan dengan klik tombol ▶️ "Run" 1. ✅ Menampilkan Gambar dari Internet, Teks...
    Read more

    WidgetFlutter

    Image
     🧩 1. Apa Itu  Widget di Flutter Dalam Flutter, semua tampilan aplikasi dibangun dari widget . Widget = “Komponen penyusun UI ( User Interface )” di Flutter. Contoh: Text di layar → pakai Text() Gambar → pakai Image () Tombol → pakai ElevatedButton () Tata letak → pakai Column () atau Row () 🩷 Jadi, setiap elemen tampilan di Flutter adalah widget ! 💡 2. Jenis-Jenis Widget di Flutter Jenis Widget Penjelasan Contoh Stateless Widget Tampilan tidak berubah walaupun pengguna berinteraksi. Text, Icon, Image Stateful Widget Tampilan bisa berubah karena interaksi pengguna atau data. TextField, Switch, Counter 🌷 3. Stateless Widget ➡️ Widget yang tidak punya “state” (tidak berubah). Cocok untuk tampilan statis seperti teks, logo, atau judul. 🧠 Contoh: import 'package:flutter/material.dart'; class MyTextWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text( 'Hello Flutter...
    Read more