Dashboard - ClassTopBase

Brain Storming

I facilitated a workshop where I ask all of our teammates to join. We first identified all the information we can provide, then categorized them into three categories: Features, Navigations, and Metrics. We then started choosing what information goes on the dashboard. During the process, I challenged the team, including me, to consider whether a metric is useful to the users and the importance compared to other information. The goal was to have a helpful dashboard without overload it with information.

Wireframe

At the end of the workshop, we nailed down to the five pieces of information to show.

1. Numeric status on basic information about the school

   A quick check for how many students, teachers and classes the school have. It also acts as a shortcut to the correlative pages.

   

2. All the check-in status of students

   Having an idea about how the classes run. Do students go to classes? What's the percentage for students who are attending classes?

   

3. Status on how many students registered from different marketing channels

   Indicating the performance of how the school is doing at recruiting new students. Which channel is the best? Which channel needs more work?

   

4. Class schedule for the day

   Giving a glaze on what classes would happen today, so staff could take action right on the dashboard.

   

5. Recent activities performed by administers

   Staff would know what happened in recent management activities.

   

I mocked up the wireframe for those five metrics and put them into two categories. On the left hand of the dashboard, it would show all the data of the school. On the right side, it would show the event of the school. By grouping metrics together, administrators can glaze through the dashboard and have an overview.

Design

The UI design was restively simple. Most of the parts were following our design system. When I picked the colour of the graph, I chose to use a different colour palate from our design system colour. Many of our exciting colours were associated with buttons or clickable items. I don't want to break user's mental modal on what certain colour means in our software. It also provided a fresh look that it didn't blend in with other components. I used a plugin to make sure those colours are accessible for colour blind people as well.

Building

Like many of our other projects, the developers would build the project based on the design. When they had questions about the feature, we would sit together and figure out. I would also work on the CSS to make sure the end project is consistent with the design. By the end of the development, I would test the feature to find all the bugs and get it ready for release.

Challenges & Key Learnings

It was hard to decide what metrics should stay on the dashboard. We tended to think every metric would be useful; users would want to see all the metrics. However, it's easy to overwhelm users with information and not communicate the most important metrics. This is worth noting when designing for data-driven platforms.