Weronika Waszkiewicz
UX Designer
Everyone loves building with LEGO bricks, not just kids. For some, the enjoyment comes from the act of building itself, while for others, it's the satisfaction of looking at the completed set on the shelf. What makes us love building with bricks so much? The small pieces that can be assembled into a larger, more complex component, which in turn can be integrated into a bigger structure? The fact that, regardless of the set, the bricks are assembled the same way, and there’s no need to explain the function of each piece every time? Bricks provide us with defined usage guidelines (they must be combined with other LEGO pieces to work properly), and we also have an assembly manual – all while allowing full creativity and the ability to invent our own structures.
By the third sentence of the paragraph above, you probably already understood the analogy between a design system and a LEGO set – yes, a design system can also be loved! And even more importantly, it’s crucial to understand the advantages a well-developed design system brings to an organization.
It’s essentially a ready-made set of building blocks used to create an application interface, or more specifically, according to NN Group:
"A Design System is a complete set of standards aimed at managing design at scale using reusable components and patterns." (translated by me)
In simpler terms, every application consists of elements like buttons, links, checkboxes, or more complex components like navigation. In one product, the same building blocks are used repeatedly. Not to mention an entire organization where multiple IT systems are created – this is where we talk about large scale. A system for managing all these components, their appearance, behavior, and functionality – that’s what a design system is, and its main advantage is that it eliminates repetitive (and unnecessary) work for designers and developers.
For designers, a design system is indeed a big help. They don't start their work from a blank page; instead, they build interfaces using ready-made components, which allows them to deliver high-fidelity mockups much faster. This enables them to focus more on the process and the needs that their product is meant to address. Radek, one of the designers working on a project that uses our design system, says that his onboarding in the project was much shorter, and the library of ready-made atoms, basic components, and tokens was the biggest convenience for him – he no longer had to worry about consistency or build it from scratch.
But it’s important to remember that a design system doesn’t replace the designer – true, there’s no need to think about the color of the button for the main action, but someone still needs to design that action, seamlessly integrate it into the user flow, and ensure that other elements don’t overshadow its visual importance – so there’s still very important UX work to be done.
Just like designers, developers don’t have to write code from scratch; they use a library of ready-made components (aligned with the brand, tested, available, and responsive), which significantly speeds up their work. A design system also makes collaboration between developers and designers easier: they don’t have to agree on details like button sizes or cell dimensions in tables, allowing them to focus instead on scaling their own solutions. The handoff of designs to implementation is also more efficient: because each component has documentation that clearly describes its behavior and usage, misunderstandings are much less likely. This is also influenced by the fact that using the same library enforces the use of the same terminology. Not to mention the faster onboarding of new team members – they have much less to learn!
Moreover, a design system, as an ongoing project that is continually improved, removes the responsibility of maintaining and updating individual components from developers (if design tokens are used correctly), and testers have less to test because each component has already been thoroughly checked – including for accessibility. However, we must remember that just as a design system doesn’t replace the designer, it also doesn’t relieve anyone on the team of the responsibility for the accessibility of the product being created.
One of the key advantages of a design system is consistent visual communication across the organization. In practice, this means that end users, for example, those using several products from the same organization, don’t have to learn each one from scratch. They aren’t cognitively burdened, as they can navigate through repetitive patterns and flows. And this translates into money.
According to recent studies, companies investing in design systems are seeing significant returns on investment. A shared library of interface elements, standardized design practices, and streamlined product development processes enable teams to deliver higher-quality digital experiences faster. The end result is a sharp increase in key metrics such as conversion rates, customer satisfaction, and revenue – but a design system is a long-term investment.
For example, after implementing a design system, American Express noticed a 31% reduction in employee working hours, and product quality improved by 18%. Similarly, Lloyds Bank, with their design system, saved an average of £190,000 per project and is expected to save over £12.5 million in two years.
A few months ago, I joined the web team that is building our group’s design system – GDS (Group Design System), and my first task was to design the breadcrumbs and write the corresponding documentation. So, I can share what the process of creating a component in our design system looks like:
The designer starts with extensive desk research, reviewing design systems from leading companies and competitors, various component libraries, and reading a lot of articles on best practices. Based on all the gathered knowledge, they then begin designing the component – and every decision is consulted and made collectively within the design team, which includes people (currently four of us, including me) with different levels of experience, seniority, and, most importantly, perspectives. According to the principle that the best design comes from interaction with others, I can say that every pixel is the result of a long, substantive discussion. Every decision is backed by research, and nothing is left to chance. Each component also arises from the needs of the products we collaborate with (our stakeholders, i.e., RBI’s product teams, approach us with requests to create a component they need or expand the functionality of an existing one) – we don’t design in a vacuum; we’re building a scalable design system for the entire group.
A significant part of our work is also based on artifacts from hackathons that we organize for anyone interested (the next one will likely be in May or June). In addition to the fact that every member of our team is open to any questions about GDS, we also organize presentations of new releases for anyone who’s interested, and you can also schedule a meeting with us specifically focused on the needs of your project. And if you’d like to contribute your building blocks to the shared structure, I encourage you to consider the contribution model!
SummaryInvesting in a design system brings numerous benefits for designers, developers, and end-users alike. For designers, it eliminates the need to create every element from scratch, while developers gain access to ready-made, tested components that accelerate the implementation process. Users benefit from products that feature visual consistency and intuitive navigation. Companies investing in a design system experience significant cost savings and improvements in product quality, which lead to better conversion rates and higher customer satisfaction. This is a long-term investment that results in increased efficiency and user satisfaction.