Zscaler

Overview

Zscaler's digital presence was inconsistent and struggled to communicate key product information. We designed, documented, and prototyped a full-stack design system for their entire digital ecosystem using Figma, React, and Lottie.

Problem

I was approached with three key problems to solve:

• Inconsistent design standards across web apps, forms, landing pages, marketing pages, and portals that needed to be audited
• The need for components that would be scalable and flexible enough to be used in both the front-facing marketing website and the internal web-based products
• Lack of clear documentation that the development team could easily follow for building hundreds of variants across product verticals

Goals

• Build a design system to meet the needs of multiple audiences with a clear narrative structure, curated user journeys, and a compelling user experience
• Ensure the system is focused on demand by aligning the site architecture and content to Zscaler solution areas and optimizing for engagement, conversion, and stability
• Be engineered for consistency, scale, and security with a modern and innovative approach to CMS development, effective integration of third-party systems, and localization
• Be built for scale through clean, modular enterprise design components that can support the brand and ongoing campaigns

Process

My north star was to create components that could work with dozens of permutations across the entire ecosystem to accomplish the project goal: Make every user's interaction with Zscaler a seamless exchange that secures immediate action.

Working with the content team, our first step was identifying each set of components that had to work together across cascading viewports and use-cases that were impacted by logged-in states, referring resources, and varying media types.

We used simple labeling based on the core application of each component to keep things simple for the work-in-progress from the content and asset creation teams. From there, we built out an atomic library and prototypes in tandem with the development team.

Through competitive analysis, content strategy, user-testing, and internal research we iterated and tested across several months until we had the right mix of components and application to build our full design system.

Solution

The components had to stack and cascade in various configurations to accommodate the content system. That required going far beyond scaling for viewports or smart auto-layouts into testing of key views with multiple variants of each component to get the mix right. We pushed Figma to its limit and then moved directly into Netlify to test our work in live environments.

After the key differences were identified, a lowest common denominator approach was taken to ease development time and cost. By building up from the baseline, or simplest, component that accomplished the job and already existed in the CMS, we could build atoms and molecules within those systems and layer them on to build flexible, responsive, and sustainable pages without creating massive debt.

Subtle animation and interaction make the entire system breathe without adding noise to a site that is heavy on content and illustration. The home page is a great example of flexible components working together to tell the story and provide the right points of engagement for various audiences.

Result

The design system solves technical debt problems that had compounded over time. Zscaler is now set up to iterate and adjust their design system for years to come.

The solid foundation we've provided and the documentation and best practices we've instilled in their team will ensure that as they acquire new brands and expand their product portfolio, they'll have their bases covered to keep design and development consistent. The unified navigation and page structure reduced user confusion and enabled efficient development for future pages.