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 schools to manage their students, classes, and teachers. I joined the team last year as a solo product designer.

The Problem

The information on the old website was outdated, and the design didn’t reflect the current brand. We wanted to do our first online marketing campaign, but the website didn’t show case 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 role and who I worked with

My role as the designer is to work on the design and the content of the website. I was working alongside other developers to develop the website and make it live.

Tools Used

Figma and Tailwind CSS

My Process

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

Ideation

We asked some of our customers 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 selling points. Also, our product catered for most of their needs, without being overly complicated. Based on this feedback, our new website design will reflect on this, both on the content and visual style.

Sitemaps

This was my first draft of sitemap. I wanted visitors to know what problems our product can address and how to solve these problems. I included a case study section. It showcases how different schools use our product to help them. However, our customers are not very diverse, and they are not interested in some of the case studies. Hence, I had to drop the case study and maintain the other features.

Wireframe and Content

Wireframes

When I was doing the wireframes, I encountered 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 of 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

Use collages to convey the idea using ClassTopBase will help you get orgranized
Use graphics to show the functions

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, it was decided that 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.

Finished mobile design

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

Build

Tailwind CSS classes

When building this website, me and the developer 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. This will make it easier for developers to translate the design into the actual site.

Live/Feedback

Unfortunately, the following marketing campaign was canceled 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 feedback 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.

There really aren’t any concrete examples to show me common issues and how you solve them.
I did not like that they don’t have testimonials from other users on the front page.

Challenges & Key Learnings

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

Check out my other work

Or go back to home page