Creating a Digital Poster Builder Experience

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.

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.

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.