Design Review — Exploration A

QF Design A - Design Review & Progress Audit

Date: December 18, 2025 Version: 1.0 Purpose: Track alignment between mockup implementation and design specifications

Reference Documents

This review compares the current mockup against:

Executive Summary

Overall Alignment: ~80%

The mockup successfully addresses most P0 critical issues and implements the core weekly learning cycle. Key strengths include the Schedule page (near-perfect alignment) and Submit page (excellent UX). The primary gap is temporal orientation on the Today page.

Screen-by-Screen Assessment

Today Page (client/src/pages/today.tsx)

Alignment: 60%

What's Implemented

What's Missing (per Proposal A Section 4.3)

WWDC25 "3 Questions" Test

Learn Page (client/src/pages/learn.tsx)

Alignment: 90%

What's Implemented

What's Missing

Submit Page (client/src/pages/submit.tsx)

Alignment: 95%

What's Implemented

Architectural Note

Proposal A specifies submission should be unified into the Learn tab, with this tab slot used for "Progress" instead. Current implementation has Submit as a standalone tab. This is a design decision to evaluate.

Schedule Page (client/src/pages/schedule.tsx)

Alignment: 95%

What's Implemented

What's Missing

More Page (client/src/pages/more.tsx)

Alignment: 90%

What's Implemented

What's Missing

P0 Critical Issues Status

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

Summary: 6 of 7 P0 issues addressed (video is mocked but UI exists)

[Core] Task Coverage from Capability Map

Section 2: Pre-Semester Phase

Section 3: Weekly Learning Cycle

Section 6: Cross-Cutting Capabilities

Proposal A Architectural Comparison

Tab Bar Structure

Key Deviation: Proposal A unifies submission INTO the Learn tab and uses slot 3 for Schedule and slot 4 for Progress (feedback history + stats + achievements). Current implementation has Submit as a standalone tab.

Today Page Layout Comparison

Gap Analysis Summary

High Priority Gaps

1. "Week X of 15" format - Critical for orientation
2. Level indicator on Today - Users need context
3. Days until next week countdown - Temporal anchoring
4. Submission status on Today - Core info missing from dashboard

Medium Priority Gaps

1. Tab structure alignment - Submit vs Progress decision needed
2. Pre-semester countdown/onboarding - No first-time experience
3. Font settings UI - Feature exists but not accessible
4. Video progress on Today card - Shows which videos watched

Low Priority Gaps

1. "Past Levels" segment in Learn - Archive access
2. Session recordings archive - Mentioned in Proposal A
3. Multiple session cards on Today - Currently shows one

Recommendations

Immediate Priorities

1. Update Today page header to show "Week 8 of 15 • Level 4"
2. Add countdown text below week indicator
3. Add submission status card to Today page

Design Decisions Needed

1. Tab structure: Keep Submit as standalone, or merge into Learn and create Progress tab?
2. Pre-semester flow: Scope for initial implementation?

What's Working Well (Preserve)

• Schedule page design and functionality
• Submit page UX (confirmation, history, feedback sheet)
• More page organization (Coach section, profile)
• Learn page unified week view

Appendix: File Inventory

Appendix: Capability Map Implementation Checklist

Visual overview of implementation status against the User Capability Map.

Legend:

• [x] = Implemented
• [~] = Partial implementation
• [ ] = Not implemented

Section 2: Pre-Semester Phase

• 2.1 Sign up for program (external - out of scope)
• 2.2 Complete initial assessment
• 2.3 Receive level placement
• 2.4 Meet assigned Quran Coach (More page → My Quran Coach)
• 2.5 Understand program structure (orientation)
• 2.6 Explore available resources
• 2.7 Know when semester starts
• 2.8 Attend pre-semester sessions

Pre-Semester Coverage: 1/8 (12%)

Section 3: Weekly Learning Cycle

3A: Lessons

• [~] 3A.1 Know which week I'm on (shows "Week 8" but not "of 15")
• 3A.2 Access this week's lesson
• [~] 3A.3 Watch instruction videos (UI exists, no real playback)
• 3A.4 Track progress within lesson (multi-video)
• 3A.5 Mark lesson complete
• 3A.6 Access previous weeks' lessons
• 3A.7 Access previous levels' lessons (missing "Past Levels" segment)

3B: Submissions

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

3C: Feedback

• 3C.1 Know when feedback is ready
• 3C.2 Listen to TA audio feedback
• 3C.3 View written feedback/notes
• 3C.4 Ask follow-up questions
• 3C.5 Access feedback history/archives
• 3C.6 Understand my performance over time

3D: Live Classes

• 3D.1 Know my weekly schedule
• 3D.2 See upcoming live sessions
• 3D.3 Understand session types (Level Class, QRC, Office Hours)
• 3D.4 Know timezone/timing
• 3D.5 Join a live session
• 3D.6 Add session to personal calendar
• 3D.7 RSVP/indicate intent to attend

3E: Recordings

• 3E.1 Find recordings of missed sessions
• 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 (progress bar exists)
• 3F.2 See lessons completed
• 3F.3 See submissions completed
• 3F.4 See grades/performance
• 3F.5 Compare to expected pace

Weekly Cycle Coverage: 26/35 (74%)

Section 4: End of Semester Phase

• 4.1 Complete end-of-course assessment
• 4.2 View final results
• 4.3 Graduate to next level
• 4.4 Transition to Year 2 (from Level 4)

End of Semester Coverage: 0/4 (0%)

Section 5: Year 2 Differences

• 5.1 Year 2 overview (how it differs)
• 5.2 Appointment booking
• 5.3 Appointment management
• 5.4 Elective selection

Year 2 Coverage: 0/4 (0%) (Year 2 is out of initial scope)

Section 6: Cross-Cutting Capabilities

• 6.1 Profile management
• [~] 6.2 Settings (font, notifications, display) (menu exists, font UI missing)
• 6.3 Support/Help access
• 6.4 TA communication (Message dialog in More)
• 6.5 Community board/Conversations
• [~] 6.6 Notifications (receiving) (feedback alert exists)
• 6.7 Resources access

Cross-Cutting Coverage: 4/7 (57%)

Summary Statistics

Note: Year 2 (Section 5) and End of Semester (Section 4) are intentionally out of scope for initial mockup. Excluding these, coverage is 27/50 (54%) fully implemented with 6 partial.

End of Document