A marketing website for a school management software
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 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.
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.
Figma and Tailwind CSS
Ideation - Sitemap - Wireframe/Content - Design - Build - Live/Feedback
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.
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
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. 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, 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.
Below is the Figma Prototype, click here to see it full screen.
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.
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
A school management software aiming for after-schools
Air - Minimal Weather App
Air is a minimal weather app with Chinese style.