IT: +39 338 62 46 214
INTRODUCTION
I led the UX strategy and system design of the OneDesign System Unified (ODSU) — Roche Diagnostics’ enterprise design system, deployed across all digital products in the DIA division. The ODSU powers clinical software used by 1,910 customers in 56 countries and connects 240,650+ Point of Care devices in hospital and laboratory environments worldwide.
My role went beyond component design: I was responsible for system governance, cross-team adoption, multi-brand architecture, and the evolution of the system from a fragmented visual library into a scalable UX infrastructure aligned with the Roche DIA Quality system and IVD compliance requirements.
Context & Problem
Roche DIA’s product landscape had grown organically over decades — clinical software products (cobas®, navify®, and others) built by different teams, with different visual frameworks and no shared design foundation.
Enterprise consolidation — hospital networks demanding coherent, enterprise-grade software across solutions.
One Roche strategy — Roche DIA committed to presenting a unified platform experience across cobas®, navify®, and all future products.
Compliance gap — the existing UI library was version-fragmented, not IVD-certified, and unsupported by a governance model teams could rely on.
The System Before ODSU
Before ODSU, design across Roche DIA operated in silos. Each product team maintained its own Figma library, its own component naming conventions, and its own relationship with the engineering team.
Fragmented component libraries — 7+ independent Figma libraries existed across teams. No single source of truth.
Design-development drift — components in Figma were consistently out of sync with the implemented codebase.
No shared language — the same UI element had different names across teams. Onboarding new team members took weeks longer than necessary.
Brand inconsistency — cobas® and navify® had diverged visually to the point where they no longer felt like products from the same company.
My Role & Team
Andrea Mabellini — UX Lead (System Strategy & Governance). Responsible for the ODSU architecture, governance model, adoption framework, and design–engineering alignment.
2× Senior UX Designers — component design, Figma library management, documentation
3× UI Designers — visual execution, multi-brand theming, accessibility specifications
1× Design Systems Lead — cross-team coordination, release management
OneWeb Components (OWC) team — 15+ frontend engineers. Total design ecosystem: 30+ designers across time zones.
The Unified Component Library
The technical foundation of ODSU is the OneWeb Components (OWC) library — framework-agnostic (React, Angular, Vue), maintained under the Roche DIA Quality system. By August 2023, OWC 6.0 and ODSU Design Kit 2.0 were fully in sync.
Scale: 1,910 customers across 56 countries. 240,650+ POC devices connected. 125 device drivers, 5,368 installed.
IVD compliance — every component certified for In Vitro Diagnostics applications — a regulatory requirement for clinical deployment.
Innersource model — the OWC repository is open to any Roche developer globally, creating a positive feedback loop of contribution and adoption.
What a Design System Really Is
The most important conversation in the early months of ODSU was not about components — it was about shared understanding. Design systems fail when treated as deliverables (a Figma file, a component library) rather than as living infrastructure with governance.
For ODSU, this meant establishing a clear contribution model, a versioning strategy where design kit and code library are versioned together, and an adoption charter — product teams signed off on which components were required, recommended, or optional.
A Key Pivot
Six months in, adoption data told an uncomfortable story: teams were aware of ODSU but not using it. The reason: the system was perceived as “not finished enough to trust”.
The pivot: stop adding components and start building trust infrastructure.
From building new components → to documenting existing ones completely.
From internal reviews → to co-design sessions with adopting teams.
From “library first” → to “team workflow first”.
Result: adoption rates tripled in the two quarters following the pivot.
Multi-Brand Architecture
The challenge: supporting cobas® and navify® from a single component library without maintaining two separate codebases.
The solution: a token-based theming architecture in both the design kit and OWC library. The same component applies the cobas® or navify® token set automatically.
Two-tier token structure — global primitives + semantic role-specific tokens let each brand express itself without duplicating components. Dark mode is first-class in both brands.
Brand extension model — new brands added by defining a new token set, zero component code changes. A third product brand was onboarded within 6 months of launch.
Design Process
Discovery workshops — 6 cross-functional sessions with product teams, developers, and brand stakeholders to identify the most requested components and highest-friction pain points.
Atomic design structure — Atoms → Molecules → Organisms → Templates. Each level documented separately with usage guidelines and do/don’t examples.
Accessibility as a foundation — every component evaluated against WCAG 2.1 AA before release. Accessibility specs included in developer handoff as a required field, not an afterthought.
Key Design Decisions
Framework-agnostic over React-first — Roche DIA’s product portfolio spans React, Angular, Vue, and legacy systems. Universal adoption required a framework-agnostic foundation.
Single source of truth — ODSU Design Kit in Figma is the canonical design reference; OWC on GitHub is the canonical engineering reference. A sync protocol defines how changes flow between them. No other sources are authoritative.
Governance over completion — we shipped a smaller, well-governed, well-documented system on time rather than a comprehensive system no one trusted. The system grew in coverage after adoption grew in confidence.
Results
1,910 customers in 56 countries using products built on ODSU. 240,650+ POC devices connected through ODSU-powered interfaces.
200+ components in OneWeb Components library, fully in sync with ODSU Design Kit 2.0. Framework-agnostic — React, Angular, Vue supported.
100% IVD compliant — every component certified for clinical deployment under the Roche DIA Quality system.
Adoption 3× — from 3 product teams at project start to 11 by end of engagement, after the governance pivot.
~40% reduction in design time for new product screens for fully-adopted teams. Third brand added to the theming system in 6 months with zero component code changes.
Use any form
Design impactful user experiences with ease—everything you need is at your fingertips.
Feel free to reach out for a project inquiry, a coffee chat, or a consultation. Let’s explore how I can help you achieve your design goals. Whether it’s crafting impactful experiences or discussing innovative ideas, I’m here to collaborate and bring value to your vision.