Design systems
·
2022

Helix Design System: Scaling consistency at Pfizer

I led the design of Pfizer’s Helix Design System, shaping the product roadmap, creating scalable components, writing core documentation, and training dozens of designers. My work helped drive consistency, efficiency, and collaboration across Pfizer’s global digital ecosystem.

The goal

Create a unified, scalable design system that drives visual and functional consistency across 150+ digital products, accelerates delivery, and improves the quality of patient and provider experiences.

The challenge

Pfizer’s digital landscape was fragmented—brand teams were reinventing components, misapplying guidelines, and struggling with outdated tools like Sketch. Aligning over 150 brand sites under a single, cohesive system required cross-functional buy-in, regulatory compliance, and a solution flexible enough to scale globally.

Helix 1.0

In 2018, I led the creation of Helix, Pfizer’s first Design System, starting with a Sketch UI kit used for hackathons, workshops, and early product redesigns—laying the foundation for scalable design.

Helix 2.0

In 2019, we partnered with SuperFriendly to launch a brand-agnostic component library in Sketch with over 480 components. This marked a major step toward design consistency and system adoption.

Helix 3.0

In 2023, we released Helix 3.0, aligning with Pfizer’s rebrand. We migrated to Figma, introduced Design Tokens, and launched a new ISI component to improve patient safety. The system expanded to 650+ components and included Material Theme Builder experiments to support a flexible color system.

We backed the system with strong documentation, hosted office hours, and built a forward-looking roadmap—fostering collaboration and scaling design excellence across Pfizer’s digital ecosystem.

Helix Design System: Scaling consistency at Pfizer
Helix Design System: Scaling consistency at Pfizer
Helix Design System: Scaling consistency at Pfizer
Helix Design System: Scaling consistency at Pfizer

Impact

Faster development · 500+ hours saved · $200K+ in costs avoided

By enabling component reuse and reducing rework across 20+ projects, Helix saved teams over 500 engineering hours in Q1 alone, helping avoid more than $200,000 in development costs.

Raising the bar for ISI compliance · Industry-first standard

Helix introduced the first standardized ISI component in the industry, improving comprehension and medication safety. It was positioned as a potential model for regulatory best practices and flagged for future FDA consideration.

Scaled to 85 brand sites · Unified design at scale

Helix played a central role in launching and maintaining 85 brand websites in 2022, providing a consistent design language and streamlining workflows across Pfizer’s digital ecosystem.

66,000 pages deployed · Platform-wide adoption

With the Helix Web Builder, teams deployed over 66,000 pages—demonstrating the system’s scalability and deep integration across Pfizer’s web presence.

Other work

Get in touch

Let’s make something amazing together