← QuranFlow — the redesign

QuranFlow — Apple Ecosystem Widget Exploration

Date: July 17, 2026 Status: Ideation — grounded concepts for review, not a committed spec Inputs: QuranFlow handoff docs (PRODUCT-SPEC, DATA-MODEL, DESIGN-SYSTEM, FEEDBACK-SYNTHESIS), faith-essentials-strategy widget decisions (FE App Spec v1/v1.1, Daily Practice Track 3), Apple developer documentation and WWDC24/25 sessions, competitive scan (Duolingo, Muslim Pro, Pillars, Streaks, Calm, Apple Fitness).


1. Why widgets, specifically for QuranFlow

The audit's top findings are all failures of reach between app opens:

  1. Disorientation — students didn't know what week they were on or what to do today. "8 out of 15" never read as "Week 8."
  2. Missed live sessions — the schedule was five clicks deep; students missed sessions they intended to attend.
  3. Unnoticed feedback — coach feedback arrived and students never saw it; the notification carried no context.

A widget is the only surface that answers "what week is it, what's due, when is my session" before the student opens the app — which is exactly where all three failures happen. The redesign's organizing principle (Weekly Rhythm) is also, conveniently, the ideal shape for a glanceable surface: one number, one strip, one next action.

Faith Essentials names this whole surface set the ambient layer — see its design board at https://fe-reset-mockup.pages.dev/ambient (Ambient Layer v2, July 12). We adopt the same term and the same board format for the companion deliverable: QuranFlow-Ambient-Board-v1-2026-07-17.html in this folder — but where FE's board is one day lived without opening the app, QuranFlow's is one week, because the week is this program's unit of rhythm.

The competitive scan found that no cohort-learning app (Khan Academy, Coursera) ships a meaningful widget. The category default among Quran apps is a generic "daily verse + streak counter." A semester-aware, curriculum-tied widget set is genuinely differentiated — there is no pattern to copy here, only to invent.

2. Decisions inherited from Faith Essentials strategy

FE already litigated several of these questions (App Spec v1/v1.1, July 2026). We inherit rather than re-argue:

FE decision Carry over to QuranFlow
The widget delivers a gift, never a counter/hook. Day-counts and streaks on widgets explicitly cut — "the count is a pull-back hook, the du'a is the gift." Yes, verbatim. Convenient: QuranFlow's data model has no streak entity and none is planned.
WidgetKit dynamic-date text over Live Activity for countdowns — ticks live at zero refresh budget and zero server; Live Activities are 8h-capped and need push infra. Yes — this is the v1 answer for session countdowns.
One systemSmall widget = free presence in StandBy, CarPlay widget stack, and (iOS 26) visionOS. No extra entitlements. Yes — build the small widget first; three surfaces for the price of one.
Notification action buttons that log without opening the app. Reusable pattern; lower priority for QuranFlow (our loop centers on recording, which needs the app open).
AlarmKit (iOS 26) rings through Sleep Focus — for Fajr-adjacent reminders, opt-in only, never default. Park it. Relevant only if QuranFlow adds a dawn-practice reminder; noted for the value-add phase.
Local-first notifications; push reserved for real events. QuranFlow already has server-side notification types (feedback/session/deadline/announcement), so unlike FE we can use push-updated widgets cheaply where the event is real.
Apple Watch app deferred; complications/Smart Stack first. Yes — accessory-family widgets double as watch complications with near-zero extra work.

3. Widget design rules (derived, binding on every concept below)

These fall out of the mockup's 8 binding rules (AUDIT.md), the copy canon, and the research:


4. Concepts, by angle

Angle 1 — Orientation: "Where am I?" 【the #1 audit finding】

A. The Week widgetsystemSmall (+ StandBy + CarPlay + visionOS free)

The SakStrip, made ambient. Large serif numeral (Newsreader/Fraunces) — the same hero-numeral treatment as the Today screen — over the 15-segment strip, with one status line.

┌──────────────────┐
│ WEEK             │   eyebrow: sans caps 0.08em
│ 8                │   serif display numeral
│ ▮▮▮▮▮▮▮▯░░░░░░░  │   SakStrip: done · current(gold) · remaining
│ 2 videos left    │   one line, the next thing only (R0)
└──────────────────┘

Lock Screen variantaccessoryRectangular: "Week 8 of 15" + status line (strip replaced by text per W7). accessoryInline: "Week 8 · Due Sunday".

Angle 2 — The weekly loop: "What's next?"

B. This Week widgetsystemMedium, interactive

The Watch → Record → Feedback loop as three discrete segments (W2), plus one App Intent button for the next step (R2: one primary action).

┌────────────────────────────────────────┐
│ WEEK 8              Due Sunday 11:59 PM│
│ ● Watch    2 of 3 watched              │
│ ● Record   Attempt 1 of 2 available    │
│ ● Feedback —                           │
│            [ Continue lesson ▸ ]       │
└────────────────────────────────────────┘

Angle 3 — The feedback moment: the relationship with the coach

C. "Feedback ready" — an event-driven state, not a separate widget

The strongest emotional beat in the whole program is your coach replied to your recitation. When Feedback.reviewed_at lands, widgets A and B flip state: the status line goes gold ("Feedback ready" — locked vocabulary, gold is the one-flourish color).

Angle 4 — Live sessions: the bounded events

D1. Next-session countdownaccessoryRectangular (Lock Screen) + row in widget B — v1

"Qari circle · Today 7:00 PM" with WidgetKit dynamic-date text counting down — ticks live with zero refresh budget and zero server (the FE-resolved pattern). Within 15 minutes of start: "Starting soon · Join" (matches the app's soon state and the 15-minute student reminder timing). Times viewer-local per W4.

D2. Session Live Activity + Dynamic Islandv2

A true bounded event, so a Live Activity is legitimate here (W5): starts at T−15 min, compact presentation shows the countdown, flips to "Live now · Join" during the session, ends when the session ends. Well inside the 8-hour cap. Push updates via ActivityKit (liveactivity push type). iOS 26 extends this to CarPlay and macOS for free.

E. Submission Live Activity — the revoke window (novel; no app in the scan does this)

When a student submits a recording, a short Live Activity covers the genuinely live part of the submission lifecycle:

  1. Uploading — progress.
  2. Revoke window — "Submitted · Revoke window ends in 4:32" (dynamic-date countdown against revoke_expires_at). No inline revoke button — accidental taps on the Lock Screen would be destructive; it deep-links to the revoke screen instead.
  3. Window closes → activity ends with "In review." The 48-hour coach SLA is not a Live Activity (exceeds the 12-hour cap and isn't "live") — that's widget territory (concept C).

This makes the submission grace period — a designed-in safety feature students would otherwise never notice — visible exactly when it matters.

Angle 5 — The gift: spiritual-ambient presence

F. The week's verseaccessoryRectangular / accessoryInline / systemSmall (second small widget)

The FE flagship pattern, made curriculum-specific: this week's assigned ayah — Arabic + citation only, no translation (locked rule), citation in mono ("AL-MULK · 67:1"). No counter, no CTA, no state. Reading it on the Lock Screen and never opening the app is a success — the FE north star, inherited verbatim.

Angle 6 — Zero-UI entry points: App Intents everywhere

G. Intents, controls, Siri, Spotlight

One App Intents investment fans out to five surfaces (write once — WWDC25 direction):

Low design cost, high reach; these are plumbing for the same three actions widget B computes.

Angle 7 — The wrist

H. Watch complications + Smart Stack — not a watch app

The accessory-family widgets (A-lock, D1, F) are watch complications post-ClockKit — one codebase. Add Smart Stack relevance hints so the system surfaces the right one unprompted: session widget in the pre-session window, week widget at the student's habitual practice time. A full watch app is deferred (FE precedent; the HIG itself says complications first). The watch face is seen ~60–80×/day — the highest-frequency surface in the ecosystem, and QuranFlow gets it nearly free.

Angle 8 — The coach

I. Coach queue widgetsystemSmall/accessoryCircular, role-gated

The Coach section's stat hero, relocated: "6 waiting · oldest 39h" as a gauge against the 48-hour SLA. accessoryCircular is literally a gauge template. One intent: "Start reviewing" → Queue tab (oldest-first, the existing default).


5. Considered and set aside

Idea Why not
Streak widget / day counter No streak entity exists or is planned; FE's most emphatic rule bans counters-as-hooks; loss-aversion mechanics are the scan's top anti-pattern for this context.
Composite "Week 72% complete" widget Hides partial progress; violates W2. Discrete segments instead.
Live Activity as daily practice reminder Not a bounded live event — the canonical LA misuse (W5). The deadline notification type + widget states already cover it.
Mascot / emotional-state character Duolingo-native, tonally wrong here (W8).
Multi-module "info hub" widget (Muslim Pro pattern) Tempting, but violates W1/R0 — QuranFlow's answer to "many modules" is the computed next action (widget B), not a dashboard.
Coach notes text on Lock Screen W6. "Feedback ready" only.
48-hour "waiting for coach" countdown Exceeds Live Activity caps, and a ticking timer against the coach manufactures urgency the copy canon bans. Status word "In review" suffices.

6. Recommendation — build order

P1 — ship with the app (all local-timeline, no new infra):

  1. A — Week widget (small + accessory families) → StandBy, CarPlay, visionOS, watch complications free
  2. B — This Week widget (medium, interactive)
  3. D1 — Next-session countdown (Lock Screen, dynamic-date)
  4. F — Week's verse (near-zero cost, the differentiator + the gift)
  5. C — Feedback-ready state flip (piggybacks on existing feedback push; the one server touch worth doing in P1)

P2 — fast follows: 6. E — Submission/revoke Live Activity 7. G — App Intents fan-out (controls, Action button, Siri, Spotlight) 8. I — Coach queue widget (needs the push-updated endpoint)

P3 — later, evidence-gated: 9. D2 — Session Live Activity + Dynamic Island (ActivityKit push infra) 10. Smart Stack relevance tuning; macOS/iPadOS placement QA; Liquid Glass visual QA pass (widgets inherit the glass material automatically in iOS 26 — needs review against light/dark/tinted/clear backgrounds, one more state matrix for the design system).

Success framing (inherited from FE): the widget set is working if students arrive already oriented — session attendance and feedback-heard rates rise while "what week is it?" support questions disappear. For widget F specifically, being read and never tapped is success.

7. Sources