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 a solo product designer. I have worked on many aspects of this product, but I will talk about one of it here.
One of our long term 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. Basically, it offered no notification to students.
We created a feature that could 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 the exact 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
I worked as a product designer on this project. I designed the user flow and the UI. I worked along with other developers to build the other features as well.
Gather Information - Sketch - Wireframe - Design - Usability Testing - Build
After getting feedbacks from our sales people, 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 were able to tackle some of the issues they confronted. 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 believe that if we can find a way to solve this problem, we can boost the productivity of our customers.
It seems like a to-do list could benefit the user in order to allow for a better clarification. After exploring different ideas, I settled on laying out tasks into a timeline format. It helped to see the progression of each task. Usually, whenever schools did their academic planning, it would usually run over a course of many years. So, I created a drop-down to filter different years.
When I worked on the wireframe, I laid out each year on the left, instead of a drop-down. By doing so, it became much easier to see which year have specific tasks assigned to them. I also sorted the tasks into uncompleted and completed sections for easier navigation.
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 crowded 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 made use of background colors and white spaces to show the difference.
Before we implemented the design, we conducted usability test in order to gain customer feedback. I started the recruiting and screening process myself. We recruited few people that are working in administrative positions at various companies. They had no prior knowledge of our software and they share similar technology skill as our current customers.
The goal of this testing is to examine whether they can successfully create a task for a student and edit the task to mark it complete. All of our test participants completed their task. One test participant said he wish there was a way to let him know the condition of incomplete tasks before opening the planning panel. This sounds like a useful feature, however, we are thinking of adding a notification feature into the software. So we decided to explore more option during that time.
I wish there is a way to tell me how many incomplete tasks this student has. Right now I have to click into the planning panel.
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
Early adopters’ feedback is useful, however, it is still important to test the feedback with other potential users.
Check out my other work
A website design for ClassTopBase school management software
Air - Minimal Weather App
Air is a minimal weather app with Chinese style.