Lego

Building the blocks for an intergalactic experience.

Client Lego

Vertical Entertainment

The Challenge

In an effort to drive consumer engagement beyond the shelf and promote their on-going Rebels mini-series, Lego looked to us to create and implement an interactive poster builder for their top performing franchise.

sabine_rebel

Our Approach

With the need to execute a frictionless, localized experience on an accelerated timeline, we decided to take a technology-first approach. Having some long time fans of both franchises, we put together a small passionate, cross-functional team that could work collaboratively with Lego to craft a highly polished user experience with an equally polished high-performing, scalable client-side architecture.

DISCOVERY

discoveryuserflow

We hit the ground running by immersing ourselves in the technical architecture behind the Lego site and its robust Lego ID user platform, since our app would heavily integrate with both. As part of our discovery, we worked closely with Lego to do a content audit and map all relevant in-store products to various poster builder assets that would be unlockable through purchase.

USER EXPERIENCE

wireframes

To design the best possible experience for a younger audience, we started our wireframing process with extensive research and user testing on various “child-friendly” interfaces and games. We paired our results with best practice trends on cross-device functionality and created a quick, interactive prototype of the builder that we could iterate on and refine.

VISUAL DESIGN

Prototyping the experience first put us in a great position to simply skin the builder to match the existing look and feel of the LSW franchise. Keeping our young target audience (and localization) in mind, we decided to introduce a tutorial animation on the home screen and simple tooltips to guide the user. We kept our copy light and on brand, using it to compliment the intuitive calls to action, color palette and simple iconography that would ultimately drive the experience.

DEVELOPMENT

svgmask
codebase

We took a unique approach to the build itself, using a pair programming technique to fully maximize our speed and efficiency while establishing the codebase. Using a combination of AngularJS, Less, and Browserify, we were able to construct the build in a way that was both modular, and scalable to the Lego team’s needs. The real magic however, came through as we further optimized the experience through various back-end tricks; implementing functionality improvements like localStorage API calls for cross-tab communication, a dynamic HTML5 canvas for the poster creation process, and image downscaling using a combination of CSS3 and SVG masks to reduce file size by about 80%, all while maintaining the quality of the final printed posters.

View Project

LET'S CREATE SOMETHING TOGETHER

WORK WITH US