Evolving a design system to increase efficiency and collaboration
By: Manuel Cespedes
Evolving a design system to increase efficiency and collaboration
By: Manuel Cespedes
Evolving a design system to increase efficiency and collaboration
By: Manuel Cespedes
Company
Foureyes
Company
Foureyes
Role
Senior Product Designer
Role
Senior Product Designer
Team
Product Design
Team
Product Design
Dates
Jul 2021 - Nov 2022
Dates
Jul 2021 - Nov 2022
Relevant Links
Relevant Links
Relevant Links
Research | Project Management | Design Systems | Interaction Design | Documentation
Research | Project Management | Design Systems | Interaction Design | Documentation
Research | Project Management | Design Systems | Interaction Design | Documentation
Overview
The product team at Foureyes, a SaaS company, was growing and working on multiple products, which led to the need to find ways to improve the existing design system. The goals were to increase design efficiency and make cross-functional collaboration more effective. The results were a more efficient design process, faster product decision-making, and increased UI and UX consistency.
Overview
The product team at Foureyes, a SaaS company, was growing and working on multiple products, which led to the need to find ways to improve the existing design system. The goals were to increase design efficiency and make cross-functional collaboration more effective. The results were a more efficient design process, faster product decision-making, and increased UI and UX consistency.
Overview
The product team at Foureyes, a SaaS company, was growing and working on multiple products, which led to the need to find ways to improve the existing design system. The goals were to increase design efficiency and make cross-functional collaboration more effective. The results were a more efficient design process, faster product decision-making, and increased UI and UX consistency.
Role
As the lead product designer, my role involved collaborating with cross-functional partners, conducting a design system audit, creating a new UI design kit, documenting common UX patterns, creating templates, and advocating for the system’s use and maintenance.
Role
As the lead product designer, my role involved collaborating with cross-functional partners, conducting a design system audit, creating a new UI design kit, documenting common UX patterns, creating templates, and advocating for the system’s use and maintenance.
Role
As the lead product designer, my role involved collaborating with cross-functional partners, conducting a design system audit, creating a new UI design kit, documenting common UX patterns, creating templates, and advocating for the system’s use and maintenance.
To influence the work I drafted a project plan and a backlog to track the tasks
To influence the work I drafted a project plan and a backlog to track the tasks
To influence the work I drafted a project plan and a backlog to track the tasks
Challenge
The existing design system had several inefficiencies, including a lack of clear design guidelines, missing components, and inconsistent UX patterns. These inefficiencies hindered cross-functional collaboration, as product managers and engineers struggled to understand the design direction, and designers struggled to work and iterate effectively.
Challenge
The existing design system had several inefficiencies, including a lack of clear design guidelines, missing components, and inconsistent UX patterns. These inefficiencies hindered cross-functional collaboration, as product managers and engineers struggled to understand the design direction, and designers struggled to work and iterate effectively.
Challenge
The existing design system had several inefficiencies, including a lack of clear design guidelines, missing components, and inconsistent UX patterns. These inefficiencies hindered cross-functional collaboration, as product managers and engineers struggled to understand the design direction, and designers struggled to work and iterate effectively.
Mapping the design system landscape helped us identify opportunities
Mapping the design system landscape helped us identify opportunities
Mapping the design system landscape helped us identify opportunities
Research
To further understand the needs and pain-points of design system users, I spoke with stakeholders from product management, engineering, data science, customer experience, and marketing. These conversations helped me gain a better understanding of the issues that the team was facing and provided me with valuable insights for improving the design system.
Research
To further understand the needs and pain-points of design system users, I spoke with stakeholders from product management, engineering, data science, customer experience, and marketing. These conversations helped me gain a better understanding of the issues that the team was facing and provided me with valuable insights for improving the design system.
Research
To further understand the needs and pain-points of design system users, I spoke with stakeholders from product management, engineering, data science, customer experience, and marketing. These conversations helped me gain a better understanding of the issues that the team was facing and provided me with valuable insights for improving the design system.
Understanding the Users
Product Managers
Spending too much time in granular and nitpick decisions
Wasting time and energy in using multiple tools to communicate
Slow decision making (bad business)
Product Designers
Missing components, states, colors, etc.
Unreliable document management and organization of the UI kit
Clunky and slow prototyping
Engineering collaboration could improve
Front-end Engineers
Differences in code, designs, and requirements
Blocked by design decisions; uncertainty in making design decisionsLack of consistency
Design collaboration could improve
Understanding the Users
Product Managers
Spending too much time in granular and nitpick decisions
Wasting time and energy in using multiple tools to communicate
Slow decision making (bad business)
Product Designers
Missing components, states, colors, etc.
Unreliable document management and organization of the UI kit
Clunky and slow prototyping
Engineering collaboration could improve
Front-end Engineers
Differences in code, designs, and requirements
Blocked by design decisions; uncertainty in making design decisionsLack of consistency
Design collaboration could improve
Understanding the Users
Product Managers
Spending too much time in granular and nitpick decisions
Wasting time and energy in using multiple tools to communicate
Slow decision making (bad business)
Product Designers
Missing components, states, colors, etc.
Unreliable document management and organization of the UI kit
Clunky and slow prototyping
Engineering collaboration could improve
Front-end Engineers
Differences in code, designs, and requirements
Blocked by design decisions; uncertainty in making design decisionsLack of consistency
Design collaboration could improve
Solution
Based on analysis and research, we decided to evolve the existing design system by completing an audit, migrating the UI kit to Figma, and creating design guidelines for UX patterns. The team agreed to prioritize the project only after all other product work was completed.
Solution
Based on analysis and research, we decided to evolve the existing design system by completing an audit, migrating the UI kit to Figma, and creating design guidelines for UX patterns. The team agreed to prioritize the project only after all other product work was completed.
Solution
Based on analysis and research, we decided to evolve the existing design system by completing an audit, migrating the UI kit to Figma, and creating design guidelines for UX patterns. The team agreed to prioritize the project only after all other product work was completed.
The new design system landscape with future additions
The new design system landscape with future additions
The new design system landscape with future additions
Process
The process of evolving Foureyes' design system involved the following steps:
Conducting an audit of the design system, the live products, tooling, and documentation
Migrating and implementing the new design system UI kit
Conducting presentations and training sessions for the design and development teams
Creating guidelines of the most common UX design patterns
Collaborating with engineering to create a back-log and roadmap
Process
The process of evolving Foureyes' design system involved the following steps:
Conducting an audit of the design system, the live products, tooling, and documentation
Migrating and implementing the new design system UI kit
Conducting presentations and training sessions for the design and development teams
Creating guidelines of the most common UX design patterns
Collaborating with engineering to create a back-log and roadmap
Process
The process of evolving Foureyes' design system involved the following steps:
Conducting an audit of the design system, the live products, tooling, and documentation
Migrating and implementing the new design system UI kit
Conducting presentations and training sessions for the design and development teams
Creating guidelines of the most common UX design patterns
Collaborating with engineering to create a back-log and roadmap
Spreadsheet to audit components and track their status
Spreadsheet to audit components and track their status
Spreadsheet to audit components and track their status
Audit of Sketch UI design kit and components
Audit of Sketch UI design kit and components
Audit of Sketch UI design kit and components
Results & Impact
The updated design system had a positive impact on cross-functional collaboration by allowing for smoother communication between the design and development teams and reducing time spent on design-related discussions.
Design efficiency improved as the design process became more streamlined, leading to faster product development and reduced time to market. Decision-making was also impacted positively, as the updated design system provided a clear direction for the design team and allowed for quicker and more informed decision-making.
Results & Impact
The updated design system had a positive impact on cross-functional collaboration by allowing for smoother communication between the design and development teams and reducing time spent on design-related discussions.
Design efficiency improved as the design process became more streamlined, leading to faster product development and reduced time to market. Decision-making was also impacted positively, as the updated design system provided a clear direction for the design team and allowed for quicker and more informed decision-making.
Results & Impact
The updated design system had a positive impact on cross-functional collaboration by allowing for smoother communication between the design and development teams and reducing time spent on design-related discussions.
Design efficiency improved as the design process became more streamlined, leading to faster product development and reduced time to market. Decision-making was also impacted positively, as the updated design system provided a clear direction for the design team and allowed for quicker and more informed decision-making.
Deliverables
Cover of the new UI design kit (Figma library)
Cover of the new UI design kit (Figma library)
Cover of the new UI design kit (Figma library)
Typography and heading conventions
Typography and heading conventions
Typography and heading conventions
The consolidated and updated color palette
The consolidated and updated color palette
The consolidated and updated color palette
Updated iconography; organized and synced with development
Updated iconography; organized and synced with development
Updated iconography; organized and synced with development
Updated buttons with states and using variants
Updated buttons with states and using variants
Updated buttons with states and using variants
Text fields were consolidated and updated
Text fields were consolidated and updated
Text fields were consolidated and updated
Added missing inputs and controls
Added missing inputs and controls
Added missing inputs and controls
User Feebdack
The updated design system received positive feedback from both the design and development teams, who appreciated the clear and consistent design direction it provided. Customers also noted an improvement in the overall quality of the products, with more cohesive and high-quality user experiences across all products.
User Feebdack
The updated design system received positive feedback from both the design and development teams, who appreciated the clear and consistent design direction it provided. Customers also noted an improvement in the overall quality of the products, with more cohesive and high-quality user experiences across all products.
User Feebdack
The updated design system received positive feedback from both the design and development teams, who appreciated the clear and consistent design direction it provided. Customers also noted an improvement in the overall quality of the products, with more cohesive and high-quality user experiences across all products.
Moving Forward
The updated design system has set the foundation for future design system efforts at Foureyes. The design team will continue to monitor and evolve the design system as needed, to ensure it stays current and continues to meet the needs of all stakeholders.
Moving Forward
The updated design system has set the foundation for future design system efforts at Foureyes. The design team will continue to monitor and evolve the design system as needed, to ensure it stays current and continues to meet the needs of all stakeholders.
Moving Forward
The updated design system has set the foundation for future design system efforts at Foureyes. The design team will continue to monitor and evolve the design system as needed, to ensure it stays current and continues to meet the needs of all stakeholders.
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with ♥️ and 💪
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with ♥️ and 💪
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with ♥️ and 💪