Palo Design System

I led the design of core UI components for Palo Alto Networks’ enterprise design system, which supports 20 products, seven design teams, and three product brands. My contributions spanned multiple components and strategic initiatives, ensuring consistency and scalability across the entire product suite. Notably, I designed the organization’s most widely used UI component, the Data Grid, and developed a Figma plugin to automate its creation and updates.

Objective

Standardize the look and feel across all Palo Alto Networks enterprise products. Given time and resource constraints, we focused on high-impact areas that matter most to our customers.

Key Approaches

• Structured Process: Adopted a waterfall approach with thorough upfront planning to ensure consistency and quality.

• Team Engagement: Fostered collaboration and enthusiasm through blue-sky workshops, real-time quizzes, and sharing fun facts.

• Consensus Building: Prioritized alignment across teams and evangelized best practices to strengthen the design culture.

Efficiency through Tooling & Automation

• Enhanced Design Workflow:
  • Developed a table component plugin for Figma to streamline the creation of data grids.
  • Integrated design tokens directly into our tools, ensuring consistency and reducing manual effort.

• Data-Driven Approach:
  • Encouraged higher-level thinking with a data-driven mindset: “Use data to think, design, and debate.”
  • Implemented a Figma plugin that leverages data for better decision-making.
  • Conducted Pendo analyses to understand user journeys around key UI components, ensuring our designs address real user needs.

Reflections & Opportunities

• Think Big, Think Small: Balance broad strategic thinking with attention to detail.

• Seek Insights from Different Angles: True insights often emerge when examining problems from multiple perspectives.

• Cross-Functional Engagement: Collaborate more closely with product management and technical documentation teams to align goals and streamline workflows.

• Adopt a Bias-for-Action Mindset: Respond quickly to requests and present initial solutions as a starting point for iteration.

• Explore Agile Practices: Experiment with small, short releases and continuous feedback loops throughout the design system development cycle.

• Reimagine the Design System Ecosystem: Reflect on how various tools—such as websites, design specs, components, and documentation—interconnect and enhance each other.

• Return to Fundamentals:
  • Beyond a catalog of discrete components, what truly defines a design system?
  • What unifies the components and artifacts?
  • What core problems does the system solve, and how can its success be effectively measured?