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, teacher. I joined the team last year as the solo product designer.

The Problem

After I joined the team and worked on ClassTopBase for about a year, we have more features and a brand new UI. The old website is outdated, and the design doesn’t reflect on the current brand of ClassTopBase.

The Solution

Created a new marketing website with up-to-date informations 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 along with another developers to developer 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 solving and how to. I included a customer section. It showcases how different schools use our product to help them. But our customers are not very diverse and they are not interested in doing case studies. So I have to drop the case studies and keep the rest.

Wireframe and Content

Wireframes

When I was doing wireframes, I watched a great webinar by Pedro Cortés talks about how to create 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.

Because his advices, I think the home page content become more convicing and accurate.

Design

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

When I design the home page, I tried two different versions. The first version I use 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 couple people who are not tech savvy, 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 converts 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 TailwindCSS is easy to use and can save developing time. So when I design the website, I used TailwindCSS 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

Because of the shift of our company main interests, this product is much less important. So I don’t have the time and resources to try things I want to do. For examples, adding more animations to the graphics; using same style of graphics on the home page to show the features. I also want to do more testing. Despite the constraints, I learned how to construct a SaaS product website and how to write the content.

Check out my other works

Or go back to home page
RY