Student Dashboard UI - Zen Class

•

Zen Class

Students' Dashboard

I came up with this students’ dashboard design while keeping three primary things in mind:

View - and keep track of how much they learn, practice and apply.
Analyze - the things they lack and where to put their effort.
Act - Take actions right from the dashboard whenever necessary.

Overview

The classic progress bar, simple enough to track the overall progress of a course an individual has completed.

Attendance

But sometimes a simple progress bar isn't enough and hence, additional information will be shown when the mouse hovers. In addition to that, attendance percentage is shown.

A CTA has also been added for the user to take act upon the information shown.

Heads-up

This component shows upcoming classes and its details.

Scores

Scores are points obtained by a student by completing an activity other than simply attending the class.

The line graph used here is to visualize the scores of an individual in a particular week. It also shows the average score of a class (Grey) and the highest score (Blue) in the same graph.

Activities

There are five activities in Zen Class :

1. CodeKata - A practice platform to test coding skills.

2. WebKata - A practice platform to test web development skills.

3. MicroArc - MCQ type assessment platform.

4. Assessments - A set of questions to test the knowledge learnt in a Zen Class session.

5. Tasks - Solve or develop a code as per the requirement.

Here, the bar graphs are used to represent the weekly scores obtained in each activity by the individual, the highest score and the average score of the entire class