2024 ･ B2B SaaS ･ Product Design ･ Design Systems ･ Figma
Scaling B2B SaaS through Design-to-Code Alignment
Timeline
Apr 2024 – Mar 2025, 12 months
Role
Lead Designer, Design System Architect
Team
1 PO, 2 Front-end Engineers
Skills
Atomic Design, Figma, Storybook, Svelte, TailwindCSS, Shadcn-Svelte (UI)
A vertical B2B CRM designed to digitise operations for psychological counselling centres. It manages complex operational workflows including patient scheduling, electronic medical records (EMR), and automated billing for over 80 active clinics.
Following a rapid expansion to 80+ B2B clients, the product faced significant design debt. Inconsistent variants and redundant components caused friction between design and engineering, delaying feature releases.
Establish strict design-to-code parity to support aggressive feature expansion without breaking the build.
This ensured every component was buildable and performant from day one, effectively eliminating handoff errors and ensuring consistency across the platform.
Redefined fundamental systems such as tokens and grids to match TailwindCSS standards.
Defined UI customisation limits through a deep-dive into Shadcn-Svelte, ensuring scalability across all components.
Established a meticulous sync between the Figma and Storybook component libraries.
While the v2.0 design aimed for clarity, rendering the v1.0 data volume with the new UI styles caused significant loading delays. The team needed to resolve this latency without sacrificing critical B2B features.
While maintaining core functionalities, a trade-off between visual complexity and loading logic was negotiated.
Visual SimplificationRemoved rendering-heavy UI elements (e.g., custom cell separators) to lighten the DOM structure.
Progressive LoadingSwitched from bulk loading to chunk-based rendering synchronised with scroll velocity, preventing browser freeze.
The system evolved through a continuous feedback loop between design and engineering. By integrating practical development needs, we ensured the library was not just consistent, but strictly buildable.
Due to API limitations that prevented dynamic value display, a simplified category-based pattern was implemented instead of forcing a fragile UI.
This trade-off maintained user usability while ensuring robust system performance, remaining as a backlog for the next iteration.
90%
Reduction in clarification costs
30%
Increase in delivery velocity
Optional
Design QA became optional
Rebuilding a system alongside a live product reinforced a critical lesson: the true value of a design system lies in governance, not just components.
This project shifted my perspective from viewing systems as UI libraries to treating them as shared infrastructure. By embracing technical constraints as design conditions, I established a foundation that optimised not just the interface, but the environment where products are built.
2024 ･ B2B SaaS ･ Product Design ･ Design Systems ･ Figma
Scaling B2B SaaS through Design-to-Code Alignment
Timeline
Apr 2024 – Mar 2025, 12 months
Role
Lead Designer, Design System Architect
Team
1 PO, 2 Front-end Engineers
Skills
Atomic Design, Figma, Storybook, Svelte, TailwindCSS, Shadcn-Svelte (UI)
A vertical B2B CRM designed to digitise operations for psychological counselling centres. It manages complex operational workflows including patient scheduling, electronic medical records (EMR), and automated billing for over 80 active clinics.
Following a rapid expansion to 80+ B2B clients, the product faced significant design debt. Inconsistent variants and redundant components caused friction between design and engineering, delaying feature releases.
Establish strict design-to-code parity to support aggressive feature expansion without breaking the build.
This ensured every component was buildable and performant from day one, effectively eliminating handoff errors and ensuring consistency across the platform.
Redefined fundamental systems such as tokens and grids to match TailwindCSS standards.
Defined UI customisation limits through a deep-dive into Shadcn-Svelte, ensuring scalability across all components.
Established a meticulous sync between the Figma and Storybook component libraries.
While the v2.0 design aimed for clarity, rendering the v1.0 data volume with the new UI styles caused significant loading delays. The team needed to resolve this latency without sacrificing critical B2B features.
While maintaining core functionalities, a trade-off between visual complexity and loading logic was negotiated.
Visual SimplificationRemoved rendering-heavy UI elements (e.g., custom cell separators) to lighten the DOM structure.
Progressive LoadingSwitched from bulk loading to chunk-based rendering synchronised with scroll velocity, preventing browser freeze.
The system evolved through a continuous feedback loop between design and engineering. By integrating practical development needs, we ensured the library was not just consistent, but strictly buildable.
Due to API limitations that prevented dynamic value display, a simplified category-based pattern was implemented instead of forcing a fragile UI.
This trade-off maintained user usability while ensuring robust system performance, remaining as a backlog for the next iteration.
90%
Reduction in clarification costs
30%
Increase in delivery velocity
Optional
Design QA became optional
Rebuilding a system alongside a live product reinforced a critical lesson: the true value of a design system lies in governance, not just components.
This project shifted my perspective from viewing systems as UI libraries to treating them as shared infrastructure. By embracing technical constraints as design conditions, I established a foundation that optimised not just the interface, but the environment where products are built.
2024 ･ B2B SaaS ･ Product Design ･ Design Systems ･ Figma
Scaling B2B SaaS through Design-to-Code Alignment
Timeline
Apr 2024 – Mar 2025, 12 months
Role
Lead Designer, Design System Architect
Team
1 PO, 2 Front-end Engineers
Skills
Atomic Design, Figma, Storybook, Svelte, TailwindCSS, Shadcn-Svelte (UI)
A vertical B2B CRM designed to digitise operations for psychological counselling centres. It manages complex operational workflows including patient scheduling, electronic medical records (EMR), and automated billing for over 80 active clinics.
Following a rapid expansion to 80+ B2B clients, the product faced significant design debt. Inconsistent variants and redundant components caused friction between design and engineering, delaying feature releases.
Establish strict design-to-code parity to support aggressive feature expansion without breaking the build.
This ensured every component was buildable and performant from day one, effectively eliminating handoff errors and ensuring consistency across the platform.
Redefined fundamental systems such as tokens and grids to match TailwindCSS standards.
Defined UI customisation limits through a deep-dive into Shadcn-Svelte, ensuring scalability across all components.
Established a meticulous sync between the Figma and Storybook component libraries.
While the v2.0 design aimed for clarity, rendering the v1.0 data volume with the new UI styles caused significant loading delays. The team needed to resolve this latency without sacrificing critical B2B features.
While maintaining core functionalities, a trade-off between visual complexity and loading logic was negotiated.
Visual SimplificationRemoved rendering-heavy UI elements (e.g., custom cell separators) to lighten the DOM structure.
Progressive LoadingSwitched from bulk loading to chunk-based rendering synchronised with scroll velocity, preventing browser freeze.
The system evolved through a continuous feedback loop between design and engineering. By integrating practical development needs, we ensured the library was not just consistent, but strictly buildable.
Due to API limitations that prevented dynamic value display, a simplified category-based pattern was implemented instead of forcing a fragile UI.
This trade-off maintained user usability while ensuring robust system performance, remaining as a backlog for the next iteration.
90%
Reduction in clarification costs
30%
Increase in delivery velocity
Optional
Design QA became optional
Rebuilding a system alongside a live product reinforced a critical lesson: the true value of a design system lies in governance, not just components.
This project shifted my perspective from viewing systems as UI libraries to treating them as shared infrastructure. By embracing technical constraints as design conditions, I established a foundation that optimised not just the interface, but the environment where products are built.
2024 ･ B2B SaaS ･ Product Design ･ Design Systems ･ Figma
Scaling B2B SaaS through Design-to-Code Alignment
Timeline
Apr 2024 – Mar 2025, 12 months
Role
Lead Designer, Design System Architect
Team
1 PO, 2 Front-end Engineers
Skills
Atomic Design, Figma, Storybook, Svelte, TailwindCSS, Shadcn-Svelte (UI)
A vertical B2B CRM designed to digitise operations for psychological counselling centres. It manages complex operational workflows including patient scheduling, electronic medical records (EMR), and automated billing for over 80 active clinics.
Following a rapid expansion to 80+ B2B clients, the product faced significant design debt. Inconsistent variants and redundant components caused friction between design and engineering, delaying feature releases.
Establish strict design-to-code parity to support aggressive feature expansion without breaking the build.
This ensured every component was buildable and performant from day one, effectively eliminating handoff errors and ensuring consistency across the platform.
Redefined fundamental systems such as tokens and grids to match TailwindCSS standards.
Defined UI customisation limits through a deep-dive into Shadcn-Svelte, ensuring scalability across all components.
Established a meticulous sync between the Figma and Storybook component libraries.
While the v2.0 design aimed for clarity, rendering the v1.0 data volume with the new UI styles caused significant loading delays. The team needed to resolve this latency without sacrificing critical B2B features.
While maintaining core functionalities, a trade-off between visual complexity and loading logic was negotiated.
Visual SimplificationRemoved rendering-heavy UI elements (e.g., custom cell separators) to lighten the DOM structure.
Progressive LoadingSwitched from bulk loading to chunk-based rendering synchronised with scroll velocity, preventing browser freeze.
The system evolved through a continuous feedback loop between design and engineering. By integrating practical development needs, we ensured the library was not just consistent, but strictly buildable.
Due to API limitations that prevented dynamic value display, a simplified category-based pattern was implemented instead of forcing a fragile UI.
This trade-off maintained user usability while ensuring robust system performance, remaining as a backlog for the next iteration.
90%
Reduction in clarification costs
30%
Increase in delivery velocity
Optional
Design QA became optional
Rebuilding a system alongside a live product reinforced a critical lesson: the true value of a design system lies in governance, not just components.
This project shifted my perspective from viewing systems as UI libraries to treating them as shared infrastructure. By embracing technical constraints as design conditions, I established a foundation that optimised not just the interface, but the environment where products are built.
2024 ･ B2B SaaS ･ Product Design ･ Design Systems ･ Figma
Scaling B2B SaaS through Design-to-Code Alignment
Timeline
Apr 2024 – Mar 2025, 12 months
Role
Lead Designer, Design System Architect
Team
1 PO, 2 Front-end Engineers
Skills
Atomic Design, Figma, Storybook, Svelte, TailwindCSS, Shadcn-Svelte (UI)
A vertical B2B CRM designed to digitise operations for psychological counselling centres. It manages complex operational workflows including patient scheduling, electronic medical records (EMR), and automated billing for over 80 active clinics.
Following a rapid expansion to 80+ B2B clients, the product faced significant design debt. Inconsistent variants and redundant components caused friction between design and engineering, delaying feature releases.
Establish strict design-to-code parity to support aggressive feature expansion without breaking the build.
This ensured every component was buildable and performant from day one, effectively eliminating handoff errors and ensuring consistency across the platform.
Redefined fundamental systems such as tokens and grids to match TailwindCSS standards.
Defined UI customisation limits through a deep-dive into Shadcn-Svelte, ensuring scalability across all components.
Established a meticulous sync between the Figma and Storybook component libraries.
While the v2.0 design aimed for clarity, rendering the v1.0 data volume with the new UI styles caused significant loading delays. The team needed to resolve this latency without sacrificing critical B2B features.
While maintaining core functionalities, a trade-off between visual complexity and loading logic was negotiated.
Visual SimplificationRemoved rendering-heavy UI elements (e.g., custom cell separators) to lighten the DOM structure.
Progressive LoadingSwitched from bulk loading to chunk-based rendering synchronised with scroll velocity, preventing browser freeze.
The system evolved through a continuous feedback loop between design and engineering. By integrating practical development needs, we ensured the library was not just consistent, but strictly buildable.
Due to API limitations that prevented dynamic value display, a simplified category-based pattern was implemented instead of forcing a fragile UI.
This trade-off maintained user usability while ensuring robust system performance, remaining as a backlog for the next iteration.
90%
Reduction in clarification costs
30%
Increase in delivery velocity
Optional
Design QA became optional
Rebuilding a system alongside a live product reinforced a critical lesson: the true value of a design system lies in governance, not just components.
This project shifted my perspective from viewing systems as UI libraries to treating them as shared infrastructure. By embracing technical constraints as design conditions, I established a foundation that optimised not just the interface, but the environment where products are built.
