LEGO.com Navigation

Background

LEGO operated two online platforms: one for brand communications (LEGO.com) and another for direct sales (shop.LEGO.com). The company decided to merge these websites.

As the two platforms had distinct navigation structures, a brief was created to develop a unified global navigation system. This new system would support both brand education and shopping experiences on the new LEGO.com.

I served as the lead UX and UI designer for this project.

Key Personas

Experienced

“LEGO is such a great brand, I played with it as a child and now my daughter is old enough to play with it and enjoys it”

New

“I know some LEGO themes because my son talks about it, but otherwise I mostly let him tell me what toys he wants to avoid any strops and keep him entertained”

Gifter

“I love seeing my nephew and playing with him, I want to be the cool uncle but buying toys is not cheap”

Design Sprint Workshop

To kick off the project and gain initial insights into the navigation's direction, a week-long design sprint was conducted. At the sprint's conclusion, a moderated, task-based user test was performed to gather initial feedback.

Both the LEGO.com team and the Shop team had previously tested navigation designs and gained valuable insights, which they shared with each other. Based on these insights and data collected by both teams, two navigation prototypes were created and then tested with users.

Test Aim

Determine which design and structure was easiest to use and navigate
Identify which one was more effective for finding products, such as Exclusives
Assess which navigation felt more "LEGO" and recognizable

Main Insights

Testers felt the "yellow" navigation (Concept B) was more LEGO-like and on-brand.
The drop-down menu design in Concept A was much more user-friendly than the one in Concept B.

Initial Card Sort & Sitemap

The newly merged LEGO.com needed to cater to three main user groups. It was crucial that the site accommodated both new visitors and those very familiar with LEGO.

An initial sitemap was created by categorising existing navigation items from both platforms to best serve these three main user groups. This sitemap was then used to refine the navigation structure further and guide the design of the header and footer.

Additional tests were conducted to optimize the sitemap and improve the design of the site's navigation elements.

Further Design Exploration

Competitior Benchmarking

I did a benchmarking excercise on other websites' navigation structures, information architecture, and design. This provided insights into potential effective and ineffective approaches for the LEGO.com navigation.

UI Iterations

Building on the one week design sprint, further elements were explored:

Different menu labels
Images/icons
Component/text positions
Grids
Colours
Sub-menu designs
Mobile versions

These were internally guerilla tested - to optimise designs and to guide conversations with key stakeholders.

User Testing

Tree tests and card sorting

I conducted tree tests with users to evaluate various navigation structures. Users were given tasks to find products or navigate to specific sections of the merged LEGO.com site using the proposed structure.

Additionally, we employed card sorting exercises to help users categorise navigation items into labels that resonated best with LEGO shoppers. This process aided in refining the overall navigation system.

Moderated user testing

Interactive prototypes created in Invision were tested with carefully screened participants who closely matched the target audience for the merged LEGO.com site. Testers were given specific scenarios and navigation tasks to complete. The resulting insights and feedback were then used to refine and optimise the designs before creating development specifications.

Post launch we continued user testiing and monitoring of the navigation was closely tracked after the June 2019 launch, to understand where the keep refining and improving.

The merged site and it's navigation was tested further in US, Germany, UK and South Korea.

Design Handover

The developers received detailed specifications for padding, font sizes, interactions, and states. These served as a reference guide for building the global header and footer of the website.

An example specification sheet is shown below.

Final Designs, March 2020

A global navigation that caters to the three main shopper types on LEGO.com. From a content perspective, the navigation presents items in both list format and images, allowing for promotion and highlighting of specific site sections or products. This flexible design accommodates any future categories that may be introduced on the website.

Mobile

Desktop

Impact

Flexible design for content mangament system and future categories.
Site merge resulted in a natural increase in site traffic.
Influx of new visitors frequently used "Shop by > age/price" or "Interests" menu options.
LEGO Exclusives section experienced an increase in Add to Bag (ATB) rate and overall conversion.
More prominent LEGO VIP navigation led to increased loyalty page visits and sign-ups.