Dashboard - ClassTopBase
A dashboard feature for a school management software for after-schools
ClassTopBase is a school management software for after-schools. It allows school administrators to manage students, teachers, and classes. I joined the team in 2018 as a solo product designer. I have worked on many aspects of this product, including shaping new features, implementing design system, writing CSS. Here, I will talk about the dashboard I designed for ClassTopBase.
School administrators from after schools that have 50-200 students.
My role and who I worked with
Product Designer working with developers and PM.
Sketch, InVision, VS Code
With many new features added to ClassTopBase, it became a comprehensive tool to fulfill daily management needs for after-schools. However, there is no place to provide an overview of how their schools are doing. The school administrators have to go into each channel, look through the stats, and surmise how the school is doing.
We created a dashboard showing the essential status and quick actions to manage their schools.
Impact and results
The dashboard quickly became a welcome feature of our product, as it offers a way to get an overview of the status with quick access to useful functions.
Brain Storming - Wireframe - Design - Build
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.
At the end of the workshop, we nailed down to the five pieces of information to show.
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.
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?
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?
Class schedule for the day
Giving a glaze on what classes would happen today, so staff could take action right on the dashboard.
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.
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.
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.
Check out my other work
A website design for ClassTopBase school management software
Planning - ClassTopBase
A planning feature for a school management software aiming for after-schools