Introduction

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.

Type

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.

Color

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.

Grid

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

Components evoke unbreakability, emphasizing obviousness and semantic use of shape, color, and type. They were designed in realtime to respond to the needs of product designers and engineers.

Product

Date

Category

Industry

Client

Lead

Art Direction