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 the 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. The website didn’t represent our product well.
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.
Figma and Tailwind CSS
Sitemap - Wireframe/Content - Design - Building - Live
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
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. 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 using is of his advice, I improved the home page that the content became more convincing and accurate.
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.
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
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
A school management software aiming for after-schools
Air - Minimal Weather App
Air is a minimal weather app with Chinese style.