Chat Flow: Deleting Flows

Chat Flow: Deleting Flows

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. 

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. 

ROLE: LEAD PRODUCT DESIGNER
TOOLS USED: FIGMA
YEAR: 2021

Node-Navigation

Project Overview

At the heart of Clickatell's innovative toolkit, Chat Flow empowers users to craft automated, self-service chat experiences with precision and creative freedom. Recognizing the frustrations and workarounds from our users, I led the design of an important yet complex feature–the ability for users to manage their flows and delete them.

The Team

The team consisted of 1 Product Manager, 1 Tech Lead, 3 Front-End Developers, 2 Back-End Developers, 1 Sr. Product Designer (Me), 1 UX Director, and 1 Tech Writer.

The Problem

Prior to the update, users of Clickatell’s Chat Flow faced limitations in workflow management due to the inability to delete outdated or unnecessary flows. My task was to address this gap by enabling users to purge these flows without compromising on the simplicity and performance that they have come to expect from the platform.

The Job To Be Done (from a user perspective): When I no longer need a flow I want to be able to delete the flow so that I can clear up my workspace to see only those flows I still need.

CannotDeleteFlowspng

Research and Discovery:

The journey began with a comprehensive research phase. My approach was multi-dimensional:

  • User Interviews and Surveys: Direct feedback was solicited from a diverse group of users, revealing that the lack of a deletion feature led to a cluttered interface and increased cognitive load.
  • Data Analysis: Engagement metrics highlighted a trend of users attempting to bypass the limitation by nesting unused flows in deeply nested folders.
  • Comparative Analysis: We studied other visual automation tools to understand industry standards and best practices for managing user-generated content.

This research paved the way for designing a feature that was not just functional but also user-centric, considering the psychological and practical aspects of deleting user-created content.

Screenshot-2023-11-08-at-10.55.29 AM
COLLECTING FEEDBACK FROM USERS
Screenshot-2023-11-08-at-10.56.29 AM
CREATING A TAG DATA SET FROM USER INTERVIEWS
Screenshot-2023-11-08-at-12.19.04 PM
RUNNING OBSERVATION STUDY WITH USERS

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

Deleting flows wasn't that simple

During the early phases when collaborating with devs our team found out that flows in Chat Flow could not be easily deleted if it were to be implemented.

SANBOX AND PRODUCTION ENVIROMENT MODES

Chat Flow offers two distinct environments for managing flows: Sandbox and Production. The Production environment contains live flows that are currently being used by end-users to engage in chat experiences.

This presented a challenge: deleting a flow in production could significantly disrupt the user experience. To prevent such issues, we had to implement a safeguard to ensure that users do not accidentally make critical mistakes that could impact live interactions.

SandboxProduction
FLOWS WERE VERY INTERCONNECTED

In Chat Flow, flows are highly interconnected, often linking with one another and creating a network of dependencies. Removing a flow could break these connections, leading to dysfunctional flows. We needed to design a solution to help users avoid inadvertently causing such breaks.

InterconnectedFlows

To the drawing board!

To the drawing board!

Screenshot-2023-11-10-at-2.26.32 PM

Exploring design options using wireframes allowed me to validate the designs with our users on a periodic basis to ensure I was on the right path. It was also easy to reiterate the designs with devs early on and see how we could work with the limitations of the system and still find a seamless user experience solution. 

The Solution

The result was an elegantly designed deletion feature that fitted seamlessly into the existing Chat Flow interface. Key elements included:

  • A multi-stage deletion process for both Production, Sandbox flows, and every interconnected flows with ample warnings and information to prevent accidental loss of data.
  • A safeguard against unintended deletions where an admin user would have to approve production level flow deletions.
  • A streamlined interface that affords a more productive and uncluttered user experience.

Deleting Sanbox Flows (With Errors)

DeletingFlow-No-Prod-1-1

Adding a new overflow menu with a delete option.

DeletingFlow-No-Prod-Loading

Full page loader to check for errors

DeletingFlow-No-Prod-Error-Modal

Modal to show users if there are errors in deleting the flow. User will have to fix and disconnect these flows in order to delete.

DeletingFlow-No-Prod-Error-Modal-States-1

Modal states

DeletingFlow-No-Prod-Modal-Confirm

If no errors are found when deleting show users with a confirmation modal instead. User will need to enter a reason before deleting.

DeletingFlow-No-Prod-Modal-Confirm-States-1

States of the confirmation modal

DeletingFlow-No-Prod-Success-1

Confirmation when the flow has been successfully deleted.

Deleting Production Flows (With Errors)

Deleting production flows follows the same journey as a sandbox flow deletion with the only change being that all deletions will have to be requested and approved by an admin.

DeletingFlow-Prod-Error-Modal

Caution modal to inform users that the flow is a production flow

DeletingFlow-Prod-No-Error-Modal

Once errors are fixed user will have to request the flow to be deleted

DeletingFlow-Prod-No-Error-Modal-Filled

States of the flow deletion request modal

DeletingFlow-Prod-Success

Confirmation that the flow delete request has been sent and can now only be viewed only while awaiting approvals

Admin Approval For Flow Deletion

After flows have been sent for approvals, an admin user would then review these flows and approve these flows to be deleted from production.

Deleting-a-flow-Admin-Approval-Blue-Dot

Admin users sees new flow deletion request from the blue dot notification on the Manage and Approve Flows drawer

Deleting-a-flow-Admin-Approval

The new and update drawer shows which flows are for deletion requests. Admin user will then review and choose accordingly.

Deleting-a-flow-Admin-Approval-Confirm

Admin user is then ask to confirm their selection.

Outcome and Impact:

Outcome and Impact:

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.
  • 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.

“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. ”

Learning & Reflection

Reflection

While the introduction of the delete feature in Clickatell's Chat Flow has been met with positive feedback and has enhanced the user experience, I find myself reflecting on areas that could be further refined. I still find the error prevention process of flow deletion for users to still be a cumbersome task. Somehow, if Chat Flow in the future could streamline that process even further I would be in a much happier place. Perhaps exploring options of archiving rather than deleting flows or perhaps an option to delete production flows entirely and informing the users of broken flows in a different way. As always, one milestone at a time 🙂.

Follow me

Want to get in touch?

Email me at: hello@chelms.ca

© CHELMS VARTHOUMLIEN 2024