Pfizer asked for a new look to the clinical trials site after releasing their new brand guidelines in January 2021. We ended up creating a new library along with reskinning the site.
Visit website
How might we create a sense of trust in science and confidence in the clinical trials when Pfizer as a brand has a technology and precision-driven ‘look & feel’?
• A clean look with warm photography
• Our first Figma library just for Pfizer Clinical Trials to allow for flexibility
• UX improvements to trial listings
• Improvements to our efficiency as a team
Pfizer's latest brand guidelines -> for visuals
Helix 2.0 -> for component structure
Pfizer.com -> for look and feel
Pfizer Clinical Trial's custom expressions -> for their illustrations
Associate Experience Designer at VMLY&R's XD department
Pfizer Clinical Trials (PCT) used to follow a brushstroke theme, as a way to maintain the human element to its mostly science-driven brand. However, this was also following their previous branding.
Our main audience were, of course, the trial seekers – Those who looked to clinical trials for hope in finding a cure to ailments where already-known surgeries and/or prescribed medications didn't do much for them.
“Clinical trials are my last hope, but they are scary. What if my trial doesn't work?”
One way we looked for inspiration and patterns was to look at our competitors and determine what worked and what didn't.
Therefore, our central question became:
How might we create a sense of trust in science and confidence in the clinical trials when Pfizer as a brand has a technology and precision-driven ‘look & feel’?
We had several sources that we needed to leverage:
Pfizer.com
to help us keep this site in the Pfizer family
Pfizer's Brand guidelines
for the styles (color, typography, icons, etc...)
Helix 2.0
for component structure
Pfizer's Custom Expressions
for the illustrations
We created a design system just for Pfizer Clinical Trials using Figma.
Like most design systems, we organized it by component. What we faced with Pfizer was that many of these components had multiple variations.
Applying specific and flexible properties allowed us to switch between variants through dropdowns and toggles.
Here's how crazy it can get:
*This project was done before Figma's 2022 updates, hence why there are so many variants
Some of these components also had other components nested. In this case, we applied the atomic design methodology to our library.
We reskinned the website using our newly created design system, resulting in a look-and-feel that combined Pfizer's technology-driven brand with a humanistic vibe.
When it comes to finding your way on a map, not a lot of people actually ask for help. They’ll just continue to try figuring it out on their own.