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
Subject Filters
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
Content Sections
Each content section shall have a header (subject title) and a series of content cards.
Content Cards
Content cards will display a thumbnail, the subject, and the title of the content.
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.
User Interaction and Validation Notes
Subject Selection:
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.
Content Navigation:
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:
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.