Pfizer Clinical Trials: Design System Migration from Sketch to Figma
Pfizer's clinical trial recruitment website allows users to search for past, current, and upcoming clinical trial studies. The website's design for 2020-2021 was based on Pfizer's identity guidelines. However, in early 2021, Pfizer announced a new logo along with their first major rebrand in over 70 years. As a result, Pfizer asked VMLY&R to redesign the clinical trials website.
CHALLENGE The previous version of the clinical trials website was also designed by VMLY&R, so we already had an existing component library to work from. However, our workflow became messy because we had to use four tools for a single process: Sketch for design, Abstract for versioning, InVision for presentation/prototyping, and Zeplin for handoff.
Our Sketch files became too large and caused application crashes, resulting in decreased productivity, especially when we had tight deadlines. Additionally, multiple designers saving/updating files at the same time resulted in latency issues and confusion about the single source of truth.
OPPORTUNITY Migrate the component library to Figma — a cloud-based design tool that allows for versioning, prototyping, presenting, and handoff capabilities in one tool. With collaboration and sharing at its core, multiple users can edit design files simultaneously in real-time through the browser. Switching to Figma would enhance team collaboration and productivity with real-time updates.
SOLUTION Anew clinical trials component library in Figma, enhancing accessibility for designers, project managers, developers, and stakeholders. Its cohesive styles, components, templates, photography, and art direction reflect Pfizer’s dedication to scientific innovation and patient well-being. I also contributed to the development of website page templates, ensuring consistency and usability across the redesigned clinical trials site. The transition to Figma played a key role in the site's successful launch in January 2022.
Pfizer Clinical Trials: Design System Migration from Sketch to Figma
Pfizer's clinical trial recruitment website allows users to search for past, current, and upcoming clinical trial studies. The website's design for 2020-2021 was based on Pfizer's identity guidelines. However, in early 2021, Pfizer announced a new logo along with their first major rebrand in over 70 years. As a result, Pfizer asked VMLY&R to redesign the clinical trials website.
CHALLENGE The previous version of the clinical trials website was also designed by VMLY&R, so we already had an existing component library to work from. However, our workflow became messy because we had to use four tools for a single process: Sketch for design, Abstract for versioning, InVision for presentation/prototyping, and Zeplin for handoff.
Our Sketch files became too large and caused application crashes, resulting in decreased productivity, especially when we had tight deadlines. Additionally, multiple designers saving/updating files at the same time resulted in latency issues and confusion about the single source of truth.
OPPORTUNITY Migrate the component library to Figma — a cloud-based design tool that allows for versioning, prototyping, presenting, and handoff capabilities in one tool. With collaboration and sharing at its core, multiple users can edit design files simultaneously in real-time through the browser. Switching to Figma would enhance team collaboration and productivity with real-time updates.
SOLUTION Figma — a cloud based design tool with versioning, prototyping, presenting and handoff capabilities, all in one tool. Switching to Figma would empower us to become more collaborative and productive, since everything happening in design would be in real-time. After getting approval, we started to prepare for the transition from Sketch to Figma.
The switch to Figma played a significant role in the successful redesign of the clinical trials website, which launched in January 2022.
PROCESS
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 our components to the Helix 2.0 Design System
Initially, my team and I planned to create the clinical trials design system using Helix 2, a shared component library used by the Pfizer Digital team. However, we soon discovered that certain clinical trial components, such as trial cards, had unique features. As a result, we customized basic patterns from Helix to create tailored components that met the specific needs of the clinical trials website.
Creating separate Figma files
I collaborated with two designers to streamline Figma file organization for Pfizer’s clinical trial website redesign. We established a reusable component library and structured files for seamless collaboration: 'Working file #1' for internal design iteration, 'Client review #1' for approved client-facing designs, and two additional files to support ongoing 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 make a decision on whether to import components from Sketch to Figma or begin from scratch in Figma. After careful consideration, we opted to start from scratch and leverage some of the existing components from Helix, Pfizer's brand-neutral design system that was already available in Figma.
Example of the style guide that I created
Example of a clinical trial card component with variations for different use cases
Accessibility considerations
Accessibility and inclusivity are core to the experience. Design, copywriting and code are carefully crafted to meet these goals.
Using atomic design principles to create components
I applied atomic design methodology to analyze components both individually and as part of a system. Below is a clinical trial location card I designed for desktop and mobile, followed by a breakdown of its structure using atomic design principles.
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.
PREVIOUS CASE STUDY
NJ Transit Mobile App Redesign
This case study focuses on the redesign of the NJ Transit mobile app to enhance user engagement. Key components of the app were prioritized using research and insights collected from surveys and user testing.
NEXT CASE STUDY
MGC Sync
This case study focuses on the framework and steps that my team and I followed to redesign a digital networking tool for design students at the Michael Graves College.
