To-Do, Overdue, Done tabs | Assignments Tab
- Mary DelPiano
- Andrew Estrada
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
Epic
Feature 193777: Student Center
UI Description
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.
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 within the start and due date assigned to the student.
Assignment should only populate the To-Do tab once the start date has occurred.
Assignments should move to the missing tab if it is not complete and the due date has passed.
Missing Assignments:
Assignments that have a due date that are passed the current date and are not completed.
Done
Assignments that have been completed by the student.
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
Assignment Cards
Each assignment is represented as a card with a thumbnail, title, due date, and progress tags.
Thumbnail: Thumbnail images must occupy 100% of the container width and align to the top of the container.
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.
Priority Assignment Label
Assigned item(s) marked as ‘Priority in the ‘Assign Modal’ will display ‘Priority Assignment’ on the content card above the title in the 'My Assignments’ tab of the Student Center.
New Discussion Message on Submitted Assignment
Discussion messages will display as a ‘Discussion’ message in the Student Center Inbox
User selects ‘View’ to open the assignment and the discussion panel.
Done tab unselected: Display red circle badge when there is a new/unread message in a discussion on a ‘Completed’ assignment.
Done tab selected: Display white circle badge when there is a new/unread message in a discussion on a ‘Completed’ assignment.
Assignment Card with New Message: Display Red circle badge and ‘New Message’ in red in the top right corner of the assignment card.
User Interaction and Validation Notes
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:
Assignments without due dates
Assignments with due dates less than or equal to the current date.
Missing:
Assignments that have a due date that are passed the current date, due date displays in red text.
Assignments will display with the most recent date on top of the list to the oldest date at the bottom of the list.
If student has no missing assignments, Missing tab will be hidden.
Done:
Assignments that have been completed by the student.
Most recently completed assignment displays at the top of the assignment card list in the Done tab with the ‘Completed’ tag.
Empty State includes Lottie file animation and message: Nothing to show here.
Same Lottie File Animation: https://rethinkautism-my.sharepoint.com/:u:/g/personal/daniel_mcnaney_rethinked_com/EcrN5td0czdGmJlYwBvXyt4BnGnQdj7RH_VswfO6URq6_w?e=WTg5Gw
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.
Priority Assignment:
Priority items still follow the assigned due date priority.
Priority assignments will be displayed above non-priority items, when they fall on the same due date.
(Ex: if a non priority item is due today and a priority item is due tomorrow, then the non priority item should be displayed first. If both a priority item and a non priority item are due today, then the priority item should be displayed first.)
My Assignments List:
The My Assignments tab will display SEL, Mental Health, and Skills assigned assignments in the same list in the To-Do and Done tabs. This existing functionality will be in the new Student Center.
Skills Lessons do not have the ability to have assignment dates. Skills Lessons will only display in the To-Do and Done tabs. In the future, Skills lessons may have assignment dates and will be able to display in To-Do, Missing, and Done tabs.
Assignment Card Hover State
When a user hovers over an assignment card, the card changes to blue to provide a visual cue.
Assignment Card Interaction
Clicking on an assignment card will open the assignment and the user will be able to start the activity or quiz.
New Discussion Message on Submitted Assignment
Discussion messages will display as a ‘Discussion’ message in the Student Center Inbox
User selects ‘View’ to open the assignment and the discussion panel.
Done tab unselected: Display red circle badge when there is a new/unread message in a discussion on a ‘Completed’ assignment. There will be no badge when there is no new/unread message on a completed assignment.
Done tab selected: Display white circle badge when there is a new/unread message in a discussion on a ‘Completed’ assignment. There will be no badge when there is no new/unread message on a completed assignment.
Assignment Card with New Message: Display Red circle badge and ‘New Message’ in red in the top right corner of the assignment card. Once the message has been read/viewed, the badge and ‘New Message’ will be removed.
Navigation tabs
Clicking on the My Assignments, Explore, and Goal Zone tabs will filter the displayed content accordingly.
Thumbnail Images
All thumbnail images should load correctly and maintain their aspect ratios while filling the width of the card.
Younger and Older Student Versions
We need to support the younger student and older student versions of the Student Center. In the future, the younger and older student centers will have different features.
The updated Student Center UI described in the requirements and designs are the same for the younger and older student centers. We should maintain the separation of the younger student and old student versions so that they can have different features in the future.
Workflow Description
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.
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.
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.
Progress Tracking:
The system updates the assignment's status in real-time as the user interacts with it (e.g., "In-Progress" or "Complete").