Cubic Design System

In 2021, Ping Identity’s corporate website was redesigned over the course of 8 months. Project Reimagine was a complete overhaul, and was built using a new design system, Cubic.

With Cubic, we took a data-driven approach to insure that we met the latest web accessibility standards.

The new design required the design of over 700 graphic assets with 80 animations over 60 pages. The visual system included new icon libraries, a patterning system, photographic treatments, diagram styles, and photo collages.

Project Details

2020-2022
Design Systems
Creative Direction
Brand Standards
Website Design
Iconography
Illustration
Photography

Design Team

Mike Heighway, Creative Director
Régine Carreras, Senior Designer
Josh Kulchar, Senior Designer
Katie Daugherty, Designer

Design System

The new design system for Ping brought a fresh new look and feel to the website. The base color palette was expanded, brought into accessibility standards and used with intent—specifically, the Ping brand red was used in key areas throughout the site and in the graphics. A new typographic system set up a bold hierarchy. Icons were updated across the board, and designed to have a more unique visual style. A base set of patterns was developed to help carry the brand’s style across the entire site and other touch points.

The Grid

The basis of the design system is the 12 column grid, which extends over 5 breakpoints. The widest breakpoint constrained the page content to 1440 pixels to help preserve the visitor’s focus on ultra-wide monitors.

Color

The entire color palette for Ping Identity was updated to provide greater visual contrast between elements, with the exception of the primary brand red. A new Bright Red was introduced to help carry the brand color through moments that require a dark background, but need a contrast compliant red.

Typography

Two widths from the Gotham type family are used strategically across the site. For headlines and areas requiring visual impact, Gotham Condensed carries the messaging forward. For communicating longer form copy, the regular width Gotham is employed. In the section titling, highlighted text helps call out particular words or short phrases for maximum effect.

Navigation & Buttons

The primary navigation across the site was designed to integrate the product and capability iconography to create a visual thread as users move throughout the site. Buttons were defined and designed to be used in particular combinations for maximum user clarity.

To help users with long format content, we developed a table of contents that updated based on the users position on the page. The highlighted number in the table of contents corresponds to what chapter the user is reading.

Layout Blocks

A modular set of page building blocks was developed to allow for rapid page assembly, and to maintain a visual consistency across the 3,000+ pages on the Ping Identity website. These blocks were broken into block types (text, image, multi-use, cards, form) and variations were made for use across the site.

Figma Variants

Design blocks were set up in Figma as variants, which allowed the team to quickly mockup pages across our different breakpoints. Three breakpoints are shown here, and the block is seen in both its default state and populated state.

Website Design

Applying the design system efficiently and at scale across the website required a holistic approach. Pages were grouped into types, and each type was built into a page template, assembled together using layout blocks. This modular approach allowed us to meet tight deadlines, while still providing visitors with a consistent experience.

Iconography & Imagery

The new icon library serves as the backbone for the entire site redesign. Over 140 icons were rethought and designed to have a more unique visual style. Half of these were then selected to be animated and used in our primary page hero sections. Throughout the site, the icons reinforce the written narrative and are intended to help weave a consistent visual thread.

Project Management

I worked closely with a project manager to set up the project workflow in Asana, which was used to organize multiple teams and track page design throughout the process from conception through launch. Additionally, I organized the process of creating over 700 static images and more than 80 animations to track design progress between our internal design team and an external agency.