Back
From Complexity to Simplicity: Achieved 60% faster development and 3x product delivery with a robust, scalable design system.
Establishing a unified design language and governance model across 5 enterprise products, resulted with an increase in product delivery by 3x, driving a 60% reduction in development cycle time and ensuring strict accessibility compliance across all applications.
Client
ValGenesis Pvt Ltd
My Role
Co-Lead
Year
2025
Project Scope
Web & Mobile App
As we at ValGenesis are moving forward towards developing a unified platform that provides end-to-end digital validation solution across the life sciences industry, myself along with the design team recognized the need for unifying our designs, This led us to come up with an enterprise level design system that acts as a single source of truth for all the teams across our organization.
Currently, our life sciences portfolio consists of five products developed on disparate design patterns and technical stacks. This fragmented ecosystem creates significant friction, as customers must treat each product as a standalone implementation. This inconsistency inflates the total cost of ownership, extends rollout timelines, and discourages cross-platform investment. To pinpoint the structural drivers of these inefficiencies, the design team conducted an internal organizational survey and stakeholder interviews, revealing several key root causes.
The lack of a unified framework forces engineering teams to recreate identical components and fixes in isolation. This duplication of effort creates a heavy maintenance burden and complicates the codebase, ultimately decelerating our shipping velocity.
Inconsistent design standards have forced Product and UX teams into a cycle of continuous rework and manual alignment. Without a unified foundation, we are unable to implement a scalable design system, leading to redundant efforts rather than cross-product efficiency.
Fragmented product architectures have led to prohibitive support and training costs. Professional Services and Solutions Engineering cannot standardize their workflows, resulting in inefficient onboarding and a high dependency on product-specific expertise.
Since we had a lot of legacy products with inconsistent designs and fragmented tech stacks that delivered a poor, disjointed user experience, the need for coming up with a design system was even more imminent.
Thus we decided to make our design system into a comprehensive, scalable, and reusable UI framework designed to ensure consistency, efficiency, and accessibility across all ValGenesis applications. The aim was to provide a structured set of design elements, including foundations, components, and templates, to streamline product development and enhance user experience.
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
90% reduction in UI inconsistencies across products following system adoption
60% reduction in development cycle time due to component reuse & standardized templates
60% reduction in non-compliance risks by strictly adhering to industry standards
3x faster feature discovery post-rollout with governance and documentations
Proposed by Brad Frost, we decided to go with the Atomic Design approach which provides a structured approach in creating the design systems. It is inspired by chemistry, where matter is composed of fundamental building blocks called atoms. This analogy translates seamlessly into design, where the smallest UI elements combine to form larger, more complex structures.
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
From the previous exercises, we had a lot of abstract ideas and we need to turn that into tangible visual directions. That's where the mood boarding exercise comes in. The entire ideation process, brainstorming, and conceptualization of the PULSE Design System mood boarding were done collaboratively in FigJam. The space captures the journey from initial discussions to finalizing the design principles, visual language, and structural guidelines.
We wanted our design system to be the foundation for a seamless, efficient and scalable digital ecosystem, and to embody a forward-thinking approach that unites developers under a shared vision. Hence, we decided to name our design system as "PULSE - The Heartbeat of Design and Development".
Vitality and Energy
Represents the dynamic and lively nature of the design system
Lifeline
Highlights the essential support and guidance provided by the design
Consistency and Rhythm
Ensure a reliable and consistent framework for design processes
Responsiveness
Emphasizes system’s adaptability to user and market needs
The ValGenesis PULSE Design System features a bold and accessible color scheme, in which every color has a function that strengthens the overall brand identity. The colors are inclusive for all users and adhere to WCAG 2.2 requirements, keeping accessibility at its core.
For the core font, we decided to go with FIGTREE - which is a clean yet friendly geometric sans serif font, designed for usage in web and mobile app. Figtree has the following advantages:
It's light-hearted and crisp when used for text, yet still retains some punch when used in uppercase – perfect for buttons and short labels.
The thicker weights have a distinctly friendlier character, great for headlines of more personable brands.
PULSE uses Hugeicons Pro icon library - a modern, pixel-perfect set of icons, carefully selected to match with our core themes.
In order to bring clarity and structure to our design system, we introduced the concept of design tokens which helps us to take context aware decisions - ensuring the work stays aligned with ValGenesis’ brand identity.
Design Tokens are the single source of truth for values like color, spacing, typography, and more. They are platform-agnostic, meaning they're used both in Design and in code.
Because the design system needs to unify 5 different products, managing the design consistency across the platform is a daunting task. We realized that a normal token structure will not be sufficient enough to support the level of flexibility and scalability we are intending to achieve. That’s why we decided to go with a 2-tier token model.
While we were developing PULSE, we ran multiple workshops with engineering and R&D teams in parallel, to determine the optimal approach for developing PULSE. From these sessions, we identified 3 possible approaches, along with their pros and cons:
PROs
CONs
PROs
CONs
PROs
CONs
After much deliberation and ideations within multiple teams across the organization, we chose a hybrid route - combine and customize (Material UI) MUI components, then layer PULSE styles and themes to deliver a unified visual identity while leveraging a mature, well-documented foundation.
The theming architecture is critical to scalability. We need an abstract layer - a "Design Kit" - that separates foundational styles (colors, typography, spacing) from component implementations, which aligns with our 2-tier design token model.
Adoption matters because a design system delivers value only when it is actively used, embedded in workflows, and measured against product and business outcomes. In order for this to work, we came up with an adoption workflow that turns Pulse from a component library into a delivery pipeline, closing the loop from curation to shipped value.
To ensure smooth building, testing and documentation of components, we decided to go with Storybook - an online workshop platform for building UI components and pages in isolation. This helped us to develop and share hard-to-reach states and edge cases without needing to run our whole app, ensuring smooth adoption.
After a year of ideation, cross-functional collaboration, and continuous customer engagement, we launched Phase 1 of our “PULSE” design system - driving strong internal satisfaction measured using internal NPS/CSAT scores, and reducing development time through improved efficiency and fewer bugs. We created significant impact within our organization, some of which are as follows:
50+ modular and scalable components produced, translated into 30+ product-ready templates adhering into WCAG 2.2 accessibility guidelines
3x faster feature delivery post-rollout with governance and documentation
Up to 60% reduction in development and testing cycles, and 90% reduction in UI consistencies following adoption
Achieved a 98% unit test coverage exceeding ISO Benchmark
The design system is still in progress, and constantly being iterated on. With PULSE adoption accelerating across teams, we're preparing the 2nd release of PULSE in the coming months, to deliver advanced components for complex life sciences workflows and expanded cross-functional support for platform-wide integration.
Next steps include deepening coverage across complex domain components, expanding usage guidelines, and maturing analytics for adoption and quality.
The project's success was made possible by the dedication and collaboration of numerous team members across design, engineering, and product. These learnings will inform my approach to future design initiatives and organizational design challenges.
Back
Back
From Complexity to Simplicity: Achieved 60% faster development and 3x product delivery with a robust, scalable design system.
Establishing a unified design language and governance model across 5 enterprise products, resulted with an increase in product delivery by 3x, driving a 60% reduction in development cycle time and ensuring strict accessibility compliance across all applications.
Client
ValGenesis Pvt Ltd
My Role
Co-Lead
Year
2025
Project Scope
Web & Mobile App
As we at ValGenesis are moving forward towards developing a unified platform that provides end-to-end digital validation solution across the life sciences industry, myself along with the design team recognized the need for unifying our designs, This led us to come up with an enterprise level design system that acts as a single source of truth for all the teams across our organization.
Currently, our life sciences portfolio consists of five products developed on disparate design patterns and technical stacks. This fragmented ecosystem creates significant friction, as customers must treat each product as a standalone implementation. This inconsistency inflates the total cost of ownership, extends rollout timelines, and discourages cross-platform investment. To pinpoint the structural drivers of these inefficiencies, the design team conducted an internal organizational survey and stakeholder interviews, revealing several key root causes.
The lack of a unified framework forces engineering teams to recreate identical components and fixes in isolation. This duplication of effort creates a heavy maintenance burden and complicates the codebase, ultimately decelerating our shipping velocity.
Inconsistent design standards have forced Product and UX teams into a cycle of continuous rework and manual alignment. Without a unified foundation, we are unable to implement a scalable design system, leading to redundant efforts rather than cross-product efficiency.
Fragmented product architectures have led to prohibitive support and training costs. Professional Services and Solutions Engineering cannot standardize their workflows, resulting in inefficient onboarding and a high dependency on product-specific expertise.
Since we had a lot of legacy products with inconsistent designs and fragmented tech stacks that delivered a poor, disjointed user experience, the need for coming up with a design system was even more imminent.
Thus we decided to make our design system into a comprehensive, scalable, and reusable UI framework designed to ensure consistency, efficiency, and accessibility across all ValGenesis applications. The aim was to provide a structured set of design elements, including foundations, components, and templates, to streamline product development and enhance user experience.
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
90% reduction in UI inconsistencies across products following system adoption
60% reduction in development cycle time due to component reuse & standardized templates
60% reduction in non-compliance risks by strictly adhering to industry standards
3x faster feature discovery post-rollout with governance and documentations
Proposed by Brad Frost, we decided to go with the Atomic Design approach which provides a structured approach in creating the design systems. It is inspired by chemistry, where matter is composed of fundamental building blocks called atoms. This analogy translates seamlessly into design, where the smallest UI elements combine to form larger, more complex structures.
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
Brings design
culture into the
organization
Improves
projects
governance
Considerably
improves UX
maturity
Improves
customer
satisfaction
Helps to
beat the
competition
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
From the previous exercises, we had a lot of abstract ideas and we need to turn that into tangible visual directions. That's where the mood boarding exercise comes in. The entire ideation process, brainstorming, and conceptualization of the PULSE Design System mood boarding were done collaboratively in FigJam. The space captures the journey from initial discussions to finalizing the design principles, visual language, and structural guidelines.
We wanted our design system to be the foundation for a seamless, efficient and scalable digital ecosystem, and to embody a forward-thinking approach that unites developers under a shared vision. Hence, we decided to name our design system as "PULSE - The Heartbeat of Design and Development".
Vitality and Energy
Represents the dynamic and lively nature of the design system
Lifeline
Highlights the essential support and guidance provided by the design
Consistency and Rhythm
Ensure a reliable and consistent framework for design processes
Responsiveness
Emphasizes system’s adaptability to user and market needs
The ValGenesis PULSE Design System features a bold and accessible color scheme, in which every color has a function that strengthens the overall brand identity. The colors are inclusive for all users and adhere to WCAG 2.2 requirements, keeping accessibility at its core.
For the core font, we decided to go with FIGTREE - which is a clean yet friendly geometric sans serif font, designed for usage in web and mobile app. Figtree has the following advantages:
It's light-hearted and crisp when used for text, yet still retains some punch when used in uppercase – perfect for buttons and short labels.
The thicker weights have a distinctly friendlier character, great for headlines of more personable brands.
PULSE uses Hugeicons Pro icon library - a modern, pixel-perfect set of icons, carefully selected to match with our core themes.
In order to bring clarity and structure to our design system, we introduced the concept of design tokens which helps us to take context aware decisions - ensuring the work stays aligned with ValGenesis’ brand identity.
Design Tokens are the single source of truth for values like color, spacing, typography, and more. They are platform-agnostic, meaning they're used both in Design and in code.
Because the design system needs to unify 5 different products, managing the design consistency across the platform is a daunting task. We realized that a normal token structure will not be sufficient enough to support the level of flexibility and scalability we are intending to achieve. That’s why we decided to go with a 2-tier token model.
While we were developing PULSE, we ran multiple workshops with engineering and R&D teams in parallel, to determine the optimal approach for developing PULSE. From these sessions, we identified 3 possible approaches, along with their pros and cons:
PROs
CONs
PROs
CONs
PROs
CONs
After much deliberation and ideations within multiple teams across the organization, we chose a hybrid route - combine and customize (Material UI) MUI components, then layer PULSE styles and themes to deliver a unified visual identity while leveraging a mature, well-documented foundation.
The theming architecture is critical to scalability. We need an abstract layer - a "Design Kit" - that separates foundational styles (colors, typography, spacing) from component implementations, which aligns with our 2-tier design token model.
Adoption matters because a design system delivers value only when it is actively used, embedded in workflows, and measured against product and business outcomes. In order for this to work, we came up with an adoption workflow that turns Pulse from a component library into a delivery pipeline, closing the loop from curation to shipped value.
To ensure smooth building, testing and documentation of components, we decided to go with Storybook - an online workshop platform for building UI components and pages in isolation. This helped us to develop and share hard-to-reach states and edge cases without needing to run our whole app, ensuring smooth adoption.
After a year of ideation, cross-functional collaboration, and continuous customer engagement, we launched Phase 1 of our “PULSE” design system - driving strong internal satisfaction measured using internal NPS/CSAT scores, and reducing development time through improved efficiency and fewer bugs. We created significant impact within our organization, some of which are as follows:
50+ modular and scalable components produced, translated into 30+ product-ready templates adhering into WCAG 2.2 accessibility guidelines
3x faster feature delivery post-rollout with governance and documentation
Up to 60% reduction in development and testing cycles, and 90% reduction in UI consistencies following adoption
Achieved a 98% unit test coverage exceeding ISO Benchmark
The design system is still in progress, and constantly being iterated on. With PULSE adoption accelerating across teams, we're preparing the 2nd release of PULSE in the coming months, to deliver advanced components for complex life sciences workflows and expanded cross-functional support for platform-wide integration.
Next steps include deepening coverage across complex domain components, expanding usage guidelines, and maturing analytics for adoption and quality.
The project's success was made possible by the dedication and collaboration of numerous team members across design, engineering, and product. These learnings will inform my approach to future design initiatives and organizational design challenges.
Back
Back
From Complexity to Simplicity: Achieved 60% faster development and 3x product delivery with a robust, scalable design system.
Establishing a unified design language and governance model across 5 enterprise products, resulted with an increase in product delivery by 3x, driving a 60% reduction in development cycle time and ensuring strict accessibility compliance across all applications.
Client
ValGenesis Pvt Ltd
My Role
Co-Lead
Year
2025
Project Scope
Web & Mobile App
As we at ValGenesis are moving forward towards developing a unified platform that provides end-to-end digital validation solution across the life sciences industry, myself along with the design team recognized the need for unifying our designs, This led us to come up with an enterprise level design system that acts as a single source of truth for all the teams across our organization.
Currently, our life sciences portfolio consists of five products developed on disparate design patterns and technical stacks. This fragmented ecosystem creates significant friction, as customers must treat each product as a standalone implementation. This inconsistency inflates the total cost of ownership, extends rollout timelines, and discourages cross-platform investment. To pinpoint the structural drivers of these inefficiencies, the design team conducted an internal organizational survey and stakeholder interviews, revealing several key root causes.
The lack of a unified framework forces engineering teams to recreate identical components and fixes in isolation. This duplication of effort creates a heavy maintenance burden and complicates the codebase, ultimately decelerating our shipping velocity.
Inconsistent design standards have forced Product and UX teams into a cycle of continuous rework and manual alignment. Without a unified foundation, we are unable to implement a scalable design system, leading to redundant efforts rather than cross-product efficiency.
Fragmented product architectures have led to prohibitive support and training costs. Professional Services and Solutions Engineering cannot standardize their workflows, resulting in inefficient onboarding and a high dependency on product-specific expertise.
Since we had a lot of legacy products with inconsistent designs and fragmented tech stacks that delivered a poor, disjointed user experience, the need for coming up with a design system was even more imminent.
Thus we decided to make our design system into a comprehensive, scalable, and reusable UI framework designed to ensure consistency, efficiency, and accessibility across all ValGenesis applications. The aim was to provide a structured set of design elements, including foundations, components, and templates, to streamline product development and enhance user experience.
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
90% reduction in UI inconsistencies across products following system adoption
60% reduction in development cycle time due to component reuse & standardized templates
60% reduction in non-compliance risks by strictly adhering to industry standards
3x faster feature discovery post-rollout with governance and documentations
Proposed by Brad Frost, we decided to go with the Atomic Design approach which provides a structured approach in creating the design systems. It is inspired by chemistry, where matter is composed of fundamental building blocks called atoms. This analogy translates seamlessly into design, where the smallest UI elements combine to form larger, more complex structures.
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
Brings design
culture into the
organization
Improves
projects
governance
Considerably
improves UX
maturity
Improves
customer
satisfaction
Helps to
beat the
competition
Using this, we wanted to create a framework for our design system, that ensured consistency and adaptability across projects. This approach streamlines the design process and sets the foundation for a seamless, scalable, and future-proof product experience.
From the previous exercises, we had a lot of abstract ideas and we need to turn that into tangible visual directions. That's where the mood boarding exercise comes in. The entire ideation process, brainstorming, and conceptualization of the PULSE Design System mood boarding were done collaboratively in FigJam. The space captures the journey from initial discussions to finalizing the design principles, visual language, and structural guidelines.
We wanted our design system to be the foundation for a seamless, efficient and scalable digital ecosystem, and to embody a forward-thinking approach that unites developers under a shared vision. Hence, we decided to name our design system as "PULSE - The Heartbeat of Design and Development".
Vitality and Energy
Represents the dynamic and lively nature of the design system
Lifeline
Highlights the essential support and guidance provided by the design
Consistency and Rhythm
Ensure a reliable and consistent framework for design processes
Responsiveness
Emphasizes system’s adaptability to user and market needs
The ValGenesis PULSE Design System features a bold and accessible color scheme, in which every color has a function that strengthens the overall brand identity. The colors are inclusive for all users and adhere to WCAG 2.2 requirements, keeping accessibility at its core.
For the core font, we decided to go with FIGTREE - which is a clean yet friendly geometric sans serif font, designed for usage in web and mobile app. Figtree has the following advantages:
It's light-hearted and crisp when used for text, yet still retains some punch when used in uppercase – perfect for buttons and short labels.
The thicker weights have a distinctly friendlier character, great for headlines of more personable brands.
PULSE uses Hugeicons Pro icon library - a modern, pixel-perfect set of icons, carefully selected to match with our core themes.
In order to bring clarity and structure to our design system, we introduced the concept of design tokens which helps us to take context aware decisions - ensuring the work stays aligned with ValGenesis’ brand identity.
Design Tokens are the single source of truth for values like color, spacing, typography, and more. They are platform-agnostic, meaning they're used both in Design and in code.
Because the design system needs to unify 5 different products, managing the design consistency across the platform is a daunting task. We realized that a normal token structure will not be sufficient enough to support the level of flexibility and scalability we are intending to achieve. That’s why we decided to go with a 2-tier token model.
While we were developing PULSE, we ran multiple workshops with engineering and R&D teams in parallel, to determine the optimal approach for developing PULSE. From these sessions, we identified 3 possible approaches, along with their pros and cons:
PROs
CONs
PROs
CONs
PROs
CONs
After much deliberation and ideations within multiple teams across the organization, we chose a hybrid route - combine and customize (Material UI) MUI components, then layer PULSE styles and themes to deliver a unified visual identity while leveraging a mature, well-documented foundation.
The theming architecture is critical to scalability. We need an abstract layer - a "Design Kit" - that separates foundational styles (colors, typography, spacing) from component implementations, which aligns with our 2-tier design token model.
Adoption matters because a design system delivers value only when it is actively used, embedded in workflows, and measured against product and business outcomes. In order for this to work, we came up with an adoption workflow that turns Pulse from a component library into a delivery pipeline, closing the loop from curation to shipped value.
To ensure smooth building, testing and documentation of components, we decided to go with Storybook - an online workshop platform for building UI components and pages in isolation. This helped us to develop and share hard-to-reach states and edge cases without needing to run our whole app, ensuring smooth adoption.
After a year of ideation, cross-functional collaboration, and continuous customer engagement, we launched Phase 1 of our “PULSE” design system - driving strong internal satisfaction measured using internal NPS/CSAT scores, and reducing development time through improved efficiency and fewer bugs. We created significant impact within our organization, some of which are as follows:
50+ modular and scalable components produced, translated into 30+ product-ready templates adhering into WCAG 2.2 accessibility guidelines
3x faster feature delivery post-rollout with governance and documentation
Up to 60% reduction in development and testing cycles, and 90% reduction in UI consistencies following adoption
Achieved a 98% unit test coverage exceeding ISO Benchmark
The design system is still in progress, and constantly being iterated on. With PULSE adoption accelerating across teams, we're preparing the 2nd release of PULSE in the coming months, to deliver advanced components for complex life sciences workflows and expanded cross-functional support for platform-wide integration.
Next steps include deepening coverage across complex domain components, expanding usage guidelines, and maturing analytics for adoption and quality.
The project's success was made possible by the dedication and collaboration of numerous team members across design, engineering, and product. These learnings will inform my approach to future design initiatives and organizational design challenges.
Back
