Back to Homepage

AI Chat Experience for Analyzing Data

Redesigning AI Chat Experience from User Feedback and LangChain analysis
Client
Service Management Group (SMG)
Role
Year
2026
Industry
Customer Experience SaaS
Goal
Address obvious AI Chat challenges, reduce tech debt, and introduce high value/ low effort quality of life features.
Business Impact
Created a reusable conversation system and page architecture that could support the Knowledge Agent across multiple product surfaces while reducing one-off design and engineering patterns.
Personas
Enterprise customer experience teams, operators, and managers analyzing survey and customer feedback data
User Outcome
Users can investigate customer feedback with more room for conversation, clearer context, chat history, recoverable error states, and responsive behavior that keeps the underlying workspace useful.
Hypothesis
‍If the AI Chat has a redesigned interface, then users will be more likely to use it in their regular workflows.
Result
Released new AI Chat experience, reduced tech debt, and planned for improved AI interoperability.
Press Coverage

Summary

‍

When a feature fails, it erodes trust. Customer data showed usage falling for SMG's AI Chat experience. Direct feedback pointed to two challenges: the dialog based design made sustained analysis difficult, and unreliable answers reduced trust.

‍

SMG is a customer experience SaaS platform used by international and large multi-location brands to survey customers and analyze feedback. Some customers include: McDonalds, Chik-fil-A, Wendy's, Academy Sports, Crunch Fitness, Dominos, Pizza Hut, and more.

‍

My work as Senior IC for the AI feature team and Lead Design System Designer included redesigning the AI agent. Technical considerations included abstracting the currently service entangled experience into reusable conversation components, introducing layout components, and addressing other tech debt.

‍

Process

‍

Understand Current State + LangChain → Synthesize Requirements → Technical Considerations → Experience Interoperability

‍

‍

‍

Understand Current State

‍

The original Knowledge Agent lived behind a floating action button (FAB) and opened in a dialog over the page. Long AI responses frequently extended beyond the fold which forced users to scroll. Additional requirements were surfaced through LangChain analysis across 1,400 chats.

‍

The previous chat experience was a small dialog.

‍

‍

‍

Synthesize Requirements

‍

Moving the Knowledge Agent to a slideout/ panel from the dialog was obvious. Other requirements that became clear was adding filter scope, chat history, managing context, stopping an agent, and others.

‍

‍

Conversation Designs

‍

Moving the Knowledge Agent into a persistent workspace exposed interaction states that were easy to ignore in the original dialog. The conversation needed to account for starting, loading, failing, stopping, resuming, restoring context, and returning to previous chats.

‍

Conversation states for prompting, loading, errors, response interruption, context, and chat history.

‍

‍

Technical Considerations

‍

‍

Refactor Conversation Components

‍

The original Knowledge Agent was designed as one feature (using assistant UI). It also had many services baked into the component. I'm a fan of breaking components into smaller parts and moving their services into downstream locations. The conversation parts would be used beyond the AI experience in other chat experiences such as the user surveys experience.

‍

‍

Reusable conversation components documented with variants, properties, responsive behavior, and examples.

‍

Chat Full Screen Component

‍

I'm a fan of aligning different experiences through shared components. Although different purposes, the AI Chat and Survey Chat aligned in many component opinions, for this reason, we opted to make a larger component to support these different experiences.

‍

‍

‍

Responsive Conversation Layouts

‍

Rather than competing for screen space, the AI agent will be housed in a push/pull layout component so users can view and work on the screens data.

‍

Layout components were defined and created such as: ForgePage as the top-level application shell, ForgeMainContent receiving variants such as ResponsiveMainAsideLayout, PageWithPanel, and PageFixedLayout. These layouts allow the navigation, page content, and conversation panel to respond together instead of competing for the same space.

‍

At smaller breakpoints, the AI Chat move to 100% space.

‍

Prepare for Interoperability

‍

How might a chat operate across pages or the application? Planning for agent behavior in different locations was paramount to creating a future proofed experience.

‍

The same AI chat experience is applied across multiple product surfaces while preserving a consistent interaction model.

‍

‍

Results

‍

‍

Within 1 month, a redesigned debt-less experience was provided to our customers. Research through LaunchDarkly beta testing, definition of new components, coordination across teams was completed making this a big win release.

‍

An Image of Knowledge Agent being used to make sense of a large set of customer data
©2025