Stakeholder Feedback & Solutions — v1

QuranFlow: Lejla's Feedback Documentation + Solution Space Exploration

Context

After reviewing the v6 mockup (qf-mockup-v2), Lejla (Product Manager) raised concerns about information density and the target audience's ability to engage with the redesigned screens. This document:

  1. Captures Lejla's views verbatim and structured
  2. Explores solution spaces for onboarding and design simplification
  3. Does NOT implement changes -- this is a design exploration document

Part 1: Lejla's Views (From Feb 26 Transcript)

Core Concern: Information Density vs. Target Audience

Lejla explicitly states: "I personally love this design... But I'm telling you, you always have to think about who is this serving."

The redesign is excellent from a product knowledge perspective but may overwhelm students who have zero understanding of the program.

Key Observations

1. Students arrive with zero product knowledge

2. People don't read

3. Target audience characteristics

4. The current app's simplicity was valued

5. Every zone on the new screen requires "decoding"

6. Onboarding skepticism

7. The "bare minimum" philosophy

8. What she wants next

Kamran's Counterpoints (From Same Discussion)

The Fundamental Tension

The redesign solved 49 usability issues by adding information that was previously hidden or missing. Now the concern is that the added information creates its own cognitive load. This tension cannot be resolved by "temporarily hiding things and revealing them later" -- that's a band-aid that creates its own problems (surprise UI, state management complexity, two versions to test). If an element doesn't earn its space for a new user, the real question is: does it earn its space at all? Or is the design trying to show too much?

The expert designer's approach: design for the new user first. If the design works for a complete beginner, it will also work for an experienced student (they'll just move faster). Designing for experts and then simplifying for beginners is working backwards.


Part 2: Solution Space 1 -- Clarifying Onboarding

What Must Be Conveyed Before First App Use?

Only things the student cannot discover through use:

  1. Their level (Level 2 -- they were placed based on assessment)
  2. Their coach (Ust. Amina -- the human who will review their work)
  3. Font preference (Mushaf vs. standard -- P0 fix, mandatory)
  4. The weekly rhythm (watch lesson, record recitation, receive feedback -- this IS the program)

Everything else can be learned through use: how tabs work, what sessions are, how to navigate, etc.

Approach A: Minimal Setup-Only (Current Spec)

The existing Section 4.8 specifies 5 steps: Welcome > Level > Font > Coach > Semester Overview.

Strengths: Under 2 minutes. Each step delivers identity/context. Font forced (P0). Pre-semester Today screen continues the onboarding naturally.

Weaknesses: Step 5 (semester overview) is abstract bullet points. "Submit your recording for coach feedback" assumes students know what "recording" and "submission" mean. No explanation of session types. Does not address the "$269 and I know nothing" anxiety.

Approach B: 60-Second Video as Core

Replace the abstract Step 5 with a 45-60 second video narrated by a real coach showing actual app screens: "Every week, watch a short lesson, record yourself reciting, and your coach sends you feedback. Plus live sessions for extra practice."

Strengths: Directly implements Lejla's preference. Video is the most effective medium for an audience that won't read. Conveys the weekly rhythm in concrete, human terms. Can be updated without code changes.

Weaknesses: Requires video production. Single-view medium (can't refer back). If phone is muted or in public, student may skip. Loses the personal "You've been placed in Level 2" moment if it replaces Steps 2-4.

Approach C: Progressive Onboarding (No Wizard Beyond Font)

Eliminate the upfront wizard except font selection. Use the pre-semester Today screen as the welcome hub (coach card, level card, countdown, orientation video). Add one-time contextual banners when the student first visits each tab during Week 1.

Strengths: Zero upfront friction. Information appears at the moment of relevance. Pre-semester state already does most of the work. No video production needed.

Weaknesses: No ceremonious level/coach introduction. Contextual cards are easily dismissed and forgotten. Students who don't visit tabs during pre-semester miss context. Does not address the "$269 anxiety."

Approach D: Interactive First-Week Walkthrough

After Steps 1-4, replace Step 5 with an interactive sequence showing actual app screens with spotlight/dimming: "On Saturday your lesson appears here" > "Watch 2-3 short videos" > "Record your recitation" > "Your coach sends feedback" > "Join live sessions." Six taps, ~30 seconds.

Strengths: Student sees real app UI before using it. Follows the weekly rhythm sequence. Concrete, not abstract. Short enough that impatient students complete it.

Weaknesses: Requires building an overlay/spotlight system (non-trivial). Walkthroughs have mixed retention research. Shows Week 1 screens but student encounters pre-semester state first (temporal gap). Six screens is still more than "bare minimum."

Recommended Onboarding: Hybrid A+B with C Elements

Flow:

  1. Welcome -- Student's name, "Let's get you set up"
  2. Your Level -- Personal, 3-second confirmation ("You've been placed in Level 2")
  3. Choose Your Font -- Mandatory, side-by-side comparison
  4. Meet Your Coach -- Coach photo, name, bio ("will review your weekly recordings")
  5. Your First Week (REVISED) -- 45-second video replacing abstract bullet points. Narrated by a real voice, showing actual app screens. End card: "Each week: watch, record, get feedback." Small text link below: "Read the details instead"
  6. Notification Permission
  7. Landing on Today pre-semester state

Plus progressive elements:

Why this hybrid:


Part 3: The Today Screen -- An Element-by-Element Audit

Before exploring simplification solutions, the honest question is: does every element on the Today screen earn its space? An expert designer would audit each zone and ask: "What action does this enable? What question does this answer? Would a student miss this if it weren't here?"

Current Today Screen Elements (Active State)

The Today screen currently has 7 distinct information zones (see mockups/qf-mockup-v2/src/screens/today.tsx):

Zone Content Lines 430-452
1. Week Header "Week 8 of 15" at 58pt Answers "Where am I?"
2. Level Subtitle "Level 2 — Reading with Fluency" Context
3. Countdown "3 days until Week 9 unlocks" Time pressure
4. Progress Ring 53% circular SVG, 56px Weekly completion visual
5. Primary Action Card Gradient card with context-dependent CTA Answers "What should I do?"
6. Status Triptych 3 cards: Lesson (2/3), Submission (Not submitted), Feedback (1 new) Status of 3 weekly tasks
7. Session Cards Up to 3 session cards with time, type, coach, Join Answers "When is my next session?"

Audit: Does Each Element Earn Its Space?

Zone 1: Week Header -- ESSENTIAL Answers "Where am I in the program?" This was a P0-level missing element in the old app. Students were disoriented because they had no sense of position. The 58pt treatment makes it the dominant visual anchor (passes squint test). Keep.

Zone 2: Level Subtitle -- KEEP, BUT QUESTION PLACEMENT "Level 2 — Reading with Fluency" provides context. But does it need to be a separate line on the Today screen? The student's level doesn't change during the semester. After Week 1, you never need to re-confirm your level. This could live solely in the Profile screen after initial onboarding. However, it IS part of orientation ("Where am I?"), so keeping it is defensible. The real question: does "Reading with Fluency" add value or just extra words?

Zone 3: Countdown -- QUESTIONABLE "3 days until Week 9 unlocks" -- what action does this enable? None. The student can't do anything about time passing. It's informational, not actionable. It adds pressure without adding value. The week already changes when it changes. An expert would ask: does this reduce confusion or increase anxiety?

Counter-argument: It sets expectations ("New content comes Saturday"). But this could be conveyed once in onboarding rather than permanently occupying screen real estate.

Zone 4: Progress Ring -- DOES NOT EARN ITS SPACE The progress ring shows 53%. But 53% of what? It's a composite of lesson progress + submission status, but the student doesn't know the formula. Meanwhile, the Status Triptych (Zone 6) shows the SAME information in explicit text: "2 of 3 watched," "Not submitted," "1 new feedback."

The progress ring is:

What apps use progress rings well? Fitness apps (Apple Health, Fitbit) -- where the ring IS the primary interface and there's a clear, single metric (steps, calories, active minutes). In QuranFlow, the ring is a secondary element summarizing data that's already displayed elsewhere. Remove permanently.

Zone 5: Primary Action Card -- ESSENTIAL This answers "What should I do?" with a clear, context-dependent CTA. It's the most important element on the screen. The state machine (lesson not started -> lesson in progress -> ready to submit -> awaiting feedback -> feedback ready -> all done) is excellent. Keep.

Zone 6: Status Triptych -- THE CRITICAL QUESTION

The triptych shows three cards simultaneously: Lesson status, Submission status, Feedback status. This is valuable because:

But the triptych is problematic because:

The triptych is the element most worth redesigning, not hiding. See Solution Spaces below.

Zone 7: Session Cards -- KEEP, BUT LIMIT Session cards answer "When is my next session?" -- a question that was completely unanswerable in the old app (sessions were hidden in Google Calendar). Showing 3 is generous; showing 1-2 with "Full Schedule" link would reduce density without losing the answer. Keep, consider reducing to 2 max.

Audit Verdict

Zone Verdict
Week Header Keep as-is
Level Subtitle Keep, possibly simplify (drop "Reading with Fluency")
Countdown Remove or make very subtle (not a separate line)
Progress Ring Remove permanently
Primary Action Card Keep as-is
Status Triptych Redesign (see solution spaces below)
Session Cards Keep, reduce to 2 max

This audit alone takes the Today screen from 7 zones to 5, and makes 2 of those 5 simpler. That's a permanent improvement, not a temporary band-aid.


Part 4: Solution Spaces for Design Simplification

The following solution spaces go beyond "hide and reveal." They address whether the design itself should change permanently.

Solution Space A: Permanent Design Reduction

Philosophy: If an element doesn't earn its space for a new user, it probably doesn't earn its space for anyone. Remove it permanently.

Specific changes to the Today screen:

  1. Remove the progress ring. The triptych already provides the data. The ring is visual decoration that competes for attention and communicates nothing the triptych doesn't already say.

  2. Fold the countdown into the week header. Instead of a separate line "3 days until Week 9 unlocks," make it a subtle detail under the week number: "Week 8 of 15 · 3 days left." Or remove it entirely -- students don't need a countdown to a calendar date.

  3. Reduce session cards to 2 maximum. The third card is almost always below the fold on smaller phones. Show the next 2 sessions with "Full Schedule" link.

  4. Simplify the triptych labels permanently. Not as a temporary annotation, but as the real labels: "Your Lesson" / "Your Recording" / "Coach Feedback" instead of "Lesson" / "Submission" / "Feedback." If "Your Recording" is clearer than "Submission" for new users, it's also clearer for experienced users. There's no reason to use academic jargon.

Result: The Today screen goes from 7 zones to 5, with clearer labels. This works for ALL students, ALL weeks. No temporal logic, no two versions to test.

Strengths:

Weaknesses:

Expert perspective: This is what most experienced designers would do first. Before adding onboarding or training wheels, reduce the surface area of what needs to be learned. The best onboarding is an app that doesn't need one.

Solution Space B: Better Empty States (Self-Explaining UI)

Philosophy: Instead of hiding elements or adding temporary annotations, design empty states so well that they teach the user what each element IS. The empty state becomes the explanation.

How this works on the Today screen:

When the Feedback status card shows "No new feedback," that's meaningless to someone who doesn't know what feedback is. But what if it said:

Coach Feedback After you submit a recording, Coach Amina will listen and send audio feedback.

That single empty state IS the onboarding for the feedback concept. The student learns:

When the Submission status card shows "Not submitted," what if it said:

Your Recording Record yourself reciting this week's passage. Your coach will review it.

The student learns:

When the Lesson card shows "0 of 2 watched," what if it said:

Your Lesson 2 short videos this week (8 min total). Start anytime.

The student learns:

Strengths:

Weaknesses:

Expert perspective: This is the approach Apple champions in the HIG. The system teaches through its states, not through overlays or tutorials. It requires more thought per element but creates a design that feels effortless.

Solution Space C: Consolidation -- Fewer, Larger Zones

Philosophy: The problem isn't that individual elements are bad; it's that there are too many of them competing for attention. Merge related elements into fewer, larger zones that feel like ONE thing instead of SEVEN things.

How this works on the Today screen:

Before (current design):

[Week Header] ............ [Progress Ring]
[Level Subtitle]
[Countdown]

[Primary Action Card ....................]

[Lesson Card] [Submission Card] [Feedback Card]

[Session 1 ................................]
[Session 2 ................................]
[Session 3 ................................]

That's 7+ distinct visual zones.

After (consolidated):

[Week Header with level inline]
  "Week 8 of 15 · Level 2"

[Action + Status Hero Card .............]
  "Continue Your Lesson"
  "Idgham with Ghunnah · Video 2 of 3"
  ─────────────────────────────────
  Lesson: 2/3 · Recording: ○ · Feedback: 1 new

[Next Session ...........................]
  "Today at 6:00 AM EST · QRC"
  ─ Full Schedule →

That's 3 zones. The same information, but the status triptych is compressed into a single text row inside the action card, and sessions are reduced to the next one.

The key insight: The Apple Music "Now Playing" screen has album art, song title, artist name, playback controls, scrubber, volume, AirPlay, lyrics button, queue button, and share button. But it feels like ONE thing -- a now-playing card. QuranFlow's Today screen could feel like ONE thing -- a "this week" card -- if the status information is integrated into the primary action card rather than being a separate triptych.

Strengths:

Weaknesses:

Expert perspective: Consolidation is the standard approach when a screen feels busy. Instead of removing data, you reduce the visual weight by grouping related information. Apple's Weather app redesigned from many separate cards to a flowing layout -- same data, much less visual noise.

Solution Space D: "What's Next" Design -- One Thing at a Time

Philosophy: The Today screen doesn't need to be a dashboard. What if it just answered ONE question: "What should I do next?" -- and that's it?

This is how apps like Headspace, Calm, and Duolingo work. You open the app, and there's ONE prominent action. Not a status overview. Not a triptych. Just: "Today's lesson is ready."

How this works:

Week 8 of 15

┌─────────────────────────────┐
│  Watch Your Lesson           │
│  Idgham with Ghunnah         │
│  2 short videos · 8 min      │
│                               │
│  [▶ Start Lesson]             │
└─────────────────────────────┘

Live now: Sisters' QRC
6:00 AM EST · [Join]

That's it. Two elements. The student sees their next step and today's session (if any). After they watch their lesson, the card changes to "Record Your Recitation." After they submit, it changes to "You're done this week! Coach Amina will review your recording."

Where does status information live? In the Learn tab. The Learn tab already has the full week view with lesson progress, submission section, and feedback section. The Today screen doesn't need to duplicate that information -- it just needs to point the student to the next step.

Strengths:

Weaknesses:

Expert perspective: This is the most opinionated approach. It's what Jony Ive would do -- remove until there's nothing left to remove. It works brilliantly for apps with a single daily action (meditate, exercise, study one lesson). QuranFlow is slightly more complex -- there are multiple weekly tasks (lesson, submission, live sessions). Whether "one thing at a time" works depends on whether students need to see the full picture or just the next step.

Solution Space E: Contextual Density -- The Same Screen, Different Depths

Philosophy: Don't change what's on the screen -- change how much of it you see at first glance. Use established iOS patterns (expandable sections, collapsed by default) to let the student choose their depth.

How this works:

The Today screen shows the same elements, but the status triptych and sessions are collapsed by default into compact headers that expand on tap:

Week 8 of 15 · Level 2

[Continue Your Lesson ..................]
  Idgham with Ghunnah
  [▶ Continue Lesson]

This Week   2/3 · ○ · 1 new          ⌄
  (tap to expand into triptych cards)

Today's Sessions   3 sessions          ⌄
  (tap to expand into session cards)

When collapsed, "This Week" is a single row: "2/3 · ○ · 1 new" with a disclosure chevron. Tap to see the full triptych cards. When collapsed, "Today's Sessions" is a single row: "3 sessions" with a chevron. Tap to see the full card list.

The student who wants a quick glance sees 3 things (week, action, summary). The student who wants details taps to expand.

Strengths:

Weaknesses:

Expert perspective: This is the "have your cake and eat it too" approach. It sounds ideal in theory, but in practice, collapsed sections suffer from discoverability problems. If students don't realize they can expand "This Week," they miss the triptych entirely. It works best when the collapsed state is self-sufficient (you don't NEED to expand to use the app) and the expanded state is a bonus.


Part 5: Synthesis -- What Would an Expert Designer Actually Do?

An expert design consultant looking at the QuranFlow Today screen would likely recommend a combination of Solution Spaces A and B, with elements of C:

Step 1: Remove what doesn't earn its space (Space A)

Step 2: Fix the labels (Space A)

Step 3: Design self-explaining empty states (Space B)

Step 4: Consider triptych consolidation (Space C)

This is the most impactful but most aggressive change. Two options:

Option 1 (conservative): Keep the 3-card triptych but with better labels and empty states. This is the minimum change.

Option 2 (aggressive): Compress the triptych into a single compact status row inside or below the primary action card. "Lesson: 2/3 · Recording: ○ · Feedback: 1 new" -- one line instead of three cards. This dramatically reduces visual zones (from 5 to 3) but loses the tap-target shortcuts.

What this gives you

After Steps 1-3 (the conservative path), the Today screen has:

Week 8 of 15 · Level 2               [bell icon]

[Primary Action Card]
  Continue Your Lesson
  Idgham with Ghunnah · Video 2 of 3
  [▶ Continue Lesson]

This Week
  [Your Lesson: 2/3] [Your Recording: ○] [Coach Feedback: 1 new]

Today's Live Sessions               Full Schedule →
  [Session 1 card]
  [Session 2 card]

5 zones (down from 7). Clearer labels. No progress ring competing for attention. Self-explaining empty states. Works identically for Week 1 and Week 15.


Part 6: Open Questions

Design Questions (for team discussion)

  1. Should the progress ring be removed permanently? The argument is strong (redundant, ambiguous, competes for attention). Is there a case for keeping it that hasn't been considered?

  2. Should the status triptych remain as 3 cards or consolidate into a single row? The 3-card version has clear tap targets but creates 3 attention zones. The single row reduces visual weight but loses navigation shortcuts. Which matters more for this audience?

  3. Should "Submission" be renamed to "Your Recording" permanently? Or is "Submission" a term students need to learn because the program uses it in communications?

  4. Should the countdown timer be removed? It doesn't enable action, but it does set expectations for content unlocking. Is "expectation setting" worth a line of screen real estate?

  5. How simplified should the Today screen be? The spectrum runs from Solution Space A (remove progress ring, fix labels -- conservative) to Solution Space D (one action card, nothing else -- radical). Where on this spectrum does the team want to land?

Questions for User Testing

  1. Does "Week 1 of 15" make immediate sense without explanation?
  2. Do students understand "Your Recording" better than "Submission"?
  3. With the progress ring removed, do students feel they're missing information?
  4. Can students find their feedback if it's not on the Today screen triptych? (i.e., if they have to go to the Learn tab)
  5. Does the "one thing at a time" (Space D) approach feel too sparse, or do students prefer it?

Verification

This is a research/exploration document. No code changes. Verification: