BIZAGI DS
CRAFTING CONSISTENCY
UX/UI CASE STUDY
OVERVIEW
It is essential to understand and communicate the importance of a design system within the company. Standardizing behaviors, states, variants, and instances improves efficiency in designing, coding, and maintaining products. By reusing elements, we ensure consistency and stability across all components and products, reducing the need for custom development and accelerating the design and implementation process.
At Bizagi, we had an advanced and comprehensive design system. However, with the creation of new products and emerging needs, it became necessary to redefine existing components and introduce new ones.
Thus, we needed to understand the current state of the design system to implement the necessary improvements and corrections:
• Identify the current state of the DS.
• Detect outdated components.
• Define construction, design, and validation standards.
• Standardize naming conventions and states.
• Design and integrate new components.
• Implement and document use cases.
THE CHALLENGE
At a certain point, the design system had grown so large and was spread across so many products that we lost clarity on its effectiveness and alignment with our corporate language.
A system update was necessary to keep it relevant, flexible, and scalable, ensuring it could evolve over time without compromising the company’s identity while being adaptable to multiple products.
Key challenges included:
• Determine which components were still relevant and aligned.
• Establishing user and platform needs.
• Defining the taxonomy for component classification.
• Update and deprecate components accordingly
• Establishing clear criteria for defining a component.
• Document best practices and DS standards
• Designing and implementing new components.
THE CHALLENGE
At a certain point, the design system had grown so large and was spread across so many products that we lost clarity on its effectiveness and alignment with our corporate language.
A system update was necessary to keep it relevant, flexible, and scalable, ensuring it could evolve over time without compromising the company’s identity while being adaptable to multiple products.
Key challenges included:
• Determine which components were still relevant and aligned.
• Establishing user and platform needs.
• Defining the taxonomy for component classification.
• Update and deprecate components accordingly
• Establishing clear criteria for defining a component.
• Document best practices and DS standards
• Designing and implementing new components.
THE CHALLENGE
At a certain point, the design system had grown so large and was spread across so many products that we lost clarity on its effectiveness and alignment with our corporate language.
A system update was necessary to keep it relevant, flexible, and scalable, ensuring it could evolve over time without compromising the company’s identity while being adaptable to multiple products.
Key challenges included:
• Determine which components were still relevant and aligned.
• Establishing user and platform needs.
• Defining the taxonomy for component classification.
• Update and deprecate components accordingly
• Establishing clear criteria for defining a component.
• Document best practices and DS standards
• Designing and implementing new components.
UX ROLE
My role focused on understanding how my products interacted with the design system and identifying its limitations across different use cases, contexts, and stakeholders.
The idea was to generate a complete map of the current state of the DS so we as designers identify specific aspects and elements to evaluate and eventually improve.
Key UX tasks:
• Define the characteristics that make up a component.
• Initial filtering of current components.
• Clean-up: Deprecate unused components.
• QA sessions based on predefined evaluation criteria.
• Enhancement: Address issues identified during QA.
• List which components are actively used.
• Identify use cases and what is not solved yet.
• Standardize the design system.
• Identify unmet use cases and develop new components.
FROM SITES TO DS
From my product in charge, Bizagi Sites, I conducted a research and prototyping process to identify unmet needs in the design system.
Key research steps:
• User interviews: to understand their needs and pain points.
• Designed 3 User Personas that encapsulated our core needs.
• Developed 13 use case-based components.
• 13 new components designed and implemented.
📌 This research is explained in detail in the Bizagi Sites Product Design case check it here to know more about it:
UX ROLE
My role focused on understanding how my products interacted with the design system and identifying its limitations across different use cases, contexts, and stakeholders.
The idea was to generate a complete map of the current state of the DS so we as designers identify specific aspects and elements to evaluate and eventually improve.
Key UX tasks:
• Define the characteristics that make up a component.
• Initial filtering of current components.
• Clean-up: Deprecate unused components.
• QA sessions based on predefined evaluation criteria.
• Enhancement: Address issues identified during QA.
• List which components are actively used.
• Identify use cases and what is not solved yet.
• Standardize the design system.
• Identify unmet use cases and develop new components.
FROM SITES TO DS
From my product in charge, Bizagi Sites, I conducted a research and prototyping process to identify unmet needs in the design system.
Key research steps:
• User interviews: to understand their needs and pain points.
• Designed 3 User Personas that encapsulated our core needs.
• Developed 13 use case-based components.
• 13 new components designed and implemented.
📌 This research is explained in detail in the Bizagi Sites Product Design case check it here to know more about it:
UX ROLE
My role focused on understanding how my products interacted with the design system and identifying its limitations across different use cases, contexts, and stakeholders.
The idea was to generate a complete map of the current state of the DS so we as designers identify specific aspects and elements to evaluate and eventually improve.
Key UX tasks:
• Define the characteristics that make up a component.
• Initial filtering of current components.
• Clean-up: Deprecate unused components.
• QA sessions based on predefined evaluation criteria.
• Enhancement: Address issues identified during QA.
• List which components are actively used.
• Identify use cases and what is not solved yet.
• Standardize the design system.
• Identify unmet use cases and develop new components.
FROM SITES TO DS
From my product in charge, Bizagi Sites, I conducted a research and prototyping process to identify unmet needs in the design system.
Key research steps:
• User interviews: to understand their needs and pain points.
• Designed 3 User Personas that encapsulated our core needs.
• Developed 13 use case-based components.
• 13 new components designed and implemented.
📌 This research is explained in detail in the Bizagi Sites Product Design case check it here to know more about it:
[LINK]
RESULTS
We optimized team efficiency, allowing us to focus more on innovation and deliver an exceptional user experience through a standardized communication framework.
Key outcomes:
• 25 new components added.
• A fully structured DS with 120+ components.
• Simplification into 5 main categories.
• Full standardization of the design system.
LEARNINGS
• How to Document a design system.
• Effective task division and teamwork strategies.
• Parameters definition for complex scenarios.
• Taxonomy design and component categorization.
• Ensuring long-term scalability in DS development.
RESULTS
We optimized team efficiency, allowing us to focus more on innovation and deliver an exceptional user experience through a standardized communication framework.
Key outcomes:
• 25 new components added.
• A fully structured DS with 120+ components.
• Simplification into 5 main categories.
• Full standardization of the design system.
LEARNINGS
• How to Document a design system.
• Effective task division and teamwork strategies.
• Parameters definition for complex scenarios.
• Taxonomy design and component categorization.
• Ensuring long-term scalability in DS development.
RESULTS
We optimized team efficiency, allowing us to focus more on innovation and deliver an exceptional user experience through a standardized communication framework.
Key outcomes:
• 25 new components added.
• A fully structured DS with 120+ components.
• Simplification into 5 main categories.
• Full standardization of the design system.
LEARNINGS
• How to Document a design system.
• Effective task division and teamwork strategies.
• Parameters definition for complex scenarios.
• Taxonomy design and component categorization.
• Ensuring long-term scalability in DS development.
NEXT CASE
NEXT CASE
NEXT CASE
Sites: Designing a designer
Bizagi Sites
Product Design Case
Bizagi Engineering - Bogota Colombia
LIKE WHAT YOU SEE?
LIKE WHAT YOU SEE?
LIKE WHAT YOU SEE?
LETS WORK TOGETHER
LETS WORK TOGETHER
LETS WORK TOGETHER
This could be the start of something great, send me an email so we can get to know each other.
This could be the start of something great, send me an email so we can get to know each other
This could be the start of something great, send me an email so we can get to know each other.