June 21, 2021

Student Dashboard Report

Starting Point

Based on the idea that this project is the beginning of a much larger dashboard that will be used in the future, I first researched what the correct structure of components for programming and display could be.

For design and style, I looked at the website of Winc Academy. I chose to use the colors light blue, mustard yellow, light and dark gray, with a white background, and the Poppins font from Google Fonts. Based on a sketch of a webpage in Sketch, I started programming.

For this project, I didn't use Bootstrap or any other framework, or icons from Font Awesome. The icons used for the selection menu and sorting columns are SVGs for maximum sharpness on any screen.

Using the data provided by Winc headquarters, I could identify ten students and 56 assignments, some of which were projects. I added some test data through Mockaroo, such as an avatar, last name, address details, and an email address. However, the avatars caused significant delays when loading in the browser. Therefore, I looked for real people’s photos, which I found through Pexels.

Dashboard Component

For the dashboard display, I chose to show all 56 assignments and projects in one graph and use the full width of the browser window. Since the labels in this graph overlap, I angled them at 40 degrees. This way, they are still readable and provide an overview of all ratings in one view.

The orange, mustard yellow, and blue buttons work as a legend, status, and interaction all in one. This keeps the display clean and organized. Initially, both graphs were visible, but since this created a very busy appearance, I decided to add a button that allows switching between bar and line graphs.

Below the graph, you'll find the ten students in this group. In a further developed dashboard, I would want to be able to filter by study year, different student groups per program, or the various types of programs like frontend, backend, and full-stack, in full-time, part-time, or self-paced formats.

The challenge in this part was to display the students clearly. By showing the avatars, the dashboard becomes much more personal. Each student has a checkbox to filter the graphs by one or more students. There is also a link to the raw table data and a link to the student's page. The checkbox works just like the buttons above the graph, meaning it handles both status and interaction. When selecting students, you'll immediately see which students are included in the filter above the graph.

The graphs on the dashboard could be expanded with a selection menu for assignments and projects so that the display changes to show ratings for the students based on one assignment instead of all assignments. I didn’t have time to do this because I wanted to spend time adding comments to the components, functions, and variables, as well as making the code as readable as possible. I also left out sorting the graph by assignment name and both ratings, in ascending or descending order, for now.

Student Component

The page for a student shows the same graphs as the dashboard, but only for that one student. Below the graph, you’ll find the linked test data. There is also a link to the table view. If the dashboard is further developed, I would like to display more data available to the student, such as a link to the student profile on the Winc website.

Table Component

The raw data for the dashboard has been left unchanged and is displayed on this page in table form. Sorting works on each column, and when you select a different column, the sorting resets to ascending. Sorting can be done in ascending or descending order.

Because displaying the data for all students would make the table view unclear, I started with a selection menu to filter the table by one student. Through various links to this page, the filter is pre-set through the state. I would further develop the dashboard by adding a filter for a specific assignment, so the table can display data for all students. I would also make the data in the table interactive so that clicking on the name of an assignment activates the filter for assignments. Or clicking on a rating would activate the filter for all ratings with the same value. Another view could be a two-dimensional table, like a spreadsheet, with students in columns and assignments in rows.

Last updated: December 12, 2024