An illustrated world for the Lyric Theatre’s Waste Busters
A website for Waste Busters, the Lyric Theatre’s eco-musical for primary schools. Children aged 8 to 11 explore an illustrated map, meet the detectives in charge of reusing, recycling and reducing, and play the games and the quiz, while their teachers find the resource pack and lesson plans in Ella’s classroom.
Waste Busters in numbers
The challenge: three audiences, one classroom screen
A child had to want to explore it on their own. A teacher had to be able to put it on the whiteboard in front of thirty of them.
Waste Busters is the Lyric Theatre’s eco-musical for primary schools, a project from its Creative Learning department, funded by the Department of Agriculture, Environment and Rural Affairs through the Carrier Bag Levy. It teaches children aged 8 to 11 to reduce, reuse and recycle.
The website had to work for three people at once. Children needed somewhere that felt like a place rather than a page. Teachers needed it to fill a classroom screen and to find the lesson plans without hunting. Parents and teachers both needed to know that nothing a child did on it would be collected.
It also had to bring together work made by others: four games from a specialist games developer, and classroom resources written by the Lyric’s Creative Learning team. The site is what holds them together.
Our approach: make the map the menu
Four places, four characters, one map. The way around the site is the world itself.
The homepage builds itself as it arrives: the islands pop in, the buildings and characters rise, the title lands and the clouds start to drift. Point at a place and its building and character lift apart and its name appears. On a phone the map becomes a deck of cards, one for each place.
Each place is a room. Detective Roundabout’s workshop is for reusing and repairing, Detective Tinkle’s lab for recycling, Detective Shrink’s house for reducing, and Ella’s classroom is for teachers. The room arrives first, then the character, then a speech bubble that swings in on its tail, then the cards for the game and the quiz.
Every colour on the site comes from the artwork, so the pages and the pictures look like one thing.
What we built for Waste Busters
A world a child can wander around, set up to work on a classroom wall, and careful with everything a child does on it.
A map that is the menu
An illustrated map of four places, each with its character outside. It assembles itself once per visit, then each place lifts and names itself when you point at it or reach it with the keyboard. A short welcome on the first visit sets up the mission: help the Waste Busters.
Rooms that arrive in order
Every inner page is a scene: the room, then the detective, then their speech bubble, then two tilted cards for their game and the quiz. Each speech bubble and scene has a written description, so the story reaches a screen reader too.
Made for the classroom wall
On a desktop or whiteboard each scene is sized to the screen, so there is no scrolling with a class watching. Touch screens have no hover, so there every label shows from the start. On a phone the map turns into cards and a “Back to the map” button stays in reach.
Games that sit inside the world
Three games and a thirty-question quiz from a specialist games developer, set into the site. Each opens from its detective’s room and carries a “Back to” button that names the room the child came from, so nobody gets lost between a game and the map.
A classroom for teachers
Ella’s classroom gathers what a teacher needs in one place: a link to register the school with Eco-Schools NI, the resource pack, and the curriculum and lesson plans for P5 to P7 in one combined PDF.
Careful with children
The cookie banner gives “Accept all” and “Essential only” the same weight, analytics wait for a yes, and a no is remembered. The games are not tracked. The privacy, cookies and accessibility pages are written in plain English for children, teachers and families alike.
The Tech-Spec
Hand-built HTML, Sass and plain JavaScript, with no framework and no CMS, so there is nothing between a child and the page. Every piece of movement on the site is CSS, and all of it switches off when a device is set to reduce motion. The games are Unity builds, each set into the site with its own way back. We host it and look after it.
HTML5, Sass, JavaScript, CSS animation
Static pages, no CMS or database
Unity WebGL games from a specialist developer, Google Analytics behind a consent banner, Google Fonts, sharing images, XML sitemap
Services on this project
Most of our clients use more than one.
Bespoke websites
Designed and built from scratch around your business rather than adapted from a template. Every page and every field is there because it earns its place.
→ 02Maintenance
Updates, backups and security handled quietly in the background, so problems are dealt with before they become urgent.
→More work
A few of the other projects we have built.
