Architecture Prompt — v1

QuranFlow App Architecture Design Prompt

Purpose: Generate 3 distinct information architecture proposals for the QuranFlow iOS app redesign.

Context: What is QuranFlow?

QuranFlow is a semester-based Quranic learning app for adult learners. Students progress through 4 levels over 15 weeks each, learning to read the Quran with correct pronunciation and Tajweed rules.

The Weekly Learning Cycle

Saturday: New lesson unlocks (1-2 videos, 3-5 min each)
    ↓
Anytime: Watch lesson, practice concept
    ↓
Anytime: Record recitation of assigned passage → Submit to Quran Coach
    ↓
Within 48h: Receive audio feedback from assigned Coach
    ↓
Throughout week: Attend live sessions (Level Classes, Quran Reading Circles)
    ↓
Repeat for 15 weeks → End of Course Assessment → Graduate to next level

User Profile

Year 2 Difference

Level 4 graduates can continue to Year 2 "Advanced" which replaces weekly submissions with 1:1 appointments with TAs. Different interaction model.

The Core Problem: User Disorientation

"Students struggle to understand where they are in the program, what they should be doing, and when things happen."

Manifestations:

Root causes:

  1. People don't read emails/manuals
  2. Critical information not surfaced in-app
  3. No clear visual orientation (current week, current status)
  4. Key features hidden in non-intuitive locations (hamburger menu)

Current State Problems (P0 Critical Issues)

Issue Impact
Video playback failure Cannot complete lessons
Missing submission history Cannot track learning progress
Broken notifications Cannot act on feedback alerts
Non-standard Quranic font Poor learning experience (proper font hidden in settings)
Inadequate user profile Cannot manage account
No timezone on live sessions Cannot determine if sessions fit schedule

User Tasks to Support

Core (App fails without these)

Supporting (Degraded experience without these)

Enhancement (Polish)

Design Principles (From WWDC25 Field Guide)

The 3 Critical User Questions

Every screen must answer instantly:

  1. Where am I? (Context)
  2. What can I do? (Action)
  3. Where can I go? (Navigation)

Tab Bar Rules

Screen Anatomy

 _________________________________________
|  < Back     [Screen Title]      (+) ... |  ← TOOLBAR (Context + Local Actions)
|_________________________________________|
|                                         |
| [Content Area]                          |  ← CONTENT (Primary task flow)
|                                         |
|_________________________________________|
|   (A)          (B)           (C)        |  ← TAB BAR (Global Nav only)
|_________________________________________|

Content Principles

Visual Hierarchy

Design Constraints

  1. iOS-native patterns: Bottom tab bar, standard toolbars, no hamburger menus for critical features
  2. Accessibility: Large touch targets, WCAG AA contrast, scalable fonts
  3. Offline consideration: Core content should work with poor connectivity
  4. Mushaf font: Default for all Quranic text, not hidden in settings
  5. Timezone handling: All times in user's local timezone with clear indicator

The Design Challenge

Create 3 distinct information architecture proposals for QuranFlow that solve the disorientation problem while supporting all Core tasks.

For Each Proposal, Provide:

1. Architecture Overview

2. Tab Bar Structure

[Tab 1] [Tab 2] [Tab 3] [Tab 4] [Tab 5 max]

3. Home Screen Wireframe

Show how the home/landing screen answers:

4. Key Screen Flows

For these critical tasks, show the tap-path:

5. Information Surfacing Strategy

How does this architecture surface currently-hidden critical info:

6. Trade-offs

Proposal Themes (Suggestions)

Consider these distinct approaches:

Option A: "Timeline-First"

Organize around the weekly rhythm. Home screen is a timeline showing past/current/future weeks. Emphasizes temporal orientation.

Option B: "Task-First"

Organize around what needs doing. Home screen shows actionable items: unwatched lessons, pending submissions, upcoming sessions. Emphasizes to-do completion.

Option C: "Dashboard-First"

Organize around status and progress. Home screen is a dashboard showing metrics, current state, and quick actions. Emphasizes progress visibility.

Evaluation Criteria

Proposals will be evaluated on:

Criterion Weight Definition
Disorientation Fix 30% Does it immediately answer "what week am I on?" and "what should I do?"
Task Efficiency 25% Can users complete core tasks in minimal taps?
Discoverability 20% Are previously-hidden features now findable?
iOS Nativeness 15% Does it follow platform conventions?
Scalability 10% Does it work for Year 2 appointment model?

Output Format

For each of the 3 proposals:

## Proposal [A/B/C]: "[Name]"

### Philosophy
[2-3 sentences on the core organizing principle]

### Tab Structure
[Tab Bar] → [What's inside each]

### Home Screen
[ASCII wireframe or detailed description]

### Key Flows
- Lesson: [tap path]
- Submit: [tap path]
- Feedback: [tap path]
- Schedule: [tap path]

### Surfacing Strategy
[How hidden info becomes visible]

### Trade-offs
- Optimizes for: [X]
- Sacrifices: [Y]
- Best for: [user type]

Reference: Current (Broken) Structure

For comparison, the current app structure:

Top Tabs: Home | Lessons | Submissions | Live

Hamburger Menu (≡) contains:

Top Right Icons: Progress % | Notifications | Profile

Problems: Critical info in hamburger, schedule buried in Resources, feedback split across locations, Live tab is "wall of text" nobody uses.