Overview
The "Explore" area is designed to be an interface where students can engage with educational content across various subjects.
User Story
As a student, I want to be able to filter the educational subjects that appear on my "Explore" dashboard, so that I can focus on content that is most relevant and interesting to me.
Figma
Epic
Epic 193777: Student Center
UI Description
Search Bar
Search functionality will be by titles, phrases, keywords, and tags of the content.
Content displayed as user searches should be content in the student's grade level or grade band (3-5), (6-8), (9-12).
My Viewed Items
The student selects a module from the topics. The module content card displays in the My Viewed Items and also continues to display in the topic section.
The My Viewed Items section will be hidden until the student user interacts with modules in the Explore tab.
Recommended For You Section (For Future Development)
The recommended for you section will change as the user selects and interacts with content.
Recommended For You Section will show the user content that is similar to the content they have previously selected and interacted with on the platform.
Content Sections
Each content section will have a header (Topic title) and a series of module content cards.
Display only SEL topics and content in the Student Center Explore tab.
SEL Quizzes will not display in the modules in the Student Center Explore tab
Mental Health content will be hidden from the Student Center Explore tab.
Content Cards
Content cards will display a thumbnail, and the title of the module.
Thumbnail: Thumbnail images must occupy 100% of the container width and align to the top of the container.
Browsing Functionality
The interface will include navigation arrows within each content section for content browsing.
Topic sections with 1-5 module content cards will display without navigation arrows
Topic sections with 6 or more content cards will display with navigation arrows.
User Interaction and Validation Notes
My Viewed Items:
Student user selects a module content card in a Topic section to view or interact with module content.
Upon returning to Explore screen, the module content card displays as the first module content card in the My Viewed Items section at the top of the page below the search bar.
My Viewed Items display content that the student interacts with in the Student Center Explore tab.
Teacher-Assigned content will not be displayed in the Student Center Explore tab.
Content Navigation:
Topic sections with 6 or more content cards will display with navigation arrows.
The content card on the right of the screen will display in partial view when there are 6 or more cards in view on the screen.
Clicking the arrow icons will shift the content cards within that section.
The card on the far right will transition to the far-left position, appearing as the first card.
The transition should be animated smoothly to convey the cycling of content.
Validation:
Ensure that deselected subjects remain hidden across sessions unless re-selected by the user.
Validate that the content cycling functionality correctly cycles the cards without skipping any content.
User selections and interactions should be responsive with no lag to promote a seamless user experience.
Explore Tab Visibility:
The Explore tab should only display to student users in a district that have an SEL component allocated (SEL, Wellness, Life Skills and Wellness).
If an SEL Topic is turned off for a district, the topic will not display in the Student Center Explore tab.
If the district only has Mental Health component and does not have SEL component, the Explore tab will be hidden for now because Explore tab will only have SEL content.
The Explore tab will show all student center SEL content organized in the topics. The SEL Quizzes will not display in the Student Center Explore tab.
There should be flexibility to turn off the Student Center Explore tab for a district that request for the tab to be hidden.
The Explore tab will display to students in the Student Center when the admin user selects ‘Yes’ in SEL Content Admin Account Settings to display the content in the explore tab.
The Explore tab will be hidden in the Student Center when the admin user selects ‘No’ in SEL Content Admin Account Settings to display the content in the explore tab.
Workflow Description
Initial Load:
When a student enters the "Explore" area, they are presented with a dashboard populated with subject sections based on the default or previously saved preferences.
Navigating Content:
Within a content section, the student clicks the navigation arrow to explore more content cards.
The cards animate to the left, and the card from the right becomes the first on the left.
Session End:
When the student leaves the "Explore" area, their subject selections and the position of the content cards within each section are saved.
Upon return, the student finds the "Explore" dashboard as they left it, allowing them to pick up where they left off.
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.