Phase 6 — Mockup Review

Phase 6: Section 4 — In-Semester Learning Experience — Mockup Review

Date: 2026-02-26 Scope: Review of mockups/qf-mockup-v2/ against Section 4 requirements (In-Semester Learning Experience) Screens reviewed: Today, Learn, Recording, Schedule, Profile, Tab Bar

Summary Scorecard

Detailed Analysis

4.1 Notifications

What exists:

• Bell icon with red dot indicator in Today screen header (today.tsx:301-304)
• Tapping does nothing — no notification list or panel
• Profile has a "Notifications" menu row (profile.tsx:220) but it is a dead link

Gaps:

• No notification list/panel showing the 4 required types:
  1. 15 minutes before a live session
  2. At the start of a live session
  3. Reminder to submit a resubmission
  4. Notification when a new weekly lesson becomes available
• No notification preference controls
• No distinction between notification types or any notification content mockup
• Push notification behavior (admin-triggered) has no UI representation

Recommendation: Add a notification panel (slide-down sheet or dedicated screen) showing sample notifications of each of the 4 types. Optionally add a notifications settings screen accessible from Profile.

4.2 Semester Orientation & Dates

What exists:

• Pre-semester state on Today screen (today.tsx:310-421):
  • 12-day countdown with date (March 9, 2026)
  • Orientation video CTA with description
  • Info cards showing Level, Coach, Start Date
  • Pre-semester orientation sessions listed
• Pre-semester state on Learn screen (learn.tsx:446-543):
  • Matching countdown header
  • Orientation video with thumbnail (8:24 duration)
  • Program details (Level, Coach, Duration with dates)

Gaps:

• No concept of a "pinned key dates page" (Option C from requirements) — semester dates are only visible in pre-semester state, not accessible once the semester starts
• No evidence of weekly digest, newsletter, or board message integration (Options A, B, D)
• The orientation video is a single CTA — requirements call for a "more structured and visually rich" orientation. Mockup shows only title + description + play button, no structured agenda

Recommendation: Consider adding a "Key Dates" accessible section (from Schedule or Profile) that remains available during the semester. The orientation CTA is a good start but could show a structured outline of what the orientation covers.

4.3 Class Schedule & Calendar

What exists: The Schedule screen (schedule.tsx) is the strongest implementation:

• 7-day week strip navigation with left/right arrows (schedule.tsx:426-490)
• Sessions organized by day with 4 status states: live, starting-soon, upcoming, ended
• Session types color-coded: QRC (teal), Level Class (purple), Office Hours (amber)
• "Happening Now" pinned section for live/starting-soon sessions
• Recordings tab with grouped-by-day recordings and watch progress tracking
• Deadline card for submission due dates (dashed amber border)
• Empty state with "next session" preview card
• Timezone display (EST button in header)
• Segmented control: Upcoming | Recordings

Gaps:

• This is a week strip, not a full calendar view — requirement says "a calendar-style view of all scheduled live sessions." Mockup only shows one week at a time
• No filtering by level — requirement calls for sessions filterable by level
• No RSVP / sign-up mechanism — students can't indicate intent to attend
• No month view or broader time horizon

Recommendation: The week strip is a solid foundation and may satisfy the "calendar view" need pragmatically. Consider adding: (1) level filter chips below the segmented control, (2) an RSVP button on session cards, (3) potentially a month overview mode.

4.4 Live Session Timings

What exists:

• Sessions display time + timezone (e.g., "10:00 AM EST")
• Header has an "EST" button suggesting timezone selection capability

Gaps:

• No student preference survey UI for preferred class times
• No timezone conversion or multi-timezone display
• Requirements are primarily about process (survey students, set schedule based on data) — backend/admin scope
• No indication of "at least two session options per week" visible to students

Recommendation: This is mostly a backend/operations requirement. The mockup adequately shows timezone awareness. Consider adding a timezone picker dropdown behind the "EST" button.

4.5 Video Lessons — Text Description/Summary

What exists:

• Videos display title + duration in the video list (learn.tsx:647-670)
• Learning objectives exist as a collapsible section (learn.tsx:608-643) with bullet points — describes the week's learning objectives, not individual video content
• Week hero header shows topic name ("Idgham with Ghunnah") with metadata ("Level 2 - 3 videos - 12 min")

Gaps:

• No text description or summary on individual video rows — each VideoRow only shows "Video N: Title" + duration
• No lesson-unit-level summary paragraph describing what the unit covers

Recommendation: Add a 1-2 line description below each video title in the VideoRow component, and/or add a brief paragraph under the week hero header describing the lesson unit content.

4.6 Student-Teacher Communication

What exists:

• "Message Coach" button on Profile screen (profile.tsx:193-204) with Mail icon
• Follow-up question input on the feedback audio player (learn.tsx:833-842)
• Coach identification throughout: avatar, name, bio in Profile and Feedback sections

Gaps:

• No messaging screen or conversation thread UI — "Message Coach" is a dead button
• No concept of "Ask My Teacher" tab or repurposed Conversations feature
• No indication of how messages are sent, received, or displayed
• No consideration of teacher workload management visible in UI

Recommendation: If student-teacher messaging is going forward, add a simple message thread screen accessible from "Message Coach". The follow-up question input in the feedback section is a good partial implementation that contextualizes communication around lesson feedback.

4.7 Conversations / Student Forum

What exists: Nothing. The tab bar (tab-bar.tsx) has 4 tabs: Today, Learn, Schedule, Profile. There is no Conversations tab or any forum/community feature.

Gaps:

• The entire Conversations feature is absent from the mockup
• No community board, update board, or teacher Q&A space
• The requirement notes this is a "Needs Discussion" item — the mockup appears to have deprioritized it by removing it from navigation entirely

Recommendation: This omission may be intentional (the requirement asks "should this remain on the home tab?"). If a decision is made to keep it, a 5th tab or a section within the Today screen would be needed. If removed, document that decision explicitly.

4.8 Retention & Submission Follow-Up

What exists:

• "Behind" state on Today (today.tsx:455-480):
  • Amber warning banner: "You're 1 week behind"
  • Specific catch-up guidance: "Week 7 submission still needed"
  • Status triptych shows "Overdue" on submissions
  • Primary action card becomes "Catch Up — Week 7" with "Record Now" CTA
• "Behind" state on Learn (learn.tsx:551-566):
  • Compact amber banner: "2 submissions behind — you can submit up to 2 this week"
• All Weeks view groups behind weeks under "Needs Attention" with amber styling

Gaps:

• No teacher outreach or personalized message UI (teacher-personalized check-ins)
• No in-app message from teacher as a retention tool
• No indication of automated email reminders in the UI
• Telegram integration is out of scope for a native mockup

Recommendation: The "behind" state design is excellent for in-app awareness. Consider adding a "message from your coach" card in the behind state (e.g., "Coach Amina says: Let me know if you need help catching up") to represent the personalized outreach requirement.

4.9 Admin: Delete Unreviewed Submissions

N/A — This is a backend/admin feature. No UI in the student-facing mockup is expected.

Related mockup context: The recording screen's submission flow does show "2 of 2 attempts remaining" which relates to the attempt-counting system that this feature would interact with.

4.10 Progress Bar

What exists:

• Circular ProgressRing component on Today (today.tsx:24-72) and Learn (learn.tsx:28-79) screens
• Shows percentage (53% active, 27% behind)
• Video progress footer with linear bar (learn.tsx:157-182) — X/Y videos watched
• Journey dots in All Weeks view (learn.tsx:186-229) — visual timeline of completed/behind/upcoming
• Profile quick stats: Weeks Done (7), Submissions (6), Attendance (85%)

Gaps:

• No transparency on what data inputs drive the progress percentage — a student looking at "53%" has no way to understand what contributes to that number
• The progress ring is presentational only — no breakdown tooltip or detail view
• When quizzes aren't used, no indication of how progress is recalculated
• No way for students to validate accuracy of their own progress

Recommendation: Add a progress detail breakdown accessible by tapping the ring (e.g., a bottom sheet showing: Videos 67%, Submissions 50%, Attendance 85% = Overall 53%). This addresses both the "full breakdown" requirement and the accuracy concern.

Implementation Priority (for mockup amendments)

Based on gap severity and effort:

Quick Wins (small changes, high value)

1. 4.5 — Video descriptions: Add 1-line descriptions to VideoRow component
2. 4.10 — Progress breakdown: Add tap-to-expand detail on ProgressRing
3. 4.3 — Level filter: Add filter chips to Schedule screen

Medium Effort

4. 4.1 — Notification panel: New slide-down sheet or screen with sample notifications
5. 4.8 — Coach outreach card: Add personalized coach message to "behind" state
6. 4.2 — Key dates page: Accessible from Schedule, persists during semester
7. 4.3 — RSVP button: Add to session cards

Larger Scope (needs product decision first)

8. 4.6 — Messaging thread: New screen for student-teacher communication
9. 4.7 — Conversations feature: Needs product decision on purpose and placement
10. 4.4 — Timezone picker: Behind the EST button in Schedule header