Pfizer clinical trials: a design system migration from Sketch to Figma
Pfizer’s clinical trial recruitment site helps users explore past, current, and upcoming studies. In early 2021, Pfizer unveiled its first major rebrand in 70+ years—including a new logo—and asked VMLY&R to redesign the site accordingly.
CHALLENGE
The previous site (also by VMLY&R) relied on a Sketch-based component library. Our workflow was fragmented across four tools—Sketch, Abstract, InVision, and Zeplin—leading to crashes, versioning confusion, and productivity loss under tight deadlines.
OPPORTUNITY
Migrate the library to Figma: a cloud-based tool that unifies design, prototyping, versioning, and handoff. Real-time collaboration would streamline workflows and reduce latency issues.
SOLUTION
We built a new Figma component library accessible to designers, developers, clients, and PMs. It reflects Pfizer’s renewed brand identity and commitment to innovation. The redesigned site launched in January 2022.
Identify users of both the design system and the website
Our design system users come from a variety of business processes such as designers, developers, brand teams, marketing, product owners and senior stakeholders. Primary users of the website would be potential trial participants and caregivers.
Atomic design research
I researched Atomic Design, a methodology that breaks down design systems into small, independent components. It was created by Brad Frost and consists of five parts: atoms, molecules, organisms, templates, and pages. I'll explain them in more detail later in the case study.
Design system research
I studied the design systems of leading companies, including Atlassian, Salesforce, and Microsoft, to learn about design system best practices and how we should structure our own design system.
Interface inventory
An interface inventory is a comprehensive collection of the elements that form an interface. It's like a well-organized box that contains all the pieces of your product, with buttons, colors, and text styles organized in separate compartments.
I worked with a designer on my team to audit the Sketch library, with the goal of getting an overview of all the styles and components in our system and identify any inconsistencies, such as undefined spacing rules, font sizes, and weights.
Mapping to Helix 2.0
My team and I began with Helix 2, Pfizer Digital’s shared component library, but quickly identified unique needs—like trial cards—that required customization. By adapting core Helix patterns, we built tailored components to support the clinical trials experience.
Creating separate Figma files
I collaborated with two designers to streamline file organization for Pfizer’s clinical trial redesign. We built a reusable component library and structured Figma files for clarity and flow—one for internal iteration, one for client review, and two for post-launch updates as the design system evolved.
Example of the file structure that I helped establish
Setting up the component library
We had to decide whether to import components from Sketch or build directly in Figma. To avoid messy imports—like broken layers and layout issues—we chose to rebuild in Figma, using select Helix components as a foundation. This gave us a clean, scalable starting point tailored to the clinical trials redesign.
Style guide that I created
Clinical trial card components with use-case variations
Accessibility considerations
Accessibility and inclusivity are core to the experience. Design, copywriting and code were carefully crafted to meet these goals.
Applying atomic deisgn to components
I applied atomic design methodology to analyze components individually and within the system. Below is a clinical trial location card I designed for desktop and mobile, followed by a breakdown of its structure using atomic design.
Documentation and guidance
I created detailed documentation in Figma to ensure visibility for developers and future designers. This included design rationale, component guidelines, and instructions for effectively using the design system.
Results
The new component library in Figma played a significant role in the successful redesign of www.pfizerclinicaltrials.com, which went live in January 2022.
