Fitaru
Fitaru Wireframe
Wireframe awal untuk flow mobile Fitaru, mulai dari splash screen, onboarding, dashboard, tracking, progress, tips, profil, dan weekly review.
48 dari 57 materi Project fitaruwireframemobileux
Fitaru Wireframe
Dokumen ini berisi wireframe awal untuk MVP Fitaru. Fokusnya adalah struktur layar, urutan informasi, dan komponen utama, belum masuk ke desain visual detail.
Prinsip Wireframe
- Cepat dipakai untuk mencatat harian
- Tidak membuat user merasa dihakimi
- Fokus pada progres kecil
- Tombol utama harus mudah ditemukan
- Dashboard harus memberi gambaran hari ini dalam sekali lihat
- Bahasa aplikasi harus santai, suportif, dan realistis
Navigasi Utama
Bottom navigation:
- Home
- Catat
- Progress
- Tips
- Profil
Struktur navigasi:
Fitaru
├── Onboarding
├── Login / Register
├── Setup Profil
├── Home
├── Catat
│ ├── Catat Makan
│ ├── Catat Olahraga
│ ├── Catat Berat
│ └── Catat Air
├── Progress
├── Tips
└── Profil1. Splash Screen
Tujuan:
- Memberi identitas brand
- Menampilkan tagline
- Masuk otomatis ke onboarding atau home
Wireframe:
┌─────────────────────────────┐
│ │
│ │
│ Logo │
│ Fitaru │
│ │
│ Diet santai, progres tetap │
│ jalan │
│ │
│ │
└─────────────────────────────┘Komponen:
- Logo
- Nama aplikasi
- Tagline
2. Onboarding
Tujuan:
- Mengenalkan manfaat utama Fitaru
- Membuat user merasa aplikasi ini ringan dan tidak mengintimidasi
Slide 1
┌─────────────────────────────┐
│ Ilustrasi │
│ │
│ Catat makan tanpa ribet │
│ │
│ Makan enak tetap boleh, │
│ yang penting lebih sadar. │
│ │
│ ● ○ ○ │
│ │
│ [Lewati] [Lanjut] │
└─────────────────────────────┘Slide 2
┌─────────────────────────────┐
│ Ilustrasi │
│ │
│ Olahraga sesuai ritmemu │
│ │
│ Jalan kaki, gym, workout │
│ rumah, semua tetap progres.│
│ │
│ ○ ● ○ │
│ │
│ [Lewati] [Lanjut] │
└─────────────────────────────┘Slide 3
┌─────────────────────────────┐
│ Ilustrasi │
│ │
│ Lihat progres harianmu │
│ │
│ Berat badan, kebiasaan, │
│ dan konsistensi tercatat. │
│ │
│ ○ ○ ● │
│ │
│ [Mulai Sekarang] │
│ [Masuk] │
└─────────────────────────────┘3. Login / Register
Tujuan:
- User bisa masuk dengan cepat
- Opsi login tidak terlalu ramai
Wireframe:
┌─────────────────────────────┐
│ Fitaru │
│ Diet santai, progres tetap │
│ jalan. │
│ │
│ Masuk untuk lanjut │
│ │
│ [Lanjut dengan Google] │
│ [Lanjut dengan Apple] │
│ [Masuk dengan Email] │
│ │
│ Belum punya akun? Daftar │
└─────────────────────────────┘Komponen:
- Logo kecil
- Tagline
- Tombol Google
- Tombol Apple
- Tombol email
- Link daftar atau masuk
4. Setup Profil Awal
Tujuan:
- Mengumpulkan data dasar untuk personalisasi target
- Tetap terasa cepat dan ringan
Step 1: Data Dasar
┌─────────────────────────────┐
│ Profil awal 1 dari 4│
│ │
│ Kita kenalan dulu │
│ │
│ Nama panggilan │
│ [Raka________________] │
│ │
│ Jenis kelamin │
│ [Pria] [Wanita] │
│ │
│ Usia │
│ [-] 28 [+] │
│ │
│ [Lanjut] │
└─────────────────────────────┘Step 2: Data Tubuh
┌─────────────────────────────┐
│ Profil awal 2 dari 4│
│ │
│ Kondisi tubuh sekarang │
│ │
│ Tinggi badan │
│ [170 cm_____________] │
│ │
│ Berat saat ini │
│ [75 kg_______________] │
│ │
│ Target berat │
│ [68 kg_______________] │
│ │
│ [Lanjut] │
└─────────────────────────────┘Step 3: Tujuan
┌─────────────────────────────┐
│ Profil awal 3 dari 4│
│ │
│ Tujuan utamamu apa? │
│ │
│ [✓ Turun berat badan] │
│ [ Jaga berat badan] │
│ [ Naik massa otot] │
│ [ Hidup lebih sehat] │
│ │
│ [Lanjut] │
└─────────────────────────────┘Step 4: Kebiasaan
┌─────────────────────────────┐
│ Profil awal 4 dari 4│
│ │
│ Aktivitas harianmu │
│ │
│ [ Jarang bergerak] │
│ [✓ Cukup aktif] │
│ [ Aktif] │
│ [ Sangat aktif] │
│ │
│ Gaya diet │
│ [Diet santai v] │
│ │
│ [Buat Target] │
└─────────────────────────────┘5. Setup Target Harian
Tujuan:
- Menampilkan target awal yang bisa langsung dipakai
- User bisa ubah target tanpa merasa wajib memahami angka kompleks
Wireframe:
┌─────────────────────────────┐
│ Target harianmu │
│ │
│ Ini rekomendasi awal. │
│ Bisa kamu ubah kapan saja. │
│ │
│ Air minum │
│ [-] 8 gelas [+] │
│ │
│ Olahraga │
│ [-] 3x / minggu [+] │
│ │
│ Timbang berat │
│ [Senin & Kamis pagi v] │
│ │
│ Kalori estimasi │
│ [Aktifkan] [Lewati dulu] │
│ │
│ [Mulai Pakai Fitaru] │
└─────────────────────────────┘6. Home / Dashboard Harian
Tujuan:
- Menjadi pusat aktivitas harian
- User langsung tahu apa yang sudah dan belum tercatat
- Tombol catat harus mudah diakses
Wireframe:
┌─────────────────────────────┐
│ Hai, Raka 🔔 │
│ Diet santai, progres tetap │
│ jalan. │
│ │
│ ┌───────────────────────┐ │
│ │ Skor konsistensi │ │
│ │ 62% │ │
│ │ 2 dari 4 kebiasaan │ │
│ │ sudah tercatat. │ │
│ └───────────────────────┘ │
│ │
│ Aksi cepat │
│ [Makan] [Olahraga] │
│ [Berat] [Air] │
│ │
│ Ringkasan hari ini │
│ ┌───────────────────────┐ │
│ │ Makan 2 tercatat │ │
│ │ Olahraga Belum │ │
│ │ Air 5/8 gelas │ │
│ │ Berat 74.8 kg │ │
│ └───────────────────────┘ │
│ │
│ Pesan hari ini │
│ Makan enak tetap boleh, │
│ yang penting tercatat. │
│ │
│ Home Catat Progress Tips Me│
└─────────────────────────────┘Komponen utama:
- Sapaan
- Tagline kecil
- Notifikasi
- Skor konsistensi
- Quick action
- Ringkasan harian
- Pesan suportif
- Bottom navigation
7. Catat
Tujuan:
- Menjadi pintu cepat untuk semua aktivitas pencatatan
- Cocok untuk user yang langsung ingin input tanpa lewat dashboard
Wireframe:
┌─────────────────────────────┐
│ Catat hari ini │
│ Pilih yang mau kamu catat. │
│ │
│ [Catat makan] │
│ Sarapan, makan siang, │
│ malam, snack, minuman │
│ │
│ [Catat olahraga] │
│ Jalan kaki, gym, workout │
│ │
│ [Catat berat badan] │
│ Pantau tren tubuhmu │
│ │
│ [Tambah air minum] │
│ Update gelas hari ini │
│ │
│ Home Catat Progress Tips Me│
└─────────────────────────────┘8. Catat Makan
Tujuan:
- Mencatat makanan dengan cepat
- Tidak memaksa user menghitung kalori detail
Wireframe:
┌─────────────────────────────┐
│ ← Catat makan │
│ │
│ Waktu makan │
│ [Sarapan] [Siang] │
│ [Malam] [Snack] [Minuman] │
│ │
│ Nama makanan │
│ [Nasi ayam, sayur_____] │
│ │
│ Porsi │
│ [Kecil] [Sedang] [Besar] │
│ │
│ Estimasi kalori │
│ [Opsional___________] │
│ │
│ Foto makanan │
│ [Tambah foto] │
│ │
│ Catatan │
│ [____________________] │
│ │
│ [Simpan] │
└─────────────────────────────┘Success state:
Tercatat. Makan enak tetap bisa jalan bareng progres.9. Catat Olahraga
Tujuan:
- Mencatat aktivitas fisik tanpa ribet
- Menghargai olahraga kecil sekalipun
Wireframe:
┌─────────────────────────────┐
│ ← Catat olahraga │
│ │
│ Jenis olahraga │
│ [Jalan kaki v] │
│ │
│ Durasi │
│ [-] 30 menit [+] │
│ │
│ Intensitas │
│ [Ringan] [Sedang] [Berat] │
│ │
│ Catatan │
│ [____________________] │
│ │
│ [Simpan] │
└─────────────────────────────┘Success state:
Mantap. Gerak sedikit tetap berarti.10. Catat Berat Badan
Tujuan:
- Membantu user memantau tren berat
- Tidak membuat user terlalu fokus pada satu angka
Wireframe:
┌─────────────────────────────┐
│ ← Catat berat │
│ │
│ Berat hari ini │
│ [-] 74.8 kg [+] │
│ │
│ Foto progres │
│ [Tambah foto opsional] │
│ │
│ Catatan │
│ [Contoh: tidur kurang] │
│ │
│ [Simpan] │
└─────────────────────────────┘Success state:
Berat tercatat. Fokus ke tren, bukan satu angka hari ini.11. Progress
Tujuan:
- Menampilkan perkembangan user secara sederhana
- Membantu user membaca pola mingguan
Wireframe:
┌─────────────────────────────┐
│ Progress │
│ Lihat perkembanganmu. │
│ │
│ [Berat] [Makan] [Olahraga] │
│ [Konsistensi] │
│ │
│ Berat badan │
│ ┌───────────────────────┐ │
│ │ Grafik berat │ │
│ │ │ │
│ └───────────────────────┘ │
│ │
│ Minggu ini │
│ Berat turun 0.4 kg │
│ Olahraga 2x │
│ Konsistensi 68% │
│ │
│ Insight │
│ Kamu lebih rapi mencatat │
│ makan siang minggu ini. │
│ │
│ Home Catat Progress Tips Me│
└─────────────────────────────┘12. Tips
Tujuan:
- Memberi edukasi ringan
- Konten harus mudah dicerna dan relevan dengan kehidupan harian
Wireframe:
┌─────────────────────────────┐
│ Tips santai │
│ Biar sehatnya tetap ringan.│
│ │
│ Kategori │
│ [Makan] [Olahraga] [Gula] │
│ [Meal prep] [Tidur] │
│ │
│ Artikel pilihan │
│ ┌───────────────────────┐ │
│ │ Cara tetap makan nasi │ │
│ │ saat diet │ │
│ └───────────────────────┘ │
│ │
│ ┌───────────────────────┐ │
│ │ Olahraga 10 menit │ │
│ │ untuk hari sibuk │ │
│ └───────────────────────┘ │
│ │
│ Home Catat Progress Tips Me│
└─────────────────────────────┘13. Profil
Tujuan:
- Mengatur data dan preferensi aplikasi
Wireframe:
┌─────────────────────────────┐
│ Profil │
│ │
│ Raka │
│ Turun berat badan │
│ │
│ Target │
│ Berat target 68 kg │
│ Gaya diet Santai │
│ │
│ Pengaturan │
│ [Data diri] │
│ [Target harian] │
│ [Reminder] │
│ [Preferensi makanan] │
│ [Satuan berat & tinggi] │
│ │
│ [Keluar] │
│ │
│ Home Catat Progress Tips Me│
└─────────────────────────────┘14. Weekly Review
Tujuan:
- Memberi ringkasan mingguan yang suportif
- Memberi saran kecil untuk minggu depan
Wireframe:
┌─────────────────────────────┐
│ Review mingguan │
│ Progresmu minggu ini │
│ │
│ ┌───────────────────────┐ │
│ │ Berat berubah │ │
│ │ -0.4 kg │ │
│ └───────────────────────┘ │
│ │
│ ┌───────────────────────┐ │
│ │ Olahraga │ │
│ │ 2 sesi │ │
│ └───────────────────────┘ │
│ │
│ ┌───────────────────────┐ │
│ │ Hari paling konsisten │ │
│ │ Rabu │ │
│ └───────────────────────┘ │
│ │
│ Saran minggu depan │
│ Coba rapikan snack malam │
│ pelan-pelan. │
│ │
│ [Atur target minggu] │
│ [Kembali ke Home] │
└─────────────────────────────┘Prioritas Layar MVP
Urutan layar yang sebaiknya dibuat lebih dulu:
- Splash screen
- Onboarding
- Login / Register
- Setup profil
- Home dashboard
- Catat makan
- Catat olahraga
- Catat berat
- Progress
- Profil
Tips dan Weekly Review bisa dibuat setelah alur pencatatan utama sudah stabil.
Catatan UX Penting
- Jangan terlalu menonjolkan kegagalan user.
- Hindari copywriting seperti “target gagal” atau “kalori berlebihan”.
- Gunakan bahasa yang membantu user kembali konsisten.
- Input makanan harus bisa selesai kurang dari 30 detik.
- Kalori sebaiknya opsional di MVP.
- Dashboard harus tetap berguna walau user hanya mencatat sebagian aktivitas.
- Fokus utama aplikasi adalah mencatat dan melihat progres, bukan menghukum.
Tahap Berikutnya
Setelah wireframe ini, tahap berikutnya:
- Membuat design system sederhana
- Menentukan warna, tipografi, ikon, dan komponen
- Membuat mockup UI high fidelity
- Menentukan struktur database MVP
- Menentukan tech stack development