Evolving the system alongside the product
The platform had been used for several years by healthcare professionals and clinics to order oncology treatments such as Pluvicto and coordinate related services, including radioactive byproduct collection. As it evolved from a content- and service-oriented platform into a richer SaaS product, I joined early to restructure the design system while also contributing UX input across the product. The library still worked, but years of growth had created duplication, inconsistent styling, fragile overrides and weak discoverability.
The product was becoming more sophisticated. The system underneath it needed to do the same.
The platform had grown around a large set of inconsistent components and navigation patterns. As new product and brand requirements accumulated, local fixes created duplication, visual drift, and higher implementation effort. The challenge was not simply to redesign individual interfaces, but to create a system that could absorb future change without multiplying exceptions.
Similar interaction needs had accumulated as separate components rather than a coherent family. Even basic elements like buttons existed across multiple structures, while navigation had grown to 30+ variants.
Deep nesting and complex inheritance made simple changes unpredictable. Overrides and interaction states could break, with stroke-based icons adding further inheritance issues.
Visual values were applied too locally across the system. Without a shared semantic structure, global changes required unnecessary component-level maintenance.
The library had grown as a collection of components rather than a clearly structured system. Weak taxonomy and file hierarchy made components harder to find and reuse consistently.
The architecture had to improve a live product without disrupting ongoing work, while also preparing the system for broader product and brand change.
Built on an existing product, not a blank canvas.
The redesign introduced richer SaaS workflows and interaction patterns.
Core components already carried duplication, nesting, and inconsistency.
The system needed to absorb upcoming visual evolution without rework.
Similar functions existed as independent components and variants, while weak taxonomy made their relationships unclear.
The system needed a clear hierarchy for foundations, components and patterns.
Colors and other visual values were inconsistently applied while a broader brand evolution was still ahead.
Visual values needed to be separated from semantic meaning so changes could scale across the system.
Deep nesting and inheritance chains made overrides fragile, while some interaction elements could break expected behavior.
The architecture needed fewer dependencies, clearer boundaries and simpler component structures.
Instead of fixing inconsistencies individually, I reorganized the system around three architectural levels:
Shared variables, typography, spacing, grids and visual rules.
Reusable interface elements built on those foundations.
Reusable structures for navigation, layouts, wrappers and side panels.
The semantic direction was established collaboratively. I translated it into a three-layer variable architecture.
Raw visual values lived at the base level.
Semantic variables described their purpose.
Components referenced semantic roles instead of raw values.
Years of growth had created multiple controls for similar actions. I grouped components around shared behavior and states, preserving meaningful differences while removing historical duplication.
The visual direction was still evolving, so components could not depend directly on the current palette. Semantic roles created a stable layer between raw values and component styling.
Deep nesting and inheritance made overrides fragile. I simplified component boundaries, reduced unnecessary dependencies, and flattened interaction elements where abstraction created problems.
Recurring layouts needed consistency without turning into rigid templates. I introduced reusable shells, wrappers, panels, and page structures that could adapt to different workflows.
Reduced duplication and structural debt.
Created a clearer, more consistent navigation system.
Simplified structures made components more predictable.
Layered variables made future changes easier to absorb.
