Lego
Building The Blocks For An Intergalactic Experience
- Product UI/UX Design
- User Experience Research
In an effort to drive consumer engagement beyond the shelf and promote their ongoing Rebels mini-series, Lego looked to us to create and implement an interactive poster builder for their top-performing franchise.
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.
- Product UI/UX Design
- User Experience Research
Discovery
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
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.
Brand Experience
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
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.
