Case study: Navigation redesign on LEGO.com

Ease of navigation as the key performance driver of NPS at LEGO.com

Chris Davies-Anipole
8 min readFeb 18, 2022

Shortly after securing my role at The LEGO Group in 2020, I was tasked with tackling and redesigning the Navigational site structure of the LEGO.com site. The site has a few different uses; we use the site to discuss all of our brand communication, news, and policies. The site is also an e-commerce platform where we sell up to 1000 different sets in 32 countries globally and we also provide an engagement platform for kids to engage with the brand in a fun and interactive way.

Every day more than half a million LEGO ® fans visit our online store on LEGO.com to discover new play experiences and buy their next dream build. The digital experience is essential in adding to a delightful shopper journey, to ensure that customers keep coming back for more engaging and reliable content.

I started my discovery by connecting with many areas of the business: Marketing, Commercial Trading, Corporate Communications and Consumer Support Services were my primary targets to identify their biggest needs for LEGO.com to understand how I could best serve them.

I also spent a lot of time talking to actual users of lego.com focussing on our three primary audiences: Shoppers, researchers and AFOLs (Adult Fans of LEGO) It was important for me to understand their individual experiences and provide their thoughts on how I could improve on that. This feedback was gathered in many ways such as surveys, usability tests and quantitative data with analytics tools.

After gathering and processing this insight, I went on to was to map out what we currently have and how the current navigation structure works. The structure we had at the time was the product of an evolution of changes, we didn’t have a clear view of where things were, so I had to create a site map of the current experience before thinking about areas of improvement.

What problem are we trying to solve?

LEGO.com has struggled with a navigation structure that doesn’t tailor to visitors who are not familiar with the LEGO brand. We want to help medium and low-affinity shoppers discover products with ease based on their objectives when visiting the site — whether it is for gift-giving or buying for themselves. These shoppers are also often new visitors to lego.com. As an example, the below quote is from a participant interview, where they expressed their feelings once on the site:

“I feel overwhelmed, there are so many options, I don’t know what they mean. I do not know where to start….”

This was one poignant and recurring theme that was given quite a lot which served as a key pain point to overcome.

Objectives:

  • Ensure that the navigation and categorisation is consistent throughout all menus
  • Reduce brain load when browsing through the different options by making the navigation familiar by having some likeness to other well-known e-commerce sites
  • Ensure that our regular (high-affinity shoppers) still find it easy to use and understand
  • Improve the micro-interactions on the site to enhance the usability of it
  • Expose non-product based content on the site (i.e. Sustainability, News and brand perception elevation)
  • Tidy up the footer to allow ease of finding relevant and important links
  • Specifically, improving the mobile experience for usability and discoverability

With those objectives in mind, it was important to refine each journey based on the reason why people visit the site, by streamlining the starting point by unearthing the three main uses for a visitor. Shopping for something which I defined as a primary reason of looking for a product, secondly the browsers — people looking for news and discovery of new products and lastly, we have a large proportion of people who come to our site because they need some kind of help and support which I wanted to define as the third and final important navigational path for our visitors.

What is the expected outcome?

An intuitive navigation device that allows shoppers who have never visited the LEGO.com site before, or even has any prior knowledge of the LEGO brand, to browse with ease, be inspired and be able to view products. Additionally, inform our customers about the business and why they should consider buying LEGO products. We want to make every visitor feel welcome on the site.

Particularly, the main navigation should:

  • Create consistency across all navigation options on LEGO.com
  • Inspire the user to want to make a purchase
  • The navigation should lead them to suitable PLPs (product listing pages) based on their criteria
  • They should not have to make too many clicks to be inspired by a range of products
  • Quickly able to focus on what is important for them during that particular session
  • Use of filters may be required, but the navigation categories should do a good job of helping them to already start to feel excited and give them many products to choose from without overwhelming them
  • Remove the noise, ensuring the navigation contains only relevant categories to excite and delight. Strip back duplicated site information
  • Allow the site to talk about non-product content and collaborations with other companies that aren’t purchasable on the lego.com
  • Allow the site to have a clear CTA to ‘KIDS ZONE’

Data-driven design

The key to this work was a refined reorganisation from an IA (Information architecture) perspective.

Once I believed I had a proposed solution to alleviate those above-mentioned pain points, I ran multiple tree testing exercises where I asked users (over 1000 in total) to sort through options to identify which options best linked together — giving first-hand feedback whilst working iteratively on the final solution.

Simplicity was my focus every day — eventually simplifying from eight top-level options to three was a bold move but a necessary one.

By reorganising down to three options, we found that users were able to get to what they were looking for quickly, they had to make one initial option out of three, then once they were in the mindset, they found it far easier to sort through their options, eventually arriving at the page they wanted to.

Visual makeover

Originally, our navigation took a horizontal approach — having eight top-level options with dropdowns under each option.

A research study “A comparison of three-level menu navigation structures for web design” by Jennifer Rose Kingsburg indicated many benefits for having primary navigation on the left side. When users navigate an interface, they require speed. The faster it is for them to find what they’re looking for, the more time they’ll save on their task. A common navigation pattern that needs speed is the three-level menu. You’ll often find it on dashboard interfaces and desktop applications.

As speed and ease of finding things was a key marker of our success with this redesign, the way to increase the navigation speed of a three-level menu is to use the optimal layout (Top-Left-Left) — so that is exactly what we did. We now internally refer to our three levels as Parents, Children and Grandchildren.

This decision to switch from a traditional drop down to a slide-out panel also helped with consistency across different devices and resolutions especially as the mobile traffic to LEGO.com is almost equal to desktop currently.

Usability testing

Once we felt that this was in a good place, I ran a usability test with thirty participants to get qualitative insight into how people felt about the new structure, whether the journeys made sense and how they felt about the interaction. I also wanted to check on the icons and if they made sense, as I had removed some of the labels. How to navigate to other areas of the site such as the ‘KIDS ZONE’, the links to the account area and the VIP area.

I also wanted to check whether some of the links that were moved to the footer were still discoverable and assess the expectations of users about what kind of links they expected to see or find in the footer section of the website.

What was the outcome?

Since launching the redesigned version of the navigation in July 2021, the Net Promoter Score (NPS) — also known as the willingness of our consumers to recommend LEGO.com to others — has improved significantly. Comparing the NPS score from August 2020 with the 2021 score, it has gone up by almost 10 points, placing The LEGO Group among world-class performers.

This change also helped to increase core targets such as conversion, average order value, and click-through rates to previously buried areas of the site. As the needs of our site change, and potentially grows, the navigation will evolve to reflect this and by working with the product mindset, adopting the test and learn approach with constant small iterations we should keep the redesign optimal for the foreseeable future.

As the needs of the business change, there is the need for future changes, some future-proofing has been designed into the navigation. For example, at the moment we only go to grandchildren level under the ‘Shop’ menu; for ‘Discover’ and ‘Help’, we use parent and children only, if there is a justifiable need to go to grandchildren level in both discover and help, this is something which we can introduce.

Some other stats since the new navigation launch:

Mobile has seen a 61% uplift in conversion

Email signup 34% increase registrations

Pageviews to PDP (Product Display Pages) showing an improvement in discovery and ease of finding things have shown an 11% increase

Like all products, it’s living and breathing and will naturally evolve, but as long as we continue to monitor the stats and we are not negatively impacting performance, then we will continue to evolve it to ensure that it serves the needs of all of our visitors and The LEGO Group.

As the lead product designer for this work, it’s important to note that strong collaboration with Business Owner (Amy Martin), Digital Content Coordinator (Federica Mason-Alimi) and Product Owner (Nayab Zamir) was essential to making this change and roll out a success. A big thank you to my colleagues for this collaboration.

Before and after images of the basic site structure

--

--

Chris Davies-Anipole

Product Designer @ The LEGO Group. Architectural photographer, Travel Fanatic