LEGO CLUB / WEB

LEGO

Improving page load through vectors

 

Play is vital to every child’s development. When children play, they learn to solve problems, to be creative, and to become resilient. It helps them thrive in a complex and challenging world. This is the heart of the LEGO play promise. With it’s own magazine originally called Brick Kicks (US), Bricks n’ Pieces (UK) and later LEGO Mania Magazine, LEGO Club featured many things such as LEGO products, special offers, comics, games, contests, modeling tips, and more.

OPPORTUNITY

One of the challenges for LEGO in the early 2000s was producing content that balances rich and engaging design while also avoiding a heavy file size that results in a long page load. I have a passion for vectors, so the UI for LEGO Club was designed in Illustrator, exported as a bitmap in Photoshop, and finally using the illustrator file as a “map” in outline view, recreated as a single pixel movie clip in Flash that’s duplicated, scaled and tinted to match the bitmap from Photoshop.

RESULTS

Using the Flash engine for both animation and cutting-edge compression, the entire page weight was reduced drastically from an uncompressed jpg of 8mb to a lossless Flash vector, full page of 17k with no compression artifacts and subsequently no reduction in quality or experience.

I also conceived the original Club Minifig Identity Badge that has become part of the lego.com experience.