MOMENTS
MOMENTS Conscious Education teaches children the skills school tends to skip: how to notice a feeling, name it and find their way back to calm. The method is a framework of seven steps, one for each letter of the name, built with the University of East London's Institute of Early Years Research. Our job was to make the website feel as calm as the method sounds, and to turn a seven-step framework into something a tired parent actually wants to read.
Services provided
- 01Website design: six pages, desktop and mobile
- 02Framework diagrams: the seven steps, the five pillars and the 4 S's
- 03Interaction and motion design
- 04Design system and tokens
- 05Clickable prototype
- 06Copy editing
Three audiences come to the site with three different questions: parents, educators and the partners who want to carry the work further. So the site splits early into two pathways, one for the classroom and one for the kitchen table, with one framework and one vocabulary between them. The palette comes from the program itself: seven soft colors, one per step, on warm paper instead of clinical white. Serif headlines with an italic for the words that matter, a quiet sans for everything else, and no stock-photo sunshine.
Every letter in MOMENTS is a step: Mind yourself, Observe, Move & breathe, Empathise & name, Nurture connection, Think & choose, Strengthen & repair. We drew each one as a circle of dots, the way a child counts, and let the dots find their places as the row scrolls into view. Hover a circle and it turns over to tell you, in one sentence, what that letter asks of the adult in the room. The framework stops being a list to memorize and becomes something you can play with.
On the Framework page, the seven steps hold still while you scroll: one step at a time, with a big italic letter, the pillar it belongs to and a bar that fills as you go. The site was commissioned by HRH Princess Noor bint Asem, and we designed it together with Capital D Studio in Dubai. This is the slowest part of it, on purpose. A method about pausing shouldn't be read at a sprint.
The same rules run through every diagram. The five pillars are overlapping petals that light up one by one, the 4 S's of secure attachment turn as a wheel, and a curtain in the seven step colors drops between pages. All of it lives in a design system with tokens, components and their open and closed states, so the next page, the next program and the next developer don't have to guess.
Design systems
Calm is a system, too.
MOMENTS comes with a live design system: the seven step colors, type, the logo, every component in its open and closed state, the diagrams and the motion. Built for whoever takes it from here.