Playground
An illustrated learning world for the youngest grades, rebuilt from the ground up. Every screen hand-drawn, every interaction made to delight a child still finding their feet.
01 CONTEXT
Built for the youngest learners
Playground is a separate product in the Izzi family, built for school grades one to five. It shares some skeleton data with Bookshelf but has its own audience, look, and logic. It is a fully illustrated world where every interface, button, and interactive element is custom artwork, with horizontal scrolling and a heavy focus on gamification.
Izzi brought us in when Playground was an early-stage product in rough shape, with no system holding it together. We rebuilt it from the ground up. Every illustrated UI element is ours, with some backgrounds by teammates and the animated characters supplied by the product's owner.
02 PROBLEM
Good idea, rough product
The concept, a playful illustrated world for little kids, was sound. The execution was rough, built without a designer who understood interfaces. Three problems stood in the way.
No system, and it showed everywhere
There was no design system of any kind. Graphic assets had been made without UI or UX background, so they barely worked as interface, and the design language drifted from screen to screen. Nothing shared a foundation, because there was no foundation to share.
A visually led audience
Grades one to five spans children just starting to read through fairly confident readers. The interface cannot lean on labels and menus the way an adult product can. It has to communicate through illustration, motion, colour, and reward, so a young user finds their way by sight.
An enormous hand-drawn surface
A fully illustrated product is an enormous surface area. Every screen, control, and interactive element had to be drawn, then kept visually consistent. Consistency at that scale, by hand, was the real constraint behind every decision.
03 WORK
Rebuilding the world, then filling it
The work started with the visual language itself and moved outward into the features built on top of it. Five areas covered most of it.
01 THE OVERHAUL
A coherent illustrated language
Before any feature could be fixed, the visual foundation had to exist. We rebuilt Playground's illustrated language from scratch: a consistent style for interfaces, buttons, and interactive elements, drawn to work as UI rather than decoration. A world that feels handmade and alive to a child while behaving like a real system underneath.
02 THE HOME
A hub optimized for visual navigation
The Playground home is the equivalent of the Bookshelf shelf, reimagined as a place rather than a list. Content is organised by grade and class inside an illustrated landscape the animated characters live in. Navigation leans on imagery and horizontal scrolling, so a child picks a grade, a subject, and a game by recognising pictures. The front door had to feel like somewhere worth being.
03 E-GRADIVO
The shelf made physical
E-Gradivo is the part of Playground closest to Bookshelf: a scrollable library of learning materials, regular and interactive PDFs alike, reskinned into the illustrated theme with a physical cartoon shelf that moves as the child scrolls. Same job as the Bookshelf shelf, dressed as a tangible object a young user understands at a glance.
04 THE GAME PLAYER
Built for momentum and reward
The game player runs Playground's interactive challenges and lessons, and it is where the gamification lives. Progress, scoring, and rewards, the clover and XP system, are woven through to keep a young player moving from one challenge to the next, balancing real learning content against the pacing and feedback a child needs.
05 FLIPBOOK
A reader for the illustrated world
Playground's Flipbook is the interactive PDF reader, given a complete redesign to align with the illustrated theme. New navigation, new controls, all redrawn to feel like part of the same world. It is the reader the Bookshelf version never had time to become.
04 DECISIONS
Two defining calls
Most of the rebuild was steady craft. These two shaped the product's character and how far its work could reach.
CALL 01
Draw everything custom
A fully hand-illustrated product is slow and expensive to make. The safer route was templated or stock-style assets, reused and recoloured, to cover ground quickly. The harder route was custom illustration for every screen and control, with a far higher bar for consistency.
WHAT WE CHOSE
Custom, end to end. For an audience of small children, the illustrated world is the interface. Cheap or generic assets would have read as exactly that, and Playground's whole appeal rests on feeling handmade and alive. So every element got drawn, and the system kept it coherent.
TRADE-OFF
It was a huge amount of illustration work, and it made the product slower to extend. Worth it, because the custom world is the reason Playground works for the children it is built for. A generic version would have been cheaper and forgettable.
CALL 02
Build the player to travel
The gamified player was designed for Playground first, where gamification belongs naturally. The question was whether to keep it tightly fit to the illustrated world, or build it so a variant could later run inside Bookshelf, which meant designing for more than the world it was born in.
WHAT WE CHOSE
Build it to travel. The player was structured so its interactive content, scoring, and pacing could carry into a Bookshelf variant. One player ended up running the interactive lessons across both products, a better use of the work than building it twice.
TRADE-OFF
Designing for two homes meant the player could not lean as hard into Playground's illustrated style. Acceptable, because a shared player brought interactive content to students in both products from one foundation instead of two drifting apart.
05 OUTCOME
What shipped
Playground shipped as a fully illustrated learning world for grades one to five, rebuilt from a rough, system-less start into something coherent. The illustrated home, the E-Gradivo library, the gamified player, and the redesigned Flipbook share one visual language. It is a product a small child can navigate by sight.
One lesson carried forward: protect the system underneath the art. Keeping the illustrated style consistent by hand, at that scale, was a constant pull. More reusable illustrated components early would have made every later screen faster to build and easier to keep on-style.
- 5
- grades, one worldBuilt for school grades one to five, the youngest learners in the suite.
- 1
- product, rebuilt ground upTaken from a rough, system-less state to a coherent illustrated product.
- 100%
- custom illustrated UIEvery interface, button, and interactive element drawn by hand.
