You can view the redesigned screens I created after implementing the rebranding and design system below:
The screens below display the pre-rebranding designs by engineers and product managers:
Importance of cohesive Branding for Enhanced User Experience
The initial product screens lacked unified branding due to only focusing on functionality by engineers and quick shipping by product managers. This resulted in font, color, and design clashes, creating a confusing user experience with illogical UX patterns. Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand.
Consistent branding is crucial for trust and seamless navigation, especially in sensitive industries like insurance. If a product appears poorly designed, users won't trust its handling of sensitive data or tasks. Which will cause user drop off and lack of retention. To rectify this, I spearheaded a comprehensive rebrand with clear guidelines for typography, color use, and UX patterns to create mental models, aiming for intuitive design and increasing user confidence.
Calculate the value of your design system here: https://www.knapsack.cloud/calculator
A design system would save 25 hours per designer per month. That translates to three working days to invest in new projects. If a design team has 10 members, this equals £225,000 in saved time in a year.
An example of how a design system could decrease costs:
50%
Of the products get into market 50% faster when teams use a managed set of ux resources.
20%
Reduce cost of software development teams by up to 20% over time
Business impact of the design system
The Return on Investment (ROI) of design systems is often measured by factors like reduced design and development time, minimized rework, increased productivity, and improved user experiences. Although the exact ROI varies based on the project, a well-implemented design system typically yields substantial cost savings, boosts efficiency, and enhances overall product quality. I was taken aback when my Front-end team mentioned that it not only decreased design workload but also led to cost savings and reduced engineering efforts on their end. Initially, I only anticipated it benefiting design processes.
In 2022, thanks to the improved efficiency of our design system, we didn’t need to hire an extra designer and front-end developer, resulting in significant savings in salaries and potential recruitment costs.
Client
Brit insurance aka BritX / Otto innovation department
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
Design system
BritX / Otto
Design system
BritX / Otto
Design system
BritX / Otto
To the right, you'll see the redesigned screens I created after implementing the rebranding and design system:
The left screens display the pre-rebranding designs by engineers and product managers:
The left screens display the pre-rebranding designs by engineers and product managers:
The left screens display the pre-rebranding designs by engineers and product managers:
Importance of cohesive Branding for Enhanced User Experience
The initial product screens lacked unified branding due to only focusing on functionality by engineers and quick shipping by product managers. This resulted in font, color, and design clashes, creating a confusing user experience with illogical UX patterns. Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand.
Consistent branding is crucial for trust and seamless navigation, especially in sensitive industries like insurance. If a product appears poorly designed, users won't trust its handling of sensitive data or tasks. Which will cause user drop off and lack of retention. To rectify this, I spearheaded a comprehensive rebrand with clear guidelines for typography, color use, and UX patterns to create mental models, aiming for intuitive design and increasing user confidence.
View presentation
Want to learn more about design systems?
I also wrote about what design systems in general are about and gave an internal presentation on it to educate other non-designer departments. We discussed what design systems entail, how they ramp up efficiency, and even ways to calculate their Return on Investment (ROI).
You can access the entire Design system I have set up here:
Here is an example of how I specified specs of components so that the handover for front-end engineers was made easier:
How I set up the production pipeline for the Design system
First sprint: Do a proper UX audit and conduct a heuristic evaluation of the product you work on, to identify usability issues, inconsistencies in terms of UX patterns and branding. Then present these findings back to the team to create awareness of the problems with suggestions to fix them. View an example of that analysis here
Second sprint: Build the final styles, branding guidelines, colours, typography and components in Figma. Define the layout and the spacing.
Third sprint: Create the different screens of the product with the new design system styles, components and rules in Figma, such as responsive screens and all the state pages (error and empty etc).
Fourth sprint: Document the information in a UX backlog and tickets share it with stakeholders and developers. Especially working together in a partnership way with a Product Manager to ensure the tickets get prioritized correctly. Set up a separate slack channel with the front-end engineers and product manager for visibility and to allow a safe space for the front-end engineers to ask questions on the design system during production and design handover.
*A sprint consists of 3 weeks of work
It really helped to have a quick 30 min sync in each sprint with the front-enders and Product manager to view their work on the design system, check up on their process and offer support when needed.
The main benefits of a design system
Design (and development) work can be created and replicated quickly and at scale.
The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.
It alleviates strain on design resources to focus on larger, more complex problems.
Since simpler UI elements are created already and reusable, design resources can focus less on tweaking visual appearance and more on more-complex problems (like information prioritization, workflow optimization, and journey management). This becomes substantial when you must coordinate efforts across dozens of teams and thousands of screens.
It creates a unified language within and between cross functional teams.
A unified language reduces wasted design or development time around miscommunications. For example, the functionality or appearance of a dropdown menu would not be debated, since that term is reserved for a specifically defined element within the design system.
It creates visual consistency across products, channels, and (potentially siloed) departments.
Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand. Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As an added bonus, any major visual rebrands or redesigns can be managed at scale through the design system.
It can serve as an educational tool and reference for junior-level designers and content contributors.
Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
View more work
Client
Brit insurance aka BritX / Otto innovation department
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
Client
Brit insurance aka BritX / Otto innovation department
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
View presentation
Want to learn more about design systems?
I also wrote about what design systems in general are about and gave an internal presentation on it to educate other non-designer departments. We discussed what design systems entail, how they ramp up efficiency, and even ways to calculate their Return on Investment (ROI).
You can access the entire Design system I have set up here:
Client
Brit insurance aka BritX / Otto innovation department
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
View presentation
Want to learn more about design systems?
I also wrote about what design systems in general are about and gave an internal presentation on it to educate other non-designer departments. We discussed what design systems entail, how they ramp up efficiency, and even ways to calculate their Return on Investment (ROI).
You can access the entire Design system I have set up here:
Here is an example of how I specified specs of components so that the handover for front-end engineers was made easier:
How I set up the production pipeline for the Design system
First sprint: Do a proper UX audit and conduct a heuristic evaluation of the product you work on, to identify usability issues, inconsistencies in terms of UX patterns and branding. Then present these findings back to the team to create awareness of the problems with suggestions to fix them. View an example of that analysis here
Second sprint: Build the final styles, branding guidelines, colours, typography and components in Figma. Define the layout and the spacing.
Third sprint: Create the different screens of the product with the new design system styles, components and rules in Figma, such as responsive screens and all the state pages (error and empty etc).
Fourth sprint: Document the information in a UX backlog and tickets share it with stakeholders and developers. Especially working together in a partnership way with a Product Manager to ensure the tickets get prioritized correctly. Set up a separate slack channel with the front-end engineers and product manager for visibility and to allow a safe space for the front-end engineers to ask questions on the design system during production and design handover.
*A sprint consists of 3 weeks of work
It really helped to have a quick 30 min sync in each sprint with the front-enders and Product manager to view their work on the design system, check up on their process and offer support when needed.
Business impact of the design system
The Return on Investment (ROI) of design systems is often measured by factors like reduced design and development time, minimized rework, increased productivity, and improved user experiences. Although the exact ROI varies based on the project, a well-implemented design system typically yields substantial cost savings, boosts efficiency, and enhances overall product quality. I was taken aback when my Front-end team mentioned that it not only decreased design workload but also led to cost savings and reduced engineering efforts on their end. Initially, I only anticipated it benefiting design processes.
In 2022, thanks to the improved efficiency of our design system, we didn’t need to hire an extra designer and front-end developer, resulting in significant savings in salaries and potential recruitment costs.
50%
Of the products get into market 50% faster when teams use a managed set of ux resources.
20%
Reduce cost of software development teams by up to 20% over time
An example of how a design system could decrease costs:
A design system would save 25 hours per designer per month. That translates to three working days to invest in new projects. If a design team has 10 members, this equals £225,000 in saved time in a year.
Calculate the value of your design system here: https://www.knapsack.cloud/calculator
Business impact of the design system
The Return on Investment (ROI) of design systems is often measured by factors like reduced design and development time, minimized rework, increased productivity, and improved user experiences. Although the exact ROI varies based on the project, a well-implemented design system typically yields substantial cost savings, boosts efficiency, and enhances overall product quality. I was taken aback when my Front-end team mentioned that it not only decreased design workload but also led to cost savings and reduced engineering efforts on their end. Initially, I only anticipated it benefiting design processes.
In 2022, thanks to the improved efficiency of our design system, we didn’t need to hire an extra designer and front-end developer, resulting in significant savings in salaries and potential recruitment costs.
50%
Of the products get into market 50% faster when teams use a managed set of ux resources.
20%
Reduce cost of software development teams by up to 20% over time
An example of how a design system could decrease costs:
A design system would save 25 hours per designer per month. That translates to three working days to invest in new projects. If a design team has 10 members, this equals £225,000 in saved time in a year.
Calculate the value of your design system here: https://www.knapsack.cloud/calculator
Client
Brit insurance aka BritX / Otto innovation department
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Business impact of the design system
The Return on Investment (ROI) of design systems is often measured by factors like reduced design and development time, minimized rework, increased productivity, and improved user experiences. Although the exact ROI varies based on the project, a well-implemented design system typically yields substantial cost savings, boosts efficiency, and enhances overall product quality. I was taken aback when my Front-end team mentioned that it not only decreased design workload but also led to cost savings and reduced engineering efforts on their end. Initially, I only anticipated it benefiting design processes.
In 2022, thanks to the improved efficiency of our design system, we didn’t need to hire an extra designer and front-end developer, resulting in significant savings in salaries and potential recruitment costs.
50%
Of the products get into market 50% faster when teams use a managed set of ux resources.
20%
Reduce cost of software development teams by up to 20% over time
An example of how a design system could decrease costs:
A design system would save 25 hours per designer per month. That translates to three working days to invest in new projects. If a design team has 10 members, this equals £225,000 in saved time in a year.
Calculate the value of your design system here: https://www.knapsack.cloud/calculator
Importance of cohesive Branding for Enhanced User Experience
The initial product screens lacked unified branding due to only focusing on functionality by engineers and quick shipping by product managers. This resulted in font, color, and design clashes, creating a confusing user experience with illogical UX patterns. Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand.
Consistent branding is crucial for trust and seamless navigation, especially in sensitive industries like insurance. If a product appears poorly designed, users won't trust its handling of sensitive data or tasks. Which will cause user drop off and lack of retention. To rectify this, I spearheaded a comprehensive rebrand with clear guidelines for typography, color use, and UX patterns to create mental models, aiming for intuitive design and increasing user confidence.
The screens below display the pre-rebranding designs by engineers and product managers:
You can view the redesigned screens I created after implementing the rebranding and design system below:
Want to learn more about design systems?
I also wrote about what design systems in general are about and gave an internal presentation on it to educate other non-designer departments. We discussed what design systems entail, how they ramp up efficiency, and even ways to calculate their Return on Investment (ROI).
View presentation
You can access the entire Design system I have set up here:
How I set up the production pipeline for the Design system
First sprint: Do a proper UX audit and conduct a heuristic evaluation of the product you work on, to identify usability issues, inconsistencies in terms of UX patterns and branding. Then present these findings back to the team to create awareness of the problems with suggestions to fix them. View an example of that analysis here
Second sprint: Build the final styles, branding guidelines, colours, typography and components in Figma. Define the layout and the spacing.
Third sprint: Create the different screens of the product with the new design system styles, components and rules in Figma, such as responsive screens and all the state pages (error and empty etc).
Fourth sprint: Document the information in a UX backlog and tickets share it with stakeholders and developers. Especially working together in a partnership way with a Product Manager to ensure the tickets get prioritized correctly. Set up a separate slack channel with the front-end engineers and product manager for visibility and to allow a safe space for the front-end engineers to ask questions on the design system during production and design handover.
*A sprint consists of 3 weeks of work
It really helped to have a quick 30 min sync in each sprint with the front-enders and Product manager to view their work on the design system, check up on their process and offer support when needed.
Here is an example of how I specified specs of components so that the handover for front-end engineers was made easier:
The main benefits of a design system
Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between cross functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
View more work
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
Client
Brit insurance aka BritX / Otto innovation department
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Importance of cohesive Branding for Enhanced User Experience
The initial product screens lacked unified branding due to only focusing on functionality by engineers and quick shipping by product managers. This resulted in font, color, and design clashes, creating a confusing user experience with illogical UX patterns. Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand.
Consistent branding is crucial for trust and seamless navigation, especially in sensitive industries like insurance. If a product appears poorly designed, users won't trust its handling of sensitive data or tasks. Which will cause user drop off and lack of retention. To rectify this, I spearheaded a comprehensive rebrand with clear guidelines for typography, color use, and UX patterns to create mental models, aiming for intuitive design and increasing user confidence.
The screens below display the pre-rebranding designs by engineers and product managers:
You can view the redesigned screens I created after implementing the rebranding and design system below:
Want to learn more about design systems?
I also wrote about what design systems in general are about and gave an internal presentation on it to educate other non-designer departments. We discussed what design systems entail, how they ramp up efficiency, and even ways to calculate their Return on Investment (ROI).
View presentation
You can access the entire Design system I have set up here:
How I set up the production pipeline for the Design system
First sprint: Do a proper UX audit and conduct a heuristic evaluation of the product you work on, to identify usability issues, inconsistencies in terms of UX patterns and branding. Then present these findings back to the team to create awareness of the problems with suggestions to fix them. View an example of that analysis here
Second sprint: Build the final styles, branding guidelines, colours, typography and components in Figma. Define the layout and the spacing.
Third sprint: Create the different screens of the product with the new design system styles, components and rules in Figma, such as responsive screens and all the state pages (error and empty etc).
Fourth sprint: Document the information in a UX backlog and tickets share it with stakeholders and developers. Especially working together in a partnership way with a Product Manager to ensure the tickets get prioritized correctly. Set up a separate slack channel with the front-end engineers and product manager for visibility and to allow a safe space for the front-end engineers to ask questions on the design system during production and design handover.
*A sprint consists of 3 weeks of work
It really helped to have a quick 30 min sync in each sprint with the front-enders and Product manager to view their work on the design system, check up on their process and offer support when needed.
Here is an example of how I specified specs of components so that the handover for front-end engineers was made easier:
The main benefits of a design system
Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between cross functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
View more work
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
The main benefits of a design system
Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between cross functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
© Copyright © 2023 Studio VLI All Rights Reserved. Images from this site may not be reproduced or edited without prior written permission of Studio VLI (aka Viviane Leezer Illustrations). Featured brands are the intellectual property of their respective owners. Select works may be shown in concept form and may not represent final published work.
Client
Brit insurance aka BritX / Otto innovation department
Project
At Brit insurance I was their sole Product Designer. This meant I was in charge of defining the look and feel of their brand and in charge of setting up their design system from scratch.
This meant that I:
-Art directed the look and feel.
-Build the final styles (colours, text styles, shadows, etc.) and components in Figma.
-Set up documentation for the Front-end developers to implement components in storybook
Before I joined Brit insurance most components and products where designed by non-designer departments. I was the first Design lead that joined.
This meant there was a ton of UX debt and a real lack of strategic thinking in terms of design work-processes and long term vision UX patterns.
Whenever a new project or phase kicked off, it meant whipping up a brand-new component library each time. So, new components were churned out repeatedly, with their style changing every time to fit the function at hand.
As such I took charge of setting up the BritX / Otto branding and design system to increase efficiency, production and change the way of working for design.
Credits
Product Designer: Viviane Leezer
Front-end Engineers: Elliot Davies & Andy Idiaghe
The main benefits of a design system
Design (and development) work can be created and replicated quickly and at scale.
The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.
It alleviates strain on design resources to focus on larger, more complex problems.
Since simpler UI elements are created already and reusable, design resources can focus less on tweaking visual appearance and more on more-complex problems (like information prioritization, workflow optimization, and journey management). This becomes substantial when you must coordinate efforts across dozens of teams and thousands of screens.
It creates a unified language within and between cross functional teams.
A unified language reduces wasted design or development time around miscommunications. For example, the functionality or appearance of a dropdown menu would not be debated, since that term is reserved for a specifically defined element within the design system.
It creates visual consistency across products, channels, and (potentially siloed) departments.
Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand. Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As an added bonus, any major visual rebrands or redesigns can be managed at scale through the design system.
It can serve as an educational tool and reference for junior-level designers and content contributors.
Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.