The global LEGO Shop (e-commerce) redesign.

    My Role
  • As Lead Designer I was responsible for design direction, UX, UI, and all things design and experience related.

The Brief

Redesign the e-commerce experience to help drive brand recognition and ultimately revenue.

Translate the brand's uplifting identity into an online experience that compels users to browse and shop.

The Goals

Inclusive of all key D2C shopper personas.

Greater source of engagement and opportunity to tell brand story.

Driver of traffic and time spent on LEGO web properties.

Platform for future growth and global preesence.

Encourage conversion, generate revenue, and foster stronger D2C touchpoints.

Background Info

This project all started because LEGO was undergoing a company initative called the Digital Brick. The strategy behind it was to elevate LEGO's brand presence online as it had fallen behind due to their focus (in the years prior) on retail and product offering. This e-commerce redesign was the initiative's first step and it was a massive undertaking because the release was targeted for all regions worldwide.

During my time on this project, I visited many different LEGO offices around the world including Enfield, London, Billund, and Munich and got to work with a lot of passionate people at LEGO.

Shopper Personas

Busy Dad

Knows what to get and wants to make the purchase quick with minimal browsing


Price sensitive and does a lot of research. Big on LEGO's reward system (VIP).

Clueless Relative

Unsure what to get. Afraid of making the wrong purchase.

Child with an Allowance

Indecisive and spends a lot of time thinking about what to actually get.

The Fanatic

The power user. Owns thousands of pieces and likes to purchase individual bricks.

Creative Educator

Uses LEGO as an education tool. Also consumes relevant content.

Design Principles

To help craft a better LEGO Shop experience, all design thinking are focused around five shopper-centric pillars identified through ethnographic research of the personas. These five pillars highlight the critical path to an improved experience, and is reflected throughout every stage of the design process.

The Pillars and Quotes


  • "LEGO is a part of our lives"


  • "This LEGO experience is just for me"


  • "This LEGO set helps develop my child"


  • "Buying this LEGO set is easy"


  • "LEGO makes me happy"

Highlight slides taken from design principles deck

Existing Site

This was LEGO's e-commerce website before the redesign effort. It first went live in 2011 and besides basic content and merchandise updates the site had otherwise been left untouched.

So by the time I took on this project, which was 2015, the website was practically living on its last legs.

Visit the Old Site

High Level Analysis

  • Navigational mess
  • Information architecture unclear with overlapping categories
  • Outdated design with max width of 960px (browser data taken from analytics showed most users already had screen sizes of 1280+)
  • Not optimized for mobile (there was a m(dot) version, but only navigation was different)
  • Lacks visual hierarchy (with the exception of the mainstage, everything else looked the same)
  • No brand presence besides the logo (this was extra troublesome, because a lot of people thought it was a fake site)

The list goes on...

Screenshot of LEGO's original e-commerce homepage

Design Process

In an effort to keep this concise, I will be highlighting select parts of the redesign.

The whole work spanned across hundreds of modules for thousands of pages, so it would be impossible to show everything.

Navigation and IA

After my initial analysis, I was convinced that this was the most important part to get right and thus was where I focused my early efforts. The existing solution just needed an absolute overhaul and from a UX point of view, navigation (being able to efficiently find things) in e-commerce is the most critical piece.

Analyzing The Existing

  • 4 rows stacked coming in at 220px tall. In an age where a substantial amount of monitors had a max height of 720px, 220 equated to about 30% of the screen's heighth and that's not even taking browser chrome into consideration.
  • The overwhelming amount of stuff impacted usability a lot.
  • Search placement was awkard. It had a lot of real estate, but positioning was neither aligned nor was just there. Search was also just a string search and not really helpful.
  • 2 different account sign in's. 1 used log in and register, the other used sign in and sign up. Even the language was inconsistent.
  • The shop logo was really the only branded element. Take the logo away and you won't even know what site you're on.
  • The banner ad took a lot of empahsis. It was the only element with a background color and it was dead center of the whole header.
  • The actual browse navigation was the last element. The taxonomy was inconsistent in its hierarchy, which was mostly caused by the weak IA of the site.

Early Explorations

From a design standpoint, the biggest thing was definitely to reduce and condense wherever I could. If things were redundant then they were killed and if things were related then they were combined.

Important note: I was working on the IA simultaneously, so the taxonomy in the screens throughout will be different. All designs in the process were also done mobile first, however I will mostly only show desktop to keep it concise.

Subset of the early concepts and explorations

Testing It

By utilizing tools like, I was able to quickly decipher what worked and what didn't relatively quick. Besides the obvious usability testing, I also got to indirectly see if the designs were an improvement by simply setting a screener for people who have used or made purchase on and then just seeing what they had to say.


As mentioned earlier, I was also working on the information architecture during this time. In the old site, there were a lot of overlapping sections and categories. In some instances certain modules were given no parents and thus were linked all over the place (some even at root level like the 'age range' filter).

To remedy this I went through the whole site and did a sorting exercise. I grouped, removed, and created new sections, e.g. in the old site 'categories' was essentially just tags given to different product themes, but it shared the same level as the actual LEGO themes. 'Exclusives', 'What's New', and 'Sales and Deals' were all promotions, but there was no overarching promotion category so they all had their own section and lived on the homepage. And then there were things like certain cateogry tags that were actually promotions, but for some reason were listed under categories instead.

In terms of taxonomy, the goal was to simplify the top as much as possible and I concluded with Sets, Exclusives, Bricks, and Extras.

  • Sets is the full product catalog, the stuff you see when you walk into a LEGO store.
  • Exclusives has been repurposed to be the parent for all promotions.
  • Bricks is for people who want to purchase individual blocks (non-set).
  • Extras is the misc. section for things like storage containers, video games, education content, etc (non-set).

Obviously each section was then further broken down, but the key thing here is theres now a clear hieracrchy to the website.

Final Wireframes

This was the final wireframe version (additional evolution happened within UI)

Visual Design Direction

Before my team and I could proceed and create any UI, I had to first come up with the visual design direction. During this time, most e-commerce platforms for the biggest brands favored a clean minimalistic look. But deep down inside I felt that wouldn't be right. LEGO as a brand has a very unique personality, so going with the trend just didn't make any sense. I wanted to come up with a direction that would make sense for a special brand like LEGO.

I spent a good couple weeks thinking about this and eventually the inspiration came when I visited a LEGO store on one of my days off. What's funny is I had visited this store many times before, but this time it felt different. The sharp yellow took my breath away. For once, I noticed the contrast it created against the two adjacent stores—both of which had a very empty and white feel. Once inside I immediately sensed the fun and joy, and that's when I realized the direction was there all along. I didn't need to create something 'new', I just needed to bring the already hugely successful retail experience to the web.

I named it Store Gone Digital.

Final Design

Using the aforementioned 'Store Gone Digital' direction, this is how the final design of the navigation looks like.

  • Navigation States


The holy grail. The first page everyone sees when they shop for LEGO online. Whether they bounce or go down the funnel to conversion is strongly dependant on the experience of this page.

The Thinking

Convey a clear value proposition

  • Ensure key value propositions are communicated through home page content and offerings, and that they are tied to the prioritization of the new IA structure.

Tell the LEGO brand and product story

  • Use content, particularly images and copy, to highlight the LEGO brand story for the shopper. The home page should create an immersive experience that immediately conveys the premium quality of the LEGO brand.

Do not throw users into the deep end

  • Balance links to specific products with approachable content that encourages users to explore the site through wayfinding.


Using the thinking above, I created many different layouts with varying focus and structure. I initially started with sketches, but eventually moved to paper prototypes to make the process quicker and easier to test down the road.

Some lo-fi wire sketches that were created

Paper prototypes showing different layout options and module possibilities

Final Wireframe

This was the final wireframe version (additional evolution happened within UI)

Applying Store Gone Digital

I wanted to be very deliberate in how I applied the design direction for the homepage. Because LEGO retail stores are designed and constructed with very specific techniques to entice people to stay, play, and browse, I used that as a reference point to finalize my pitch for the homepage layout as well as the visual designs.

Unite the physical and digital store as one cohesive experience

Final Design

Creative Explorations

In addition to the experience and interface redesign, I also came up with some creative ideas.

Some made it to the final build and some inspired additional ideas.


A picture speaks a thousand words. For a brand that is so intrinsic to imagination like LEGO, the possibilities are endless. I had an opinion that through various methods and techniques (e.g. juxtaposing LEGO pieces), I can effectively create any messaging or story. A story beyond the branded themes and sets, a story that can be told through LEGO bricks.

The approach of the existing shop site was very product and action focused, while storytelling—which is a big part of the LEGO brand—was significantly missing. This created a disconnect between LEGO as a brand and the products it was trying to sell.

The Inspiration

I was inspired when I stumbled upon some LEGO fan work. Specifically the recreation of some famous movie scenes (examples below).

Source: Alex Eylar

The Test

I grabbed some LEGO pieces, took some shots, and then along with a couple additional examples made a pitch to the LEGO team.

The Result

The LEGO team liked the idea, however instead of shooting the images, they decided to utilize 3D assets of their products to build out the vision.

The final creative can be seen being used throughout the website (example below).

Using LEGO pieces to create a party


The redesign was a huge success.

Without divulging exact metrics, I can confirm that all conversion, sales, and engagement have improved significantly. This version of LEGO shop was live from early 2016 to late 2019.

Want to See More?

A lot more work has been put into this including a comprehensive style guide (220 pages), voice guidelines (for copywriting), full mobile responsive designs, localized designs for all regions, and more.

Don't hesitate to reach out if you want to see more

Contact Me