Customer Success Center Design System

Customers moved through documentation, support, services, programs, and product resources as parts of the same Customer Success Center. But each area had evolved a little differently, so familiar things could look or behave differently from one page to the next. The platform was asking customers to relearn small parts of the interface as they moved through it.

Component families from the Customer Success Center design system
Component families from the Customer Success Center design system

Role

UX Designer II

Team

Product Management · Web Development · Graphic Design

Tools

Figma · MindTouch CXone · Claude

When one platform starts to feel like several

As the CSC expanded, every new initiative brought another set of design decisions.

Over time, customers encountered different card styles, spacing, typography, imagery, and interaction patterns across sections of the same platform. Familiar things didn’t always feel familiar.

The same three jobs — an aside, a section index, in-page navigation — solved differently across three product areas of one platform.
The same three jobs — an aside, a section index, in-page navigation — solved differently across three product areas of one platform.

Customers moved between very different kinds of content, but repeated interactions still needed to feel familiar.

How might we create enough consistency for the CSC to feel coherent while leaving enough flexibility for different kinds of customer experiences?

Finding the right level of consistency

I audited repeated patterns across the CSC to identify which decisions should become shared foundations, which should become reusable components, and where individual experiences still needed flexibility.

The goal wasn’t to make every page identical. It was to make the underlying rules predictable.

Shared typography: one scale and one set of hierarchy rules across the platform.
Shared typography: one scale and one set of hierarchy rules across the platform.

Creating a shared foundation

I created a shared foundation in Figma that aligned with Planview’s broader product language while accounting for the needs of the CSC.

  • Semantic colors — created consistent meaning.
  • Shared typography — established hierarchy.
  • Design tokens — made foundational decisions reusable.
Primitives hold raw hex. Semantic tokens alias primitives and carry the role.
Primitives hold raw hex. Semantic tokens alias primitives and carry the role.

Making interactions predictable

I standardized repeated patterns including cards, callouts, tables, figures, code blocks, and expandable content.

When customers encountered something familiar, it should look and behave the way they expected.

Callouts, tables and code blocks as a single set of patterns.
Callouts, tables and code blocks as a single set of patterns.

Designing for real content

The CSC supported everything from dense technical documentation to services, programs, and promotional pages inside an existing CMS.

The system needed enough structure to create familiarity and enough flexibility to support very different kinds of content.

The same patterns carrying dense technical documentation.
The same patterns carrying dense technical documentation.

Systematizing the visual language

The CSC’s new visual direction also needed to work beyond individual pages.

I translated the palette, illustration treatments, and supporting visual patterns into reusable guidance so new experiences could feel distinctively CSC without reinventing the style each time.

The illustration palette and the set it governs, sized per placement.
The illustration palette and the set it governs, sized per placement.

From component to experience

The system gave new projects a place to start.

Web Development could reuse established patterns instead of rebuilding familiar interactions, while customers encountered a more coherent experience as they moved through the CSC.

A product hub built entirely from shared foundations and components.
A product hub built entirely from shared foundations and components.

What I learned

Consistency is learned behavior

Uniformity was never the goal. Dense technical documentation and promotional pages needed different amounts of structure. What stayed consistent was how familiar patterns behaved — cards, callouts, tables, in-page navigation — so customers could apply what they’d already learned as they moved through the platform.

A design system serves two users

Customers experience it as familiarity. Web Development experiences it as reusable patterns instead of rebuilding the same interaction repeatedly. The system held because it was useful to the people building on it, not only the people using it.

NextPartner Portal Redesign