Figma: https://www.figma.com/file/5d92g3sqYVqLkS2rVkEovo/PowerBi-Reporting?type=design&node-id=166-17842&mode=design&t=tLX3lhtLHPUb4Cfc-0
Overview:
When a user is already within the Student Center, they will be able to navigate to the Mental Health tab that provides important information around worksheets, and videos 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 displays the total amount of completed SEL / Wellness Worksheets, Videos, Quizzes and Combined Total 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 SEL / Wellness ‘Worksheets, Videos, Quizzes and Combined Total’
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 items completed on the Y Axis, and Worksheets, Videos, Quizzes, and Combined total as columns on the X Axis.
View by Day, Weeky, Month, Year (Line Graph): When the user is viewing 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.
When graph is a line graph, we should be displaying a legend that clearly shows the user which line will represent which item area. User should also be able to deselect which item area they want to see. (See Example: https://www.figma.com/file/5d92g3sqYVqLkS2rVkEovo/PowerBi-Reporting?type=design&node-id=166-7050&mode=design&t=tLX3lhtLHPUb4Cfc-0
)
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 SEL / Wellness 'Worksheets, Videos, Quizzes and Combined Total’ for the set date range.
Daily Average: Daily Average of SEL / Wellness 'Worksheets, Videos, Quizzes and Combined Total’ for the set date range. (Total Count of Fields/Number of days in the date range).
Weekly Average: Weekly Average of SEL / Wellness 'Worksheets, Videos, Quizzes and Combined Total’ for the set date range. (Total Count of Fields/Number of weeks in the date range)
Monthly Average: Monthly Average of SEL / Wellness 'Worksheets, Videos, Quizzes and Combined Total’ 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.
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.
Rows in the data table should be updated to show all Classrooms within the building selected.
When I am viewing Smith School District but want a smaller view of Prism Elementary, I should be able to click on Prism Elementary within the table and be shown the same view but for Prism elementary with Classroom as the group by filter.