VERSE DESIGN SYSTEM

Project Details

Background

Client: Nuance Communications
Feature: Design system bridging Nuance Mix UI with Microsoft Fluent 2
Role: UX/UI Designer

What: A design-team driven initiative to build a new design system for Nuance Mix, a conversational AI tooling platform designed to empower developers and enterprises to create powerful multi-model, omni channel customer service experiences for IVR, chatbots and more.

Nuance Communications was acquired by Microsoft in March of 2022, assimilating all of its technology and employees, who’s tenure now carries through to Microsoft. 

In anticipation of the new era in which the Mix product becomes a part of the Microsoft ecosystem, the UX team recognized the need to preemptively create a design system that would allow for a more seamless transition by utilizing Microsoft’s own Fluent 2. Each Microsoft product is based on the (still in progress) Fluent 2 design system, with a secondary layer on top to accommodate varying brand color palettes, illustration and graphics, and special components unique to the tool. 

The Plan

Atomic Design

Building the UI

We had recently completed a design system (named Bolt) in an effort to meet accessibility needs and better organize our process. The first step was to compare and contrast Fluent with Bolt in order to identify deltas regarding iconography, design tokens and components. 

With this information, we separated component work into three categories with the goal of using as much from Fluent as possible in order to save time and increase design efficiency. Those with very close matches would require minimal modifications and were slated to be done the fastest. The second category required significantly more work and the third category were components that were net new and would be the most intensive. 

We followed a customized atomic design principle when creating the Verse design system. This allowed for maximum consistency and ensured easier future-proofing by using a structure that allows anyone on the team to make necessary updates. It also created a system that would be much easier to onboard new designers to.

We broke down the design system to the following categories:

1. Tokens

2. Molecules

3. Organisms

4. Components

5. Layout components

6. Full Page UI

Creating layout components and full page UI designs allowed for a clear starting place and source of truth when any designer needed to begin a new feature. This ensured they were able to build off of the most current iteration of the screen regardless of if designs were live in prod. 

Designs for the full UI were broken down into four areas:

1. Shared components that are utilized across the platform and for which the implementation is maintained in a singular code base

2. Mix dashboard

3. NLU (Natural Language Understanding) tool

4. Dialog tool

From there, the UI was further broken down into smaller areas and, using the layout components, full page UIs were completed, as was the preferred method requested by the development team. 

Mix Dashboard

Mix NLU (Natural Language Understanding)

Mix Dialog

All components were design in both light and dark mode, enabling both modes as well as hybrid to match the original design of the interface.