A school management software for after-schools


ClassTopBase is a school management software for after-schools. It allows schools to manage their students, classes, and teachers. I joined the team last year as the solo product designer. I worked on many aspects of this product. I will only select one to talk about here.

The Problem

One of our early customers told us about their biggest pain point in their current workflow. They had nothing to help them map out their student’s future academic plan. They were doing everything on Google Doc, and it was hard to keep track for dozens of students. It offered no notification to students.

The Solution

We created a feature that can help them map out their student’s future academic planning. It worked like a to-do list but integrates into our SaaS. It can send notification to students and teachers when needed.

Impact and Results

This customer loved this feature. It was a solution to their problem. More schools have expressed their interests in this feature and purchased our product subsequently.

My role and who I worked with

My role was the product designer; I designed the user flow and the UI. I worked along with other developers to build the features.

Tools Used


My Process

Gather Information - Sketch - Wireframe - Design - Build

Gather Information

After getting feedback from our salespeople, we believed this is an interesting problem space to look into. We decided to ask some other customers to see if they encountered similar issues, and how they tackled some of their problems. Some of our customers are using calendars or paper and pen to work on this. But none of the solutions will allow the integration with our platform. We believed if we can find a way to solve this problem, we can boost our customers productivity.


After exploring different ideas, I settled on laying out tasks into a timeline format. It helped to see the progression of each task. Usually, when school did their academic planning, it would run over a course of many years. So, I created a drop-down to filter different years.


Wireframes V1 with dropdown button
Wireframes V1 edit screen
Wireframes V2 with more clear year layout
Wireframes V2 with dropdown button

When I worked on the wireframe, I laid out each year on the left, instead of a drop-down. By doing so, it’s much easier to see which year have tasks. I also sort the tasks into uncompleted and completed sections for easier navigation.


First UI version based on wireframe.
UI changed based on the feedbacks.

In the wireframe, I put every detail of one task in a bordered box. Based on the feedbacks I got from team members, the design was visually crowed and took too much vertical space. Hence, I made some changes. It only showed the task title in the list view. Once the user clicks on the task, it will expand to show the detail. I also tried to use less border and use background colors and white spaces to distinguish the difference.


After the developer built the product, I tested it to make sure it’s bug free. I also changed the CSS to make sure it is similar to the design.

Challenges & Key Learnings

Listen to your early adopters. Their feedback can be extremely important for you. Sometimes that means more customers will buy your product because of your early adopters.

Check out my other work

Or go back to home page