Design Review — Exploration B

QF Design B - Design Review & Capability Audit

Date: February 25, 2026 Version: 1.0 Reviewer: Claude (automated analysis) Purpose: Evaluate Design B mockup against User Capability Map, Architecture Proposals, and WWDC25 design principles

Reference Documents

Executive Summary

Overall Alignment with Proposal A: ~92%

Design B is a significant step forward from Exploration A. It faithfully implements Proposal A's "Weekly Rhythm" architecture with the correct 5-tab structure (Today, Learn, Schedule, Progress, More), nails the temporal orientation problem with a prominent "Week 8 of 15" hero block, and introduces a cohesive visual identity that breaks away from generic app conventions. The Today page now answers all three WWDC25 questions. The primary remaining gaps are detail screens (recording interface, feedback detail, onboarding) and a few missing interactive states.

Design B vs. Design A at a Glance

Technology & Craft Assessment

Tech Stack

Design System Quality

The mockup establishes a mature, consistent design system:

Anti-Pattern Compliance

Screen-by-Screen Assessment

Today Page (today.html)

Alignment with Proposal A: 95%

What's Implemented

What's Missing

WWDC25 "3 Questions" Test

Learn Page (learn.html)

Alignment with Proposal A: 95%

What's Implemented

What's Missing

Key Achievement

The Learn page implements Proposal A's core architectural innovation: unifying Lesson + Submission + Feedback per week. This directly solves the original audit's split-location problem (Capability Map Task 3C.2) where feedback was separated from the submission it related to.

Schedule Page (schedule.html)

Alignment with Proposal A: 98%

What's Implemented

What's Missing

The Schedule page is the strongest screen in Design B, matching Proposal A almost exactly.

Progress Page (progress.html)

Alignment with Proposal A: 90%

This page is entirely new compared to Design A, which had no Progress tab at all.

What's Implemented

What's Missing

Key Achievement

The Progress page directly addresses three Capability Map gaps:

• Task 3B.6 (View submission history) - Timeline shows all submissions
• Task 3C.4 (Access feedback history/archives) - Chronological, no tedious filters
• Task 3F.1 (See overall progress) - Clear "Week 8 of 15" + stats

More Page (more.html)

Alignment with Proposal A: 95%

What's Implemented

What's Missing

P0 Critical Issues Status

From the original usability audit, 7 P0 issues were identified:

Summary: 7 of 7 P0 issues addressed in design (video needs player detail screen)

Proposal A Tab Structure Alignment

Design B achieves 5/5 tab alignment. Design A only had 3/5.

[Core] Task Coverage from Capability Map

Section 2: Pre-Semester Phase

Pre-Semester Coverage: 3/8 (38%) - up from 12% in Design A

Section 3: Weekly Learning Cycle

Section 3E: Recordings

Section 3F: Progress Tracking

Section 6: Cross-Cutting Capabilities

Implementation Checklist

Section 2: Pre-Semester Phase

• 2A.1 Sign up for program (external - out of scope)
• 2A.2 Complete initial assessment
• 2A.3 Receive level placement
• 2A.4 Meet assigned Quran Coach (More -> My Quran Coach with bio + message)
• 2B.1 Understand program structure (orientation)
• 2B.2 Know when semester starts
• 2B.3 Understand my weekly schedule (Schedule tab)
• 2B.4 Explore available resources (More -> Resources)

Pre-Semester Coverage: 3/8 (38%)

Section 3: Weekly Learning Cycle

3A: Lessons

• 3A.1 Know which week I'm on ("Week 8 of 15" hero block)
• 3A.2 Access this week's lesson (Today + Learn pages)
• [~] 3A.3 Watch instruction videos (video list UI exists, no player)
• 3A.4 Track progress within lesson (multi-video) (per-video checkmarks)
• 3A.5 Mark lesson complete (implicit via checkmarks)
• 3A.6 Access previous weeks' lessons (collapsed past weeks in Learn)
• 3A.7 Access previous levels' lessons ("Past Levels" segment present)

3B: Submissions

• 3B.1 Know what to submit (submission section in Learn week card)
• 3B.2 View Quranic text to recite (no recording screen)
• 3B.3 Record my recitation (no recording interface)
• 3B.4 Review recording before submitting
• 3B.5 Submit to Quran Coach
• 3B.6 Retract/undo accidental submission
• 3B.7 View submission history (Progress timeline)
• 3B.8 Understand submission limits

3C: Feedback

• 3C.1 Know when feedback is ready (notification badge + submission card state)
• 3C.2 Listen to TA audio feedback (no feedback detail screen)
• 3C.3 View written feedback/notes
• 3C.4 Ask follow-up questions (no text input)
• 3C.5 Access feedback history/archives (Progress timeline, no complex filters)
• 3C.6 Understand my performance over time

3D: Live Classes

• 3D.1 Know my weekly schedule (Schedule tab)
• 3D.2 See upcoming live sessions (session cards)
• 3D.3 Understand session types (QRC/Class badges)
• 3D.4 Know timezone/timing (EST banner + per-session labels)
• 3D.5 Join a live session ("Join Now" button)
• 3D.6 Add session to personal calendar ("Add to Calendar" button)
• 3D.7 RSVP/indicate intent to attend (RSVP button)

3E: Recordings

• [~] 3E.1 Find recordings of missed sessions (menu item exists, no list)
• 3E.2 Filter/search recordings
• 3E.3 Watch recorded session
• 3E.4 Track which recordings I've watched

3F: Progress Tracking

• 3F.1 See overall progress in level (stats card + progress bar)
• 3F.2 See lessons completed (bar chart)
• 3F.3 See submissions completed (stat box: 7 submissions)
• 3F.4 See grades/performance
• 3F.5 Compare to expected pace

Weekly Cycle Coverage: 24/35 (69%) fully + 2 partial

Section 4: End of Semester Phase

• 4A.1 Complete end-of-course assessment
• 4A.2 View final results
• 4B.1 Graduate to next level
• 4B.2 Transition to Year 2

End of Semester Coverage: 0/4 (0%) (intentionally out of scope)

Section 5: Year 2 Differences

• 5A.1 View available appointment slots
• 5A.2 Book an appointment
• 5A.3 Manage appointments

Year 2 Coverage: 0/3 (0%) (intentionally out of scope)

Section 6: Cross-Cutting Capabilities

• 6A.1 Profile management (profile card with edit)
• 6B.1 Quranic font setting (menu item showing "Al-Mushaf active")
• 6B.2 Notifications (menu item)
• 6B.3 Display settings (menu item)
• 6C.1 Support/Help access (Help Center + Contact Support)
• 6C.2 TA communication ("Message Coach" button)
• 6D.1 Community board/Conversations
• 6E.1 Understand app structure (5-tab bottom nav)
• 6E.2 Receive notifications (bell icon with badge)

Cross-Cutting Coverage: 8/9 (89%) - up from 57% in Design A

Summary Statistics

Excluding intentionally out-of-scope sections (Year 2, End of Semester):

Comparison to Design A

Gap Analysis

What's Missing and Why It Matters

High Priority (detail screens that complete the core loop)

Medium Priority (states and flows)

Low Priority (polish and enhancement)

Disorientation Problem Assessment

The #1 problem identified in the PM Discussion was user disorientation. Here's how Design B addresses each manifestation:

Score: 4/6 fully solved, 2/6 partially solved (vs. 0/6 in the current app)

What Design B Does Exceptionally Well

1. Temporal Anchoring

The "Week 8 of 15" hero block on the Today page is the single most important design element in the app. At 44px bold white on dark green, it's impossible to miss. The countdown ("3 days until Week 9") adds urgency without anxiety. This is precisely what Proposal A called for.

2. Visual Identity

The warm earth + deep forest green palette with Playfair Display headings creates an app that feels culturally considered and premium without being generic. The Islamic geometric circle accents on the week block are a subtle, tasteful touch. This avoids every visual anti-pattern listed in the design skill.

3. Information Architecture

The tab structure (Today, Learn, Schedule, Progress, More) is a 1:1 match with Proposal A. The Learn page's unified Lesson + Submission + Feedback per week directly solves the split-content problem that was the #3 user complaint. Schedule as a primary tab solves the #2 complaint (5 clicks to find schedule).

4. Design System Maturity

The consistent use of CSS custom properties, clear shadow hierarchy, and component patterns (cards, badges, buttons) creates a design system that could be directly handed to engineers. The 30+ color tokens cover every state without ambiguity.

5. Progress Tab

Entirely missing from Design A, the Progress tab delivers a feedback timeline (solving the archive navigation problem), a visual bar chart (satisfying the "feel progress" job), and achievements (intrinsic motivation). The chronological list with no complex date filters directly addresses the "tedious filter system" complaint from the PM Discussion.

Recommendations

Immediate Priorities (complete the core loop)

1. Build recording interface - Quranic text display, record button, audio visualization, playback review, submit confirmation
2. Build feedback detail screen - Submission playback, TA audio playback, follow-up text input, linked from both Progress timeline and Learn page
3. Add submission limit indicator to Learn page ("1 of 2 attempts this week")
4. Add feedback-ready state to Today page (replace "Awaiting feedback" card with "Feedback Ready!" variant)

Next Phase (states and flows)

5. Pre-semester state for Today page (countdown to semester start, orientation content)
6. Onboarding flow (font selection, coach introduction, app walkthrough)
7. Video player screen (full-screen playback with resume)
8. Session detail modal on Schedule page

Design Decisions to Preserve

• The warm earth + forest green palette
• Playfair Display + Source Sans 3 typography pairing
• The week block hero pattern (dark green with geometric accents)
• Unified Lesson + Submission + Feedback in Learn
• Chronological Progress timeline (no complex filters)
• Timezone banner on Schedule

File Inventory

End of Document