Design Systems

Citrix Design System

The Problem

Multiple design systems with no universal design language driving consistency across the product ecosystem.

New Citrix Brand

I had previously led the alignment of the Citrix brand to our product ecosystem. This new product branding expression was the foundation for the new design language that would be captured in the new universal Citrix Design System.

UI Audit and Comparisons

A thorough audit across all the existing design libraries and products was conducted to understand the breadth of existing components and patterns. The images below reveal just a fraction of the findings.

Design System Users

A design system is like any other product, and it was critical to capture and address user needs.

Documentation Site Design

I augmented our small design system team with one of our trusted partners Ramotion. They helped us narrow in on an appropriate design direction for our documentation site and provided illustrations that played off the "jUIce" theme.

System Structure

The diagrams below show the proposed structure of the new Design System and how the new brand would inform a universal pattern language that would then guide product-level implementation.

Figma Libraries

Multiple Figma libraries were developed and cascaded in a way that mimicked the structures outlined above.

Team Structure

With no dedicated design system team, I organized the staffing around a federated model that aligned core representatives from product teams as design system leads. Each lead was then responsible for local design system needs for each product area.

High Level Governance Model

Design System Backlog and Tracking

Design System Principles

These are the principles that the design system maintainers uphold when working on the design system.

Design System Policies

Base Documentation Site

Example pages from the first release of the base documentation site.

Contact

How can I help you?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.