Klods - LEGO Design System
Building a Design System Brick by Brick
Industry
E-commerce & Toys
Scope of work
Design System Creation
Duration
4 Months
Why LEGO?
Because we want to make the experience of exploring LEGO’s website as fun and intuitive as when we were kids, and that’s for the designers who use the Design System as well
The team’s audit of LEGO.com kept surfacing the same pattern: components doing the same job looked and behaved differently from page to page. LEGO has taught a generation of kids that complex things are easier when you break them into reusable parts. We made that one of the core principles of the system we built.
Have you been living under a brick?
The word LEGO comes from the Danish words “leg godt”, which translates to play well. The company has spent years turning that idea into a universal language of bricks. By providing a modular toy, which allows kids to use their imaginations to play. Klods is named after the Danish word for “brick” for the same reason, allowing product teams to use their imagination.
The Team
Shoutout to Aswathi Thilak, Grace Ho, and Rae Kim for teaming up with me on this project. We split responsibilities and worked simultaneously across every part of the system.
Welcome Klods
Klods is a design system built to bring cohesion to LEGO.com. It gives product teams a shared kit of tokens, components, and templates. Every brick snaps into the next, so designers can stop rebuilding and start solving real problems.
a usability audit to understand how the current LEGO website works
Irregular Foundations
These bricks don't match
Unaccessible at the core
Our Solution: A Shared Playground
We created Klods to tackle the problems found and to foster culture change through a tailored design system
In order to achieve our goal, we need a shared infrastructure that teams could build on independently without drifting apart.
The layers of klods
A system built in layers, from foundations to full experiences.
Tokens are what set the tone for any design system. We started by making sure that the colors and typography complied with WCAG 2.1. We then built the rest of the components, spacing, iconography, and a grid system to do so as well.
What's in the toolbox
UI Kit
Foundations
Klods builds off of it’s foundation pieces. This allows the system to follow the principles of consistency. The team built the foundations to meet WCAG 2 accessibility standards. By embedding the inclusivity principles from the foundations, the team ensured that the system mantained these standards as we scaled it up
Stacking up the bricks into components
The team built up from the foundations several sets of components to allow designers to stop rebuilding a component every time it's needed, This will not only help with efficiency of the LEGO product teams but also create familiarity in the users that navigate the website therefore, reducing friction in task completion.
Templates that allow for modularity
Klods is bult to be modular, just like when you play with LEGO, you can stack up templates to rapidly put together those pages that are frequently reused throughout the LEGO’s website. Allowing for further consistency throughout key pages like the product page, checkout page and others.
Everyone can play with LEGO
LEGO and — the widest costumer base, from kids in their early years to lifelong fans. Klods is built from its core to allow all LEGO lovers to be able to to navigate the website no matter the age or potential accessibility needs. Every element passes WCAG 2.1 AA and every font is designed for maximum readability. Future designs won't need to worry about meeting the accessibility standard as they are embedded into the basics of the design system.
Making room for the fun parts
One of the core priciples of Klods is "Playful". We wanted to make sure that we brought moments of delight to the users of the LEGO website, therefore we left room for designers to express their creativity inside the design system. Why star ratings when you're LEGO? bricks work better. As the system expand we encourage designers to build fun components that will delight the users.
Stress testing klods
Can others leg godt?
We conducted 4 moderated user tests with fellow designers, which helped us understand what others needed out of the system to better implement it in a workflow
The Outcome
A design system is only as good as the people who can pick it up and use it. To test our first version of Klods, we watched four designers attempt to build a product page and a checkout page. The outcomes of the test were mixed, the components held up, but the onboarding did not. The designers were mostly appreciative of the components, but confusion arose when understanding how to use them. The clear next step was the creation of a documentation site.
Documentation
Klods Instruction pamphlet
a documentation site to allow every member of the product team to understand how Klods work
If a designer can’t onboard without a teammate explaining things, the system has failed. We built a documentation site that pairs every component with anatomy, variants, usage, and clear best practice guidance. We also opened a support channel, because systems don’t just ship, but they get maintained and expanded over time.
how to use each brick
Klods' instruction include a design overview that covers anathomy, variants, and other design focused specifications. As well as Usage, which covers best practices and use cases
Compatible third party tools
Klods was built with the help of third party tools to ensure conformity with industry standards
Klods keeps on growing
This is just the beginning. LEGO reached its success thanks to its ability to adapt to the times and we built Klods to evolve with the new necessities of the industry…
Making the case for klods
Klods makes sense for the business
The two main benfits
Design systems in other digital platforms
The market presents a significant gap. Data shows how implementing a design system like Klods could translate in significant benefits for a company, by exploiting what other companies are leaving behind. It is clear how the market has not caught up to the gap, LEGO could then further improove its position in the market by implementing Klods.
We pitched Klods to our target audience
The team delivered a pitch during the course's last class.
The professor and fellow classmates were asked to impersonate the leaders of LEGO's product teams to evaluate whether Klods was worth investing in. We made the case across two angles: what teams get back internally, and what LEGO unlocks externally by building on a system that's accessible from the foundation up.
The presentation landed. Fellow designers pointed to the clarity of the tokens, the cohesion across components, and the playfulness embedded in the system. The stackability of the templates and overall structure of the system were pointed out as some of the strongest elements of Klods.
The takeaways
A double edge sword:
The work I completed on this project helped me understand both the benefits and the drawbacks of implementing a design system. In the right circumstances, a design system can be massively beneficial for an organization. It can drive culture change (designers and developers work together, from a single source of thuth), foster a better work environment, and push out stronger products, which ultimately improves efficiency and revenue.
However, not every company needs one. Design systems are time-consuming to create and slow to implement, and when done poorly, they can have the opposite effect on the designers and developers who use them, becoming barriers to creativity instead of enabling it. That's why I'm proud of the work our team accomplished over the past few months. We built valuable knowledge that will guide how we approach these situations in the future.
Teamwork:
I'm grateful to have worked with Aswathi, Grace, and Rae on a project this big. Splitting a design system across four people could have been chaotic. It wasn't, because we kept showing up for each other's pieces. Working on Klods taught me that to create a useful system there needs to be a team that trusts each other, We were able to reach this level of completion in a short timeline because each of us could pick up where someone else left off, and because we agreed early on what the four principles meant, it helped the team follow the same path.
