ClassDojo is a leading communication and classroom management app for primary education. Working with their product and communications teams, I was responsible for creating a design system that unified their interfaces in look, structure, and implementation while amplifying existing brand expression and ensuring the visual language was accessible and enticing to all audiences, from K-6 students to teachers and parents. It was critical that the system be comprehensive enough to cover all of their products and platforms, but remain simple enough for new team members to apprehend quickly.

Starting with the existing brand colors, we enlivened the hues and expanded them into a simple and juicy palette designed for componentry and user generated content. 

Starting with the existing brand colors, we enlivened the hues and expanded them into a simple and juicy palette designed for componentry and user generated content. 

​​​​​​​

We used the brand’s existing typeface in a bolder and more intuitive type scale that relies on size to establish hierarchies. This makes the rules of system easier to follow and mirrors the intuitive way most people create typographic emphasis in the real world.

A single grid system governs the placement of type, imagery, containers, and content blocks. This obviated component-specific metrics and made it easier for product designers to adapt their designs to different screen sizes. The use of different gutters for type and imagery allows for more optically harmonious margins and a more organic feel to the composition.

Components are intended to evoke unbreakability, with an emphasis on obviousness and semantic use of shape, color, and type. They were created and edited in realtime in response to the needs of product designers and engineers.