Sakīna v6 — Simplification Audit
A consistent loop applied to every screen. Source: the WWDC25 App Redesign Field Guide your team is using (uploads/wwdc25-field-guide.html).
The Loop
For each screen, in order:
STRUCTURE — Cover the bottom half of the screen. Within 2 seconds, can the user answer:
- Where am I? (date / level / screen title)
- What can I do? (primary action visible)
- Where can I go? (tab bar present, back chevron clear)
If any answer takes longer than 2 seconds, the screen needs restructuring before pruning.
SQUINT — Defocus the eyes. Exactly one visual anchor must survive. If two elements compete for anchor status, demote one (lighter weight, smaller, calmer color).
PRUNE — Walk top to bottom. For each element, ask:
- Does this carry information the user hasn't already learned on this screen?
- Does this label something the adjacent visual already shows?
- Does this section header have ≥ 2 items below it, OR is its group non-obvious?
- Is this CTA the primary, the secondary, or noise?
CONSISTENCY — Once the screen is pruned, verify it matches the system used on every other screen:
- Same single-week-reference style (once per screen, same slot)
- Same eyebrow style (UPPERCASE MONO · 0.16em letter-spacing ·
t.textMutedort.accent) - Same primary CTA shape (plum pill or warm-bright pill, 38–50px tall)
- Same nav:
SakNavRoot(tabs) orSakNavDrill(drilldowns)
The 8 Binding Rules
| # | Rule | Example violation |
|---|---|---|
| R0 | Progressive disclosure first. Show only what answers "what's next?" Push details behind tap targets, chevrons, "Show N more" buttons, or expandable cards. Status, duration, counts, body previews — all candidates to hide until needed. | Today: showing the full verse Arabic + translation when the user hasn't entered the lesson yet. Coach screen: every feedback note's full body expanded; should be one-line row + chevron. |
| R1 | One week reference per screen. Strip + label appears once, never twice. | Today hero: "Week 8 of 15" eyebrow + strip + "Week 8 · seven to go" footer |
| R2 | One primary action per screen. Hero = primary; secondary actions go below, quieter. | Today: two equal anchors (lesson + recording) competing for primacy |
| R3 | No decorative pills. Pills must carry unique info, not vibes. | "On track" pill on Today; "EST" pill on Sessions trailing |
| R4 | No eyebrow + title when the title is self-explanatory. Drop the eyebrow. | "Your coach" eyebrow + "Ustadha Amina" title — name is enough |
| R5 | No text label restating a progress visual. The strip already says "Week 8 / 15". | Submissions card: SakStrip + "Week 8 of 15 · 7 weeks remaining" caption |
| R6 | No section header for a single-item list. | "Three faces" header for 3 font cards (already self-counting); "Two anchors" for a 2-item card |
| R7 | No instructional subtitle under self-evident UI. | "Tap a row to edit" under a list of tappable rows |
| R8 | At most one editorial / brand line per screen. Poetic copy is precious; budget = one. | Sessions: "Four sessions, one deadline." AND a verse epigraph at the bottom |
Per-screen audit log
Status legend: ✓ done · ⚠ partial · ☐ todo
Core 4 tabs
| Screen | Anchor (squint) | Cuts applied | Status |
|---|---|---|---|
| Today | Ink hero card | R1 (dropped duplicate week label), R2 (one anchor not two), R3 ("On track" pill), R7 (subtitle), R8 | ✓ |
| Learn | Paper "current" card | R4 (Spring 2026 · Level II eyebrow), R5 (Lesson 8 · Part 2 · Week 8 line), R5 (§8.3 · 12 min) | ✓ |
| Sessions | Day title | R3 (EST pill), R4 (Week 8 eyebrow), R8 ("Four sessions, one deadline." headline) | ✓ |
| Profile | Frontispiece card | R4 (Level II eyebrow), R3 (gold ribbon + folio mark), R4 ("Ustadha" eyebrow inside coach card) | ✓ |
Lesson + Recording loop
| Screen | Anchor | Cuts applied | Status |
|---|---|---|---|
| Lesson | Lesson title block | R4 (Week 8 · §8.3 eyebrow), R5 ("Up next · video N of M" → "Up next") | ✓ |
| Recording — Ready | Mic button | R4 (Week 8 · Level II eyebrow), R7 ("Take your time" subtitle) | ✓ |
| Recording — Live | Waveform | R4 (header eyebrow) | ✓ |
| Recording — Review | Waveform card | R4 (header eyebrow), R7 ("1 attempt remains after this" trailing line) | ✓ |
| Recording — Submitted | Check medallion | R4 (header eyebrow), R7 ("We'll ping you when she replies" footer) | ✓ |
| Recording — No attempts | Crossed-out mic | R4 (header eyebrow) | ✓ |
Sub-pages
| Screen | Anchor | Cuts applied | Status |
|---|---|---|---|
| Coach detail | Portrait hero | R4 ("Your coach" eyebrow + Ustadha title → just "Ust. Amina") | ✓ |
| Submissions archive | Stat hero | R4 ("Learning history" eyebrow), R5 ("Week 8 of 15 · 7 weeks remaining") | ✓ |
| Personal details | Nameplate | R3 (hand-drawn SVG underline), R7 ("Tap a row to edit" footer) | ✓ |
| Qur'an font picker | Three font cards | R7 (intro paragraph), R6 ("Three faces" section header) | ✓ |
| Notifications sheet | New · 2 divider | R8 ("Two new notes" + "Quiet messages..." editorial block) | ✓ |
| Notification settings | Master push card | R8 ("Receiving — gently, when something matters." subtitle) | ✓ |
| Subscription | Passport card | (already lean) — dropped duplicate Stripe portal link at bottom | ✓ |
| Manage subscription | Plan card | R3 ("ALL PAYMENTS PROCESSED SECURELY · STRIPE" footer) | ✓ |
Live class + Video player + Onboarding
| Screen | Anchor | Cuts applied | Status |
|---|---|---|---|
| Live class | Speaking coach card | R5 ("Reading · Al-Mulk 67:3" sub line — verse card below already shows it) | ✓ |
| Video player | Video stage | R5 ("Three of three · chapter complete" sub on completion banner) | ⚠ pending consistency pass |
| Onboarding shell | (per-step content) | R5 ("Step N of 6" eyebrow — dots already encode it) | ✓ |
| Onb 1–6 | (per-step content) | (audit each — most are already lean) | ☐ |
States row
| Screen | Status |
|---|---|
| Today — state: rest day | ☐ |
| Profile — first week | ☐ |
| Submissions — empty archive | ☐ |
| Notifications — all caught up | ☐ |
| Recording — mic permission | ☐ |
Shoot-out row
Archived (REVIEW.md B1, Jul 2026) — Manuscript (SakToday) is canonical;
sak-shootout.jsx moved to _archive/, its <script> tag and the section 07
DCSection removed from the canvas. Table kept for history.
| Screen | Status |
|---|---|
| A · Manuscript | ✓ (uses canonical SakToday — auto-inherits) |
| B · Liquid glass | ☐ (archived, not resolved) |
| C · Field guide | ☐ (archived, not resolved) |
| D · Editorial | ☐ (archived, not resolved) |
F-screens (F1–F5, Jul 2026)
Screens added from the coach-feedback synthesis; anchors + status per REVIEW.md's adjudicated resolutions.
| Screen | Anchor (squint) | Status |
|---|---|---|
| Submission — feedback ready | Ink coach-notes card | ✓ |
| Submission — in review · revoke window | Dashed revoke-window card | ✓ |
| Practice the corrections | Accent breathing mic | ✓ |
| Practice — review take | Waveform playback card | ✓ |
| Week at a glance | Day-grouped session cards | ✓ |
| Announcements | Pinned board row | ✓ |
| Messages — Ust. Amina | Thread bubbles | ✓ |
| Report an issue — sheet | Auto-attached-context card | ✓ |
| Today — state: pre-semester | Ink countdown card | ✓ |
| Book your one-to-one | Slot grid | ✓ |
| Appointment — recurring weekly | Title block | ✓ |
| Availability — asked during Year-2 booking | Availability grid | ✓ |
Cross-tab consistency pass (May 2026)
Goal: the four root tabs should read like one designer made them. Differences that didn't earn their keep:
| Locus | Was | Now |
|---|---|---|
| Header eyebrow (SakNavRoot) | 0.1em, weight 600 — inconsistent with body eyebrows | 0.16em, weight 700 — matches every other eyebrow on the screen |
| Today header | eyebrow + greeting only | eyebrow + greeting (kept — Today is the only tab that greets) |
| Learn header | bare "Syllabus" — no orientation | "Spring 2026 · Level II" eyebrow + "Syllabus" |
| Sessions header | bare "Sessions" | "Tue · 17 Apr" eyebrow + "Sessions" — matches Today's date eyebrow |
| Profile header | bare "Profile" — frontispiece carries identity | unchanged (the page is self-orienting) |
| Today · Sessions list times | 50w centered gutter with vertical hairline divider | 44w left-aligned gutter, no divider — closer to the left edge |
| Today · Sessions row chip | inline plain text "CLASS" | tinted chip with same typeColors palette as Sessions tab |
| Today · "Sessions today" hdr | inline span | SakSectionTitle — same as Profile's section rhythm |
| Learn · TOC layout | hero "Current lesson" paper card + part chips + list rows | restored to the original structure (hero + flat part rows + |
| quiet lesson list + "By June 22, you'll…" closer). Only the type | ||
| normalizations carry over. Heavier chip-cards and LSN gutter from | ||
| the first pass were reverted — they over-fit Sessions' anatomy. |
Disclosure states added
Sessions → Recordings. Right side of the segmented control. Same shell (header, segmented, day strip) as Upcoming. Grouped by week; each row has a thumb with a partial-watched bar, type chip, title, date + duration.
Today · Sisters' QRC row →
SakSessionDetailQRC. Full session page with what-we-cover, this-week's-reading āyah, cohort row, Join Zoom CTA.Today · Fluency drills row →
SakSessionDetail. Same frame, different content: cohort, "Bring with you" materials, what-we-cover, Open Zoom CTA.
Both disclosures use the canonical SessionDetailFrame — title block, meta
row (Time / Duration / Where), coach card, sections, primary + secondary
CTAs — so adding a third session-type later is a content change, not a
design pass.
Manuscript-Editorial blend. Content-first typographic hierarchy on paper, with a single dark "feature card" per screen carrying the brand moment.
- Type-led: large Newsreader display headlines as the primary anchor, sans-serif body
- Reduced chrome: no decorative ribbons, no "On track" pills, no folio marks unless they earn their line
- Gold thread is precious: one flourish or one gold accent per screen, never more
- Ink is the brand moment: reserved for the singular feature card per screen (e.g. Today's lesson, Profile's coach card, Live class hero) — not used as the full hero on every screen
- Mono: eyebrows, dates, technical labels only — never body
- Verse closer: Arabic + citation only on Today; English translation only on lesson-detail screens
- Editorial structure: masthead → feature → rail (when applicable)
Consistency conventions (locked)
- Eyebrow:
fontFamily: sakMono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: t.textMuted(ort.accentfor "current" / "now") - Section title: Same eyebrow style, indented
paddingInline: 20, only used when ≥ 2 items below - Primary CTA pill: height 50–54,
t.accentbg /#ffffg, plum shadow0 6–8px 18–20px rgba(101,2,118,0.28) - Secondary CTA pill: height 40–46, transparent bg,
1px solid ${t.ruleStrong}border,t.textStrongtext - Warm CTA (e.g. completion, onboarding continue):
t.warmBrightbg /t.warmInkfg, warm shadow - Nav title size:
fontSize: 19, fontWeight: 700, letterSpacing: -0.3px(SakNavRoot) /16(SakNavDrill, centered) - Hero h1:
fontFamily: sakDisplay (Newsreader), fontSize: 26–36, lineHeight: 1.08–1.15, letterSpacing: -0.02em, fontWeight: 400 - Strip: always full 15 weeks;
SakStrip total={15} done={7} current - Verse closer: Arabic + citation only; English translation only on lesson-detail screens
Typography quiet pass (Jul 2026)
User feedback: too many fonts/colors/sizes; Learn read as messy. Locked:
- Mono is for numbers only — timestamps, durations, citations ("AL-MULK · 67:1"). Every uppercase LABEL (eyebrows, section titles, chips, pills, tab labels) is now sans,
letterSpacing 0.08em,fontWeight 600. 86 label sites converted. - Size scale locked — 10 / 11 / 12 (mono numbers) / 13 / 15 / 16–17 (values) / 19 (nav) / 22–34 (display). Half-step drift (9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5) collapsed onto the scale — 114 sites.
- Learn pruned — "PART N" eyebrow dropped (number chip already says it), CURRENT/NEXT UP sublabels dropped (row state already encodes it), "Week 8 of 15" caption dropped (strip encodes it, R5), "By June 22" eyebrow demoted accent→muted (one accent eyebrow per screen).
Feedback-loop screens (F1–F5, Jul 2026)
From the coach-feedback synthesis ("Feedback Findings.html"):
- SakPassageCard (sak-feedback.jsx) is THE passage component — 1→N āyāt, scrolls past ~5 lines, accepts word-anchored marks
{ n, tone }.SakVerseCarddelegates to it. - FbWave / FbPlayBtn are THE audio primitives — used by feedback ink card, recording review, voice bubbles.
- Loop states:
in review → reviewed → heard → practiced(SubStatusPill, sak-extras.jsx). Submitted screen routes to the submission detail (revoke window), not a dead end. - New screens: SakSubmissionFeedback / SakSubmissionPending / SakRecPractice / SakWeekAtGlance / SakTodayCountdown / SakAnnouncements / SakMessageThread / SakReportIssue.
- SakRecPracticeReview added (Jul 2026, REVIEW.md C3) — the practice loop's missing next state.
July 2026 — REVIEW.md resolutions applied
Four parallel reviews audited the canvas after the F1–F5 screens were added alongside the older 00–07 sections. Adjudicated resolutions, applied in full:
- A1 — Removed the duplicate revoke countdown from
SakRecSubmitted;SakSubmissionPendingalone owns the revoke window. - A2 — Archive week 7 →
reviewed, added a week 8reviewrow;SubStatusPillnow visually distinguishes in-review (muted) from feedback-ready (warm/gold). - A3 — Sessions tab and
SakTodaynow show the same Tuesday facts asSakWeekAtGlance; Today's deadline line reads "Due Sunday · 11:59 PM". - A4 — Single coach: Ust. Amina, everywhere except
SakCoachStudent's intentional shared-note example. - A5 — Booking moved to 9:20 AM Toronto (EDT), matching the coach's existing 4:20 PM Cairo (EEST) slot.
- B1 —
sak-shootout.jsxarchived; canvas section 07 removed;SakTodayRest/SakTodayCountdownrelabeled as named states of Today. - B2 — Sessions ↔ Week at a glance routing annotated on both artboards (calendar icon).
- B3 — Per-item EST/EDT suffixes removed app-wide; Sessions tab gained the F2-style local-time banner; Profile's timezone/cohort fields normalized to Toronto (EDT).
- B4 — Announcements notification toggle now defaults on; board and notif copy read identically; routing annotated on both artboards.
- B5 — CTA verb standardized to "Message" (SakCoach, Profile coach panel); both route to
SakMessageThread. - C1 — Notif sheet gained a pinned "Announcements · 1 pinned" row; Profile's "Contact support" renamed "Report an issue".
- C2 — Sessions tab gained a 9:20 AM "One-to-one" row (Year 2 only), with a gating annotation on the artboard.
- C3 — Added
SakRecPracticeReview— Play / Re-record / "Attach to feedback", no attempts dots. - C4 —
SakSessionDetail/SakSessionDetailQRCannotated in main.jsx as notification-tap deep-link destinations, not orphans. - C5 —
SakOnbAvailabilityconverted toSakNavDrillheader, dots removed, relabeled "asked during Year-2 booking". - D1 — Coach schedule vocabulary locked to "Recurring" / "This week only".
- D2 —
SakRecReview's bespoke play circle replaced withFbPlayBtn.