Meraki Design System (Meraki) is a design system for internal websites, tools, and for external facing mobile
apps. In 2023, Pfizer went through a rebrand for all print materials. The Customer Experience Design team
was engaged to create a digital library as a companion to follow the new brand guidelines for all digital
products. Pfizer has over 74 markets under its umbrella, and this became our guiding light.
The Customer Experiene team already had Helix Design System, but sadly had to be retired due to a tech stack
migration. From my work in Meraki Design System, we have saved $31m cumulative cost savings across the work
of 1,000 developers and designers both internal and external. I was able to reduce time-to-market by
nearly 50% and non-content related tasks by 35%.
I found this using the formula: (designer + dev working hours) × (designer + dev
rate)
How might we upgrade the foundations of an existing Design System for all brands to be customizable and
repeatable?
The design system's end users are, of course, the individual brands, but the designers who work to bring the
brands' visions to life and developers who make sure those visions are possible are the main users. As the
Lead Design System Designer, I am responsible for developing and implementing the plan to create a
Multi-Brand Design System. With an already established and actively used design system, my main constraint
was to maintain function of the system as it was still being used by multiple teams. I was limited to
using Figma as it is the tool of choice by internal teams and externally by agencies.
Process
Tokens
The internal announcement of a rebrand came at the same time that Figma was introducing Variables. I was so
excited to get my hands dirty with Variables and Mode swapping for the longest time, and this was the
perfect case for it! Our first design system, Helix, had a similar token structure to Material
3 by Google.
Color Swapping
The biggest part of the rebrand was the color. Pfizer now had a new set of defined colors in 10 hues, and had
begun encouraging all brands to move to those colors as opposed to brands defining their own colors. So I
was anticipating a mass migration of color which made it paramount.
Based on internal research of the most popular and highest rated brands, most used a primary, secondary,
and tertiary color. I wanted to expand upon this concept and make the brand selections easier for
designers and internal clients, so I came up with idea to have the primary, secondary, and tertiary
colors independent of one another. After creating a file to test the idea, I met with some key members
of the the larger Customer Experience team and Developer team. They agreed that the independent
selections of the different color categories is a viable and practical solution that expands the
broad range of brand color selection. The independent selections accomplishes 2 things:
Removes hierarchy from the brands so that one is not more important than the other.
Allows for 1000 color combinations that designers can play with for brand colors to highlight one
color over another (and another 1000 if you include dark mode as a wholly separate entity).
For example, if Brand X's primary, secondary, and tertiary colors are Red, Purple, and Yellow, the
designer
can swap the color order around to best fit the project and change the whole site's personality with two
clicks.
Color Tokens: Red Violet Yellow — Dark Mode
Color Tokens: Red Violet Yellow — Light Mode
Color Tokens: Violet Red Violet
Color Tokens: Violet Red Yellow
Typography
I had a similar approach when it came to typography. Pfizer's rebrand had included 5 proprietary font
families. I created tokens of the font families and attached those to the headings (h1-h6) to allow
designers to swap families per heading level as needed. This gives designers that much more freedom in
expression of each project.
Layout & Spacing
With newfound freedom for designers in finding the most appropriate design language of a project, there still
needed to be a unifying force that underpins structure across all projects as it all falls under the Pfizer
umbrella. In looking at the hierarchical grid examples within Making and Breaking the Grid by
Tymothy Samara, as shown on pages 78 and 79 for IAS Magazine mastheads, I realized we were trying to achieve
something similar. Different colors, typography, but the same structure and bones across each project.
Mobile Grid
Tablet Grid
Desktop Grid
I wanted to standardize the breakpoints, components, and patterns' respective grids, padding, and
horizontal
and vertical spacing. I created different Modes for breakpoints at small, medium, large, and extra large.
Stepping backwards a bit, the Variable Collection also includes font size for all forms of text from
headlines to labels to buttons. This way the scale is appropriate for all screens designers are going to
work within.
Border Radius
To add some extra personality to Meraki, the team felt it necessary to investigate potential use-cases in
border radii. We knew early on in the implementation that we'd need both a static collection that cannot
change and a dynamic collection of radii options that can change in prototypes if necessary.
Training and Development
After meeting with key members while working on color and subsequently fleshing out the foundations and
tokens, I wanted to make sure the larger CX Team was fully up to speed on the work I've done. I created a
series of team huddles to go over different aspects of each category, and I wanted to make it clear to the
team that, while this part is considered "done," the work isn't over. I wanted to treat the huddle series
like it was a client review and wanted to hear any and all feedback or critiques the designers on my team
may have had.
In working with our developers, we looked into using Figma's REST API. I helped coordinate a call between our
development team and a Developer Advocate at Figma so that our developers were best set up for the
introduction of variables and how they work in Figma. I learned a little bit of JSON to
understand how to best categorize the variables into separate sections and categories, as well as bridge a
gap in communication between the design team and development team.
Outcomes and Lessons
Since creating new features, we've saved 53k work hours and over 398k component inserts. My focus now lies in
covering additional product areas across Pfizer while fitting end-user expectations of a modern design
system.
Internally, I was a founding member of the Zenith team, a spin-off design kit for marketing websites. I
helped shape its foundations based on my findings for Meraki.
Future Features
Utilizing this file and new set of foundations, we've been able to expand the breadth of what we offer. On
top of the core Design System file, I've spearheaded the initiative to include a Patterns & Templates kit,
AI kit, Data Visualization kit, Dashboard kit, with a mobile app kit on the way.
With Figma offering new tools and features every year, I'm especially excited to see what Extended
Collections will look like when applied to a design system. I've been looking forward to something like this
in Figma for a while, especially since we can't add formulas to variables just yet. 😉
