Chat Flow: Decluttering, one flow at a time

Chat Flow is one of Clickatell's flagship product that helps users visually build and to automate self-service experiences. It is used to create engaging chat experiences and deploy them across multiple channels. 

OVERVIEW

At a glance

OVERVIEW

At a glance

OVERVIEW

At a glance

At Clickatell, I led the effort to solve a frustrating gap in Chat Flow, our platform for creating automated chat experiences. Users couldn’t delete outdated flows, leaving cluttered interfaces and inefficiencies.

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

IMPACT

Empowered users to maintain cleaner workspaces by enabling the deletion of outdated flows, reducing clutter across active user accounts.

SCALE

Enhanced the experience for over 12,000+ active Chat Flow users, improving task completion rates and demonstrating the value of user-centric, scalable solutions.

COLLABORATION

Collaborated with a cross-functional team of 9 members, including designers, developers, and product managers, to deliver the feature within a 4-month timeline.

OUTCOME

Launched the delete feature that received a 85% positive feedback rate in user surveys and improved overall workflow efficiency for teams using the platform.

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:
🚮 Clutter overload

Too many outdated flows cluttering workspaces.

🤙 Hacky workarounds

Burying unused flows in folders just to keep things tidy.

⚠️ 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 revealed that the lack of a delete feature caused clutter and increased cognitive load. Data analysis showed users nesting unused flows to bypass this limitation.

0
0

%

%

%

said clutter hurt efficiency.

0
0

%

%

%

avoided deleting flows, fearing errors.

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 might sound straightforward, but the devil was in the details. Users wanted to clean up their clutter, but managing flow deletion in a way that avoided breaking things required extra care. Here’s why:

Sandbox vs production

Flows in test environments (sandbox) and live environments (production) couldn’t be treated the same way. Accidentally deleting a production flow could lead to serious business disruptions and loss of revenue.

Sandbox vs production

Flows in test environments (sandbox) and live environments (production) couldn’t be treated the same way. Accidentally deleting a production flow could lead to serious business disruptions and loss of revenue.

Sandbox vs production

Flows in test environments (sandbox) and live environments (production) couldn’t be treated the same way. Accidentally deleting a production flow could lead to serious business disruptions and loss of revenue.

Interconnected nodes

Many flows were linked to others, creating dependencies that could unintentionally disrupt live processes. Imagine pulling one thread and unraveling the whole sweater.

Interconnected nodes

Many flows were linked to others, creating dependencies that could unintentionally disrupt live processes. Imagine pulling one thread and unraveling the whole sweater.

Interconnected nodes

Many flows were linked to others, creating dependencies that could unintentionally disrupt live processes. Imagine pulling one 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 users try to delete a flow with dependencies, Chat Flow would do a check on potential errors. Users are then presented with a list of dependencies that need to be disconnected in order to delete the flow.

Modal Anatomy

ADMIN APPROVALS

Keeping deletions under control

ADMIN APPROVALS

Keeping deletions under control

ADMIN APPROVALS

Keeping deletions under control

Admin Approval Process Prototype

Once a user initiates a flow deletion, it’s not gone just yet! The request gets escalated to an Admin for a final review. Admins can then approve or decline the deletion, ensuring no critical dependencies are unintentionally removed.

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:

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

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

3️⃣ 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