Design System
Story about DS documentation: how to make it simple and clear for different users
#DS
#Documentation
#SAAS
View Documentation
Context (situation)
Context (situation)
Context (situation)
1
About the 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
2
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
3
My Role & the team
One of the initiators of the DS documentation
UI/UX designer
UX research, testing, integrations
Our team consisted 2 designers, 1 QA engineer, 1 frontend developer
4
My start and exit
I've worked on Documentation from the beginning: from October 2024 till December 2024
After completion of the MVP and first 2 iterations, I decided to hand it over to another designer and focus on other products
Lead UX Designer
Lead UX Designer
Lead UX Designer
My role
My role
My role
4 months
4 months
4 months
duration
duration
duration
2024
2024
2024
Year
Year
Year
problem (Complication)
problem (Complication)
problem (Complication)
5
Problem and consequences
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
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).
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
Focus Groups
Focus Groups
7
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
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
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
User Personas
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
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
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
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
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 (Results)
resolution (Results)
resolution (Results)
9
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.
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.
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
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:
It's possible to view the full documentation by this link:
View Documentation
6
Format & Integration
Why Figma?
We've made the first iteration in Figma due to several key advantages:
Lots of manual calculations for accountants
Not clear CJM
Lack of essential functionality, such as Salary Confirmation, reports or payment history
Outdated and inconsistent UI
Salary calculation rules were rigid and impossible to tailor to specific needs
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.
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.
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
Lots of manual calculations for accountants
Not clear CJM
Lack of essential functionality, such as Salary Confirmation, reports or payment history
Outdated and inconsistent UI
Salary calculation rules were rigid and impossible to tailor to specific needs
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.
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.
Impact
Impact
Impact
10
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:
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
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
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
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
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
11
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.
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 😋
We've celebrated the rollout in a local Greek restaurant 😋
