Verse Design System · Nuance · 2021–2023

Building a shared system for how Mix products were designed and built

I was the design-system DRI: I made the strategic case, aligned design and front-end needs, and led the structure connecting Figma, tokens, accessible components, and product implementation.

Role: Senior UX Engineer · Verse design-system DRI
Focus: Strategy · Architecture · Figma adoption · Accessibility
Partners: UX · UX engineering · Product engineering · Design leadership

PROGRAM SCOPE

The operating model connected the Verse system team with the product and design teams responsible for adopting it. Open full size to zoom.

01 · SITUATION

A growing platform was accumulating inconsistency and implementation debt

Mix.dialog, Mix.nlu, Dashboard, and the surrounding platform were growing through separate product teams. Shared interaction problems were being solved repeatedly, design files and front-end code drifted apart, and accessibility quality depended too heavily on each implementation.

The dark interface used by conversation designers had also drawn critical feedback for being difficult to read and parse. A theme alone could not fix the underlying problem: the platform needed shared structure, behavior, and ownership.

The opportunity was larger than a component library. We needed a common operating model for design and engineering.

Earlier dark Mix.dialog message-node interface before the Verse design system. — Earlier product UI showed the density and readability problems teams were carrying independently. Open full size to zoom.

Later light Mix.dialog message-node interface using Mix.Verse. — The later light-mode surface used the shared foundation while preserving Mix-specific workflows. Open full size to zoom.

02 · TASK

Turn 2–3 years of design-engineering groundwork into a platform strategy

I was not a people manager, but I was the DRI for the system. My role was closer to a product and technical lead: define how the system needed to work, align it with business and front-end constraints, and create a plan multiple teams could execute.

01 · MAKE THE CASE

Connect design inconsistency to product delivery

I spent years building support for a design system by connecting repeated UX problems to engineering pain, accessibility risk, and the cost of product teams solving the same foundations separately.

02 · CHANGE THE TOOLING

Lead the move from Sketch and Abstract to Figma

I worked directly with Finance to bring Figma to Nuance CoreAI and Healthcare, then trained three design teams to use it effectively. Shared components and collaborative design became an organizational capability rather than a file-format change.

03 · ALIGN THE MODEL

Make Figma and front-end composition describe the same system

I defined how tokens, components, layouts, states, and extension points should compose so designers and engineers could reason about the same building blocks in their own tools.

04 · PLAN THE PROGRAM

Give leadership a credible path across products and teams

I created the architecture, team model, component categories, and phased timeline used to align leadership and coordinate Verse with Dialog, NLU, Dashboard, and Mix design work.

03 · FOUNDATION

Teach the shared language before asking teams to adopt it

Before Bolt—the early name for Verse—was built, I made a compact Mix.tokens presentation to explain why low-level design decisions should become named, reusable values shared by design and front-end. The teaching work made the later architecture easier to discuss.

Mix.tokens teaching deck · 4 slides Scroll to compare · Select to expand →

Slide defining design tokens as the visual atoms of a design system.

Slide outlining initial token goals and future possibilities including React components and Storybook.

Slide explaining why shared design tokens reduce duplicated work and connect UX with front-end.

Working table comparing Bolt and Fluent token categories, status, and owners. — Token decisions were tracked explicitly during the transition from Bolt to a Fluent-based foundation. Open full size to zoom.

Long Figma canvas showing the complete Verse token set. — The complete Figma token set connected platform foundations to the values product designers actually used. Open for an expanded view.

04 · ACTION

Build on proven foundations, then customize only where Mix required it

After the Microsoft acquisition, the system moved toward Fluent 2. The architecture deliberately separated what could be adopted directly from what needed a thin Verse wrapper and what only made sense for Mix products.

Category 1 · Adopt: Fluent 2 or Radix UI used as-is, with shared themes and tokens supplying the platform expression.
Category 2 · Extend: Components with targeted changes that still wrapped and preserved the Fluent 2 or Radix counterpart.
Category 3 · Compose: Mix-specific components created for product workflows that the underlying libraries did not address.

Wide Figma component inventory showing Verse component families and variants. — The component inventory made the scale, variants, and implementation decisions visible across teams. Open for an expanded view.

The components were designed as composable systems, not isolated screens

Card parts, states, tokens, and layout behavior could be assembled into product-specific components without breaking the shared foundation. This was the structure I led; the Verse development team built the component kit in partnership with me and another Senior UI Engineer.

Verse card component anatomy shown in the light theme. — Shared card anatomy · light theme. Open full size to zoom.

Verse card component anatomy shown in the dark theme. — The same shared anatomy · dark theme. Open full size to zoom.

A composed dark Mix component built from Verse card parts. — A Mix-specific composition built from the shared parts. Open full size to zoom.

05 · OPERATING MODEL

Coordinate a system that crossed disciplines, products, and delivery teams

The plan separated the Verse platform work from product implementation while keeping both connected. UX designers defined and validated the shared experience, UX engineers bridged Figma and code, the Verse engineering team built the library, and product teams integrated it into their own surfaces.

Planning diagram separating the Verse team from Dialog, NLU, Dashboard, and Mix UX implementation teams. — The planning model clarified ownership between the system team and the product teams consuming it. Open full size to zoom.

Year-long planning timeline for design, UX engineering, product engineering, accessibility, maintenance, and QA work. — The phased plan exposed dependencies among theme work, custom components, accessibility, integration, maintenance, and QA. Open full size to zoom.

Track the work at component level

Progress tables made category, design status, accessibility review, engineering ownership, and product adoption visible. That detail was essential for managing a program without relying on title-based authority.

Long progress table tracking Verse components across categories, owners, status, and products. — A component-level progress table kept work legible across disciplines and product teams. Open for an expanded view.

Long implementation-support artifact with component guidance and issue details. — Implementation guidance kept architecture decisions attached to the work as teams integrated the system. Open for an expanded view.

06 · ACCESSIBILITY

I did not author the accessibility specification shown here. I oversaw its creation and guided its direction so keyboard behavior, focus, states, semantics, and contrast were defined as system requirements rather than left to individual product teams.

My contribution was leadership and technical direction: set the standard, connect it to component architecture, and make the work accountable.

Large Figma accessibility specification covering multiple Verse components and states. — This specification was created by a collaborator under my oversight and direction. Open for an expanded view.

07 · ALIGNMENT

Show the organization why the system mattered

I presented the strategy at Nuance i3 in 2022 under the earlier Bolt name. The talk connected the move to Figma, design tokens, accessible headless components, composition, and the principle that product teams should take the layers they needed rather than fork the entire system.

Nuance i3 · selected story slides Scroll to compare · Select to expand →

Nuance i3 title slide: Design like a developer, develop like a designer.

Slide asking why a design system was needed and listing consistency, accessibility, extensibility, speed, scale, usability, and prototyping.

Slide noting the previous Sketch and Abstract design workflow.

Slide showing design tools aligned more closely with development through component and layout models.

Slide introducing accessibility as a system concern.

Slide introducing Bolt, the early name for Verse.

Slide showing the proposed system stack of design tokens, headless UI components, and a styling library.

Slide showing atomic design used for modular system layers.

Slide explaining that teams could take the system layers they needed and discard the rest.

Closing slide stating that Mix is built on top of Bolt.

08 · RESULT

A shared foundation that product teams could turn into Mix.Verse

The Verse development teams built the production component kit with my guidance and in partnership with another Senior UI Engineer. Our Mix Design Lead then used that foundation to create Mix.Verse for the individual products.

A public component library

The live Storybook documents themes, tokens, icons, core components, accessibility utilities, and Mix-specific components.

One language across tools

Tokens, component composition, states, and naming connected Figma decisions to front-end implementation.

A foundation for product expression

Dialog, NLU, Dashboard, and Mix.home could share system behavior while adapting it to their distinct workflows.

LIVE EVIDENCE Explore the Verse UI Storybook Browse the implemented themes, components, accessibility utilities, and Mix-specific layer. Open Storybook

Mix.dialog message-node interface using the light Mix.Verse theme. — Mix.dialog · message authoring. Open full size to zoom.

Mix.nlu interface using the light Mix.Verse theme. — Mix.nlu · model configuration. Open full size to zoom.

Mix Dashboard interface using the light Mix.Verse theme. — Mix Dashboard · project management. Open full size to zoom.

Mix.home interface using the light Mix.Verse theme. — Mix.home · platform entry point. Open full size to zoom.

PROVENANCE + CREDIT

What I led, and what the broader team built

My responsibility. I was the Verse design-system DRI and led the strategy, design and front-end architecture, component composition model, Figma adoption, cross-team plan, and implementation guidance.

Shared implementation. The component library was built by the Verse development teams with my guidance and in partnership with another Senior UI Engineer. The Mix Design Lead and product designers carried the foundation into Mix.Verse.

Accessibility credit. I oversaw and directed the accessibility specification; I did not author the specification shown in this case study.

Naming. Bolt was the earlier name used in the 2022 i3 presentation. Verse is the public name of the system that followed.