custom-cover-arrow

Ping Identity Corporate Website & Design System

*Please note, this case study is WIP and currently being documented and designed. 

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.

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. The full case study is being produced and this page will be updated soon. 

Details

2021-2022
Art Direction
Design System
UI Design
UX Design

Team:
Mike Heighway, Design Manager
Josh Kulchar, Senior Designer
Régine Carreras, Senior Designer
Katie Daugherty, Designer
Ed Nepomuceno, UX Lead

Select Accomplishments

Line-Break-Default

Created Ping’s first design system for the Marketing team

Instituted efficient Design to Development workflow

700+ graphic assets

80+ animations

60+ pages

4 months design to launch time

Key Metrics

Line-Break-Default

Decreased average page load time by 50%

Homepage speed index improved over all our main competitors between 0.5 and 4 seconds

Decreased page rendering time by 25%

Increased visitors' average time on page

Design System

Line Break-Invert

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.

Grid

Line-Break-Default

The site is built over 5 breakpoints, with the widest maxing the page width out at 1440 pixels. The intent was to help preserve the visitor’s focus on ultrawide monitors.

PIC-Grid

Color

Line-Break-Default

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 introducted to help carry the brand color through moments that require a dark background, but need a contrast compliant red.

PIC-Colors
PIC-Color-and-Accessibility

Typography

Line-Break-Default

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.

PIC-Typography-v01

Navigation and Buttons

Line-Break-Default

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.

PIC-Buttons
PIC-Button-Grouping
PIC-TOC-Cropped

Patterns

Line-Break-Default

Patterns play a major role in the new site design and are one of the brand building blocks. They are used to bring visual interest to key areas across the pages, as well as within the graphics themselves. The goal was to create a system of parts that were easily reusable and memorable.

PIC-Patterns-Versions-Wide

Layout Blocks

Line Break-Invert

A holistic approach to the design of the page types was taken for the project. Pages were grouped into types, and each type was built into a page template. This approach provides visitors with a consistent experience.

Figma Variants

Line-Break-Default

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. 

PIC-Blocks-Mixed01-Empty-v02 PIC-Blocks-Mixed01-Filled-v01
PIC-Blocks-Text11-Empty-v01 PIC-Blocks-Text11-Filled-v01

Hidden Patterns
In certain scenarios, background patterning is hidden to maintain proper text legibility. 

Page Design

Line Break-Invert

A holistic approach to the design of the page types was taken for the project. Pages were grouped into types, and each type was built into a page template. This approach provides visitors with a consistent experience.

PIC-Capabilities-After-v03
PIC-Home-Top-Fold-v02
PIC-Home-Mobile-v02

Pages, Before and After

Line-Break-Default

The redesign of the pages brought a massive shift to the look and feel of the corporate site. Pages were standardized, as were the page graphics. Each set of pages now sits as a cohesive group.

PIC-Industries-Before PIC-Industries-After
PIC-Tabbed-Responsive

Iconography & Imagery

Line Break-Invert

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. 

PIC-Iconography-System
PIC-Icons-Square-2
PIC-Icons-Square-3
PIC-Icons-Square-1

Illustration Style

Line-Break-Default

Diagrams, illustrations and imagery rely heavily on the core system elements of icons and patterns. Red is intentionally used to call out specific moments related to Ping services and capabilities.

PIC-Illus-Diagram-01
PIC-Illustration-02
PIC-Illus-Diagram-02
PIC-Illus-Diagram-03
PIC-Img-3×3-Comp-Platform-TryPing-1082×1082-1
PIC-Img-3×3-Comp-Platform-Customer-1082×1082-1
PIC-Img-3×3-Comp-Platform-WhatisZeroTrust-1082×1082-1

Project Management

Line Break-Invert

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.

PIC-PM-Asana-v02
PIC-PM-Sheets-v02

© 2022 Mike Heighway

© 2020 Mike Heighway