CXone - Design System & Dashboard design

Breeze.jpg

The Goal

Create alignment among all NICE products.

HOW

My team and I worked together on creating a comprehensive set of interaction rules and visual guidelines.

This set is based on unified principals and utilizes the same design language across the board.

The ChallEnges

  • Aligned with the latest UX trends including Flat 2.0

  • Employs scalable navigation model

  • Built for responsive design

  • Compatible with touch screens

  • Designed to focus the user on the task

  • Compliant with Section 508 legibility guidelines

  • Will include unique design

  • Corresponds with previous NICE UX Standard

Solutions

  • Unique Iconography

  • Multiple font weights and contemporary style which enables us to create a richer typography

  • Designing for multiple screen sizes, allowing wide range, Responsive design.

  • Accessibility and Legibility:

    • Colorful elements are checked constantly with color blindness tools.

    • Texts should be with enough contrast and accessible – follows section 508 for legibility guidelines

Colors. Icons & Fonts
Breeze Color palette
Breeze Color palette

Base colors were taken from the NICE’s Brand colors. The color palette was enriched with shades and tints.

Unique Iconography
Unique Iconography

Each icon was manually created to fit the unique icon language.

Typography
Typography

We used in our styleguide multiple weights and contemporary style which enables us to create a richer typography

Component Library

Early wireframes-Before

Visual Screen Designs

Widget Icon Evolution

Creating icons for the dashboard application was a challenging task. Many iterations were taken until we reached the final result.
See below our main 3 versions.