Inspiring more engaging education worldwide through a refined online presence
We helped EdTech company Classroomscreen reach a new level with their brand and built a brand-spanking-new marketing website, including a CMS, to match.
Introduction
Classroomscreen is a company created by teachers, for teachers. Their mission is to empower educators worldwide by offering an easy-to-use and globally accessible tool known by the same name. Their product ships with a swiss army knife’s worth of widgets that teachers can utilize to enhance their students’ learning experience. With over four million active users in 200+ countries, they're becoming industry powerhouses.
Challenge
Classroomscreen was missing a brand, and the marketing website as a brand touchpoint didn’t reflect the incredible growth and maturity of their product. Classroomscreen was in need of a consistent brand language, an extensive set of guidelines for that language, and a high performance marketing website as their main attraction point.
Logo
We were lucky to find a solid foundation in the original ingenious logo created by Jord Riekwel. All it took for us were a few minor tweaks to make sure the logo fit the new brand concept as well as possible.
Deliverables
We delivered an easy-to-understand brand book to serve as a guide for the further creation of products to fit the brand. This includes an awesome brand concept and a logo revision. An icon pack was created alongside brand-coordinated widgets for their digital product.
During the initial branding project we found Yummygum to be an agency with lots of experience in branding and detailed icon design. Their team listened to our needs and pro-actively helped us make decisions. We worked together again at a later stage to create our marketing website, our key touchpoint and reflection of who and what Classroomscreen is, from scratch. They impressed us again through their technical knowledge as they built the new website using our preferred tech stack and implemented a user friendly CMS. The same CMS now allows our marketing team to take things to the next level.
Laurens Koppers
Founder at Classroomscreen
Pattern system
Our team decided to build upon the original logo and leaned into this circular idea even further. We did so by utilizing the idea of the C with the smile in it and systemizing it. This led to the creation of a grid set up that would support all sorts of new shapes without losing touch with the original C shape. It allowed us to create new ideas for shapes that could be paired with their brand values. Shapes that suits the concept due to the fitting amount of joy and playfulness.
Widget icons
For the product we created a set of icons that each would represent a widget type teachers can use on their digital whiteboards. All icons consist of rounded end caps strokes for a more rounded and playful appearance. Needless to say they would have to exist neatly in conjunction with the brand identity. We added a color highlighted to each icon to contribute to Classroomscreen’s friendly look and feel. Of course while aiming to remain highly recognizable and consistent as an icon set.
Online and offline presence
One of the goals for this project was for the Classroomscreen team to be able to express their brand on social media. Through meticulous use of the patterns, color palette and typographic rules we designed the blueprint for social media posts. But we didn’t stop there, to spark the imagination of how the entire identity would play out across the gamut, our team created examples of what offline Classroomscreen collateral would look like as well.
Enhanced brand communication through the power of illustrations
To expand on the brand book's expression, the visual design team embarked on creating a wide range of meticulously positioned illustrations across the website. Our aim was to establish a consistent application of brand guidelines for future illustrations, incorporating diverse interpretations that impart a refreshing and dynamic sense of delight throughout the entire browsing experience.
Infinite potential for new content
Our developers have become true Dato wizards, which is our preferred content management system. Ensuring seamless content updates for our partners at Classroomscreen was a top priority. A prime illustration of this is the blog section we've implemented on the website. By adhering to specific guidelines that maintain the visual identity and overall structure of the pages, blog posts and other supplementary content can be added autonomously.
Motion-enabling design process
By infusing brand-oriented motion in the form of subtle interactions and animations, we elevate the overall experience of the website and create a delightful ambiance while guiding users' attention to key focal points. We prioritize incorporating motion ideas right from the early stages of the design process. In fact, our wireframes this time around featured snippets of motion concepts, resulting in a consistent and coherent utilization of motion to effectively convey Classroomscreen's message.
Results
The freshly defined brand has given Classroomscreen the perfect foundation to represent their values both now and in the future. By showcasing this brand through a new website, they now have a thoughtfully designed and user-friendly product, complete with delightful interactions and charming illustrations. With a future-proof codebase and CMS, the website aligns seamlessly with Classroomscreen's potential and beyond.
