Conversational Interface

Overview

A single chat component for all of IBM's products.

Role

UX Lead

Date range

January 2024 - May 2024

Project Link

View live ↗︎

Designing one conversational interface for all of IBM’s products.

The challenge

Natural language chat is the front door to most AI experiences. In 2023, IBM was embedding AI chat into products across the portfolio, from enterprise tools to customer-facing apps. Every team needed it, but each was building their own version, leading to inconsistency, duplicated effort.

IBM needed one scalable, flexible chat interface that could serve as the backbone for AI experiences company-wide. And we needed it to be in products by THINK, in May of 2024.

The solution

Building on the foundation we set with Carbon for AI, we built out a fully-functioning chat component that would serve as the backbone for all of our marquee products including watsonx Orchestrate, watsonx.ai, watsonx BI, and more.

This was not just a front-end, this tied design and engineering together so every product could build on the same foundation.

Approach

Building on our successful co-creation working model, we partnered extremely closely with over 10 product teams to co-create patterns and validate against their use cases. We partnered closely with our development team to scope, plan, and deliver this component at a rapid pace. It felt like we were a fully-functioning hive mind, working in chaotic, yet graceful harmony.

My role

As UX Lead, my role was to lead the design of the chat experience from the ground up.

That meant designing the interface, mapping out how conversations flow, and making sure the system could scale across an extensive amount of use cases and products.

I worked closely with engineers to make sure the design system translated into a real, reusable component teams could drop in and build on.

Key features:

Responsive design
Full screen, sidebar, and floating modalities
Message & conversation sctructure
How messages are formatted and interact with each other back and forth
AI chat canvas
A space to create assets and collaborate with AI
Sourcing
Design the use of sources in AI responses
Loading states
What does it look like while AI is processing a response?

Responsive design
Full screen, sidebar, and floating modalities
Message & conversation sctructure
How messages are formatted and interact with each other back and forth
AI chat canvas
A space to create assets and collaborate with AI
Sourcing
Design the use of sources in AI responses
Loading states
What does it look like while AI is processing a response?

Outcomes

The Carbon for AI Chat component became a core, business-critical asset for IBM products.

Became the core interface for several marquee products including watsonx Orchestrate, watsonx.ai, watsonx BI, and more.
Drastically reduced duplicative efforts.
Accelerated IBM’s product delivery for new AI products by giving teams a ready-made, flexible foundation.
Published as an open source component.
Delivered the most complex Carbon pattern ever created by far.