Overview
The Video player is accessible within the RethinkEd Student Center for assigned videos. The assignment modal will feature a centered video player with a control bar for an interactive learning experience. The accompanying sidebar provides navigational functionality and a transcript of the video content.
User Story
As a student, I want to engage with video content that is easy to control and navigate, so that I can absorb information at my own pace, review important segments, and provide feedback upon completion.
Figma
Epic
Epic 193777: Student Center
UI Description
Sidebar Layout:
The sidebar includes a back navigation link, a lesson title with a long title option, a video transcript, and a button to Collapse Sidebar.
A collapse functionality to minimize the sidebar and provide more space for the video player.
A back navigation button ("Back") to return to the assignments page.
A dynamically highlighted video transcript that follows the video narration.
Video Experience
A responsive video player centered on the interface.
Player controls: play/pause button, volume control, mute toggle, closed caption, full screen
Post Video Engagement
Post-video engagement options prompting the student to:
“Rewatch” button to rewatch the video with discussion panel
“I’m done” and close the modal and return to Assignments page in Student Center
“Next Assignment” button if there are more assignments assigned to the student
User Interaction and Validation Notes
Video Playback:
Controls should be intuitive, with tooltip text on hover for clarity.
Video progress should be saved if the student navigates away or pauses.
Sidebar Functionality:
The transcript should automatically scroll and highlight the current section of the video.
The "Back" button should have a confirmation prompt to prevent accidental navigation away from the video.
The collapse feature should allow for an immersive full-screen experience without page refresh.
Post-Video Engagement:
Upon video completion, clear prompts for "Rewatch", “I’m done” or "Next Assignment" should appear.
"Notify Teacher" action will lead to a discussion panel while retaining the video on-screen for reference.
"Rewatch Video" should restart the video seamlessly without refreshing the page.
“I’m done” closes the modal and returns user to Assignments page in Student Center
“Next Assignment” button if there are more assignments assigned to the student
Validation:
Ensure player controls function across different browsers and devices.
Verify that the transcript synchronization is accurate with the video.
Check that all user decisions and progress are accurately reported to the system for tracking and teacher notification.
Workflow Description
Video Engagement:
The student accesses the video assignment from the Student Center and begins the video with accompanying transcript and navigational tools available.
Interaction with Video Content:
As the student interacts with the video (play, pause), the transcript follows the video narration with appropriate highlights.
If the student selects the "Back" button, they are prompted to confirm their decision to prevent accidental loss of progress.
Post-Video Actions:
Upon completing the video, the student chooses to rewatch, which restarts the video without refresh, selects that they are done which notifies their teacher, or selects Next Assignment which notifies their teacher of the video assignment completion and also navigates the student to the next assignment.
If rewatching the video, the student is transitioned to a screen with the video on one side and a discussion panel on the other.
Continued Engagement or Completion:
If the student chooses to engage in discussion, their interaction is saved and made accessible to the teacher.
If the student exits after completion, their progress is saved and reported to the teacher for follow-up.