The LEGO Group
Hero Stories and 3D on kids.lego.com
A new 3D navigation concept for a global kids' platform: built end-to-end, fast on low-end phones and usable by every child.
Context
kids.lego.com is LEGO's platform for children, live in 73 markets and 30 languages, including right-to-left scripts. Campaigns for Disney, Marvel, Star Wars, Ninjago, F1 and the World Cup ship on it all year, built by a team of 11 developers and 10 designers.
Hero Stories introduced a new way to move through a campaign: 3D elements and rich animation instead of a classic page. It had to feel magical on a cheap Android phone as much as on a new iPhone, and it had to work for children using a keyboard or a screen reader.
What I did
- Built the entire Hero Stories page myself, as the first implementation of the new navigation concept.
- Built 3D scenes in React Three Fiber, including Find the Frogs, a three-level hidden-object game on GLB scenes with interactive meshes.
- Made 3D affordable on low-end devices: a GLB build pipeline (GPU instancing, KTX2 textures, meshopt compression), device-based quality tiers that adjust pixel ratio and antialiasing, and scenes that load only when needed.
- Rebuilt the loading of the 360° vehicle viewer so it no longer downloads hundreds of images upfront: frames load in stages (in view, then idle, then on interaction), at low priority, with concurrency limits and cancellation.
- Made the 3D accessible: every hotspot has a real, focusable button behind the canvas, and scene changes are announced to screen readers, as part of the platform's WCAG 2.2 AA work under the EU Accessibility Act.
Outcome
- Hero Stories reached millions of visitors in its first two months.
- LEGO promoted the campaign in its stores, online and on the giant cube at LEGO HQ in Billund.