Reflection Tool

To promote understanding of how play stimulates our ability to think creatively, The LEGO Foundation has developed a small tool in collaboration with Dwarf, where a group of grown-up children (aka adults) can play with virtual LEGO bricks on their smartphones, facilitated by a play and learning coach.

"Build a chicken using these 8 bricks" could be one of the tasks given. It sounds simple, and most of us can close our eyes and visualize a chicken in our minds.

But as myriad chicken designs appear on the shared big screen, most people realize that there are thousands of ways to solve the task. We all have different mental images and creative solutions to different problems. There is no one right answer, but many different creative solutions to a task. And perhaps, together, we can create something new if we are good at listening to and challenging each other. 

It's a good icebreaker before tackling an important and maybe serious task. But first and foremost, it’s a tool meant to plant a seed of curiosity and awaken creativity.

The solution is a mobile web application where the facilitator presents a task that all participants can access from their smartphones by scanning a QR code. Fairly basic.   

The challenges arise when creating a digital experience that feels as tactile as playing with LEGO, where most of us have the sound, sensation, and perhaps even the smell of LEGO stored in our memories. Therefore, we have used a combination of technologies and JavaScript libraries to create the experience.

It should be a shared experience to build and reflect on, so we have used WebSockets for the facilitator to control the progression for all participants. Normally, in a browser, "you have to click something" for "something to happen." With WebSockets, we can push an experience from the backend to the participants' devices, so the building phase starts simultaneously, the countdown runs synchronously. This way, the use of the tool also becomes a social experience that everyone in the gathering goes through together.

It was also important for the solution to be digitally inclusive in practice. It should work on all browsers, even if you don't have a brand-new smartphone. We used GSAP to build the animations and put a lot of effort into not overloading with processing power and memory. We can't make the experience as smooth on an old phone, but we can ensure that you can still participate in the play.

To create a 3D universe, which is kind of necessary to play with bricks, we have used Three.js to build an infinite LEGO plate and locked the camera so that participants stay near the center. It is built based on FBX files/3D models of 14 of LEGO's most famous bricks (the 2x4 brick etc.) that can be coated with LEGO colors, drawings, and text. The UI is built in JavaScript and VueJS, where we have defined rules for how participants' 2D gestures on their smartphones should translate into moving the bricks in 3D and, for example, "sensing" if a brick is placed on top of another or at level 0, the building plate.

Just like real LEGO bricks and LEGO sets, we have developed an admin tool in Laravel where the Play and Learning coaches can define new bricks and colors and create new tasks for participants by specifying what needs to be built, which bricks and colors participants have available, how much time they have for the task, and whether all bricks must be used or if participants can choose to exclude some.

Now comes the slightly sad news. The LEGO Reflection Tool is currently an internal tool that is only available for play if you are one of The LEGO Foundation's many international partners.

It was launched in May 2023 and has facilitated workshops for multiple organisations with great success.

We also played with it ourselves during a Friday morning breakfast and at our latest Case & Cocktails event "Playful User Experiences" which was held in collaboration with The LEGO Foundation.