Learningthroughplay.com is the "mother ship" for the LEGO Foundation, a content hub where you can find everything from a large catalog of playful activities and games, reporting from the foundation's various projects and news on scientific research into children's play and learning. The target group is parents, teachers (and children), as well as other stakeholders and decision-makers, who influence the attitudes to - and the framework for children’s play and learnings.
The LEGO Foundation is in it for the long run and promotes the purpose with its own projects and through partnerships within 20+ countries around the world. Learningthroughplay.com must therefore also play a part in creating new relationships and partnerships so that the goal of constructive impact on the lives of 75 million children can be realized.
The user experience is playful, and the navigation is simple. The design is based on a CVI created by Stupid Studio. It is unfolded digitally with some playful non-disruptive visual means, taking into account, that the target group is not children, but their parents and teachers - and decision- makers in the field. All content is structured and bound together so that it supports an exploratory behavior on the site, guiding users browsing games that supports creative thinking and problem solving to relevant projects and research in the same field. No dead ends.
The platform consists of a headless Umbraco CMS and an API-coupled frontend built in Vue.JS and Nuxt. The solution consists of modular and flexible building blocks and a color palette with associated complementary colors, that can be combined in countless ways, not unlike LEGO® bricks. Used to further develop the primary site – or to launch additional campaign or partner sites in the future, with no needs for development assistance, and thereby quickly support new initiatives digitally.
It is not just "mobile-first" - it is "old mobile-first", as the solution must also work on old smartphones with slow internet connections. Now it's getting a little nerdy: We are using Intersection observer to control when content is downloaded and played, making sure all resources are used on what’s currently visible in the user's viewport. Similarly, we use lazy load and vimeo's ability to control video quality/resolution, to make sure hat all data power and internet speed is spent on exactly what’s visible to the user right now - or what appears in a few seconds, when the user scrolls further down the page.
Similarly, we use Lottie for animations on the site. They are created in After Effects under strict "visual dogma rules", so all output becomes scalable vector graphics, that take up minimal space and can scale to all screen sizes without losing quality. Together with the color system, which is similarly built to secure good readability across all old screens and devices, the individual user gets as good a digital experience as the technical framework allows.