Design systems • Process optimisation
Design systems • Process optimisation
Design systems • Process optimisation
Building a Design System to achieve 40% faster development
Building a Design System to achieve 40% faster development
Building a Design System to achieve 40% faster development
EXPERTISE
Product Design
Product Design
Product Design
YEAR
2024
2024
2024
Type
B2B - SaaS website and web app
B2B - SaaS website and web app
B2B - SaaS website and web app
When I joined the company, I stepped into a world of chaos. As the first designer, I quickly realized that design was an afterthought—developers were moving fast, building web applications without a structured design process. Every product looked different, and users struggled with inconsistent experiences. Buttons, menus, and forms changed from app to app, making navigation confusing and increasing frustration. It was clear that we needed order. We needed a design system.
When I joined the company, I stepped into a world of chaos. As the first designer, I quickly realized that design was an afterthought—developers were moving fast, building web applications without a structured design process. Every product looked different, and users struggled with inconsistent experiences. Buttons, menus, and forms changed from app to app, making navigation confusing and increasing frustration. It was clear that we needed order. We needed a design system.
When I joined the company, I stepped into a world of chaos. As the first designer, I quickly realized that design was an afterthought—developers were moving fast, building web applications without a structured design process. Every product looked different, and users struggled with inconsistent experiences. Buttons, menus, and forms changed from app to app, making navigation confusing and increasing frustration. It was clear that we needed order. We needed a design system.
Key results:
Key results:
Key results:
↑40%
↑40%
↑40%
Faster development
Faster development
Faster development
Standardized components significantly reduced development time
Standardized components significantly reduced development time
Standardized components significantly reduced development time
↓25%
↓25%
↓25%
Support requests
Support requests
Support requests
Improved usability resulted in fewer user issues and reduced client complaints
Improved usability resulted in fewer user issues and reduced client complaints
Improved usability resulted in fewer user issues and reduced client complaints
TL;DR
TL;DR
TL;DR
◾️ Created a scalable design system that reduced development time by 40%.
◽️ Conducted a comprehensive audit to identify inconsistencies and inefficiencies.
◾️ Established strong foundations, reusable components, and clear documentation.
◽️ Collaborated closely with developers to ensure seamless integration and adoption.
◾️ Transformed the company’s approach to design, making it a core part of the development process.
Table of Contents:
Table of Contents:
Table of Contents:
Click to fast
forward
Click to fast
forward
The problem:
The problem:
The problem:
Why inconsistency was holding us back
Why inconsistency was holding us back
Why inconsistency was holding us back
Our company specializes in creating different integrations and web apps for platforms like TS Commerce, Spotify, and more. With multiple projects in development at once, speed often took precedence over consistency. This led to applications that were difficult for users to navigate, challenging for clients to adopt, and time-consuming for developers to maintain.
Our company specializes in creating different integrations and web apps for platforms like TS Commerce, Spotify, and more. With multiple projects in development at once, speed often took precedence over consistency. This led to applications that were difficult for users to navigate, challenging for clients to adopt, and time-consuming for developers to maintain.
Our company specializes in creating different integrations and web apps for platforms like TS Commerce, Spotify, and more. With multiple projects in development at once, speed often took precedence over consistency. This led to applications that were difficult for users to navigate, challenging for clients to adopt, and time-consuming for developers to maintain.
Inconsistent UI elements
Inconsistent UI elements
Inconsistent UI elements
Developers relied on disparate frameworks or custom code, resulting in inconsistent visual styles and interaction patterns.
Developers relied on disparate frameworks or custom code, resulting in inconsistent visual styles and interaction patterns.
Developers relied on disparate frameworks or custom code, resulting in inconsistent visual styles and interaction patterns.
Limited collaboration
Limited collaboration
Limited collaboration
Tight deadlines meant backend developers often built interfaces independently, making design input sporadic or entirely absent.
Tight deadlines meant backend developers often built interfaces independently, making design input sporadic or entirely absent.
Tight deadlines meant backend developers often built interfaces independently, making design input sporadic or entirely absent.
Insufficient UX focus
Insufficient UX focus
Insufficient UX focus
Without unified guidelines, apps frequently had unclear navigation and confusing interactions, leading to user frustration.
Without unified guidelines, apps frequently had unclear navigation and confusing interactions, leading to user frustration.
Without unified guidelines, apps frequently had unclear navigation and confusing interactions, leading to user frustration.
Business goal:
A system to scale and simplify
Business goal:
A system to scale and simplify
Business goal:
A system to scale and simplify
The goal was to speed up development while improving usability. A standardized design system would reduce support requests, make applications easier to use, and help developers work more efficiently. This would lead to lower costs, enable the company to scale its operations and take on larger projects.
The goal was to speed up development while improving usability. A standardized design system would reduce support requests, make applications easier to use, and help developers work more efficiently. This would lead to lower costs, enable the company to scale its operations and take on larger projects.
The goal was to speed up development while improving usability. A standardized design system would reduce support requests, make applications easier to use, and help developers work more efficiently. This would lead to lower costs, enable the company to scale its operations and take on larger projects.
My role:
Bringing order to the chaos
My role:
Bringing order to the chaos
My role:
Bringing order to the chaos
As the first Product Designer, I wasn’t just designing screens—I was solving a much bigger problem. Development was happening in silos, with each project following different structures, patterns, and workflows. This lack of consistency made applications harder to navigate, maintain, and scale. My role was to change that. I built a structured design system from the ground up, introducing reusable components and clear UX guidelines. I was responsible for bringing a structured design approach into the company and improving collaboration between design and development. Moreover, I defined clear usability standards, making applications easier to use and maintain.
As the first Product Designer, I wasn’t just designing screens—I was solving a much bigger problem. Development was happening in silos, with each project following different structures, patterns, and workflows. This lack of consistency made applications harder to navigate, maintain, and scale. My role was to change that. I built a structured design system from the ground up, introducing reusable components and clear UX guidelines. I was responsible for bringing a structured design approach into the company and improving collaboration between design and development. Moreover, I defined clear usability standards, making applications easier to use and maintain.
As the first Product Designer, I wasn’t just designing screens—I was solving a much bigger problem. Development was happening in silos, with each project following different structures, patterns, and workflows. This lack of consistency made applications harder to navigate, maintain, and scale. My role was to change that. I built a structured design system from the ground up, introducing reusable components and clear UX guidelines. I was responsible for bringing a structured design approach into the company and improving collaboration between design and development. Moreover, I defined clear usability standards, making applications easier to use and maintain.
Trust the proccess
Trust the proccess
Trust the proccess
Comprehensive audit:
Comprehensive audit:
Comprehensive audit:
What our audit revealed and how we moved forward
What our audit revealed and how we moved forward
What our audit revealed and how we moved forward
Before defining our design system, we explored existing solutions. We initially considered using established design systems like Material Design, Atlassian, and Untitled UI. However, after discussions with our development team, we realized none of them fully met our needs or integrated well with our existing technologies. Instead of adopting one, we decided to extract inspiration and build a system tailored to our specific workflow.
To ensure we captured all inconsistencies, I conducted a comprehensive UX audit of our existing applications, analyzing patterns and identifying areas of friction. Additionally, I interviewed developers, stakeholders, and product managers to understand their daily challenges and long-term goals. By the end of this process, we had a clear understanding of where inconsistencies occurred, what needed standardization, and how we could create a scalable and efficient design system.
Before defining our design system, we explored existing solutions. We initially considered using established design systems like Material Design, Atlassian, and Untitled UI. However, after discussions with our development team, we realized none of them fully met our needs or integrated well with our existing technologies. Instead of adopting one, we decided to extract inspiration and build a system tailored to our specific workflow.
To ensure we captured all inconsistencies, I conducted a comprehensive UX audit of our existing applications, analyzing patterns and identifying areas of friction. Additionally, I interviewed developers, stakeholders, and product managers to understand their daily challenges and long-term goals. By the end of this process, we had a clear understanding of where inconsistencies occurred, what needed standardization, and how we could create a scalable and efficient design system.
Before defining our design system, we explored existing solutions. We initially considered using established design systems like Material Design, Atlassian, and Untitled UI. However, after discussions with our development team, we realized none of them fully met our needs or integrated well with our existing technologies. Instead of adopting one, we decided to extract inspiration and build a system tailored to our specific workflow.
To ensure we captured all inconsistencies, I conducted a comprehensive UX audit of our existing applications, analyzing patterns and identifying areas of friction. Additionally, I interviewed developers, stakeholders, and product managers to understand their daily challenges and long-term goals. By the end of this process, we had a clear understanding of where inconsistencies occurred, what needed standardization, and how we could create a scalable and efficient design system.
Structure:
Shaping the foundation of DS
Structure:
Shaping the foundation of DS
Structure:
Shaping the foundation of DS
Before diving into foundations, components, and guidelines, I created a structure to define how our design system would take shape. This framework identified the key areas that would form the backbone of our design system.
Before diving into foundations, components, and guidelines, I created a structure to define how our design system would take shape. This framework identified the key areas that would form the backbone of our design system.
Before diving into foundations, components, and guidelines, I created a structure to define how our design system would take shape. This framework identified the key areas that would form the backbone of our design system.
Foundations:
Foundations:
Foundations:
Laying the groundwork for a scalable system
Laying the groundwork for a scalable system
Laying the groundwork for a scalable system
With the audit findings in hand, I prioritized defining the foundations of our design system. This phase focused on creating reusable and flexible design tokens to ensure consistency and scalability across projects. I started with:
Colors and typography: Defining a cohesive palette and type hierarchy for consistent visual identity.
Grids and spacing: Establishing layout rules to ensure alignment and structure across designs.
Elevation and shadows: Introducing unified depth standards for better visual hierarch
With the audit findings in hand, I prioritized defining the foundations of our design system. This phase focused on creating reusable and flexible design tokens to ensure consistency and scalability across projects. I started with:
Colors and typography: Defining a cohesive palette and type hierarchy for consistent visual identity.
Grids and spacing: Establishing layout rules to ensure alignment and structure across designs.
Elevation and shadows: Introducing unified depth standards for better visual hierarch
With the audit findings in hand, I prioritized defining the foundations of our design system. This phase focused on creating reusable and flexible design tokens to ensure consistency and scalability across projects. I started with:
Colors and typography: Defining a cohesive palette and type hierarchy for consistent visual identity.
Grids and spacing: Establishing layout rules to ensure alignment and structure across designs.
Elevation and shadows: Introducing unified depth standards for better visual hierarch
Tokens
Tokens
Tokens
To streamline collaboration between designers and developers, I created a clear and semantic naming convention for tokens. This convention mirrored existing structures in the codebase, reducing friction and aligning the team's language.
These foundations became the backbone of the design system, enabling us to build scalable and consistent designs effortlessly.
To streamline collaboration between designers and developers, I created a clear and semantic naming convention for tokens. This convention mirrored existing structures in the codebase, reducing friction and aligning the team's language.
These foundations became the backbone of the design system, enabling us to build scalable and consistent designs effortlessly.
To streamline collaboration between designers and developers, I created a clear and semantic naming convention for tokens. This convention mirrored existing structures in the codebase, reducing friction and aligning the team's language.
These foundations became the backbone of the design system, enabling us to build scalable and consistent designs effortlessly.
Components:
Standardized elements for faster development
Components:
Standardized elements for faster development
Components:
Standardized elements for faster development
Once the foundations were established, I conducted an audit of the developed web apps to identify components that could serve as a basis, avoiding the need to create everything from scratch. I then organized a workshop to prioritize components and collaboratively created a roadmap for delivery.
To ensure alignment, I provided developers with a clear priority list of common components to include in the codebase, ensuring efficiency and consistency throughout the system.
Once the foundations were established, I conducted an audit of the developed web apps to identify components that could serve as a basis, avoiding the need to create everything from scratch. I then organized a workshop to prioritize components and collaboratively created a roadmap for delivery.
To ensure alignment, I provided developers with a clear priority list of common components to include in the codebase, ensuring efficiency and consistency throughout the system.
Once the foundations were established, I conducted an audit of the developed web apps to identify components that could serve as a basis, avoiding the need to create everything from scratch. I then organized a workshop to prioritize components and collaboratively created a roadmap for delivery.
To ensure alignment, I provided developers with a clear priority list of common components to include in the codebase, ensuring efficiency and consistency throughout the system.
Handoff & documentation:
Handoff & documentation:
Handoff & documentation:
Ensuring a smooth transition from design to development
Ensuring a smooth transition from design to development
Ensuring a smooth transition from design to development
To ensure seamless adoption, I worked closely with developers to refine the handoff process. We introduced clear documentation with specs, behavior guidelines, and structured Figma files, reducing guesswork and improving implementation speed.
This made the design system an integral part of the development workflow, ensuring consistency and efficiency across projects.
To ensure seamless adoption, I worked closely with developers to refine the handoff process. We introduced clear documentation with specs, behavior guidelines, and structured Figma files, reducing guesswork and improving implementation speed.
This made the design system an integral part of the development workflow, ensuring consistency and efficiency across projects.
To ensure seamless adoption, I worked closely with developers to refine the handoff process. We introduced clear documentation with specs, behavior guidelines, and structured Figma files, reducing guesswork and improving implementation speed.
This made the design system an integral part of the development workflow, ensuring consistency and efficiency across projects.
Results and future work
Results and future work
Results and future work
This project wasn’t just about creating a design system—it was about transforming how we build products. Through structure, collaboration, and persistence, we turned design from an afterthought into a core part of our development process.
This project wasn’t just about creating a design system—it was about transforming how we build products. Through structure, collaboration, and persistence, we turned design from an afterthought into a core part of our development process.
This project wasn’t just about creating a design system—it was about transforming how we build products. Through structure, collaboration, and persistence, we turned design from an afterthought into a core part of our development process.
Deliverables
Deliverables
Deliverables
The project delivered a comprehensive design system with reusable components and visual guidelines, providing developers with clear UX principles to build consistent and user-friendly applications. Training sessions and detailed documentation ensured seamless adoption and implementation across teams.
The project delivered a comprehensive design system with reusable components and visual guidelines, providing developers with clear UX principles to build consistent and user-friendly applications. Training sessions and detailed documentation ensured seamless adoption and implementation across teams.
The project delivered a comprehensive design system with reusable components and visual guidelines, providing developers with clear UX principles to build consistent and user-friendly applications. Training sessions and detailed documentation ensured seamless adoption and implementation across teams.
Future work
Future work
Future work
A design system is never finished—it evolves with the product. Moving forward, we will focus on expanding the component library with new elements, refining documentation to keep it relevant, and gathering continuous feedback to ensure the system adapts to real-world needs and challenges.
A design system is never finished—it evolves with the product. Moving forward, we will focus on expanding the component library with new elements, refining documentation to keep it relevant, and gathering continuous feedback to ensure the system adapts to real-world needs and challenges.
A design system is never finished—it evolves with the product. Moving forward, we will focus on expanding the component library with new elements, refining documentation to keep it relevant, and gathering continuous feedback to ensure the system adapts to real-world needs and challenges.
Lessons learned:
Lessons learned:
Lessons learned:
Overcoming resistance and driving adoption
Overcoming resistance and driving adoption
Overcoming resistance and driving adoption
Rolling out the design system was not just a project; it was a journey of transformation. We faced challenges that tested our ability to collaborate and adapt:
• Resistance to change was inevitable—some developers were hesitant to move away from their established workflows.
• Balancing the need for speed with the demand for quality required constant communication and iteration.
• Additionally, we learned that a design system is never truly finished; it evolves alongside the product and its users.
Rolling out the design system was not just a project; it was a journey of transformation. We faced challenges that tested our ability to collaborate and adapt:
• Resistance to change was inevitable—some developers were hesitant to move away from their established workflows.
• Balancing the need for speed with the demand for quality required constant communication and iteration.
• Additionally, we learned that a design system is never truly finished; it evolves alongside the product and its users.
Rolling out the design system was not just a project; it was a journey of transformation. We faced challenges that tested our ability to collaborate and adapt:
• Resistance to change was inevitable—some developers were hesitant to move away from their established workflows.
• Balancing the need for speed with the demand for quality required constant communication and iteration.
• Additionally, we learned that a design system is never truly finished; it evolves alongside the product and its users.
Through persistence and collaboration, we proved that a unified design system could drive efficiency, improve user experiences, and empower both designers and developers. This project was more than just about building a system—it was about reshaping how we work, think, and create together. The lessons we’ve learned will not only guide our design system’s growth but also inspire how we approach future challenges.
Through persistence and collaboration, we proved that a unified design system could drive efficiency, improve user experiences, and empower both designers and developers. This project was more than just about building a system—it was about reshaping how we work, think, and create together. The lessons we’ve learned will not only guide our design system’s growth but also inspire how we approach future challenges.
Through persistence and collaboration, we proved that a unified design system could drive efficiency, improve user experiences, and empower both designers and developers. This project was more than just about building a system—it was about reshaping how we work, think, and create together. The lessons we’ve learned will not only guide our design system’s growth but also inspire how we approach future challenges.
Got questions or feedback? I’m all ears!
Want to learn more?
Let’s chat!
I'm happy to share more about this project and how I work :)
