Product by Luma

Designing a Scalable Chat Platform for Conversational Commerce

Year

2019 - 2022

My role

Product Design - UX Design - Branding

Company

LiveChat Service / Knowler.io / Conversation24

Conversation24 Omnichannel CX Platform UI

Project overview

From 2019 to 2022, I was part of the design team shaping the evolution of LiveChat Service, a Dutch customer support provider, into Conversation24, a full-featured CPaaS (Communication Platform as a Service) product.

My role focused on user experience design and interface development for our internal agent tool and customer-facing chat widget.

Initially known as Knowler.io, the platform was born from the acquisition of Cobrowser.net and grew into Conversation24.

The mission: to unify all communication channels (chat, WhatsApp, Facebook Messenger, video, etc.) into a single interface and embed payment solutions directly within the chat experience.

Context & Background

LiveChat Service started in 2015 as a staffing service providing outsourced chat operators to Dutch businesses.

After acquiring Cobrowser.net in 2018, the company began building its own software solution. By 2019, the leadership team decided to pivot from service-first to product-first: from managed live chat to a scalable SaaS-style platform.

This transformation required a complete redesign of our internal tooling, customer widgets, and system architecture.

I worked alongside an international team of developers and stakeholders to modernize legacy designs, streamline workflows, and create a consistent design system for Conversation24.

2015

LiveChat Service (Staffing)

Launch of live chat service for staffing offering.

2018

Cobrowser acquisition

Acquired Cobrowser to as a basis to build upon

2019

Knowler.io MVP

Launched the MVP of Knowler.io

2020

Platform rebranding

Knowler.io becomes Conversation24

2021

Strategic partnerships

Partnerships with Adyen and Link Mobility to broaden reach and enrich the product.

Mapping it all out

Product Vision

Product Vision Mobile

Information Architecture

We mapped all touchpoints like webchat, WhatsApp, Facebook, email and SMS into a single "Conversation Hub" that allowed agents to triage, tag, assign, and respond from one dashboard.

The conversations get saved to an archive called Chat-Reports. Which in turn validated and converted leads can be tracked in the CRM.

Prototyping & Validation

  • Internal usability testing with agent teams
  • Iterative review with stakeholders at Conversation24 and Cobrowser
  • Demoed embedded widget experiences to prospective partners
Client Journey Map

Using Conversation24

A product journey from the initial discovery phase all the way to expansion. Each stage presents its own unique set of goals, challenges, and opportunities for growth. Understanding these elements is crucial for navigating the path to success, which allowed us to shape a unique offering.

Keep in mind that this is generalized since the clients range from MSB to enterprise level clients, who each go through their own journeys.

Discovery

01

Touchpoints:

Sales demo, Website, Peer referrals.

Actions:

Researches platforms, attends demo.

Thoughts:

'Can this improve response time?'

Pain points:

unclear pricing, market noise.

Opportunity:

Show compliance + fast onboarding.

Evaluation

02

Touchpoints:

Product comparisons, Case studies, Sales engineer call.

Actions:

Compares with Intercom & MessageBird.

Thoughts:

'Will my agents adapt easily?'

Pain points:

customization doubts.

Opportunity:

sandbox demo, feature clarity.

Onboarding

03

Touchpoints:

Setup portal, CSM onboarding call.

Actions:

Configures widgets, security review.

Thoughts:

'Did we configure everything properly?'

Pain points:

info overload, branding friction.

Opportunity:

Branded templates + checklist.

Daily Use

04

Touchpoints:

Admin dashboard, QA reports.

Actions:

Tags issues, reviews agents.

Thoughts:

'Where's sentiment data?'

Pain points:

manual QA.

Opportunity:

Smart alerts + auto-tagging.

Review & Expansion

05

Touchpoints:

QBR, Feedback survey.

Actions:

Shares usage feedback, requests payment integration.

Thoughts:

'Can we expand channels without more overhead?'

Pain points:

ROI clarity.

Opportunity:

Add usage dashboard.

Design Process Step 1
Design Process Step 2
Design Process Step 3
Design Process Step 4
Design Process Step 5

Helps personalize and prioritize instantly

Customer & Company Info

Helps the agent instantly identify who the visitor is and what page they're on. Also allows for fast validation if the customer returns later.

Customer Information Interface
Company Information Interface
Conversation Actions Interface
Conversation Actions Default State
Conversation Actions Command State
Conversation Actions Command Autocomplete State

Quick conversation sorting

Conversation Actions

Agents can take immediate action on a conversation from the Chat Actions panel on the right hand side or directly from the message input using slash "/" commands.

These actions help escalate, delegate, or finalize chats without disrupting the workflow in a way that is optimized for speed.

Typing will autocomplete the matching commands. Using tab or the arrow keys agents can navigate around. And enter will confirm the command

Action commands

Description

/handoff @agentname
Assign to another team or agent
/download :PDF
Export transcript (PDF or .txt)
/boomerang time:12:00
Pause chat until a specific time
/boomerang tomorrow
Pause chat until exatly 24 hours from now
/reports
Open in QA/chat analytics
/delete
Archive conversation
/block
Block user from future conversations
/reminder
Send a reminder to follow up
/tag:tagname
Send a reminder to follow up

All the details and metadata in one panel

Conversation Information

Displays the technical metadata of the conversation: ticket ID, status, creation time, and originating channel (e.g. WhatsApp, Messenger). This helps agents or admins verify escalation paths, timeline issues, or assess whether the ticket was reopened from a previous session.

Conversation Information Interface
Conversation History Interface

Everything Said and Done in One Place

Conversation History

Displays timestamped message events such as chatbot handoff, agent takeover, pauses, and resumption. Presented as a vertical log to aid continuity, QA reviews, and team handovers.

Clicking one of the events will reveal it in context in the conversation panel.

• Shows clearly timestamped handoffs and channel transitions

• Supports QA, admin audits, and mid-chat context for agents

Assigning tags to conversations

Tagging Flow Explained

System-assigned Tags

When a new conversation is initiated, the system automatically applies relevant tags based on regex triggers or keyword matching. These are styled in purple and italicized to differentiate them from agent-assigned tags. They appear pre-filled as the chat unfolds, offering instant categorization for reporting and routing.

System-assigned Tags Interface

Dropdown on Focus (Empty Input)

Clicking into the tagging field with no input shows all available tags from the admin-defined pool. This helps agents discover reusable tags quickly and reinforces consistency. Tags are selectable via keyboard or mouse.

Dropdown on Focus Interface

Filtered Dropdown + Ghost Suggestion

As the agent types, the dropdown filters in real-time. A ghost suggestion appears inline with low opacity, giving quick confirmation of the top match. Pressing Enter confirms the suggestion. Arrow keys cycle through matches.

Filtered Dropdown Interface

Agent-assigned Tags

Once selected, agent-assigned tags appear alongside system tags. These are styled in gray and are editable or removable. All tags wrap neatly within the field, preserving a compact footprint.

Agent-assigned Tags Interface

Tag Editing

Clicking a tag enters edit mode, turning the tag into a searchable input. Only tags from the admin-defined pool can be re-selected. Freeform input is not allowed. The dropdown behaves identically to the new tag entry flow, reinforcing UX consistency and data control.

Tag Editing Interface