Architecting Global Pharma Systems: A Multi-Brand Transformation
The CSL Vifor Design System — built at Indegene
| Area | Details |
|---|---|
| Client | CSL Vifor (Vifor Pharma's digital transformation to CSL Vifor), via Indegene |
| Users | Internal design and development teams across 10–12+ global pharma brands |
| Core UX Challenge | Support 10+ distinct brand identities in one design system without native Figma variables |
| My Contribution | Themer-based theming architecture, atomic component library, audit, governance rulebook |
| Outcome | -40% development time on new features, +20% user engagement across digital tools |
About the project
Architecting one system flexible enough to become ten different brands
At Indegene, I contributed to the development and evolution of a design system used across multiple brands and products in the regulated healthcare and pharmaceutical domain. The goal was to create reusable, scalable UI components and theming workflows that accelerate delivery while maintaining visual and interaction consistency across products.
This system supports web and internal platforms spanning multiple brand identities and compliance requirements — including medicine-specific platforms like Ferinject, Mircera, Velphoro, and Venofer.
The CSL Vifor design system was curated with the intention of standardising the core brand's design values and ethics throughout its digital presence and its ecosystems. Its core design library influences efficiency and consistency, and reduces tool time in creating the brands' various digital tools and content — improving product and team productivity while providing an optimum user experience.
Problem
The challenge: scaling without variables
At Indegene, I was part of a structured design squad tasked with the digital transformation of Vifor Pharma to CSL Vifor. Working alongside another UI/UX designer, two senior UX designers, a design lead, and a junior designer, I was the primary engine for the technical construction of the design system. We supported a massive global portfolio spanning medicine-specific platforms.
In 2021, Figma lacked native variables and multi-brand modes. We had to support 10+ different brands with unique color palettes and typography under one structural roof. My role was to architect a system flexible enough to "swap" identities without rewriting the entire library.
Core question
How might we architect one design system flexible enough to support 10+ distinct pharmaceutical brand identities — without rewriting the library for every rebrand?
- No native Figma variables or multi-brand modes existed yet (2021) — theming had to be engineered manually.
- 10+ brands, each with unique color palettes and typography, needed to live under one structural system.
- Legacy sites were full of "snowflake" components — one-off patterns with no shared source of truth.
- The system had to hold up under strict pharmaceutical regulatory compliance.
- A junior designer and a wider team needed to apply the system consistently without a rulebook to follow.
Process
Strategic contribution & workflow
By focusing on architecture rather than just "pretty screens," I delivered institutional-grade results across four connected pillars of work.
Themer Architecture
I pioneered a workflow using the Themer plugin. By establishing a rigid, identical naming convention across multiple published libraries, I enabled the team to switch a mockup's entire visual skin (e.g. from Mircera blue to Ferinject red) with a single click.
Atomic Precision
I built the library using Atomic Design principles, focusing on creating "opaque" components — complex organisms that remained stable even when the underlying styles were swapped.
Audit & Pattern Consolidation
Working with the senior designers, I audited the existing legacy sites to identify "snowflake" components (one-offs) and merged them into a unified, compliant component set.
Governance & Documentation
I created the "Rulebook" for the junior designer and the wider team, ensuring every new component followed the strict structural logic required for our multi-brand swapping strategy.
Final screens
Visual design
Atomic Library Overview
- Atoms — buttons, inputs, and base styles
- Molecules & organisms — dosage calculators, patient charts
- Production-ready, reusable component set
Multi-Brand Style Swapping
- 10+ global brands managed simultaneously
- Themer plugin theming workflow
- Precise, identical naming conventions across libraries
- “Implementing a strict Atomic Design hierarchy to transform core brand values into reusable, production-ready components.”
- “Architecting a high-velocity theming workflow to manage 10+ global brands simultaneously through precise naming conventions.”
Outcomes
Measurable impact
An audit of the existing UI inventory uncovered where disparate styles could be unified into a single source of truth (SSOT). Atomic Design was then implemented from scratch — "atoms" like buttons and inputs built robust enough to support complex "organisms" like dosage calculators and patient charts.
| Outcome | Impact |
|---|---|
| Development time for new features & multi-brand updates | -40% — reduced through the Themer-based atomic architecture |
| User engagement & conversion across digital tools | +20% — improved through faster, more consistent product delivery |
| Handoff efficiency | Improved — an architecture-first approach reduced developer handoff friction |
| Consistency | A single governed component library replaced fragmented, one-off "snowflake" patterns across 10–12+ brands |
| Scalability | The system scaled across 12+ global brands without code bloat |
Post-launch, developer handoff metrics and designer "tool time" were monitored to confirm the centralized system drastically lowered the production error rate.
Deeper dive
Process detail, matrices & appendix
Expand any section for the supporting research and decisions behind the work above.
Working as a UI/UX designer within a dedicated squad, I acted as the bridge between high-level UX strategy and technical delivery. I collaborated closely with the development team to ensure the Atomic Design library was implemented with pixel-perfect accuracy. Through regular "Polder Model" syncs, we addressed technical constraints early, keeping the system scalable across 12+ global brands without code bloat. This iterative process included rigorous quality assurance to verify that the Themer-based architecture performed seamlessly across various digital products.
Post-launch, we monitored the design system's impact on product velocity and brand consistency across the CSL Vifor ecosystem. By evaluating developer handoff metrics and designer "tool time," we determined that the centralised system drastically lowered the error rate in production. This evaluation phase allowed us to refine the system logic, ensuring it successfully absorbed the CSL rebrand while maintaining strict pharmaceutical regulatory compliance.
Reflection
Learnings & takeaways
Systemic thinking at enterprise scale
I mastered the architecture of a multi-brand library designed for global interoperability. This went beyond UI creation — I developed the distribution models and documentation required to train diverse teams, keeping the single source of truth robust across 12+ platforms.
The balance of precision and velocity
Operating within a high-stakes merger required a pragmatic approach to design delivery. I learned to strike a critical balance: maintaining strict pharmaceutical regulatory compliance while accelerating workflows to meet aggressive corporate deadlines without compromising structural integrity.
Navigating strategic ambiguity
Enterprise transformations rarely offer a perfect roadmap. I learned to drive projects forward by prototyping multiple architectural paths and testing ideas in real-time — an iterative "North Star" approach that helped me find clarity amidst complex technical constraints.
Collaborative governance and iteration
Working in a multi-tiered squad taught me the value of the "Polder Model" of consensus. I established tight feedback loops with seniors, leads, and developers to surface friction points early, refining components until they met both user needs and business requirements.
Closing
Final reflection
Working as a UI/UX designer within a dedicated squad, I acted as the bridge between high-level UX strategy and technical delivery, collaborating closely with the development team to ensure the Atomic Design library was implemented with pixel-perfect accuracy.
Through regular "Polder Model" syncs, we addressed technical constraints early, keeping the system scalable across 12+ global brands without code bloat. The project concluded with a roadmap for future Figma Variables integration — a foundation for long-term architectural resilience.
The real deliverable was never the component library itself — it was a system disciplined enough that ten different brands could trust it with their identity.