Let's Talk
Work

Pfizer's HCP platform and the Helix design system

Client
Pfizer, through Unipro
Role
Principal frontend consultant, then technical lead of Helix
Period
2018 – 2022
Team
Led 3 teams of around 30 people, within a programme of 100+ developers
Technologies
Drupal, Jamstack, Hexo, GrapesJS, StencilJS web components, Storybook, Zeroheight, Zeplin

Hundreds of websites, one standard. Build it once and use it everywhere.

For four years I worked across Pfizer's websites for healthcare professionals: through a pivot from Drupal to Jamstack, a visual editor I built called Hexograpes, and the Helix design system, which I went on to lead.

1 · hundreds of HCP sitesdrupaljamstack!2 · hexograpeshexo + grapesdrag, drop, publish3 · helixweb components3 teams, ~30 people85+ sites!1 · hundreds of HCP sitesdrupaljamstack!2 · hexograpeshexo + grapesdrag, drop, publish3 · helixweb components3 teams, ~30 people85+ sites!
Hundreds of Pfizer sites for healthcare professionals moved from Drupal to Jamstack, with a visual editor I built, then onto the Helix design system.

Hundreds of sites on Drupal

Pfizer runs a large number of websites for healthcare professionals (HCPs): doctors, nurses and pharmacists looking for information about its medicines. When I joined, they were built on Drupal, and I was working across all of them.

The pivot to Jamstack, and Hexograpes

Partway through the project came a big change of direction: moving the whole platform to Jamstack, with sites built as static files rather than served by a content management system. I architected the new platform, which went on to be deployed across hundreds of sites.

Static sites are fast and simple to host, but they usually need a developer for every change. So I built Hexograpes: the Hexo static site generator combined with the GrapesJS visual editor. It gave people a Webflow-style, drag-and-drop way to build and edit pages, while still publishing fast, static sites.

Taking the lead on Helix

In parallel, two people at Pfizer had started Helix, a design system to bring consistency to all of these sites. It began life as a Sketch file. I met one of its leads in person, and when the project needed a new lead, I was recommended for the job.

I took over Helix's technical direction and turned it into a library that could actually power hundreds of websites. Its components were built as web components with StencilJS, so they worked anywhere, and we integrated them into Hexograpes, so anyone building a page in the visual editor was building with the design system. Helix was documented in Storybook and Zeroheight, with designs handed off through Zeplin, and Pfizer released it as open source.

An example site built with Helix components
One of the sites built with Helix components

Leading at scale

At its peak I led three teams, with around 30 people working directly under my leadership, inside an HCP programme that had over 100 developers working with the platform. Alongside my own teams, the library had dozens of contributors from across the company, and it went on to power more than 85 websites.

Leading a design system at that scale is as much about people as code: agreeing standards, making contribution easy, and making sure the library stays useful to the teams building real sites rather than becoming an end in itself.

What came next

The idea outlived the tool. Another team at Pfizer took inspiration from Hexograpes and built their own in-house publishing platform on Laravel and GrapesJS.

What this means for your organisation

If you're running a large estate of websites, planning a platform migration, or trying to get a design system adopted across many teams, I've done all three at once, at enterprise scale. I can help you plan it, build it, and lead the people doing the work. Get in touch.