Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Overview

The new student center design will increase the usability of the student center. The Assignments tab section of the student center allows a student to view the upcoming or due assignments, missing or overdue assignments, and completed (done) assignments.

Figma

https://www.figma.com/file/2P8kwFEVvVNOVzG4D2E5Sj/Student-UI?type=design&node-id=1%3A26974&mode=design&t=62p1PDLcmq95ZQ9V-1

Epic

Feature 193777: Student Center

UI Description

  1. Top Navigation tabs

    • The top navigation bar is how the student navigates through the student center for different materials.

    • All grades will have My Assignments, Explore, and Goal Zone tabs.

  2. My Assignment tabs

    • The toggle selection will allow the user to view the different assignments in an organized manner.

    • Toggle Selections: To-Do (default), Missing, Done

      • To-Do Assignments:

        • Assignments without due dates

        • Assignments with due dates less than or equal to the current date.

      • Missing Assignments:

        • Assignments that have a due date that are passed the current date.

      • Done

        • Assignments that have been completed by the student.

  3. Progress Chips

    • The progress tag chips display on the assignment cards and show the state of the assignment.

      • An assignment that has not yet been started will not have a progress tag

      • An assignment that is in-progress will have a blue “In Progress” tag

      • An assignment that is complete will have a green “Complete” tag

  4. Assignment Cards

    • Each assignment is represented as a card with a thumbnail, subject, title, due date, and progress tags.

    • Thumbnail: Thumbnail images must occupy 100% of the container width and align to the top of the container.

    • Subject: Social and Emotional Learning, Mental Health

    • Title: Assignment Title

      • The title will be truncated on the card if it is more than 87 characters.

    • Due Date: Due Mon DD, YYYY

      • The due date will display in red if the due date has passed to communicate urgency.

User Interaction and Validation Notes

  1. Navigation My Assignment, assignment toggle options

    • Clicking on the To-Do (default), Missing, and Done toggle switch tabs will filter the displayed content accordingly.

      • The assignments will display with the most recent date showing on top of the list and the least recent date at the bottom of the list

      • Assignments that do not have a due date will display below assignments that have a due date

    • To-Do:

    • Missing:

      • Assignments that have a due date that are passed the current date, due date displays in red text.

      • If student has no missing assignments, Missing tab will be hidden.

    • Done:

      • Assignments that have been completed by the student.

      • Empty State includes Lottie file animation and message: Nothing to show here.

  2. Progress Tracking:

    • The system updates the assignment's status in real-time as the user interacts with it (e.g., "In-Progress" or "Complete").

    • In-Progress tag will display in To-Do or Missing tabs on assignments that have been started by the student.

    • Complete tags will display in Done tab on My Assignments page for assignments that have been completed by the students.

  3. Assignment Card Hover State

    • When a user hovers over an assignment card, the card changes to blue to provide a visual cue.

  4. Assignment Card Interaction

    • Clicking on an assignment card will open the assignment and the user will be able to start the activity or quiz.

  5. Navigation tabs

    • Clicking on the My Assignments, Explore, and Goal Zone tabs will filter the displayed content accordingly.

  6. Thumbnail Images

    • All thumbnail images should load correctly and maintain their aspect ratios while filling the width of the card.

Workflow Description

  1. Login and Initial View:

    • Upon login, users land on the Assignments tab in the "Today" toggle, which shows assignments due on the current day or upcoming assignments that are due.

  2. Navigation and Content Filtering:

    • Users can switch between "To-Do," "Missing," and "Done" tabs to filter assignments by their status.

    • All grades can navigate between content pages: My Assignments, Explore, Goal Zone.

  3. Assignment Interaction:

    • Users select an assignment by clicking on a card.

    • The selection leads to a detailed view or starts the assignment based on its status.

    • If the user selects a complete assignment, opening the assignment will display the assignment review pages.

  4. Progress Tracking:

    • The system updates the assignment's status in real-time as the user interacts with it (e.g., "In-Progress" or "Complete").

  • No labels