Creating a Digital Poster Builder Experience
What if...
In an effort to drive consumer engagement beyond the shelf and promote LEGO’s ongoing Rebels mini-series, DS wondered if we could create and implement an imaginative interactive poster-builder for LEGO’s top-performing franchise.
We did...
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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.
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.
What's next?
Let's help you create your next digital product innovation.
