ClassTopBase

A school management software for after-schools

Link: https://base.classtop.com

ClassTopBase is a school management software for after-schools. It allows schools to manage their students, classes, teacher. I joined the team last year as the solo product designer. I worked on many things on this product. I will only pick one to talk out here.

The Problem

One of our customers told us 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, which 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 works like 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 helped them a lot. More schools have expressed their interests in this feature and purchased our product.

My role and who I worked with

My role was the product designer, designed the user flow and the UI. I worked along with other developer to build the feature.

Tools Used

Sketch

My Process

Sketch - Wireframe - Design - Build

Sketch

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

Wireframe

Wireframes
Wireframes

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

Design

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

In my wireframe, I put every details 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. So I made some changes. It only showed the task title in the list view. Once user clicked 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.

Building

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 same to the design.

Challenges & Key Learnings

Even this feature was created because one user, it ended up help many more users. Also, it helped our sales.

Check out my other works

Or go back to home page
RY