Explore tab

Owned by Mary DelPiano
Last updated: Sept 10, 2024 by Andrew Estrada
4 min read

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

https://www.figma.com/file/2P8kwFEVvVNOVzG4D2E5Sj/Student-UI?type=design&node-id=6%3A2366&mode=design&t=F23GTnmedOZYdSH5-1

Epic

Epic 193777: Student Center

UI Description

  1. 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).

  2. 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.

  3. 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.

      • Potential Logic (Work In progress)

        • 1) Recommend specific content based on topics of domains. If a user clicks into a topic manually, we should recommend similar content based on the other topics within the same domain. (Need to think through if we want to recommend all topics within the domain, or specific topics.)

          • 1.1) If we do not recommend all topics, then we will need logic in place that only recommends content when a user interacts with the content cards directly with the topic rows. We should not recommend content based on a user interaction with the ‘Recommended for you’ section.

        • 2) Should potentially exclude topics that the student has already completed within the normal assignment list, or within the Explore tab.

        • 3) Length of time we recommend content. We should only recommend content to the student for ___ amount of days after they initially interacted with the specific topic.

  4. 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.

  5. 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.

  6. 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

  1. 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.

  2. 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.

  3. 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.

  4. 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.