Doc 11 — Redesign Phase 1 Research
Purpose: Output Day 1-2 research phase dari redesign initiative. Dibuat setelah beta user feedback "kurang modern" (Option (b) — skip upfront interview, proceed with 3 direction mockup).
Phase 1 context: 2-week redesign discovery sprint. Deliverable akhir: 3 visual direction mockup (Bento Premium, Editorial Serenity, Warm Islamic Storytelling) → product owner lock 1 direction → Phase 2 execution (5-7 weeks).
Budget Phase 1: Rp 8-10 juta. Fallback plan: pivot ke Pre-Phase 0 beta user interview (+2 weeks +Rp 5 jt) kalau 3 direction miss-target.
1. Moodboard Curation (30+ references across 3 directions)
Direction A — "Bento Premium"
Inspiration apps (install + explore):
- Revolut — bento dashboard, mesh gradient cards, financial data viz
- Arc Browser Mobile — colorful pills, glassmorphism, modern iconography
- Linear — sharp typography, dark-first design
- Notion Mobile 2024 — minimal-rich, clean hierarchy
- Cash App — bold color blocks, asymmetric layouts
Dribbble searches:
dribbble.com/search/bento-dashboarddribbble.com/search/mesh-gradient-appdribbble.com/search/finance-app-2024dribbble.com/search/glassmorphism-ui
Key visual patterns:
- Asymmetric card grid (1×1, 2×1, 1×2 sizes)
- Mesh gradient blobs (3-5 color stops, organic shape)
- Glassmorphism with backdrop-blur for overlay cards
- Ultra-large hero typography (56-72px)
- Duotone icons (MDI filled + accent color)
- Squircle corners (Apple-style)
Direction B — "Editorial Serenity"
Inspiration apps:
- Linear — monospace hints, sharp editorial
- Medium Mobile — typography-first reading
- Airbnb 2024 refresh — generous whitespace, storytelling
- Things 3 — polished minimalism, quality-focused
- Day One Journal — quiet beauty, paper-like feel
Dribbble searches:
dribbble.com/search/editorial-mobile-appdribbble.com/search/minimal-app-designdribbble.com/search/typography-mobile
Key visual patterns:
- Generous whitespace (2× standard padding)
- Typography dominance (headline > visual)
- Serif headings + sans body (Fraunces + Inter mix)
- Thin line icons uniform (1.5px stroke, monochrome)
- Soft multi-layer shadow for depth
- Muted palette (stone warmth, not clinical gray)
- Motion: gentle spring physics
Direction C — "Warm Islamic Storytelling"
Inspiration apps:
- Muslim Pro 2024 — modern Islamic aesthetic, Hijri-first
- Quran Pro — beautiful Arabic typography
- Duolingo — character mascot, celebrations, gamification
- Headspace — warm illustrations, calming palette
- Umma — Muslim community with illustration
- Athan — Prayer times with Islamic calligraphy accent
Dribbble/Behance:
dribbble.com/search/islamic-app-designdribbble.com/search/educational-illustrationdribbble.com/search/mascot-character-app- Behance "Islamic Banking App" projects
Illustration libraries:
- Blush.design (Islamic-friendly options)
- IconScout Islamic illustration packs
- Freepik premium (hijab character illustrations)
Key visual patterns:
- Custom character illustrations (santri boy peci, santri girl hijab, guru character)
- Islamic calligraphy accent (decorative, not content)
- Warm earth palette (olive, saffron, terracotta, cream)
- Geometric Islamic pattern subtle backgrounds
- Celebration micro-animations
- Gamification visual (badges, streaks, progress rings)
2. Competitive Landscape
Tier 1 — Direct Competitors (Madrasah/Pesantren)
| App | Strength | Weakness | Amal Opportunity |
|---|---|---|---|
| Kejar Cita | Built for madrasah workflow | Generic tech design | Differentiate via Islamic visual identity |
| E-Pesantren (PWNU/Muhammadiyah) | Organizational backing | Visually dated | Modern patterns while keeping Islamic values |
| Al-Kautsar Presensi | Reliable single-feature | Not comprehensive | Ecosystem coverage + modern UX |
Tier 2 — Mainstream School Apps
| App | Insight for Amal |
|---|---|
| Ruangguru | Adopt visual polish level, keep Islamic identity distinct |
| Zenius | Editorial direction possible but ADD Islamic warmth |
| Pijar Sekolah | Enterprise-style OK for admin/bendahara, warmth for parent |
Tier 3 — International Benchmarks (Most Relevant)
Brightwheel (US childcare) — MOST RELEVANT; 6-persona scope similar to Amal. Clean dashboard per role, daily update feed, photo-centric. Amal adopt: daily story feed pattern.
ClassDojo — parent-teacher messaging + portfolio. Character mascot, warm colors. Amal adopt: Chat Wali Kelas pattern + celebration moments.
Seesaw — student portfolio + journal. Timeline feed, media-rich. Amal adopt: Hafalan setoran feed with audio + image.
Tier 4 — Adjacent Categories for Inspiration
| Category | Apps | Why Relevant |
|---|---|---|
| Finance | Jago, Seabank, Blu, GoPay | Parents use daily — benchmark for "modern" feel |
| E-commerce | Shopee, Tokopedia | Most-used app category by Indonesian parents |
3. Indonesian User Context
Parent Demographics
- Age: 30–50 tahun
- Digital literacy: Medium (daily WhatsApp, e-wallet, Shopee, YouTube)
- "Modern" expectation: Similar polish to apps used daily — bright colors, photo-heavy, status indicators, instant feedback
- Current Amal pain: Feels "plain" compared to Shopee/Jago aesthetics they're used to
Guru/Ustadz Demographics
- Age: 25–55 tahun
- Digital literacy: Medium-Low (WhatsApp + browser, less gaming/tech)
- "Modern" expectation: Clean + easy + warm, not overwhelming
- Current Amal pain: Interface can feel tech-heavy, intimidating
Bendahara/Admin Demographics
- Age: 28–48 tahun
- Digital literacy: Medium (Excel, banking apps)
- Expectation: Data-dense but readable, export-friendly, bank-app-like
Cultural Considerations
- Religious sensitivity — avoid revealing illustrations, respect Islamic modesty
- Multi-generational users — kakek/nenek accessing parent account, need simplicity
- Economic sensitivity — app must feel "worth it" for pesantren budget
- Communal culture — pesantren = community, not individual
4. 2025 Design Trends — Filter for Amal
Adopt
- Bento grid dashboard (strong 2024-2025 trend)
- Mesh gradient backgrounds (organic blobs)
- Refined glassmorphism (not overdone)
- Subtle grain/noise texture (reduces "plastic" feel)
- Duotone + filled icons
- Squircle shapes (Apple-style)
- Micro-interactions (shimmer, ripple, bounces)
- Custom illustrations (personality + memorability)
- Dark mode first (parity, not afterthought)
Avoid
- Brutalism (mismatch with religious/serious context)
- Neumorphism (accessibility issues, dated)
- Full 3D everywhere (overkill, performance)
- TikTok vertical video feed (not needed for school)
- AI-generated imagery (trust issues in religious community)
- Overly sleek corporate (mismatch with madrasah warmth)
- Overly playful cartoonish (mismatch with education seriousness)
Case-by-Case
- Generative art backgrounds (brand asset, requires curation)
- Wild typography mixing (powerful but risky small-screen)
- Full-bleed hero (OK for hero, not list screens)
- Gamification heavy (good for hafalan, bad for payment)
5. Key Insights
- "Modern" for Indonesian parent ≈ looks like Shopee/Jago/Revolut — bento grid, bright status colors, photo-heavy, polished
- Cultural differentiation is Amal's moat — competitors don't invest in Islamic identity, Amal can win there
- Dashboard is critical screen — parent spends 80% time there, focus redesign
- Typography + illustration > plain UI — warmth + personality beats clinical clean
- Dark mode is non-negotiable — Muslim "quiet prayer at night" value maps to dark mode
- Flutter implementation cost must not spike — redesign must be tokenizable via Style Dictionary pipeline
6. Direction Hypothesis Preview (Pre-Mockup)
| Direction | Research Rank | Confidence | Reasoning |
|---|---|---|---|
| C — Warm Islamic | 🥇 #1 | HIGH | Strongest differentiation + cultural fit + demographic resonance |
| A — Bento Premium | 🥈 #2 | Medium | Familiar modern, "looks like apps they use", less unique |
| B — Editorial Serenity | 🥉 #3 | Medium-Low | Clean but may feel "plain" for user "modern" expectation |
Prediction for product owner (Anda) review at Phase 1 end:
- Instinctively prefer C for uniqueness
- Pragmatic choice A for familiarity
- B feels elegant but too quiet
Execution priority: Design C most detailed (paling kompleks + paling kompetitif). A & B same visual quality, faster to execute.
7. Constraints for Phase 2 Execution (After Direction Lock)
Whatever direction wins, Phase 2 must satisfy:
- Token-first: All design decisions mapped to design tokens (so Style Dictionary pipeline regenerates Flutter
.dartwithout manual rework) - WCAG 2.1 AA maintained: No contrast/accessibility regression
- Dark mode parity: Both modes equal polish, not afterthought
- 101 screen coverage: All existing screens adapted, not only redesign Dashboards
- 12 shared widget update: Component library refresh to match new direction
- Figma Variables used: All colors/spacing/radius via Variables for maintainability
- Prototype wiring preserved: 315 reactions re-mapped to new screens
- Documentation updated: Docs 01–10 updated to reflect new patterns
- Existing Flutter POC refactored: app_theme.dart + 4 widget POC regenerated from new tokens
Next Step
Day 3-4 (this week): Design Direction A — Bento Premium in Figma. Page 🎨 Redesign / Direction A — Bento. Parent Dashboard + 4 key components.
Day 5: Direction B — Editorial Serenity.
Day 6-7: Direction C — Warm Islamic Storytelling.
Day 8-9: Presentation deck + product owner review.
Day 10: Direction lock + Phase 2 brief.
Change Log
- v1.0 (today): Initial Phase 1 Day 1-2 research output committed.