Lego Facilitator App

Gabriele Westh Mannucci

0

Web Developer

3D Animator

GSAP

three.js

Vue.js

A Small Tool with a Big Purpose
The LEGO Foundation is on a mission to champion learning through play, backed by research showing how essential play is for children's positive development and future skill-building. But play is under threat. As “schoolification” intensifies, early education increasingly focuses on rote knowledge and test preparation, crowding out playtime. As Rane Willerslev points out in Tænk Vildt!, aiming for perfect scores stifles creativity and learning, equating “no errors” with excellence—a counterproductive approach to tackling complex issues.
Objective
To illustrate the role of play in fostering creative thinking, The LEGO Foundation developed an interactive tool with Dwarf. This tool allows adults—“grown-up children”—to play with virtual LEGO bricks on their smartphones, guided by a play and learning coach.
Imagine being asked to "Build a chicken using these 8 bricks." A simple prompt, right? Yet, as the designs flood the shared screen, participants realize there are countless ways to build a chicken, each unique to its creator. This exercise shows that creativity has no single answer. It’s an ideal icebreaker for teams before diving into serious work and, more importantly, a fun way to spark curiosity and stimulate creativity.
The Solution
This experience takes place in a mobile web app where a facilitator presents the task, accessible to participants by scanning a QR code. However, creating a digital experience that evokes the familiar feel of physical LEGO required an intricate blend of technologies and creativity.
To make it a collective experience, we used WebSockets, allowing the facilitator to control the timing and progression for all participants in real-time. With this, everyone shares the moment together: from the building phase to the countdown, everything unfolds in sync.
Digital inclusivity was crucial. The app had to function across browsers and even older smartphones. Using GSAP for animations, we optimized performance to avoid overloading devices. While older phones may not be as smooth, we ensured everyone could still participate.
To build the immersive LEGO world, we used Three.js to create an endless LEGO plate, locking the camera to keep participants centered. We used 3D models of iconic LEGO bricks that could be customized with colors, drawings, and text, with the UI coded in Vue.js. Here, we programmed 2D gestures on smartphones to control 3D movement, allowing participants to "place" bricks and even "sense" when they stack atop one another.
Finally, we built an admin tool in Laravel for coaches to customize tasks, such as defining the bricks and colors available and setting task parameters like time limits and brick requirements.
Outcome
While the LEGO Reflection Tool remains internal, available only to The LEGO Foundation’s international partners, it has been a resounding success since its launch in May 2023. The tool has enriched workshops for numerous organizations, and we even tried it ourselves during a team breakfast and at our latest Case & Cocktails event, “Playful User Experiences,” held in partnership with The LEGO Foundation.
Like this project
0

Posted Oct 28, 2024

A multiplayer 3D game where people can play with virtual LEGO bricks on their smartphones, facilitated by a play and learning coach. Vue.js + GSAP + ThreeJS

Likes

0

Views

1

Tags

Web Developer

3D Animator

GSAP

three.js

Vue.js

David Samling - Experience Website w/GSAP
David Samling - Experience Website w/GSAP
SaaS Application with Intuitive UX Design
SaaS Application with Intuitive UX Design
MAD.ONE - Shopify Ecommerce
MAD.ONE - Shopify Ecommerce