DESIGN SYSTEMS
DESIGN SYSTEMS
DESIGN SYSTEMS
Design Systems
Design Systems
UX/UI Design
UX/UI Design
Mar 2020 - Present
Mar 2020 - Present
Mar 2020 - Present
The challenge & UX Role
Solving problems & Consistency
Iteration & Scalability
INTRODUCTION
Its crucial to understand and transmit the relevance of having a design system; standardizing behaviors, states, variants and instances increases the efficiency while working, designing and coding by re-using elements will assure that all components and products keep the same stability and language.
Reducing the effort of creating new components and eliminating the "code by demand" development, speeding up the process of designing and implementing besides of managing a common language through all the communicative elements of a company.
INTRODUCTION
Its crucial to understand and transmit the relevance of having a design system; standardizing behaviors, states, variants and instances increases the efficiency while working, designing and coding by re-using elements will assure that all components and products keep the same stability and language.
Reducing the effort of creating new components and eliminating the "code by demand" development, speeding up the process of designing and implementing besides of managing a common language through all the communicative elements of a company.
INTRODUCTION
Its crucial to understand and transmit the relevance of having a design system; standardizing behaviors, states, variants and instances increases the efficiency while working, designing and coding by re-using elements will assure that all components and products keep the same stability and language.
Reducing the effort of creating new components and eliminating the "code by demand" development, speeding up the process of designing and implementing besides of managing a common language through all the communicative elements of a company.
How I do it
How I do it
How I do it
As UXer I have worked with already existing design systems that my colleagues and previous designers from the company have developed in the past, so, the first task I undertake when entering a new workplace is to understand the visual and behavioral language used across the products created, both for internal and external users. I aim to understand how they interact with each other and, most importantly, the communicative intention that the company aims to convey.
This way, when entering Figma and starting to create wireframes with the new flow requirements, it becomes easier for me to interact with the components and their respective states and having clarity of the communicative range I can abroad.
Likewise, part of my duties as a designer and communicator is to update and verify the proper use of these elements, including components and their responsiveness, as well as UI characteristics, to ensure precise understanding and usability.
On product level, I review the platforms under my responsibility and identify all those elements that, due to technological innovation, better usage, or new standards in the field, are becoming outdated compared to the digital landscape they are constantly compared to.
THE CHALLENGE
The challenge while interacting, creating, and maintaining a design system lies in balancing consistency with flexibility and scalability.
Consistency: Design systems aim to establish a consistent visual language and user experience across all products and platforms. However, ensuring this consistency while accommodating diverse needs, contexts, and evolving design trends can be tricky and sometimes the technicians constrains and scope limitations don't make it possible so it also needs to be flexible.
Flexibility: While consistency is crucial, design systems must also allow for flexibility to adapt to unique requirements of different projects, teams, and user contexts. So it's necessary to strike a balance between enforcing standards and allowing for creative expression and customization.
Scalability: As products grow and evolve, design systems must grow accordingly to accommodate new features, functionalities, and platforms. Anticipate future needs and design system components in a way that facilitates easy expansion and maintenance.
Collaboration: Most of the time creating a design system involves collaboration across multidisciplinary teams, including designers, developers, product managers, and stakeholders. Effective communication and collaboration are essential to ensure alignment (so please name Figma layers).
Maintenance: Updating components, documentation, and guidelines, as well as incorporating feedback.
THE CHALLENGE
The challenge while interacting, creating, and maintaining a design system lies in balancing consistency with flexibility and scalability.
Consistency: Design systems aim to establish a consistent visual language and user experience across all products and platforms. However, ensuring this consistency while accommodating diverse needs, contexts, and evolving design trends can be tricky and sometimes the technicians constrains and scope limitations don't make it possible so it also needs to be flexible.
Flexibility: While consistency is crucial, design systems must also allow for flexibility to adapt to unique requirements of different projects, teams, and user contexts. So it's necessary to strike a balance between enforcing standards and allowing for creative expression and customization.
Scalability: As products grow and evolve, design systems must grow accordingly to accommodate new features, functionalities, and platforms. Anticipate future needs and design system components in a way that facilitates easy expansion and maintenance.
Collaboration: Most of the time creating a design system involves collaboration across multidisciplinary teams, including designers, developers, product managers, and stakeholders. Effective communication and collaboration are essential to ensure alignment (so please name Figma layers).
Maintenance: Updating components, documentation, and guidelines, as well as incorporating feedback.
THE CHALLENGE
The challenge while interacting, creating, and maintaining a design system lies in balancing consistency with flexibility and scalability.
Consistency: Design systems aim to establish a consistent visual language and user experience across all products and platforms. However, ensuring this consistency while accommodating diverse needs, contexts, and evolving design trends can be tricky and sometimes the technicians constrains and scope limitations don't make it possible so it also needs to be flexible.
Flexibility: While consistency is crucial, design systems must also allow for flexibility to adapt to unique requirements of different projects, teams, and user contexts. So it's necessary to strike a balance between enforcing standards and allowing for creative expression and customization.
Scalability: As products grow and evolve, design systems must grow accordingly to accommodate new features, functionalities, and platforms. Anticipate future needs and design system components in a way that facilitates easy expansion and maintenance.
Collaboration: Most of the time creating a design system involves collaboration across multidisciplinary teams, including designers, developers, product managers, and stakeholders. Effective communication and collaboration are essential to ensure alignment (so please name Figma layers).
Maintenance: Updating components, documentation, and guidelines, as well as incorporating feedback.
UX ROLE
As said before design systems, much like UX design itself, lack a definitive finish line; instead, they resemble a checkpoint race where the aim is to keep evolving as needed while being flexible enough to, as a living product, going under continuous evolution and iterations.
Therefore, it is necessary to have a model not only to share and document the changes made to the design system, but it is also essential to have a schema of acceptance criteria that stipulates the minimum and necessary characteristics for adding new components and evaluating existing ones, to confirming its flexibility, scalability, and relevance of the components that comprise it.
To achieve this, I developed a UI and UX feature map that components needed to comply with in order to be accepted within the system or, to make the necessary adjustments to preserve naming equivalences, states, sizes and re-zing, interactions, and behaviors, ensuring stability across the company communication.
Additionally, this same map allowed us to have a checklist to consider when designing new members of our design system; components that would be validated not only by me, but also by the members of the UX team to define how this new component would integrate and adapt to the different use cases that varied from product to product.
Since the design system is a collaborative project, it is essential to be on the same page from naming, nomenclature, and the order of instances that make up the granular elements of a single design component.
UX ROLE
As said before design systems, much like UX design itself, lack a definitive finish line; instead, they resemble a checkpoint race where the aim is to keep evolving as needed while being flexible enough to, as a living product, going under continuous evolution and iterations.
Therefore, it is necessary to have a model not only to share and document the changes made to the design system, but it is also essential to have a schema of acceptance criteria that stipulates the minimum and necessary characteristics for adding new components and evaluating existing ones, to confirming its flexibility, scalability, and relevance of the components that comprise it.
To achieve this, I developed a UI and UX feature map that components needed to comply with in order to be accepted within the system or, to make the necessary adjustments to preserve naming equivalences, states, sizes and re-zing, interactions, and behaviors, ensuring stability across the company communication.
Additionally, this same map allowed us to have a checklist to consider when designing new members of our design system; components that would be validated not only by me, but also by the members of the UX team to define how this new component would integrate and adapt to the different use cases that varied from product to product.
Since the design system is a collaborative project, it is essential to be on the same page from naming, nomenclature, and the order of instances that make up the granular elements of a single design component.
QUALITY ASSURANCE
In order to understand the real needs and the real size of the gap, I organized a set of user interviews to determine the most common necessities and use cases present in the daily usage of the platform. The goal was to explore how we could address them through new controls, graphic elements, behaviors, and architecture.
User Interviews and User Persona
A script was written with a set of questions that 9 real users answered in individual interviews. With all the feedback gathered and quantified using a reporting tool, we developed a clear map of quantitative and qualitative information. This information not only pertained to Sites as a platform but also gathered the real needs our users had within their respective companies and roles.
Three user personas were created: Sebastian, Maria Camila, and Marcela. Each had different levels of responsibilities in a hypothetical company, entailing diverse needs and roles on a common platform. This platform needed to be created using Bizagi Sites. With the profiles established and the needs understood, I designed a Site template for the human resources area of a company.
SOLVING PROBLEMS
One of the biggest issues within the agile methodology in technology companies is the correct management of time; definition, planning, and execution, all require mental and physical effort, and there are times when so much resources are used in the initial stages that when it comes to execution, it has to be done a bit rushed.
If we remove from the picture the mind and workload required for coding and design by demand and replace it with more time, whether for execution or planning, the result will be better in every way. It is at this pain point where design systems come into play, as having the created and tested resources up our sleeve, removes the discomfort of having to work from scratch and re-do over and over again.
This applies to both, design and development. If our design system functions as a "white label" in terms of the different products that SAAS companies handles, we already have a large part of the implementation assured. In addition to accelerating the execution of the requirement, we are preserving the graphic, visual, and communicative identity of the products and consequently of the company.
By optimizing workers' time and giving us more space to focus on innovation, we can deliver an exceptional user experience.
SOLVING PROBLEMS
One of the biggest issues within the agile methodology in technology companies is the correct management of time; definition, planning, and execution, all require mental and physical effort, and there are times when so much resources are used in the initial stages that when it comes to execution, it has to be done a bit rushed.
If we remove from the picture the mind and workload required for coding and design by demand and replace it with more time, whether for execution or planning, the result will be better in every way. It is at this pain point where design systems come into play, as having the created and tested resources up our sleeve, removes the discomfort of having to work from scratch and re-do over and over again.
This applies to both, design and development. If our design system functions as a "white label" in terms of the different products that SAAS companies handles, we already have a large part of the implementation assured. In addition to accelerating the execution of the requirement, we are preserving the graphic, visual, and communicative identity of the products and consequently of the company.
By optimizing workers' time and giving us more space to focus on innovation, we can deliver an exceptional user experience.
SOLVING PROBLEMS
One of the biggest issues within the agile methodology in technology companies is the correct management of time; definition, planning, and execution, all require mental and physical effort, and there are times when so much resources are used in the initial stages that when it comes to execution, it has to be done a bit rushed.
If we remove from the picture the mind and workload required for coding and design by demand and replace it with more time, whether for execution or planning, the result will be better in every way. It is at this pain point where design systems come into play, as having the created and tested resources up our sleeve, removes the discomfort of having to work from scratch and re-do over and over again.
This applies to both, design and development. If our design system functions as a "white label" in terms of the different products that SAAS companies handles, we already have a large part of the implementation assured. In addition to accelerating the execution of the requirement, we are preserving the graphic, visual, and communicative identity of the products and consequently of the company.
By optimizing workers' time and giving us more space to focus on innovation, we can deliver an exceptional user experience.
ITERATIONS & SCABILITY
The primary objective by building a design system is to bridge the gap between our design proposals and final product implementation always having in mind user needs and how to solve them; elements not only to facilitate users in achieving their objectives but also serves promoting the UX principles within the company.
In order to establish standardized and cohesive language across various divisions and products; So whether it's a sleek button, a dynamic form element, or an interactive widget, each component is crafted to be, consistent, flexible and scalable.
This ensures a cohesive and polished aesthetic UI that allow users and developers to easily understand and navigate the across platforms; reducing the learning curve between products, and accelerating the entire implementation and design process thanks to a solid foundational framework.
ITERATIONS & SCABILITY
The primary objective by building a design system is to bridge the gap between our design proposals and final product implementation always having in mind user needs and how to solve them; elements not only to facilitate users in achieving their objectives but also serves promoting the UX principles within the company.
In order to establish standardized and cohesive language across various divisions and products; So whether it's a sleek button, a dynamic form element, or an interactive widget, each component is crafted to be, consistent, flexible and scalable.
This ensures a cohesive and polished aesthetic UI that allow users and developers to easily understand and navigate the across platforms; reducing the learning curve between products, and accelerating the entire implementation and design process thanks to a solid foundational framework.
ITERATIONS & SCABILITY
The primary objective by building a design system is to bridge the gap between our design proposals and final product implementation always having in mind user needs and how to solve them; elements not only to facilitate users in achieving their objectives but also serves promoting the UX principles within the company.
In order to establish standardized and cohesive language across various divisions and products; So whether it's a sleek button, a dynamic form element, or an interactive widget, each component is crafted to be, consistent, flexible and scalable.
This ensures a cohesive and polished aesthetic UI that allow users and developers to easily understand and navigate the across platforms; reducing the learning curve between products, and accelerating the entire implementation and design process thanks to a solid foundational framework.
NEXT CASE
NEXT CASE
NEXT CASE
Bizagi Engineering - Bogota, Colombia
Bizagi Sites
Mar 2020 - Nov 2021
Bizagi Engineering - Bogota Colombia
SEBASTIAN DOMINGUEZ
SEBASTIAN DOMINGUEZ
SEBASTIAN DOMINGUEZ
UX DESIGNER
UX DESIGNER
UX DESIGNER