Chat Flow: Decluttering, one flow at a time

Chat Flow is a flagship Clickatell product that lets users visually build and automate self-service chat experiences across multiple channels.

OVERVIEW

At a glance

OVERVIEW

At a glance

OVERVIEW

At a glance

Tools

Figma, Userbit, Miro, Optimizely, Hotjar

Team & Role

Lead Product Designer working with 1 PM, 1 Tech Lead, 3 FE Devs, 2 BE Devs, 1 UX Director, and 1 Tech Writer.

Timeline

Q1 2021 - Q2 2021

Tools

Figma, Userbit, Miro, Optimizely, Hotjar

Team & Role

Lead Product Designer working with 1 PM, 1 Tech Lead, 3 FE Devs, 2 BE Devs, 1 UX Director, and 1 Tech Writer.

Timeline

Q1 2021 - Q2 2021

Tools

Figma, Userbit, Miro, Optimizely, Hotjar

Team & Role

Lead Product Designer working with 1 PM, 1 Tech Lead, 3 FE Devs, 2 BE Devs, 1 UX Director, and 1 Tech Writer.

Timeline

Q1 2021 - Q2 2021

121K+

Users impacted

121K+

Users impacted

121K+

Users impacted

40%

Reduction in support tickets

40%

Reduction in support tickets

40%

Reduction in support tickets

4

Month delivery timeline

4

Month delivery timeline

4

Month delivery timeline

85%

Positive user feedback

85%

Positive user feedback

85%

Positive user feedback

THE PROBLEM

Managing chat flows was like finding a needle in a haystack.

THE PROBLEM

Managing chat flows was like finding a needle in a haystack.

THE PROBLEM

Managing chat flows was like finding a needle in a haystack.

Initial findings were that users struggled with:

1. Clutter overload

Too many outdated flows cluttering workspaces.

1. Clutter overload

Too many outdated flows cluttering workspaces.

1. Clutter overload

Too many outdated flows cluttering workspaces.

2. Hacky workarounds

Burying unused flows in folders just to keep things tidy.

2. Hacky workarounds

Burying unused flows in folders just to keep things tidy.

2. Hacky workarounds

Burying unused flows in folders just to keep things tidy.

3. Risk roulette

Deleting a flow could disrupt live user interactions.

3. Risk roulette

Deleting a flow could disrupt live user interactions.

3. Risk roulette

Deleting a flow could disrupt live user interactions.

THE RESEARCH

What we heard: Insights from the frontlines

THE RESEARCH

What we heard: Insights from the frontlines

THE RESEARCH

What we heard: Insights from the frontlines

User interviews showed the lack of delete caused clutter, while data revealed users nested unused flows to bypass it.

0
0

%

%

%

said clutter hurt efficiency.

0
0

%

%

%

avoided deleting flows, fearing errors.

0
0

%

%

%

reported slower onboarding because of unused flows

Running observation test and collecting qualitative data

“We never had the option to delete flows. We simply reused or moved them to a trash folder...”

“We never had the option to delete flows. We simply reused or moved them to a trash folder...”

“We never had the option to delete flows. We simply reused or moved them to a trash folder...”

THE COMPLEXITY

The maze of deleting flows: Why it wasn’t simple

THE COMPLEXITY

The maze of deleting flows: Why it wasn’t simple

THE COMPLEXITY

The maze of deleting flows: Why it wasn’t simple

Deleting flows seemed simple, but avoiding breakage required extra care. Here’s why:

Sandbox vs production

Test (sandbox) and live (production) flows couldn’t be handled the same. Deleting a live flow risked serious disruption and revenue loss.

Sandbox vs production

Test (sandbox) and live (production) flows couldn’t be handled the same. Deleting a live flow risked serious disruption and revenue loss.

Sandbox vs production

Test (sandbox) and live (production) flows couldn’t be handled the same. Deleting a live flow risked serious disruption and revenue loss.

Interconnected nodes

Flows were often linked, so deleting one could break others—like pulling a thread and unraveling the whole sweater.

Interconnected nodes

Flows were often linked, so deleting one could break others—like pulling a thread and unraveling the whole sweater.

Interconnected nodes

Flows were often linked, so deleting one could break others—like pulling a thread and unraveling the whole sweater.

IDEATION

How we dug for solutions

IDEATION

How we dug for solutions

IDEATION

How we dug for solutions

The design process kicked off with a thorough exploration phase, ensuring we truly understood the problem and user needs. This exploration ensured the feature wasn’t just functional.

1
User worksops

We hosted brainstorming sessions where users showed us their workarounds for managing clutter—folders within folders and color-coding chaos.

2
Behavioral analysis
2
Competitive research
4
Prototyping and testing
1
User worksops

We hosted brainstorming sessions where users showed us their workarounds for managing clutter—folders within folders and color-coding chaos.

2
Behavioral analysis
2
Competitive research
4
Prototyping and testing
1
User worksops

We hosted brainstorming sessions where users showed us their workarounds for managing clutter—folders within folders and color-coding chaos.

2
Behavioral analysis
2
Competitive research
4
Prototyping and testing

Wireframing and exploring ideas

SOLUTION

Our magic wand: The solution

SOLUTION

Our magic wand: The solution

SOLUTION

Our magic wand: The solution

Smart alerts

Give users a heads-up by flagging dependent flows and important steps before deletion.

Smart alerts

Give users a heads-up by flagging dependent flows and important steps before deletion.

Smart alerts

Give users a heads-up by flagging dependent flows and important steps before deletion.

Sandbox safety net

A multi-stage safety check to make sure nothing goes kaboom in test environments.

Sandbox safety net

A multi-stage safety check to make sure nothing goes kaboom in test environments.

Sandbox safety net

A multi-stage safety check to make sure nothing goes kaboom in test environments.

Admin approvals

Because every great plan needs a gatekeeper! Guardrails to protect live operations.

Admin approvals

Because every great plan needs a gatekeeper! Guardrails to protect live operations.

Admin approvals

Because every great plan needs a gatekeeper! Guardrails to protect live operations.

We created a robust deletion system that was simple, secure, and smart.

ERROR PREVENTION

You shall not pass (without fixing errors)

ERROR PREVENTION

You shall not pass (without fixing errors)

ERROR PREVENTION

You shall not pass (without fixing errors)

Error Modal Prototype

When deleting a flow, Chat Flow checks for dependencies and lists what must be disconnected first.

Warning Dialog

Modal Anatomy

ADMIN APPROVALS

Keeping deletions under control

ADMIN APPROVALS

Keeping deletions under control

ADMIN APPROVALS

Keeping deletions under control

Admin Approval Process Prototype

Flow deletions aren’t instant—requests go to Admins for approval, ensuring critical dependencies aren’t removed by mistake.

Manage and Approve Flows

Confirmation

OUTCOME & IMPACT

Deleting stress, one flow at a time

OUTCOME & IMPACT

Deleting stress, one flow at a time

OUTCOME & IMPACT

Deleting stress, one flow at a time

Post-implementation, the new feature was met with positive reception. Data and user feedback indicated:

Enhanced user engagement and platform cleanliness, with a noticeable decrease in dormant flows.

Enhanced user engagement and platform cleanliness, with a noticeable decrease in dormant flows.

Enhanced user engagement and platform cleanliness, with a noticeable decrease in dormant flows.

Improved user satisfaction metrics, with particular appreciation for the user-centric design approach.

Improved user satisfaction metrics, with particular appreciation for the user-centric design approach.

Improved user satisfaction metrics, with particular appreciation for the user-centric design approach.

A decline in customer support queries related to flow management, indicating a more self-sufficient platform.

A decline in customer support queries related to flow management, indicating a more self-sufficient platform.

A decline in customer support queries related to flow management, indicating a more self-sufficient platform.

“I’m really impressed with the new delete feature. It's user-friendly and makes managing flows so much more straightforward.”

“I’m really impressed with the new delete feature. It's user-friendly and makes managing flows so much more straightforward.”

“I’m really impressed with the new delete feature. It's user-friendly and makes managing flows so much more straightforward.”

“I was genuinely impressed with how the new delete feature was integrated. It’s intuitive and how safely it's been implemented.”

“I was genuinely impressed with how the new delete feature was integrated. It’s intuitive and how safely it's been implemented.”

“I was genuinely impressed with how the new delete feature was integrated. It’s intuitive and how safely it's been implemented.”

Learning & Reflection

What the future could hold

Learning & Reflection

What the future could hold

Learning & Reflection

What the future could hold

While the new delete feature has been a hit, there’s always room to improve. The error prevention process could be more intuitive, and future updates might explore archiving options or ways to better handle broken flows. One milestone at a time, we’re making flow management seamless. 😊

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer