ZENITH: A global DESIGN SYSTEM for 150+ brands

Pfizer - 2024

INTRODUCTION

Pfizer had previously attempted to create a design system in-house for 7 of their brands, but it failed to gain adoption within the organization. Brands weren’t excited about the design and didn’t see the system’s value, it was confusing and unwieldy, it didn’t have potential for growth and expansion, and it wasn’t created with a mobile-first mentality. So in late 2023, they asked us to “refresh” their failed design system.

At the same time, Pfizer had just completed a rebranding, both for themselves and for the 150+ brands under their umbrella. We quickly realized this wasn’t just a refresh. They needed a whole new design system that worked their new look and feel.

THE ASK

Make a mobile-first design system that worked across 150+ brands, with room to grow in the future. Strike the right balance of flexibility vs. rigidity, so that different brands with different needs would have those needs met, but maintain some consistency across them all. Deliver 90+ components, structured within 25+ page templates, to Pfizer’s development team, with robust documentation, in 6 months.

The brand colors for each brand would be handled internally by Pfizer as part of their redesign, and we didn’t want to give any particular brand any favoritism, so we employed a white-label approach when creating Zenith. We established a fake brand known as “Brandex” with its distinct look and feel, and used that for the creation of all our components. But we made sure to map all styling within the design system with variables, so that we could switch from “Brandex” to any Pfizer brand instantly.

THE PROCESS

A task of this magnitude would require a team large enough to be able to handle the work, at the velocity the client expected. The design process was essentially split into 3 separate but overlapping tracks.

A UX track would gather what requirements they could in order to create rough wireframes for page templates, as well as helping to write documentation as components were created.

Next, a design concepts team would create a preliminary design proof of concept (POCs) for a specific brand and page template.

Lastly, the component design team, which I led, would create the design system and use those page templates to inform the creation of pixel-perfect components. These components would have all the variants you’d expect, as well as being fully mapped to variables so that every could be switched from one brand to the next. Think “Light Mode” vs. “Dark Mode”, but there’s 150+ different modes. While we wouldn’t have to create all those variations, we did have to ensure the system was ready to handle them all in the future.

MY ROLE

As leader of the component design team, I was in charge of several aspects of the project. In addition to designing components and their variants, I was also in charge of designing and maintaining Zenith itself.

I led a team of 4 other designers (shoutout to Rosie, Jinhee, Huyen, and Rie!), helping to manage their workloads as well as my own. I was the point person (with my designers inclusion on every decision) for the UX team, the other design team, and Pfizer’s in-house development team.

The result