MASA — User Flows
Onboarding
Homepage
Salat
Al-Qur'an
Doa
Sedekah Subuh
LazisMu
Zakat
Qurban
Iuran
Berita
Video
Event
Profil
e-KTAM
15 flows Max 3–5 steps

User Flows

15 user flows lengkap — mulai dari entry point hingga success state. Setiap flow max 3–5 langkah. Pilih fitur dari tab di atas.
Total flows 15
Max steps 3–5 per flow
Last update 15 Jun 2026
01
Onboarding
Dari install pertama ke homepage yang dipersonalisasi. 3 langkah yang menentukan seluruh experience ke depan.
W1 — Activation 3 langkah Feature baru Target: activation ≥70%
Open
P-01 / P-02
Splash + Thesis
"Sudah 100 tahun Muhammadiyah..."
Tap: Mulai
→
Step 1
P-03
Pilih Segmen
3 pilihan: Kader / Muslim / Habit
Tap salah satu
→
Step 2
P-04
Izin Notifikasi
Permission primer sebelum OS dialog
Izinkan / Nanti saja
→
Selesai
P-07/08/09
Homepage sesuai segmen
Langsung ke varian yang tepat
Happy path
Splash → Thesis → Pilih Segmen → Izin → Homepage (3 langkah efektif)
Skip izin
User tap "Nanti saja" → tetap lanjut ke Homepage. Izin dapat diminta ulang via Settings notifikasi.
Sudah punya akun
Splash → Login (A-01) → OTP (A-03) → Homepage (segmen dari server)
CX Rationale
  • Segment picker menentukan semua experience — ini bukan data collection, ini personalisasi bermakna
  • User yang merasa "dipahami" di onboarding lebih kecil kemungkinan churn D1
  • Permission primer menaikkan grant rate notifikasi +20pp vs direct OS dialog
Dev Notes
  • POST /user/segment saat pilih segmen
  • Segment disimpan di SharedPreferences + server
  • Jika user sudah login sebelumnya → skip P-02/P-03, langsung dari server
  • Segment bisa diubah kapan saja: Settings → Ubah Segmen (A-05)
02
Homepage
Hub utama yang adaptif per segmen. Scroll vertikal dari Pesan Hari Ini → NOW Salat → Grid → Konten.
W1Daily entry point3 varian segmen
Open
P-07/08/09
Homepage
Varian sesuai segmen user
↓
Zone 1
H-12
Pesan Hari Ini
Hadits/quote dari Tarjih — scroll melewati
↓
Zone 2
H-01
NOW · Salat
Countdown + Bridge A ke Qur'an
Tap: Lanjut baca Qur'an
↓
Zone 3
P-11
Puck Grid 8
Akses cepat semua layanan
Tap puck → masuk fitur
↓
Zone 4
C-01/03/05
Berita · Video · Event
Scroll horizontal per konten
Habit seeker
Homepage → Streak card → progress hari ini → FAB sedekah. Tidak perlu scroll jauh.
Kader
Homepage → KTAM status card → iuran reminder → ranting event. Puck grid reorder ke KTAM-first.
03
Jadwal Salat + Bridge A
Trigger harian 5×. Jadwal → Bridge A ke Qur'an saat menunggu. Fix notif yang tidak dihormati.
W0 Fix P0 (notif)W2 Enhance5× / hari
Entry
H-01
Jadwal Salat
5 waktu + countdown + doa pagi (Subuh)
→
Bridge A
H-01
"Sambil menunggu Subuh"
CTA lanjut baca Qur'an saat ada waktu
Tap → Al-Qur'an reader
→
Optional
H-02
Setting Notif
Toggle per waktu · adzan / getar / mati
Fix P0: benar-benar dihormati
Bridge A
Jadwal Salat → tap "Lanjut baca Qur'an" → Al-Qur'an reader (resume otomatis)
Bug fix W0
User nonaktifkan notif adzan → setting tersimpan → verifikasi: notif benar-benar mati di sistem
04
Al-Qur'an + Bridge B
Dari indeks ke reader ke outro ke Sedekah. Tafsir Tarjih sebagai variable reward. Collapsed dari 4 ke 3 langkah.
W2 Engagement3 langkah (collapsed)Bridge B ke Sedekah
Entry
H-03
Indeks Surah
"Lanjut baca" resume card prominent
Tap card atau pilih surah
→
Step 1
H-04
Reader
Ayat + tap → sheet inline (bookmark / tafsir / audio / share)
Tafsir Tarjih = variable reward
→
Bridge B
H-06
Outro
Setelah ≥10 ayat → "Lengkapi pagimu"
Tap → Sedekah Subuh (opsional)
→
Optional
T-01
Sedekah Subuh
Entry via Bridge B. Jika skip → kembali home.
Full flow
Resume card → reader → tafsir → outro Bridge B → Sedekah. Total 3 langkah efektif.
Skip outro
User tap "Nanti saja" di outro → posisi tersimpan → kembali ke homepage.
05
Doa & Dzikir
Doa kontekstual — bukan daftar A-Z. Pagi/petang otomatis, situasi bisa dipilih. 2 langkah.
W22 langkahKontekstual
Entry
H-08
Doa Hub
"Untukmu pagi ini" auto + grid 8 situasi
Tap situasi atau chip waktu
→
Step 1
H-09
Doa Detail
Arab + latin + terjemah + audio + favorit
06
Sedekah Subuh
3 tap dari FAB atau Bridge B. Default cerdas: nominal 5rb, anak yatim, saldo. Anti-riya' privat default.
W3 Trust3 tap selesaiFeature baruAnti-riya'
Entry
FAB / Bridge B
Masuk Sedekah
Via FAB ❤ (seluruh app) atau outro Qur'an
→
Tap 1
T-01
Pilih Nominal
Default 5rb sudah terisi. Program + metode pre-filled.
Tap: "Sedekah Rp 5.000"
→
Tap 2
T-02
Konfirmasi
Slide to confirm · trust LazisMu
Geser → proses 2 detik
→
Selesai
T-03
Impact privat
"Kamu + 1.243 jamaah" · privat · kuitansi
Happy path
FAB → 1 layar default → slide confirm → impact (3 tap total)
Recurring setup
Di T-01: aktifkan "Ulangi tiap Subuh?" → sedekah jadi otomatis harian (T-20 settings)
Streak putus
User skip hari ini → copy: "Subuh besok adalah pintu baru. Kapan pun siap." Tidak ada shame.
07
Donasi LazisMu
Trust 3-lapis: foto nyata + breakdown alokasi + kuitansi PDF. Collapsed dari 4 ke 3 langkah.
W33 langkah (collapsed)Reskin trust
Entry
T-04
Galeri Program
Foto nyata · filter · trust badge LazisMu di header
Tap program
→
Step 1
T-05
Detail + Bayar
Foto besar + breakdown alokasi + nominal picker + payment inline
Tap: "Sedekah Rp 50.000"
→
Selesai
T-07
Kuitansi PDF
No. LZM-xxxx · unduh PDF · weekly digest
08
Zakat
3 jenis zakat. Kalkulator dituntun. Fatwa Tarjih inline. User tidak perlu tahu rumus nisab.
W33 langkahFatwa Tarjih
Entry
T-09
Zakat Hub
Fitrah / Maal / Penghasilan + haul reminder
Tap jenis zakat
→
Step 1
T-10/11
Kalkulator
Input dituntun → Fatwa Tarjih → hasil otomatis
Tap: "Tunaikan Rp xxx"
→
Selesai
T-06/07
Bayar → Kuitansi
Payment universal. Kuitansi LazisMu.
09
Kurban
"Kurban tanpa ribet." Collapsed ke 3 langkah. Pembayaran bertahap (bukan "paylater"). Tracking 3-fase + sertifikat digital.
W43 langkah (collapsed)Pembayaran bertahap
Entry
T-12/13
Pilih + Bayar
Hewan + lokasi + metode bayar di 1 scroll. Bertahap bawaan.
Tap: "Lanjutkan"
→
Step 1
T-13
Konfirmasi
Ringkasan + disclaimer syariat + slide confirm
→
Selesai
T-14/15
Tracking + Sertifikat
Beli ✓ → Disembelih → Distribusi + foto
10
Iuran KTAM — Bug Fix P0
VA blank screen dihilangkan. Error state + recovery QRIS built-in. Reframe dari tagihan ke "partisipasi kader".
W0 Bug Kill3 langkah + recoveryFix payment success ≥95%
Entry
T-16
List Iuran
Per bulan · highlight yang belum
Tap: bulan yang belum dibayar
→
Step 1
T-17
Bayar · Partisipasi
"Partisipasi Mei Rp 25.000" + breakdown. QRIS default.
Recovery VA gagal: otomatis → QRIS
→
Selesai
T-19
Sukses + Makna
"KTAM aktif · menggerakkan 3 program ranting"
VA Error path (yang di-fix)
T-17 → VA gagal → T-18 Error state → 3 opsi: QRIS (default) / retry VA / transfer manual. Tidak ada lagi blank screen.
11
Berita
Feed dari muhammadiyah.or.id. 2 langkah. Share ke WhatsApp 1 tap.
W42 langkah
Entry
C-01
Feed Berita
Card foto · filter Terbaru/Organisasi/Sosial
Tap artikel
→
Step 1
C-02
Artikel + Share
Konten penuh + bagikan WA + artikel terkait
12
Video
YouTube channel Muhammadiyah. Kategori Khutbah/Kajian/Inspirasi. 2 langkah.
W42 langkah
Entry
C-03
Video Hub
Thumbnail + durasi + kategori filter
Tap video
→
Step 1
C-04
Player + Related
Embed YouTube · share · lanjut tonton
13
Event
List event ranting + nasional. Daftar hadir 1 tap — NBM auto-fill. QR tiket tersimpan di e-KTAM.
W43 langkah
Entry
C-05
List Event
Filter lokasi + tanggal · date pill
Tap event
→
Step 1
C-06
Detail + Daftar
PCM organizer + trust badge + "Daftar hadir" 1 tap
NBM auto-fill dari profil
→
Selesai
C-09
QR Tiket
Tiket tersimpan di Profil + kalender H-1 reminder
14
Profil & Pengaturan
Hub akun: e-KTAM, Ranting Saya, riwayat, notifikasi fix. "by LabMu" badge di footer. Fix notif bug W0.
W0 Fix notifW5 Reskin4 screens
Entry
I-03
Profil Hub
Nama · KTAM · riwayat · settings · "by LabMu"
→
Fix W0
I-05
Notif Settings
Toggle per kategori: adzan / sedekah / iuran / event
Benar-benar dihormati
→
Optional
I-06
Riwayat Transaksi
Iuran + Donasi + Zakat + Qurban per bulan
15
e-KTAM
3 state: Aktif / Nunggak / QR mode. Status real-time dari payment iuran.
W5 Reskin3 states
Entry
I-01
e-KTAM Card
Status aktif/nunggak · NBM · PCM · valid until
Tap → QR mode
→
QR mode
I-01
QR Scan
Flip card ke QR untuk check-in event / verifikasi
→
If nunggak
T-16
Bayar Iuran
Warning badge → tap → flow iuran
← Sitemap · Wireframes · Feature Flows (detail) · Index User Flows v1.0 · 15 flows · 15 Jun 2026