Koopid Conversational AI Case Study

My role: Sole product designer & design lead
Timeline: 2020–2021 · 13 months
Product: Enterprise platform · Shipped

Problem

It worked, but it was hard to use.

When I joined, Koopid’s product already did a lot. It could automate support and hand a customer to a live agent. But the interface hadn’t kept up. Unclear states and dense controls made it hard for agents, supervisors, and administrators to know what to do next. The before screens show where it started.

Research

I started with the people living in it.

I talked with call center reps at every level, from agents on the floor to supervisors to the head of the department, along with our customer success team and engineers. Three issues came up again and again: escalations that happened too early, agent states nobody could read at a glance, and configuration mistakes that turned into support tickets. The priority became making each role’s next action obvious.

Original Koopid chatbot, agent desktop, and administration portal before the redesign — Before: dense controls across customer, agent, and admin tools.

Explore the original service journey

The journey linked customer friction to agent and support work.

Koopid end-to-end service journey from onboarding through customer support and escalation

Decision

Each role got a workspace built around its day.

As Koopid’s sole product designer, I reorganized the interface around daily decisions: manage a conversation, configure the platform, or improve automation. For managers supervising thousands of call-center agents, I designed AI sentiment and CSAT dashboards.

I also defined how the AI earned user trust: confidence states, graceful fallbacks, and clean handoffs to human agents. Explore how the workspace changes by role.

Keep the conversation in focus.

Agents needed to see the conversation state and next action at a glance.

Conversation first. Status and supporting tools stay within reach.

Koopid agent desktop with a conversation list, active customer conversation, and supporting tools — Product interface. Select to enlarge.

Decision · Authoring

Answers written beside the library.

I put the question, answer, and save action beside the existing library, so authors could work without losing context.

Koopid knowledge base editor showing a question and answer form beside the existing knowledge library — Write an answer without leaving the knowledge library.

Decision · Migration

Choosing React, and building for white label.

The redesign made it clear how much the old front end was holding us back. I ran an analysis of front-end frameworks and landed on React for its strong support at the time and the libraries that already covered what we needed. I led the migration with a developer on my team, building reusable components and documenting the patterns so distributed engineering teams could keep agent, admin, and white-label experiences consistent.

White label

The customer who became the buyer.

We knew Dialpad was looking for a system it could offer its own clients. So Dialpad became our client first. We white-labeled Koopid for them so they could use it themselves and see what it could do. Dialpad went on to acquire Koopid, and I moved over to bring the workflows into its platform.

Outcome

Fewer bugs reached support.

The product served 60,000+ users, including enterprise deployments for Avaya. Bug-related support tickets to customer success fell 77% after the redesign, so the team could focus on onboarding.

Source: before-and-after count of bug-related tickets in the support system.

What I’d measure next: escalation reasons and time to resolution.

Explore Bloom, a studio for turning creative direction into a design system.