Giving AI
a Consistent Voice

Standardizing the AI Assistant chat panel across
an entire enterprise product ecosystem

C3 AI — AI Assistant Chat Panel Standardization
Company C3.ai
My Role Design Systems
Scope Redesigned and standardized the AI Assistant chat panel across all C3.ai applications
Team Designers, and Engineers across multiple app teams
Tools Figma
01 — Origin

The problem I found by not looking for it

This project didn’t start with a brief. It started with a conversation.

I was talking with engineers from other app teams about something completely unrelated when I started noticing something odd. They kept mentioning “their” version of the assistant — how it worked in their app, what it could do, how they’d built it. It gradually became clear that across the company, the same component had been implemented in entirely different ways.

The AI Assistant chat panel — meant to be a consistent companion across all C3.ai applications — had fractured into at least half a dozen different versions. Different layouts. Different behaviors. Different interactions. Same idea, unrecognizable implementations.

Lesson learned early

Always reach beyond your direct team. The most important problems are often visible only from the edges — in the gaps between teams, not within them.

Multiple diverged AI Assistant chat panel implementations across apps

Audit snapshot: the same component, implemented multiple different ways

02 — The Problem

Consistency isn’t a nice-to-have. It’s infrastructure.

The divergence wasn’t born from carelessness. The original component had been built under a tight deadline by another team, without sufficient consideration for interaction depth, edge cases, or future extensibility. It worked for the moment. Then every team built their own thing on top of it.

03 — Process

Design systems work is social work

Once the need was clear, I organized a recurring working session with designers across application teams. Not to present decisions — to discover them together. Every designer brought use cases from their context that I hadn’t considered. Every conversation surfaced edge behaviors that needed accounting for.

It was one of the best collaborative dynamics I’ve worked in. Nobody owned the problem alone.

Mapping existing behaviors across app versions

Mapping existing behaviors across multiple app versions

Weekly sessions: surfacing use cases from every app team

Weekly sessions: surfacing use cases from every app team

The harder part wasn’t the design — it was adoption. Each engineering team had already built something. Asking them to rebuild introduced real friction. I spent significant time working alongside developers: explaining why consistency mattered at a system level, being specific about what “standardize” meant in practice, and identifying the smallest viable changes that would still move the needle.

This is the part of design systems work that rarely shows up in portfolios: the diplomacy. Getting people to care about consistency requires understanding what they care about first.

04 — Component Design

Building from the ground up, the right way this time

I rebuilt the AI Assistant chat panel component in Figma from scratch — not cosmetically, but structurally. The goal was a component that other designers could extend confidently and engineers could implement consistently. That required making every decision explicit.

Token-based architecture

Every color, spacing value, and typography style references the design token system — not hard-coded. Changes at the token level propagate automatically, keeping the component aligned with the broader design system as it evolves.

Variant coverage for every state

Empty, loading, responding, error, expanded, collapsed — every state the component could find itself in was accounted for and designed, not left to interpretation. Edge cases are where inconsistency hides.

Toggle and selector logic for reusability

Component structure was organized around how designers would actually use it: clear property controls, sensible defaults, easy customization for app-specific variations without breaking the shared foundation.

Documented specification for engineering

A written spec accompanied every component: behavior descriptions, animation timing, edge cases, and implementation notes. The spec turned design intent into something engineers could build against without ambiguity.

AI Assistant chat panel component anatomy in Figma

Component anatomy: tokens, variants, and property controls

05 — Expansion

One component became a small ecosystem

As new AI capabilities rolled out, the AI Assistant chat panel couldn’t be the only component carrying the weight of the assistant experience. The standardization work uncovered a wider gap: assistant-adjacent components — file attachments, quoted content, and AI reasoning states — were also inconsistent.

I extended the initiative into a small but structured assistant component library: a focused collection designed specifically for AI interaction patterns, documented and maintained as a living resource for product teams.

I became the go-to person on the team for any question about the assistant’s design behavior. When someone was building something new, they came to me first. That wasn’t a title — it was a signal that the work had created real clarity where there had been confusion.

Attaching files component

Attaching files

Quoting content component

Quoting content

Reasoning component

Reasoning

06 — Outcome

Consistency as a product decision

Key learning

Design systems are inherently social. The best component in the world doesn’t matter if no one uses it. Consistency isn’t built through enforcement — it’s built through alignment, empathy, and making the right path easier than the wrong one. To be a great design systems designer, you have to be a great product designer first.

Previous project Canvas for
Generative AI
All work ✦
Next project Agentic
Workflows