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, teacher. I joined the team last year as the solo product designer.
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.
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.
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 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
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. 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.
Because his advices, I think the home page content become more convicing and accurate.
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.
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
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
A school management software aiming for after-schools
Air - Minimal Weather App
Air is a minimal weather app with Chinese style.