The intelligent contact center platform

The Need for Change

The Five9 Administrator Java app, integral to managing cloud contact center solutions, had become outdated. A complete redesign was essential to enhance user experience, streamline workflows, and incorporate modern design principles. Thus, Nimbus was born in January 2020.

Before diving into the design process, we conducted a SWOT analysis to understand our strengths, weaknesses, opportunities, and threats relative to other CCaaS (Contact Center as a Service) companies.

So what makes a good design system?

A robust design system is the foundation of a successful product redesign. Key elements include:

• Consistency: Uniformity in design elements across the platform.
• Scalability: Ability to grow and adapt to new features.
• Usability: Intuitive interfaces that meet user needs.
• Documentation: Comprehensive guides for designers and developers.

We started organizing our design system into 4 groups.

Laying the Groundwork: Design Tokens

Design tokens are the core of any design system. They are the building blocks that ensure consistency and scalability.

Here's an example of how we've converted some of our divider and card tokens into YAML:

Layout:
  divider:
    value: "#e8e8e8"
    type: "color"
    description: "#E8E8E8, Divider"
  default:
    background:
      value: "#ffffff"
      type: "color"
      description: "TESTINGS"
  alternate2:
    background:
      value: "#fbfbfb"
      type: "color"
      description: "#FBFBFB"
  alternate3:
    background:
      value: "#f8f8f8"
      type: "color"
      description: "Page Background, Cards or Dashboard Widget, Background\n#F8F8F8"

Color Palette, Typography, and Spacing

First, we defined our primary, secondary, and accent colors. Most of this was already done for us via Five9's brand design, so we followed suit. We then had to establish the font families, sizes, weights, and line heights. Standardized padding and margin values for uniform layouts.

Constructing the Framework: Base Components

We started with smaller items like base components, which form the backbone of the user interface. Then, we moved to larger items that incorporate the base components we just created.

Buttons

Various states (default, hover, active, disabled) and sizes.

Forms

Input fields, checkboxes, radio buttons, and dropdowns.

Tables

Standardized table designs for data presentation.

Adding Visual Elements: Icons and Illustrations

Icons and illustrations are vital for enhancing user interaction and making the UI more intuitive.

Icon Library

We created a comprehensive set of icons for different functionalities.

Illustrations

We created custom illustrations to aid in onboarding and error states. My team and I brainstormed the best types of illustrations that tell a story. For instance, we created our own Five9 cloud characters, symbolising our product's move to the cloud.

Theming

No system is complete without having a light/dark mode. This helps our app become more accessible to our users. We topped it off with an inverse set of colors utilizing Styles

Empowering Designers: Designer Tools and Documentation

To ensure consistency and ease of use, we developed extensive documentation and designer tools.

Documentation

Detailed guides on component usage, best practices, and design principles.

One way we tackled this was using design process assets, which can help track the progress of user stories and design stories.

Example: Project Tracking

To tackle the more intricate items, such as component usage guidelines, we created documentation for each component.

Example: Documentation

Onboarding Tools

Resources to help new designers quickly get up to speed with the design system.

The Impact of Nimbus Design System

The Nimbus design system has revolutionized the Five9 Administrator app by providing a modern, cohesive, and scalable UI. It has improved user satisfaction, streamlined workflows, and positioned Five9 as a competitive player in the CCaaS market.