BUILDING AND MANAGING A COMPREHENSIVE, MULTI-BRAND DESIGN SYSTEM FOR PET LOVERS
In the initial phase of the project, I collaborated closely with UX managers and product designers to gain deep insights into Nestle-Purina's diverse digital product landscape. Through comprehensive auditing and analysis, we did deep-dives into the existing digital products – examining components, styles, and usage in designs. My research aimed to understand the nuances of each brand within the Purina portfolio and explore strategic approaches for the design system, contemplating the balance between a house of brands and a branded house as it applies to product themes and variants. I also aimed to get a clear understanding on adoption goals for the design system vs. what would remain in local libraries.
Working alongside the Product Design Lead as my knowledge partner, I begun constructing the foundations of a robust design system within Figma, tailored specifically for Purina's digital ecosystem. Dubbed PDS (Purina Design System), we organized four key areas: Styles, Assets, Components, and Patterns. I worked through them in that order, using the Styles (Colors, Typography, etc) as a base for Assets, some of which are nested into Components, some of which are compounded into Patterns.
As we progressed with the development of the design system, rigorous testing and iteration became a crucial part of its pending success. Collaborating closely with engineering teams, we conducted thorough evaluations to validate the effectiveness of design tokens and streamline the handoff process. Through new feature building and feedback loops, we iteratively refined the design system, addressing any inconsistencies or usability issues identified along the way. This iterative approach enabled us to fine-tune the system, ensuring seamless integration into not only new files, but the updating of existing files as well.
Recognizing the importance of comprehensive documentation for stakeholder clarity and accessibility, I leveraged Zeroheight to create detailed documentation for the PDS. From style guides to component libraries, each core area was meticulously documented, providing teams with a centralized resource for reference and collaboration. With Zeroheight, stakeholders can easily access and navigate the documentation (and stay out of Figma files), gaining insights into the design system's structure, guidelines, and best practices.
I led weekly workshops with designers across various products in order to drive the successful implementation of the new design system. These collaborative sessions served as forums for planning and strategizing, enabling us to continue to tailor the design system to their specific brand needs – while still looking at the bigger picture as a collective. By soliciting feedback and addressing emerging requirements, we fostered a culture of collaboration and ownership, empowering teams to leverage the design system effectively in their day-to-day work. Through these workshops, we cultivated a shared understanding of the design system's value proposition and paved the way for its seamless integration into the Purina digital experience.
