• Overview
  • Data
  • The Problem
  • The solution
  • Impact & Results
• My Process
  • Ideation
  • Sitemap
  • Wireframe
  • Design
  • Build
  • Live/Feedback
• Challenges & Learnings

ClassTopBase Website

A marketing website for a school management software

Link: https://base.classtop.com

ClassTopBase is a school management software for after-schools. It allows school administrators to manage students, classes, and teachers. I joined the team in 2018 as a solo product designer. After working on the product for a year, we shipped many new features and updated our brand. The old website needed a refresh.

The problem

The old website's information was outdated, and the design language didn't reflect the current brand. We wanted to do our first online marketing campaign, but the site didn’t showcase our product well.

The solution

We created a new marketing website with up-to-date information about the product which has a better brand position.

Impact and results

We refreshed the marketing website for the SaaS product, ClassTopBase, to reflect on the new features and design.

My Process

Ideation - Sitemap - Wireframe/Content - Design - Build - Live/Feedback

Ideation

We asked some of our users why they purchased our product, and what kind of things they were looking for when searching for a school management software. Our simple and elegant interface is one of the selling points. Also, our product catered for most of their needs without being overly complicated. Based on the feedback, our new website design will reflect on those points, both from the content and visual style.

Sitemaps

This was my first draft of the sitemap. I wanted visitors to know what problems our product can address and how to solve these problems. So in the case study section, It showcases how different schools use our products to help them. However, our users aren't as diverse as for now, and they are not interested in doing case studies. I had to drop the case study section and focus more on showing the features. 

Wireframe and Content

When I was doing the wireframes, I joined a great webinar by
Pedro Cortés where he talked about how to create a landing page that converts. He explained eight steps to create the content for the landing page.

1. 1. Positioning your product
2. 2. Headline
3. 3. Introduction to the big problem
4. 4. Explain your solution
5. 5. Mind the switching cost
6. 6. Real social proof
7. 7. “Final” CTA
8. 8. Alternative CTA.

By making use of his advice, I was able to improve the home page and made the content became more convincing and accurate.

Design

When I designed the home page, I tried two different versions. For the first version, I used a collage of images. I wanted to convey the idea that by using ClassTopBase, you can get organized. The second version showed simple graphics on what each feature is. After asking people who are not tech-savvy for their opinion, the second version was much easier to understand. They felt there was a better connection between the graphics and the copy text. So, I used this version. However, I needed to do more A/B testing to find out which one will convert better.

The rest of the page design follows the same style as the home pages.

Below is the Figma Prototype, click here to see it full screen.

Build

When building this website, the developer and I chose the Tailwind CSS as the CSS framework. Many people said Tailwind CSS is easy to use and can save developing time. So, when I designed the website, I used Tailwind CSS variables. That will help developers to implement the design into the actual site.

Live/Feedback

Unfortunately, the following marketing campaign was cancelled due to the interest shift in our company. I wouldn’t get any feedback based on how well the website performs. However, I used UsersThink to gain more input from outside the company. The feedbacks I got are generally positive. However, there are a couple of things I think I will need to improve on.

People would like to see more testimonials and case studies to better understand the product and have more trust. This will be the part I work on for the future.

Challenges & Key Learnings

I gained valuable experience in designing and writing content for a SaaS marketing website. For a marketing website like this, the content is definitely the key.