My Favorites (My Playlist)

Overview

The My Favorites is aimed at providing users with an intuitive, efficient, and flexible way to access favorited Social Emotional Learning (SEL) and Mental Health lessons and activities (modules). The favorites will feature advanced search capabilities, tagging, filtering, and bulk action tools to enhance user experience.

Figma:

https://www.figma.com/file/O0FDJoUbCHKQGlk3Wqq9ND/Teacher-UI?type=design&node-id=443%3A54020&mode=design&t=kKNBV7OIQtZk91GN-1

Epic:

Feature 194000: Lessons

UI Description

1. My Favorites Layout:

   • The library interface will prominently feature a toggle to switch between viewing lessons and activities (modules).

   • Each Lesson will display as a Lesson card in the My Favorites list.

     • Lesson cards display thumbnail, title, tags, Details button, Assign button, kebab menu

   • Each Activity (module) will display as a Module card in the My Favorites list.

     • Lesson cards display thumbnail, title, tags, Details button, Assign button, kebab menu

   • Lessons and Modules will display tags as chips, offering quick insights into their content at a glance.

     • Grade

     • Domain

     • Main Topic (SEL only)

     • Tier

     • Duration

2. Filtering Options:

   • Filters for SEL and Mental Health content are accessible in both the Lesson and Activities (Modules) view. https://rethinkautism.atlassian.net/l/cp/uXLrD4WU https://rethinkautism.atlassian.net/l/cp/crf1HoGt

   • Filters do not persist between Lesson Library and My Favorites and vice versa.

   • A tier dropdown menu allows users to filter content by "All Tiers," "Tier 1," "Tier 2," and "Tier 3."

3. Navigation and Action Buttons:

   • A "Details" button on each lesson card navigates to the Lesson or Module Details page, with a "Back to Lesson Library" option for easy return.

   • An "Assign" button triggers a modal for selecting materials and students for the assignment.

   • A three-dot kebab menu provides options to Print, Download, and Remove from My Favorites for individual lessons.

4. Bulk Action Toolbar:

   • Upon selecting more than one lesson, a blue bulk action toolbar appears and remains sticky as the user scrolls.

   • The toolbar offers a dropdown menu for bulk actions: Assign Selection, Print Selection, Download Selection, and Remove Selection from My Favorites, with a "Go" button to execute the selected action.

5. Search Bar Functionality:

   • The search bar supports text queries to find lessons based on titles, descriptions, keywords, and Standard Codes, with autocomplete suggestions.

   • Search results are optimized to appear within 2 seconds under normal load conditions.

Workflow Description

1. Toggling Between Content Types:

   • Users begin by selecting their desired view (Lessons or Activities-modules) via the toggle, adjusting their Favorites view accordingly.

   • Users select which Content Library to view

     • SEL (default selection)

     • Mental Health

2. Utilizing Filters and Tags:

   • To refine their search, users apply filters, dynamically updating the My Favorites page to display relevant content.

3. Accessing Details:

   • Clicking on a lesson or module "Details" button, users are taken to an in-depth overview, with an option to navigate back to the My Favorites.

   • Upon returning to the My Favorites, all previously selected filters should remain selected.

   • Upon returning to the My Favorites, user should land on the Content Library they had been viewing and the Lesson/Activities toggle that was previously selected

4. Assigning Content:

   • The "Assign" action opens a modal where users select specific materials and assign them to students, streamlining the distribution process.

5. Performing Bulk Actions:

   • By selecting multiple lessons, users activate the bulk action toolbar, choosing from Assign Selection, Print Selection, Download Selection, and Remove Selection from My Favorites options for efficiency.

6. Searching for Content:

   • Users enter search queries to find lessons based on titles, descriptions, keywords, and Standard Codes, with autocomplete suggestions.

   • Search results are optimized to appear within 2 seconds under normal load conditions.

Conclusion

These requirements outline the vision for the My Favorites design, emphasizing user-friendly navigation, advanced search and filtering capabilities, and efficient tools.