PALO ALTO NETWORKS DESIGN SYSTEM

Palo Alto Networks
Design system

PRIMARY INTERACTION DESIGNER

Design management, facilitate the collaboration, testing, UX/UI design, build components, drive accessibility adoption, documentation (DS website)

MY ROLE

I joined a team of 2 visual designers and 3 FEDs, as the first Interaction designer. The primary tasks that I've done:

Drive UX workshop for UX strategic goals & plan, priority & roadmap. Run Product Group collaborations
Define interaction models, prototypes, user testings & specifications. Build Figma components & library
Documentation & Publishing (design system website)

THE CHALLENGE

the challenge

Palo Alto Networks has made 17 acquisitions and 1 investment. The company has spent over $ 3.63B for the acquisitions focusing in Cybersecurity sector.

Screen Shot 2022-01-13 at 10.36.34 AM.png

Mission: Define and deliver best-in class & consistent user experience for the Palo Alto Network products. Build a design system that provides a unified set of UX, components, design rules and patterns.

ENGAGEMENT MODEL

Central UX Team (My Team)

Create a vision for UI/UX at PANW in collaboration with Product teams 
Plan and orchestrate UX consistency in partnership with Product teams
Create a central Design System and Common UI Component Library 
Establish best practices to have simplified seamless experiences
Drive tools & process standardization 
Invest in UI/UX community & training

Product Team (15)

Own UI/UX for each Product, & buildUI/UX capability and capacity 
Invest in Accessibility and Usage Telemetry to create customer feedback loop
Identify UI/UX improvement in product to deliver best-in-class user experience 
Align UI/UX roadmaps to drive jointly agreed consistency plans

DESIGN - FOUNDATION

COLOR

Color plays an important role in Product design. A well thought- out color palette can elevate a design from ‘good’ to ‘great’. While some colors are “universal” in UX design such as black, white, and gray, the colors they’re combined with can have a huge impact on a user’s perception. Color evokes emotions that brings users to engage with the content or product

Screen Shot 2022-01-13 at 12.32.17 PM.png

Screen Shot 2022-01-13 at 12.38.56 PM.png

DESIGN - FOUNDATION

TYPOGRAPHY

Typography is an important foundational element in product design. It is the craft and technique of arranging type to make language legible and readable, bringing text to life. Much of a product’s information is communicated through type. Type could account for 85-90% of any given screen. Keeping cognitive load low, good typography blends seamlessly with other interface elements working together to create visual balance.

Screen Shot 2022-01-13 at 12.44.15 PM.png

DESIGN - FOUNDATION

BUTTON

Buttons allow users to perform actions and complete a task or flow. Multiple styles of buttons are strategically placed throughout your interface, while clearly communicating what will happen next. Designing for action is a critical part of creating a user experience—helping your users take the necessary steps to accomplish their goals.

Screen Shot 2022-01-13 at 12.52.53 PM.png

Screen Shot 2022-01-13 at 12.53.11 PM.png

DESIGN - COMPONENT - NAVIGATION

NAVIGATION

Navigation allows your users to move through the product, presenting them with a mental model of the information hierarchy. It enhances your user’s understanding from moving between pages, and provides confidence and credibility in interacting with the application.

Screen Shot 2022-01-13 at 12.59.21 PM.png

Screen Shot 2022-01-13 at 12.59.32 PM.png

Screen Shot 2022-01-13 at 12.59.44 PM.png

Screen Shot 2022-01-13 at 12.59.59 PM.png

Screen Shot 2022-01-13 at 1.00.06 PM.png

Screen Shot 2022-01-13 at 1.00.19 PM.png

ACCESSIBILITY

Palo Alto Networks makes every effort to ensure that our products comply with accessibility laws and regulations. Our goal is to cater to the needs of every valued customer and provide equal access and opportunities to all users.