Context & Challenges
Results & Learnings
INTRODUCTION
Before diving into the product itself, it is essential to understand what Bizagi is, what services it offers, and how Sites fits into this ecosystem.
Bizagi is a company that helps organizations optimize their internal operations, improving efficiency through a workflow modeler. With this tool, users can design their own diagrams, test their effectiveness, and test its efficiency.
Additionally, the modeler allows for responsibility management, and workload assignment because it provides a 360° view of all stakeholders involved in a given context.
INTRODUCTION
Before diving into the product itself, it is essential to understand what Bizagi is, what services it offers, and how Sites fits into this ecosystem.
Bizagi is a company that helps organizations optimize their internal operations, improving efficiency through a workflow modeler. With this tool, users can design their own diagrams, test their effectiveness, and test its efficiency.
Additionally, the modeler allows for responsibility management, and workload assignment because it provides a 360° view of all stakeholders involved in a given context.
INTRODUCTION
Before diving into the product itself, it is essential to understand what Bizagi is, what services it offers, and how Sites fits into this ecosystem.
Bizagi is a company that helps organizations optimize their internal operations, improving efficiency through a workflow modeler. With this tool, users can design their own diagrams, test their effectiveness, and test its efficiency.
Additionally, the modeler allows for responsibility management, and workload assignment because it provides a 360° view of all stakeholders involved in a given context.
OVERVIEW
Our ultimate goal was to make Sites stable and powerful enough for production, as up to that point, it was still a test product.
To achieve this, we needed to make several fundamental improvements to support different use cases, along with a significant enhancement in the user experience overall.
Thus, we had to focus on the following areas and problem identification:
• General improvement of the user experience.
• Recomposition of the architecture.
• Facilitate navigation and usability
• Refining the language and tone of voice.
• Better guide users in their tasks.
• Creating a stable, responsive, and flexible product.
• Developing new controls for data visualization and management.
• Defining priorities and features.
• Understanding the most significant pain points for users.
OVERVIEW
Our ultimate goal was to make Sites stable and powerful enough for production, as up to that point, it was still a test product.
To achieve this, we needed to make several fundamental improvements to support different use cases, along with a significant enhancement in the user experience overall.
Thus, we had to focus on the following areas and problem identification:
• General improvement of the user experience.
• Recomposition of the architecture.
• Facilitate navigation and usability
• Refining the language and tone of voice.
• Better guide users in their tasks.
• Creating a stable, responsive, and flexible product.
• Developing new controls for data visualization and management.
• Defining priorities and features.
• Understanding the most significant pain points for users.
OVERVIEW
Our ultimate goal was to make Sites stable and powerful enough for production, as up to that point, it was still a test product.
To achieve this, we needed to make several fundamental improvements to support different use cases, along with a significant enhancement in the user experience overall.
Thus, we had to focus on the following areas and problem identification:
• General improvement of the user experience.
• Recomposition of the architecture.
• Facilitate navigation and usability
• Refining the language and tone of voice.
• Better guide users in their tasks.
• Creating a stable, responsive, and flexible product.
• Developing new controls for data visualization and management.
• Defining priorities and features.
• Understanding the most significant pain points for users.
THE CHALLENGE
The challenge was to identify how we could bridge the gap between functionalities and necessities, providing solutions to these pain points and enhancing the positive user experience with Sites. We aimed to achieve this without compromising the overall usability while improving the overall platform.
Through user interviews and direct interaction with the tool, we identified that the most critical pain point preventing us from going into production was the need to redefine how new sites were designed.
At that time, the canvas area was measured in absolute units, making it incompatible with different screen resolutions and devices. This meant that the effort put into designing a site would not be reflected if the final user accessed it from a screen with slightly different dimensions.
To address this, we began defining a responsive framework that needed to meet the following criteria:
• Switching element calculations from absolute values to percentages.
• Determining the best approach to make Sites responsive
• Manage responsiveness flexibly without compromising usability.
• Adapting existing controls to responsive behavior.
• Defining new components to meet these needs.
• Create a columns and rows grid for responsiveness.
THE CHALLENGE
The challenge was to identify how we could bridge the gap between functionalities and necessities, providing solutions to these pain points and enhancing the positive user experience with Sites. We aimed to achieve this without compromising the overall usability while improving the overall platform.
Through user interviews and direct interaction with the tool, we identified that the most critical pain point preventing us from going into production was the need to redefine how new sites were designed.
At that time, the canvas area was measured in absolute units, making it incompatible with different screen resolutions and devices. This meant that the effort put into designing a site would not be reflected if the final user accessed it from a screen with slightly different dimensions.
To address this, we began defining a responsive framework that needed to meet the following criteria:
• Switching element calculations from absolute values to percentages.
• Determining the best approach to make Sites responsive
• Manage responsiveness flexibly without compromising usability.
• Adapting existing controls to responsive behavior.
• Defining new components to meet these needs.
• Create a columns and rows grid for responsiveness.
THE CHALLENGE
The challenge was to identify how we could bridge the gap between functionalities and necessities, providing solutions to these pain points and enhancing the positive user experience with Sites. We aimed to achieve this without compromising the overall usability while improving the overall platform.
Through user interviews and direct interaction with the tool, we identified that the most critical pain point preventing us from going into production was the need to redefine how new sites were designed.
At that time, the canvas area was measured in absolute units, making it incompatible with different screen resolutions and devices. This meant that the effort put into designing a site would not be reflected if the final user accessed it from a screen with slightly different dimensions.
To address this, we began defining a responsive framework that needed to meet the following criteria:
• Switching element calculations from absolute values to percentages.
• Determining the best approach to make Sites responsive
• Manage responsiveness flexibly without compromising usability.
• Adapting existing controls to responsive behavior.
• Defining new components to meet these needs.
• Create a columns and rows grid for responsiveness.
UX ROLE
As always, the process began with research; user interviews, tool demos, user persona creation, wireframes, proposals, usability tests, validations, and redesigns.
I also conducted discussions with developers and performed benchmarking to find relevant references, establish a foundation for our work, understand technical constraints, and define the scope when proposing solutions.
• User interviews
• Creation of user personas
• Moderating interviews
• A/B Testing
• Designing the layout component
• Defining UX and behavioral guidelines
• Proposing new controls and components
• Identifying standards and parameters for responsive behaviors
DEFINING THE PROBLEM
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.
LAYOUT CONTAINER
I started working with a column and row grid that would not only be implemented in Sites itself but also in the canvas where users would design, and stakeholders would visualize the data.
Designing the responsive layout container for Sites involved extensive research, numerous meetings, and validations from developers and real users, considering their technical insights, constraints, and proposed possibilities. Simultaneously, UX validations were conducted and after the layout proposal's acceptance, a prototype was created.
The process involved:
• Research on no-code designers.
• Defining usability parameters.
• Creating and validating proposals.
• Prototyping.
• Designing and conducting user tests.
• Gathering feedback and documentation.
• Implementing changes based on feedback.
• Execution and implementation.
• Validation through QA sessions.
• Documenting results.
To validate the proposal I created a prototype where users needed to follow a script in order to create a new site using Bizagi Sites, so I could understand and validate the proposed behavior and interactions, besides the new components that were designed as part of the implementation.
Here, you can interact with the prototype used for user testing, which was ultimately implemented in the Sites workflow.
DEFINING THE PROBLEM
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.
RESULTS
The design stage lasted approximately six months, spanning from research to prototyping. The initial development focused on new controls, uploader functionalities, filters, and various data visualization controls.
The outcome of this process was not only on the UX side of development but also included many UI improvements and modifications.
📌 If you want to learn all about it and how it interacts with this case study, check it out here:
This development was a huge success—the proposals were accepted with minor changes and began being implemented with all the UX parameters defined during the research.
Consolidating the responsive behavior for Sites was the most crucial step, but not the only one, as it was part of a broader development process.
Key outcomes included:
• 7 new controls for data display and management
• Layout Container control for Site's designer.
• Layout Container as a defined behavior in Sites as a product.
• General stabilization and architectural improvements
• Design of taxonomies and new element groupings
• Sites was launched in production with over 200,000 users.
This development was a huge success—the proposals were accepted with minor changes and began being implemented with all the UX parameters defined during the research.
Consolidating the responsive behavior for Sites was the most crucial step, but not the only one, as it was part of a broader development process.
Key outcomes included:
• 7 new controls for data display and management
• Layout Container control for Site's designer.
• Layout Container as a defined behavior in Sites as a product.
• General stabilization and architectural improvements
• Design of taxonomies and new element groupings
• Sites was launched in production with over 200,000 users.
This development was a huge success—the proposals were accepted with minor changes and began being implemented with all the UX parameters defined during the research.
Consolidating the responsive behavior for Sites was the most crucial step, but not the only one, as it was part of a broader development process.
Key outcomes included:
• 7 new controls for data display and management
• Layout Container control for Site's designer.
• Layout Container as a defined behavior in Sites as a product.
• General stabilization and architectural improvements
• Design of taxonomies and new element groupings
• Sites was launched in production with over 200,000 users.
LEARNINGS & NEXT STEPS
Designing for different devices and resolutions helped me understand the limitations and advantages of static elements, how to tackle complex product challenges, and how to apply solutions across different scenarios.
Key learnings:
• Responsiveness.
• User research.
• Soft skills.
• Product design and prioritization.
• Process documentation.
• Narrative and storytelling.
• Presenting results.
• Proposal validation.
• B2B & B2C product experience.
• Handling complex product requests.
After getting the green light to implement the Layout Container, I redesigned all the existing menus on the site to enhance interaction, group functionalities, limit capabilities to prevent human errors, and adapt them to the new Sites behavior.
These new menus were presented and validated, but before development work began, I changed companies and was unable to continue with the implementation process.
LEARNINGS & NEXT STEPS
Designing for different devices and resolutions helped me understand the limitations and advantages of static elements, how to tackle complex product challenges, and how to apply solutions across different scenarios.
Key learnings:
• Responsiveness.
• User research.
• Soft skills.
• Product design and prioritization.
• Process documentation.
• Narrative and storytelling.
• Presenting results.
• Proposal validation.
• B2B & B2C product experience.
• Handling complex product requests.
After getting the green light to implement the Layout Container, I redesigned all the existing menus on the site to enhance interaction, group functionalities, limit capabilities to prevent human errors, and adapt them to the new Sites behavior.
These new menus were presented and validated, but before development work began, I changed companies and was unable to continue with the implementation process.
LEARNINGS & NEXT STEPS
Designing for different devices and resolutions helped me understand the limitations and advantages of static elements, how to tackle complex product challenges, and how to apply solutions across different scenarios.
Key learnings:
• Responsiveness.
• User research.
• Soft skills.
• Product design and prioritization.
• Process documentation.
• Narrative and storytelling.
• Presenting results.
• Proposal validation.
• B2B & B2C product experience.
• Handling complex product requests.
After getting the green light to implement the Layout Container, I redesigned all the existing menus on the site to enhance interaction, group functionalities, limit capabilities to prevent human errors, and adapt them to the new Sites behavior.
These new menus were presented and validated, but before development work began, I changed companies and was unable to continue with the implementation process.
NEXT CASE
NEXT CASE
NEXT CASE
Campaign Management
Campaign Management
Campaign Management
Product Design
Product Design
Product Design
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.