( 1. )
( 3. )
( 1. )
AI Messenger
From Chat to AI-Powered Support System
We turned a basic live chat into an AI-powered support system, securing a £300k enterprise deal.
We turned a basic live chat into an AI-powered support system, securing a £300k enterprise deal.
Support teams were adopting automation and AI, but the Messenger was still built around live chat and static forms. This made it difficult to scale support without adding headcount and risked teams moving to other tools.
I led the redesign of the Messenger into a system that brings AI, automation, and human support into a single flow.
This enables structured interactions, enterprise control, and scalable support across channels.
Support teams were adopting automation and AI, but the Messenger was still built around live chat and static forms. This made it difficult to scale support without adding headcount and risked teams moving to other tools.
I led the redesign of the Messenger into a system that brings AI, automation, and human support into a single flow.
This enables structured interactions, enterprise control, and scalable support across channels.
Team
Product,
Engineering,
Leadership
Role
Prototyping,
Product Design,
Design Systems
Year
2024
Problem
The Messenger was designed as a chat interface, but in practice it supported a much more complex system.
Conversations involved multiple actors including customers, agents, and automation, each with different goals and constraints. Permissions, roles, and routing logic shaped how interactions could unfold, making behaviour difficult to predict and scale.
As a result, teams struggled to move beyond reactive live chat support toward more structured, scalable workflows.
The Messenger was designed as a chat interface, but in practice it supported a much more complex system.
Conversations involved multiple actors including customers, agents, and automation, each with different goals and constraints. Permissions, roles, and routing logic shaped how interactions could unfold, making behaviour difficult to predict and scale.
As a result, teams struggled to move beyond reactive live chat support toward more structured, scalable workflows.
Approach
Early research showed the Messenger wasn’t a linear experience, but a system shaped by competing needs across users and roles.
This shifted the problem from improving a chat interface to defining a flexible system that could adapt to different use cases.
Instead of adding features to the existing Messenger, I restructured it into three parts:
Admin configuration
Customer interaction
Automation logic
This clarified how the system behaves, operates, and is experienced.
Early research showed the Messenger wasn’t a linear experience, but a system shaped by competing needs across users and roles.
This shifted the problem from improving a chat interface to defining a flexible system that could adapt to different use cases.
Instead of adding features to the existing Messenger, I restructured it into three parts:
Admin configuration
Customer interaction
Automation logic
This clarified how the system behaves, operates, and is experienced.
Key Decisions
A key decision was how to introduce AI. We explored a standalone bot, but this would have fragmented the experience and added complexity.
Instead, I embedded AI directly into the conversation flow through Chatflow Builder. This allowed interactions to move between automation, AI, and human agents within a single system.
This made behaviour easier to define, test, and scale across channels.
A key decision was how to introduce AI. We explored a standalone bot, but this would have fragmented the experience and added complexity.
Instead, I embedded AI directly into the conversation flow through Chatflow Builder. This allowed interactions to move between automation, AI, and human agents within a single system.
This made behaviour easier to define, test, and scale across channels.
Solution
The redesigned Messenger separates configuration from experience while keeping them tightly connected.
For admins, the interface is structured into setup, styling, and deployment, supported by real-time preview. This allows teams to configure behaviour while staying aligned with the end-user experience.
The redesigned Messenger separates configuration from experience while keeping them tightly connected.
For admins, the interface is structured into setup, styling, and deployment, supported by real-time preview. This allows teams to configure behaviour while staying aligned with the end-user experience.
Chat Experience
For end users, the Messenger moves beyond free-form chat to guided interactions, including structured inputs, content previews, and suggested responses. This enables teams to guide conversations rather than react to them.
For end users, the Messenger moves beyond free-form chat to guided interactions, including structured inputs, content previews, and suggested responses. This enables teams to guide conversations rather than react to them.
Accessibility
To support enterprise-level customisation, I defined semantic colour tokens and embedded WCAG AA contrast standards into components, enabling flexible theming while preserving consistency as the system scaled.
To support enterprise-level customisation, I defined semantic colour tokens and embedded WCAG AA contrast standards into components, enabling flexible theming while preserving consistency as the system scaled.
Outcome
The redesigned Messenger created a scalable foundation for AI-powered support, bringing automation, AI, and human interaction into a single system.
It enabled more structured workflows, supported enterprise requirements, and contributed to securing a £300k deal.
It also established the foundation for expanding AI capabilities and supporting additional channels.
The redesigned Messenger created a scalable foundation for AI-powered support, bringing automation, AI, and human interaction into a single system.
It enabled more structured workflows, supported enterprise requirements, and contributed to securing a £300k deal.
It also established the foundation for expanding AI capabilities and supporting additional channels.
next →
( 2. )