Project Summary
Task
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’?
My Role
Experience Designer. Took charge in the UI, and worked with a Principal Designer, Graphic Designer, and Developer
Challenge
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
Previous Design
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.
Journey Map
We needed a clear understanding of what the clinical trial process is like for a patient, so we created a journey map detailing the thoughts and emotions of a patient discovering a trial.
The website is mostly involved in the first two stages of this journey -- Discovery and Consideration. We needed to figure out how we can encourage patients to consider the trials.
User Flow
We also created a user flow to document the two main ways users would apply for a clinical trial. Typically, they either find the site through a web search, or a medical professional (like their physician) would give them a link to a specific trial.
Audience
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.
Trial seekers,
55+ years old
“Clinical trials are my last hope, but they are scary. What if my trial doesn't work?”
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’?
Resources
One of our main challenges was leveraging multiple resources handed to us by the clients and partnering agencies. The clinical trials team wanted their own aesthetic that still follows Pfizer's main branding without being an exact copy.
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
Figma Library
We ended up creating a design system on Figma just for the clinical trials team.
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.
We ended up creating a design system on Figma just for the clinical trials team.
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.
Things got pretty crazy at times, like below: (this was before Figma's updates on variants)
For nested components, we organized them following the atomic design methodology:
Results
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.
