Design System
Design System
Documentation
Documentation
Building Design System and documenting it
Building Design System and documenting it
Building Design System and documenting it
Story about DS documentation: how to make it simple and clear for different users
Story about DS documentation: how to make it simple and clear for different users
Story about DS documentation: how to make it simple and clear for different users
CONTEXT
1
1
Company
Company
Knauf is the one of the biggest German companies and one of the leaders in construction industry
Itโs spread across more than 90 countries and has +14K employees around the world.
Since we have 20+ products, we've built our own design system
Knauf is the one of the biggest German companies and one of the leaders in construction industry
Itโs spread across more than 90 countries and has +14K employees around the world.
Since we have 20+ products, we've built our own design system
2
2
Why we needed documentation of DS?
Why we needed documentation of DS?
Make one source of explanation of the DS for fellow designers, developers and partners
Saving time of employees -> Saving money
Make the UI patterns consistent across all products
Make one source of explanation of the DS for fellow designers, developers and partners
Saving time of employees -> Saving money
Make the UI patterns consistent across all products
3
3
My Role
My Role
One of the initiators of the DS documentation
UI/UX designer
UX research, testing, integrations
One of the initiators of the DS documentation
UI/UX designer
UX research, testing, integrations
4
4
Team
Team
Our team consisted 2 designers, 1 QA engineer, 1 frontend developer
Our team consisted 2 designers, 1 QA engineer, 1 frontend developer
Lead UX Designer
Lead UX Designer
My role
My role
4 months
4 months
duration
duration
2024
2024
Year
Year
PROBLEM
5
5
Problem & consequences
Problem & consequences
Knauf is the one of the biggest German companies and one of the leaders in construction industry
Itโs spread across more than 90 countries and has +14K employees around the world.
Since we have 20+ products, we've built our own design system
Knauf is the one of the biggest German companies and one of the leaders in construction industry
Itโs spread across more than 90 countries and has +14K employees around the world.
Since we have 20+ products, we've built our own design system
Design System is not clear and understandable enough
Design System is not clear and understandable enough
There were no rules and best practices for developers and new designers
There were no rules and best practices for developers and new designers
UI and UX Inconsistencies across digital products
UI and UX Inconsistencies across digital products
International partners couldn't use components due to missing patterns, leading to inconsistent UI
International partners couldn't use components due to missing patterns, leading to inconsistent UI
Hours of designers for frequent manual explanations to different teams
Hours of designers for frequent manual explanations to different teams
Dissatisfaction of the users regarding our products, loss of clients
Dissatisfaction of the users regarding our products, loss of clients
6
6
How weโve tested the effectiveness of our DS
How weโve tested the effectiveness of our DS
In order to test effectiveness of our design system and minimize the risk of following the wrong direction, Iโve applied qualitative research methods in our user tests. So, me and another designer conducted 21 user tests (1 on 1 sessions), 6 focus groups (collaborative feedback sessions).
In order to test effectiveness of our design system and minimize the risk of following the wrong direction, Iโve applied qualitative research methods in our user tests. So, me and another designer conducted 21 user tests (1 on 1 sessions), 6 focus groups (collaborative feedback sessions).
Focus Groups
Focus Groups
7
7
Key insights
Key insights
There has to be a clear explanation in the differences between our DS and MUI (design system we're referring to)
It's essential to showcase best practices, explain how and when to use a component
Don't make it complicated, it should be clear and easy to understand
There has to be a clear explanation in the differences between our DS and MUI (design system we're referring to)
It's essential to showcase best practices, explain how and when to use a component
Don't make it complicated, it should be clear and easy to understand
"The need in the Design System documentation didn't appear at once, the initiative started from bottom up, since the problem was evident"
"The need in the Design System documentation didn't appear at once, the initiative started from bottom up, since the problem was evident"
"The need in the Design System documentation
didn't appear at once, the initiative started from bottom up, since the problem was evident"
8
8
How weโve tested the effectiveness of our DS
How weโve tested the effectiveness of our DS
After the user interviews, focus groups and identifying the problem we need to solve, I've formed 3 key user personas we should refer to, their constraints and motivations
After the user interviews, focus groups and identifying the problem we need to solve, I've formed 3 key user personas we should refer to, their constraints and motivations
Emily Carter
Emily Carter
UX designer at Knauf Digital
UX designer at Knauf Digital
โI need to clearly understand how and when to use a certain componentโ
โI need to clearly understand how and when to use a certain componentโ
Daniel Thompson
Daniel Thompson
Frontend Developer at Knauf Digital
Frontend Developer at Knauf Digital
โI need a precise technical documentation with clear examples to implement UI correctlyโ
โI need a precise technical documentation with clear examples to implement UI correctlyโ
Olivia Martinez
Olivia Martinez
PM in our partner's company
PM in our partner's company
โI need to ensure our team follows Knauf's brand and usability standardsโ
โI need to ensure our team follows Knauf's brand and usability standardsโ
RESOLUTION
9
9
Solution
Solution
So, what we could do to solve all the problems mentioned?
Create a comprehensive, scalable, and accessible documentation to ensure consistency, reduce ambiguity, and enhance collaboration.
So, what we could do to solve all the problems mentioned?
Create a comprehensive, scalable, and accessible documentation to ensure consistency, reduce ambiguity, and enhance collaboration.
10
10
Example of the component documentation
Example of the component documentation
It's possible to view the full documentation by this link:
It's possible to view the full documentation by this link:
View documentation
11
11
Format & Integration
Format & Integration
Why Figma?
Why Figma?
Why Figma?
Why Figma?
We've made the first iteration in Figma due to several key advantages:
We've made the first iteration in Figma due to several key advantages:
All our user personas (designers, developers, and product teams) are already proficient in Figma.
We can share a direct link in presentation mode, so itโs accessible without requiring downloads.
Easy Updates & Version Control โ Figma allows seamless updates and track version history.
All our user personas (designers, developers, and product teams) are already proficient in Figma.
We can share a direct link in presentation mode, so itโs accessible without requiring downloads.
Easy Updates & Version Control โ Figma allows seamless updates and track version history.
Integration into Brand Portal & Contentful
Integration into Brand Portal & Contentful
Integration into Brand Portal & Contentful
Integration into Brand Portal & Contentful
Although, Figma is very easy and convenient to use, we've had to publish the documentation in Contentful and company Brand Portal too
Although, Figma is very easy and convenient to use, we've had to publish the documentation in Contentful and company Brand Portal too
Contentful is the platform accessible for all our partners, and it's very easy for them to use.
It's much easier to navigate in the documentation in the Brand Portal and we've made further iterations there.
Contentful is the platform accessible for all our partners, and it's very easy for them to use.
It's much easier to navigate in the documentation in the Brand Portal and we've made further iterations there.
IMPACT
12
12
Results
Results
Itโs only 6 weeks passed since our publishing the documentation in Figma, Contentful and Brand Portal (to the moment Iโm writing this case study). During this period Iโve made only 1 focus group session to onboard our internal designers, product managers and some developers.
Results achieved:
Itโs only 6 weeks passed since our publishing the documentation in Figma, Contentful and Brand Portal (to the moment Iโm writing this case study). During this period Iโve made only 1 focus group session to onboard our internal designers, product managers and some developers.
Results achieved:
+2 hours
+2 hours
Less time spent for DS explanation to partners
Less time spent for DS explanation to partners
-1 meeting
-1 meeting
weekly 1 hour meeting with devs removed, no need
weekly 1 hour meeting with devs removed, no need
20% less
20% less
requests about DS guidance and support from partners and developers
requests about DS guidance and support from partners and developers
Interacting with Developers
Interacting with Developers
Before
Before
Before
Before
2-3 meetings a week for questions and updates
2-3 meetings a week for questions and updates
A lot of manual explanation about components behaviors and states
A lot of manual explanation about components behaviors and states
Inconsistent design choices led to rework and longer development time
Inconsistent design choices led to rework and longer development time
Too many links are confusing: for Storybook, Figma DS, MUI, MUI in Figma
Too many links are confusing: for Storybook, Figma DS, MUI, MUI in Figma
Now
Now
Now
Now
1 meeting a week
1 meeting a week
No inconsistencies, reducing rework
No inconsistencies, reducing rework
1 documentation with all links
1 documentation with all links
Clear explanation of each element in the core DS and in our DS
Clear explanation of each element in the core DS and in our DS
Communicating with External Partners
Communicating with External Partners
Before
Before
Before
Before
A lot of overrides and inconsistencies in design
A lot of overrides and inconsistencies in design
A lot of work for support managers and designers for explanation design system and guidelines (5-6 meetings a week)
A lot of work for support managers and designers for explanation design system and guidelines (5-6 meetings a week)
No standardized process for ensuring brand consistency across regions
No standardized process for ensuring brand consistency across regions
Now
Now
Now
Now
Standardized documentation explaining each UI element in detail
Standardized documentation explaining each UI element in detail
Less support required and lots of time saved
Less support required and lots of time saved
Unified standardized process for everyone
Unified standardized process for everyone
13
13
Final thoughts
Final thoughts
It was a very difficult and challenging experience for me, with a lot of joy alongside with stress. But I'm very happy about the results and believe it's only the beginning. And I'm sure that what we did is very valuable for business, it will definitely safe hours or even weeks of time.
It was a very difficult and challenging experience for me, with a lot of joy alongside with stress. But I'm very happy about the results and believe it's only the beginning. And I'm sure that what we did is very valuable for business, it will definitely safe hours or even weeks of time.
We've celebrated the rollout in a local Greek restaurant ๐
We've celebrated the rollout in a local Greek restaurant ๐
