Student Center - Skills

Owned by Andrew Estrada
Last updated: May 06, 2024
4 min read

Figma: https://www.figma.com/file/5d92g3sqYVqLkS2rVkEovo/PowerBi-Reporting?type=design&node-id=170-24136&mode=design&t=PvQ2RHccDPRyABqY-0

Overview:

  • When a user is already within the Student Center, they will be able to navigate to the Skills tab that provides important information activities completed.

UI Description:

  • Tabbed Navigation:

    • A tabbed interface that the user can click on and navigate to different sections of the Student Center Reporting. Tabs include ‘Overview, Login, SEL / Wellness, Mental Health, and Skills’.

  • Date Picker:

    • A date picker that allows users to determine the data range of data that they want to see.

  • Graph:

    • A graph that display the total amount of Skills Worksheets completed for the selected date range.

    • View By:

      • View by options that allow the user to change the time periods represented in the graph.

      • The graph will be displayed as a Bar Graph when ‘View Totals’ is selected.

      • The graph will be displayed as a Line Graph when ‘View by Day’, ‘View by Week’, ‘View by Month’, or ‘View by Year’ is selected

  • Group By Area:

    • A filter that allows the user to change the groupings of data being presented in the table.

      • Group by, ‘Building, Classroom, Grade,’

  • Totals and Average Filter:

    • A filter that allows the user to change the data being presented in the table between Total Counts, and Averages.

      • Totals, Daily Average, Weekly Average, Monthly Average.

  • Totals and Average Description:

    • A brief description of the different Totals and Average Filters that will be displayed to the user.

  • Search Bar:

    • A search bar that allows for filtering within the data table rows.

  • Filters:

    • Filters that the user could use to narrow down data.

      • Grade, Genders, Race, IEP, FRL, Housing Status, 504, EP

  • Data Table:

    • A data table that shows key information to the user at a smaller level. Columns in the data table include Skills Worksheet.

    • Rows in the data table should correspond to the Group By Area.

User Interaction and Validation:

  • Tabbed Navigation:

    • Users should be able to switch between Overview, Login, SEL / Wellness, Mental Health and Skills tabs to view different content types.

  • Date Picker:

    • Users should be able to utilize the date picker to select the date range of data they want to see.

    • The data in the table and graph should automatically update when a new date range is selected.

    • The default date range should include the last 7 days of data.

    • Depending on the Date Range selected, the line graph should automatically update the ‘View By’ filter.

      • 31 days or less should show the graph as ‘View by Day’.

      • More than 31 days but less than or equal to 3 months should show the graph as ‘View by Week’.

      • More than 3 months but less than or equal to 1 year should show the graph as ‘View by Month.’

      • More than 1 year of data show the graph as ‘View by Year’.

  • Graph:

    • View by Totals (Bar Graph): When the user is viewing the graph by totals, the graph should be displayed as a bar graph with the total # of Worksheet completed on the Y Axis, and Skills Worksheet as a column on the X Axis.

    • View by Day, Weeky, Month, Year (Line Graph): When the user is view the graph by Day, Week, Month or Year, the graph should be displayed as a line graph with the total # of items completed on the Y axis, and the date range on the X axis.

    • Graph should be populated with the data in the date range selected.

    • Depending on the date range selected, the time intervals on the X-Axis will be in ‘Days, Weeks, Months, or Years’. (See the above Date Picker bullet point for logic).

  • Group By Area:

    • Users should be able to change the ‘Group By' filter to change the data present in the table and information block.

    • The default selection for when a user first visits this page should be ‘Group By Building’, which would show all schools within their district.

  • Totals and Average Filter:

    • Users should be able to change the ‘Totals and Average' filter to change the data present in the Data Table. ‘Totals’ should be the default filter.

      • Totals: Total Count of Skills ‘Worksheets’ for the set date range.

      • Daily Average: Daily Average of Skills 'Worksheets, for the set date range. (Total Count of Fields/Number of days in the date range).

      • Weekly Average: Weekly Average of Skills ‘Worksheets’ for the set date range. (Total Count of Fields/Number of weeks in the date range)

      • Monthly Average: Monthly Average of Skills ’Worksheets' for the set date range. (Total Count of Field/Number of Months in the date range)

  • Totals and Average Description:

    • When ‘Totals’ is selected display the description:

      • “Total Count of each column in the table for the date range defined”

    • When ‘Daily Average’ is selected display the description:

      • “The Daily Average of each column in the table for the date range defined.”

    • When ‘Weekly Average’ is selected display the description:

      • “The Weekly Average of each column in the table for the date range defined.

    • When ‘Monthly Average’ is selected display the description:

      • “The Monthly Average of each column in the table for the date range defined.

  • Search Bar and Filters:

    • Users can refine the resources displayed by typing in the search bar or selecting options from drop down filters.

    • The search function should validate input and return relevant results within the data table.

    • Filter selections must reflect accurately in the data table.

  • Data Table:

    • Data table information should populate with the data in the date range selected.

    • Data table should have its rows defaulted to the ‘Group By Building' (showing all Schools within the district) when first navigated to.

    • Columns in the data table include completed Skills ‘Worksheets’.

    • User should be able to click on a row in the data table to show the the same overview page, but for the row they have selected.

      • Information blocks should update to show the specific schools metrics.

      • Group by filter should be updated to ‘Group By Classroom’

      • Rows in the data table should be updated to show all Classrooms within the building selected.