I spearheaded the product design of Helix, Pfizer's first-ever Design System. It started as a Sketch UI Kit in 2018 and evolved into a comprehensive library of components. With the releases of Helix 2.0 and Helix 3.0, we achieved significant milestones, including migrating to Figma, introducing an ISI component, and implementing Design Tokens. These enhancements ensured consistency, scalability, and brand alignment, empowering our teams to deliver cohesive and impactful user experiences. Through collaboration, exploration, and initiatives like office hours and documentation, the Helix Design System has transformed our design practices and increased efficiency across Pfizer's digital ecosystem.
As the Helix Design Lead, I had the incredible opportunity to spearhead the development of Pfizer's first-ever Design System, Helix. Our journey began in 2018 when we started with a Sketch UI Kit, initially used for hackathons, design thinking workshops, rebrands, and product redesigns. This early version served as a foundation for our design efforts.
In 2019, we released Helix 2.0, a significant milestone in the evolution of the Design System. During this phase, we partnered with SuperFriendly to collaborate on version 2.0. We expanded our efforts by creating a brand-agnostic component library in Sketch, which comprised an impressive collection of 480+ components. This marked a substantial leap forward in ensuring consistency and efficiency across our design projects.
Building on the progress of Helix 2.0, we continued to refine and enhance the Design System. In 2023, we released Helix 3.0, which introduced several noteworthy updates. The release featured a base theme aligned with Pfizer's rebranding efforts, providing a cohesive visual identity across our digital ecosystem. Additionally, we introduced a new ISI (Important Safety Information) component to improve the presentation of critical safety information to users.
One of the significant milestones of Helix 3.0 was the migration from Sketch to Figma. With the library's growth to over 650 components, we recognized the need for a more robust and collaborative design tool. The migration process to Figma allowed us to leverage its powerful features, enhancing team collaboration and streamlining our design workflows. In 2022, we started experimenting with Material Theme Builder and created an Alpha version of the component library which uses this color system.
To ensure consistent design language and maintain scalability, we introduced Design Tokens within the Helix Design System. These design tokens acted as the foundation for our component styling, enabling us to maintain a unified visual language across projects while also accommodating Pfizer's evolving brand guidelines.
The rebranding efforts within the Helix Design System involved extensive exploration and experimentation. We created mood boards, conducted logo explorations, and developed a comprehensive brand style guide to establish a cohesive visual identity for the system.
To foster ongoing collaboration and support within the design community, we introduced various initiatives. This included hosting office hours, providing dedicated documentation, and developing a roadmap to outline the future evolution of the Design System.
Overall, the Helix Design System has been instrumental in elevating the consistency and efficiency of our design efforts at Pfizer. By providing a robust library of components, embracing design tokens, and ensuring alignment with Pfizer's brand guidelines, we have empowered our teams to deliver cohesive and impactful experiences for our users.
The Helix Design System played a pivotal role in building and maintaining 85 brand websites across Pfizer's digital ecosystem. These websites benefited from the consistent design language and efficient workflows provided by the Design System.
The Helix Design System facilitated the deployment of an impressive 66,000 pages through the Helix Web Builder platform. This extensive deployment demonstrates the widespread adoption and utilization of the Design System across Pfizer's digital properties.
The implementation of the Helix Design System resulted in significant time savings. An average of 36 hours worth of software development time was saved per project, thanks to the reusable components, standardized design patterns, and streamlined workflows offered by the Design System.
The Helix Design System contributed to the development of the first industry standard for presenting Important Safety Information (ISI). This crucial component addresses user comprehension and medication safety. There are plans to propose this industry standard to the FDA, further solidifying the Design System's impact on user safety and industry best practices.
