A marketing website for a school management software
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.
The information on the old website 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.
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.
Our typical users are after schools owners that usually have 50-200 students.
My role and who I worked with
My role as the designer was to work on the design and the content of the website. I was working alongside other developers to develop the site and make it live.
Figma and Tailwind CSS
Ideation - Sitemap - Wireframe/Content - Design - Build - Live/Feedback
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.
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. Positioning your product
- 2. Headline
- 3. Introduction of the big problem
- 4. Explain your solution
- 5. Mind the switching cost
- 6. Real social proof
- 7. “Final” CTA
- 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.
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.
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.
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.
People would like to see more testimonials and case studies to understand the product better 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.
Check out my other work
A school management software aiming for after-schools
Air - Minimal Weather App
Air is a minimal weather app with Chinese style.