Lessons | SEL and Mental Health

Overview

The new design of the Lesson Library is aimed at providing users with an intuitive, efficient, and flexible way to access Social Emotional Learning (SEL) and Mental Health lessons and activities (modules). The library 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=1%3A19485&mode=design&t=JPhiIb9fGojtlxuO-1

Epic:

Feature 194000: Lessons

UI Description

1. Lesson Library Layout:

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

   • Content Library Selection:

     • Labels for SEL-SEL product: SEL

     • Labels for SEL-Wellness product: Wellness

     • Labels for SEL-Life Skills and Wellness: Life Skills and Wellness

     • Mental Health

   • Each Lesson will display as a Lesson card in the Lesson Library list

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

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

     • Grade

     • Domain

     • Main Topic (SEL only)

     • Tier

2. Filtering Options:

   • Filters for SEL and Mental Health content are accessible in both the Lesson and Activities (Modules) view.

   • 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 "View Lesson" button on each lesson card navigates to the Lesson Overview 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 kabob menu provides options to Print and Add to 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, and Add Selection to 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 library view accordingly.

   • Users select which Content Library to view

     • Default selection will be the first in the list. Users will only view content that is allocated to their account.

     • Labels for SEL-SEL product: SEL

     • Labels for SEL-Wellness product: Wellness

     • Labels for SEL-Life Skills and Wellness: Life Skills and Wellness

     • Mental Health

2. Lesson List Order:

   • Lessons tab in Lesson Library should display in this order:

     • Tiers 1 & 2 display first in the SEL and Mental Health Content Library lists. SEL Tier 3 Lessons display after all SEL Tier 1 & 2 Lessons in the list in the SEL Content Library. 

     • Grade Level

     • Domain/Topic

   • Lesson list should display all of one grade with the Domains/Topics in the order that match the Grade and Domain filters.

3. Utilizing Filters and Tags:

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

4. Accessing Lesson Details:

   • Clicking on a lesson's "View Lesson" button, users are taken to an in-depth overview, with an option to navigate back to the library.

   • Upon returning to the Lesson Library, all previously selected filters should remain selected.

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

5. Assigning Content:

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

6. Performing Bulk Actions:

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

7. 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 new Lesson Library design, emphasizing user-friendly navigation, advanced search and filtering capabilities, and efficient tools. The Lesson Library will provide accessible resources for educators to manage and access SEL and Mental Health content effectively.