Verse: Leading a Design System Transformation
Verse: Leading a Design System Transformation
Verse: Leading a Design System Transformation
Unifying teams, components, and patterns across an enterprise AI platform
Unifying teams, components, and patterns across an enterprise AI platform
Unifying teams, components, and patterns across an enterprise AI platform
Company
Microsoft
(Nuance Communications)
My Role
Principal Visual UX/UI Designer,
Team Lead, Mentor
Principal Visual UX/UI Designer, Team Lead
Principal Visual UX/UI Designer,
Team Lead
Collaborators
Product Management,
Engineering
Timeframe
6 months
Aligned 7 Teams
Aligned 7 Teams
Aligned 7 Teams
Brought together 7 teams of 50-60 people to deliver the design system.
Brought together 7 teams of 50-60 people to deliver the design system.
Brought together 7 teams of 50-60 people to deliver the design system.
Led 3 Designers
Led 3 Designers
Led 3 Designers
Transformed design system and redesigned enterprise platform.
Transformed design system and redesigned enterprise platform.
About
•
•
Evolved a design system (Bolt) to a new system (Verse) due to the Microsoft acquisition.
Evolved a design system (Bolt) to a new system (Verse) due to the Microsoft acquisition.
•
•
Business justification included threat of loss of multi-million dollar revenue
Business justification included threat of loss of multi-million dollar revenue
My Role
My Role
My Role
•
•
•
Lead a team of 3 designers and partnered Product and Engineering leadership to work together under tight deadlines.
Lead a team of 3 designers and partnered Product and Engineering leadership to work together under tight deadlines.
Lead a team of 3 designers and partnered Product and Engineering leadership to work together under tight deadlines.
•
•
•
Scoped, managed and contributed to the design work required to evolve the design system and meet Microsoft standards.
Scoped, managed and contributed to the design work required to evolve the design system and meet Microsoft standards.
Scoped, managed and contributed to the design work required to evolve the design system and meet Microsoft standards.
•
•
•
Upskilled the design team on systems thinking and co-leading design-to-dev handoff.
Upskilled the design team on systems thinking and co-leading design-to-dev handoff.
Upskilled the design team on systems thinking and co-leading design-to-dev handoff.
THE CHALLENGE
Design Under Pressure
Design Under Pressure
•
•
•
Prevent loss of multi-million dollar revenue due to lack of WCAG 2.1 AA compliance
Prevent loss of multi-million dollar revenue due to lack of WCAG 2.1 AA compliance
Prevent loss of multi-million dollar revenue due to lack of WCAG 2.1 AA compliance
•
•
•
Build an entirely new Microsoft Fluent-aligned design system from an existing internal system and redesign an entire platform's interface following Microsoft's acquisition.
Build an entirely new Microsoft Fluent-aligned design system from an existing internal system and redesign an entire platform's interface following Microsoft's acquisition.
Build an entirely new Microsoft Fluent-aligned design system from an existing internal system and redesign an entire platform's interface following Microsoft's acquisition.
Platform Redesign: Before and After
Platform Redesign:
Before and After
Platform Redesign:
Before and After
The challenge
The challenge
The challenge
•
•
Evolve an existing design system to create a new system based on Microsoft Fluent.
Evolve an existing design system to create a new system based on Microsoft Fluent.
•
•
Convert all components from old system to Fluent and implement what's missing.
Convert all components from old system to Fluent and implement what's missing.
•
•
Partner with Product Management and Engineering and support their needs.
Partner with Product Management and Engineering and support their needs.
The solution
The solution
The solution
I led the team to adopt Fluent as our foundation to evolve and create a new design system to achieve compliance and integrate into Microsoft:
•
•
•
Hands on execution of 1,000+ token conversions, 60+ component modifications, and 100+ product-specific components with full-page UIs.
Hands on execution of 1,000+ token conversions, 60+ component modifications, and 100+ product-specific components with full-page UIs.
Hands on execution of 1,000+ token conversions, 60+ component modifications, and 100+ product-specific components with full-page UIs.
•
•
•
Redesigned key interaction patterns and interface areas to deliver a consistent, accessible UX/UI across the entire platform.
Redesigned key interaction patterns and interface areas to deliver a consistent, accessible UX/UI across the entire platform.
Redesigned key interaction patterns and interface areas to deliver a consistent, accessible UX/UI across the entire platform.
Mix Dashboard
Mix Dashboard
Mix Dashboard
•
•
•
The original interface for the Nuance Mix Platform was a hybrid of light and dark.
The original interface for the Nuance Mix Platform was a hybrid of light and dark.
The original interface for the Nuance Mix Platform was a hybrid of light and dark.
Old design system
Old design system
Old design system
→
→
New design system
New design system
New design system
Mix NLU
Mix NLU
Mix NLU
Old design system
Old design system
Old design system
→
→
New design system
New design system
New design system
Mix Dialog
Mix Dialog
Mix Dialog
•
•
•
The product had 3 viewing modes (light, dark and hybrid) because of the new design system.
The product had 3 viewing modes (light, dark and hybrid) because of the new design system.
The product had 3 viewing modes (light, dark and hybrid) because of the new design system.
New design system:
New design system:
Light mode
Light mode
New design system:
New design system:
Dark mode
Dark mode
Nuance Mix Home
Nuance Mix Home
Nuance Mix Home
Old design system
Old design system
Old design system
→
→
New design system
New design system
New design system
Remapping and Expanding Design Tokens
Remapping and Expanding Design Tokens
Remapping and Expanding Design Tokens
•
•
•
We audited and converted all tokens.
We audited and converted all tokens.
•
•
•
I defined expanded color palettes for Mix-specific components requiring color-coded visual communication.
I defined expanded color palettes for Mix-specific components requiring color-coded visual communication.
•
•
•
Aligning to Microsoft Fluent ensured a seamless integration.
Aligning to Microsoft Fluent ensured a seamless integration.
Typography
Typography
Typography
8 → 17 tokens
8 → 17 tokens
Color
Color
Color
250 → 1000+ tokens
250 → 1000+ tokens
Spacing
Spacing
Spacing
12 → 22
12 → 22
Stroke
Stroke
Stroke
2 → 5
2 → 5
Radius
Radius
Radius
1 → 6
1 → 6
Shadow
Shadow
Shadow
1 → 24
1 → 24
From the old design system:
From the old design system:
From the old design system:
To the new:
To the new:
To the new:
Adapting Fluent Components
Adapting Fluent Components
Adapting Fluent Components
•
•
•
My partner and I led the team to execute 60+ foundational components.
My partner and I led the team to execute 60+ foundational components.
My partner and I led the team to execute 60+ foundational components.
•
•
•
We matched all components to an equivalent in Fluent and modified with the new Verse design tokens.
We matched all components to an equivalent in Fluent and modified with the new Verse design tokens.
We matched all components to an equivalent in Fluent and modified with the new Verse design tokens.
•
•
•
100+ product-specific components were created to support full page UI layouts that were requested by engineering.
100+ product-specific components were created to support full page UI layouts that were requested by engineering.
100+ product-specific components were created to support full page UI layouts that were requested by engineering.
•
•
•
I established a peer review processes to maintain quality under tight deadlines.
I established a peer review processes to maintain quality under tight deadlines.
I established a peer review processes to maintain quality under tight deadlines.
Atoms
Atoms
Atoms
Bolt → Verse Design System
Bolt → Verse Design System
Bolt → Verse
Design System
Icons
Icons
→
→
→
Buttons
Buttons
Buttons
→
→
Molecules
Molecules
Molecules
Bolt → Verse Design System
Bolt → Verse Design System
Link
Link
→
Dropdown select
Dropdown select
Dropdown select
→
Input
Input
Input
→
Organisms
Organisms
Organisms
Bolt → Verse Design System
Bolt → Verse Design System
Example: Toasts
Example: Toasts
→
→
→
→
→
→
Cross-Functional Handoff at Scale
Cross-Functional Handoff at Scale
Cross-Functional Handoff at Scale
The Challenge
The Challenge
The Challenge
•
•
40+ Developers to 4 designers
40+ Developers to 4 designers
•
•
Traditional 1:1 handoffs weren't feasible due to different time zones.
Traditional 1:1 handoffs weren't feasible due to different time zones.
•
•
Provide real-time insight to work in-flight for Product Management and Engineering.
Provide real-time insight to work in-flight for Product Management and Engineering.
The Solution
The Solution
The Solution
•
•
•
Established weekly Design Office Hours with dedicated Teams channels for rapid troubleshooting.
Established weekly Design Office Hours with dedicated Teams channels for rapid troubleshooting.
•
•
•
Built a Figma Index and Tracker providing real-time status and direct links to component specs.
Built a Figma Index and Tracker providing real-time status and direct links to component specs.
•
•
•
We created full-page UI layouts based on developer requests for "big picture" context.
We created full-page UI layouts based on developer requests for "big picture" context.
Design Team
4 Designer
Design Team
4 Designers + 1 Director
4 Designers + 1 Director
4 Designers + 1 Director
I managed team operations and output, allowing leadership to focus on high-level platform strategy.
I managed team operations and output, allowing leadership to focus on high-level platform strategy.
I managed team operations and output, allowing leadership to focus on high-level platform strategy.
→
→
→
Product Management
Product Management
Product Management
3 PMs + 1 Director
3 PMs + 1 Director
3 PMs + 1 Director
→
→
→
Development (40-50)
Development (40-50)
Development (40-50)
5 teams + Leadership
5 teams + Leadership
5 teams + Leadership
Impact
Impact
Impact
•
•
100+ Design Tokens:
100+ Design Tokens:
Seamless visual migration from an old design system to new.
Seamless visual migration from an old design system to new.
•
•
160+ Components:
160+ Components:
Architected for a content-dense UI and complex workflows.
Architected for a content-dense UI and complex workflows.
•
•
25+ Full Page UIs:
25+ Full Page UIs:
Production-ready layouts for the entire platform.
Production-ready layouts for the entire platform.
•
•
Unified Visual Language:
Unified Visual Language:
Eliminated inconsistencies across the platform with a unified visual system.
Eliminated inconsistencies across the platform with a unified visual system.
100% WCAG Compliance
100% WCAG Compliance
100% WCAG Compliance
Retained mulit-million dollar product revenue by meeting strict AA accessibility standards.
Retained mulit-million dollar product revenue by meeting strict AA accessibility standards.
Led 3 Designers
Led 3 Designers
Led 3 Designers
Transformed design system to Microsoft Fluent and redesigned an enterprise platform.
Transformed design system to Microsoft Fluent and redesigned an enterprise platform.
Aligned 7 Teams
Aligned 7 Teams
Aligned 7 Teams
Brought together 7 teams of 50-60 people to deliver the design system.
Brought together 7 teams of 50-60 people to deliver the design system.
Launched Voice Studio
Launched Microsoft Voice Studio
Launched Voice Studio
Enabled rapid platform rebrand to Microsoft Voice Studio post-acquisition.
Enabled rapid platform rebrand to Microsoft Voice Studio post-acquisition.