Pfizer Clinical Trials: Design System Migration from Sketch to Figma

Pfizerclinicaltrials.com is a clinical trial recruitment website that allows users to search for past, current, and upcoming clinical trial studies.

Pfizer asked VMLY&R to redesign the clinical trials website after releasing their new brand guidelines in January 2021.

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.

 
A timeline showing important milestones before and during the clinical trials project.
 
MY ROLE
User Experience Designer

DELIVERABLES
Component Library, Documentation, 
Website Redesign

PROJECT DURATION
03/2021 – 01/2022

 
 

During the migration and website redesign, the design team needed to leverage the following elements:

1. Pfizer’s new branding and identity guidelines

2. Pfizer’s custom expressions: motif artwork

3. AKQA’s redesign of pfizer.com

4. Helix — Pfizer’s new, brand agnostic design system

 
 

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.

 
A timeline showing important milestones before and during the clinical trials project.
 
MY ROLE
User Experience Designer

DELIVERABLES
Component Library, Documentation, 
Website Redesign

PROJECT DURATION
03/2021 – 01/2022

 
 

During the migration and website redesign, the design team needed to leverage the following elements:

1. Pfizer’s new branding and identity guidelines

2. Pfizer’s custom expressions: motif artwork

3. AKQA’s redesign of pfizer.com

4. Helix — Pfizer’s new, brand agnostic design system

 

Make it

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world.

 

PREVIOUS CASE STUDY
NJ-Transit.png 
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.png 
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.




Next

Google Pal – Virtual adventures for hospitalized children