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 the 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. The website didn’t represent our product well.

The Solution

Created a new marketing website with up-to-date information about the product. It also has better brand position.

Impact and Results

Refresh 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 am working alongside other developers to develop the website and make it live.

Tools Used

Figma and Tailwind CSS

My Process

Sitemap - Wireframe/Content - Design - Building - Live

Sitemaps

This is my first draft of sitemap. I want visitors to know what problems our product can help them solve and how to solve these problems. I included a case studies section. It showcases how different schools use our product to help them. However, our current customers are not very diverse, and they are not interested in doing case studies. Hence, I have to drop the case studies and keep the rest.

Wireframe and Content

Wireframes

When I was doing the wireframes, I encountered a great webinar by
Pedro Cortés where he talks 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 using is of his advice, I improved the home page that 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 collages of images. I want 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 is easier to understand. They felt better connection between the graphics and the copy text. So, I used this version, however I need to do more A/B testing to find out which one will convert better.

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

Building

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 design the website, I used Tailwind CSS variables. It will be easier for developers to translate the design into the actual site.

Challenges & Key Learnings

The animation I want to add to the design

Unfortunately, this project had to end early than planned, because of the shift of our company’s main interests. We managed to launch the website in a shorter time frame. However, the following marketing campaign was canceled. So we wouldn’t know how well the website would perform. Nonetheless, I learned valuable experiences in designing and writing content for a SaaS website.

Check out my other work

Or go back to home page
RY