Knauf Unlimited
2021 – 2022 UI Design, Design System
Knauf is one of the world’s leading manufacturers of construction products. The German company is present in 90 countries, manages multiple brands and is supported by 40,000 employees.
Context
Establish a holistic UX/UI concept for Knauf Unlimited, that is: create a design system from scratch, maintain daily collaboration between teams and be aware of the different requirements derived from its products (at the user experience’s and brand’s level).
Challenge
I was initially the UI designer for one of the B2B products, then called the “Dealer Suite”. Later, I became responsible for defining, managing and maintaining a Design System for all Knauf Unlimited products. Orchestrating that was a process in itself, so I also ran “an MVP” Design Ops functions.
My role
I started by making an audit of the current library and glanced at the latest designs and prototypes. Until then, the designs were based on the Material Design library. When I detected notable improvements in consistency and accessibility, the seed of a Design System began to germinate. Font families, color palette and other foundations were changed to improve their readability and accessibility.
Process
(1/4)
Bringing design culture to a Business & Dev environment is not a piece of cake. In this case, the key was to prove the value of design by numbers, time consuming comparisons and scalable solutions. The process of consolidating the Design System was achieved thanks to the continuous trial and error.
Once the proposals were agreed upon in Design, they were passed on to Development to verify their feasibility. No success comes on the first try, which is why we rely on phased iterations. That means documentation, documentation, and… more documentation.
Process (2/4)
Knauf is a solid brand, very well positioned in the sector, but it was on the verge of a rebranding that finally came into effect in 2024. During the time I worked on the Knauf Unlimited project, an intermediate step was sought. For this reason, I based all the designs on a visual concept.
The concept was present throughout the interface, but it was more noticeable in the main components and resources: buttons, cards, text fields or backgrounds.
For example, we avoid using very rounded edges to show a more angular design reminiscent of construction (bricks, buildings, architectural plans…). Most of the backgrounds were white, but in case of highlighted sections, hover or disabled states we used soft tints of grey, related to plaster and gypsum materials. In order to create the feeling of a smooth and unlimited surface, we used gray and clear blue gradients. This resource takes us back to the ideation process, abstract and materialized in the line. Finally, the color for “call to actions” were green (“forest” color), which kept Knauf brand related to sustainability.
Once the proposals were agreed upon in Design, they were passed on to Development to verify their feasibility. No success comes on the first try, which is why we rely on phased iterations. That means documentation, documentation, and… more documentation.
Process
(3/4)
Just as a brand’s tone of voice adapts to the channel, so should its visual resources. For that purpose, I established a design language with two “dialects” (continuing with the linguistic analogy): “Web & Marketing dialect” and “Pro & Business dialect”. The purpose of the first was to capture the user’s attention, while the second sought to facilitate the digestion of large amounts of information.
Process
(4/4)
(1) A solid basis
The creation of “Matrix Design System” and its first steps made Knauf Unlimited a consistent and scalable product, built to be shaped even today.
(2) Design culture
This digitalization process changed the mindset of stakeholders, who finally saw Design solutions as something much more methodical and profitable at all levels.
Outcomes
✺ You can start building a house from the roof: piece by piece, a system comes together.
✺ The strongest structure is the one designed to be changed.
✺ Working in an international team taught me not to take any meaning or taxonomy for granted.
Own learnings