• Client: Playivity
  • 2026
  • Delivered
Movi Move
Lexi Think
Emmi Feel
Nexo Connect

UI/UX design · Design system · Character animation

Movement data that feels like play.

Playivity measures how children aged 3 to 11 move at school. I gave its platform one design system, four animated Pals and its five core screens, ready for its engineers to build.

How did we do? See the screens
The cast 4Pals characters, animated and placed across the platform Move · Think · Feel · Connect
The motion 12loops every Pal in three states, as video ready to embed Celebrate · Ready · Encourage
The system 1system one set of tokens for every screen, light and dark Dashboard + admin, together

The problem

It worked. It just didn’t feel like play yet.

Playivity’s wearables and Playposts were already sending live data into a working React app. But the teacher dashboard and the admin area had grown into two different looks, and the interface didn’t feel playful or made for children.

Their engineers needed one source of truth to build from. The children needed something that celebrates moving and never shames sitting still.

  • Ages 3 to 11Big, clear and friendly, without talking down.
  • Live dataStreaming in from wearables and Playpost stations.
  • Two roomsA teacher’s laptop and a whole-school assembly screen.
  • No shamingCelebrate moving. Nudge sitting still, gently.

The Pals

Four Pals, four ways to grow.

Each Pal stands for one domain of physical literacy, and each one has three looping states. They turn up where they help: dashboard headers, Let’s Play, the Playpost screen and the assembly summary.

Movi

Physical

An energetic explorer who loves to move.

  • Movi, Celebrate pose Celebrate
  • Movi, Ready pose Ready
  • Movi, Encourage pose Encourage

Lexi

Cognitive

A curious thinker who explains and discovers.

  • Lexi, Celebrate pose Celebrate
  • Lexi, Ready pose Ready
  • Lexi, Encourage pose Encourage

Emmi

Affective

A kind encourager who looks after wellbeing.

  • Emmi, Celebrate pose Celebrate
  • Emmi, Ready pose Ready
  • Emmi, Encourage pose Encourage

Nexo

Social

A team motivator who brings everyone together.

  • Nexo, Celebrate pose Celebrate
  • Nexo, Ready pose Ready
  • Nexo, Encourage pose Encourage

The big moment

One pink button turns a week of data into an assembly.

“How did we do?” walks the whole class through its week, one big number at a time, with a Pal for each win. Figma can’t play motion, so I also handed over a runnable reference for every entrance, count-up and confetti burst.

How did we do?

Owls school · Class C · this week

Movi · Power Play

42min

We smashed Power Play!

+12 over goal

Movi · Steps

6,842steps

Look how far we walked!

+842 past goal

Emmi · Feeling good

46%

A brilliant balance!

Almost half our day was active, and we rested too!

Nexo · Together

80%

We did it as a team!

Whole-class win

Lexi · Did you know?

Class C led the whole school in Power Play!

Top of the school

Brilliant week, Owls!

See you again next week 👋

Rebuilt here from the delivered design and motion reference, with its demo data.

The system

One system, from the laptop to the assembly hall.

The dashboard and the admin area now share one set of tokens for colour, type, spacing and radius. Every colour has one job everywhere, so a chart reads the same way on every screen.

Every colour has one job

  • Sedentarysitting still
  • Light activitymoving about
  • Power Playheart pumping
  • Stepsevery one counts
  • Pupilswho’s on target
8% 34% 58%
Mon
12% 38% 50%
Tue
8% 32% 60%
Wed
8% 34% 50%
Thu
8% 34% 50%
Fri

Red is reserved for real errors. Sitting still is a calm grey, never a fail. Charts here use the design’s demo data.

Charts a child can read

Standard charts became things you get at a glance: buckets that fill up as the day adds up, and thermometers that warm up towards the goal.

Movi says: Awesome! Both goals are met today! 🎉

35/ 30 min
MVPA time+5 over goal
6,480/ 6k
Daily steps+480 over goal
This week’s energyWarming up → Goal!
72% Mon
85% Tue
64% Wed
92% Thu
78% Fri
8,420 School Overview Average MVPA across all pupils this week. Mon–Fri · Weekly average

Fredoka for titles and numbers, big enough to read across a hall. Inter for everything a teacher reads up close.

Met On track

Generous corners and chunky pills on an 8-point grid.

A hand-drawn icon set that matches the Pals’ ink lines

The screens

Every key screen, down to the empty state.

School view, class view, Let’s Play, the 3.5-inch Playpost screen and the “How did we do?” summary, each with its default, hover, active, disabled and empty states, in one clickable Figma prototype.

School Overview
Playivity School Overview in the light theme Playivity School Overview in the dark theme

Light for the teacher’s laptop. Dark for the big screen. Same layout, same tokens.

Class overview with buckets, thermometers and the Sedentary threshold chart
The class view: targets filling up, the week’s energy, and a gentle check-in from Emmi when sitting time runs high.
School Overview on a phone in the dark theme
The same system on a phone.

How I built it

Built to be built.

Everything lives in one Figma file: tokens, type, icons, components and screens. Their engineers read it in Dev Mode and build it in React, against their Rust and GraphQL backend. My job was to make the calls that keep it consistent.

  1. 1
    Wire to tokens, never to hex.Every colour carries a light and a dark value. Bind a component to the token and both themes come for free.
  2. 2
    The wording never shames.Progress reads as how far there is to go. Sitting still gets a gentle nudge, never a red fail.
  3. 3
    The chunky button means action.The raised 3D style is kept for real moments like Start game and How did we do? Everything else stays flat.
  4. 4
    Auto Play has no start button.It runs whenever Playposts are connected, so a teacher never has to remember to switch it on.
  5. 5
    The top bar stays for teachers.Overview, Classes and Let’s Play. Admin lives in the avatar menu, out of the way.

Delivered.

The design system, the Pals and their 12 loops (shipped as 25 takes to pick from), five high-fidelity surfaces and the handover pack. Playivity’s own team builds it from here, from one source of truth.

Next side quest Sequenced Designs Instagram story sequences in a studio’s house style, then exports them as editable layers for Canva.
Yanis Schweizer
Want something like this built? I decide, AI types. You own the code. Fixed price.
Book a call All quests