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).
Subject Filters (In progress)
Each subject that has content will display a subject selection filter below the search bar.
Subject selection filters will automatically be pre-selected when the user navigates to the Explore page
De-selected subject selection filter will hide the content for that given subject.
Subjects: Social and Emotional, Mental Health
Continue Where You Left Off
The student selects a module from the topics. The module content card displays in the Recently Viewed and also continues to display in the topic section.
The Recently Viewed section will be hidden until the student user interacts with modules in the Explore tab.
Recommended For You Section
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.
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
Subject Selection (In progress):
Each subject header will have a selection toggle to enable or disable the selection.
When a student deselects a subject, the corresponding content section should smoothly transition out of view.
The state of selected/deselected subjects will be saved for the user's next session.
Continue Where You Left Off:
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 Recently Viewed section at the top of the page below the search bar.
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.
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.
Customizing Content View (In progress):
The student reviews the subjects and decides to select or deselect which content is displayed.
They toggle off subjects that they are not interested in, which immediately removes the corresponding sections from the view.
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.