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.
ROLE: LEAD PRODUCT DESIGNER
TOOLS USED: FIGMA
YEAR: 2021
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 evolving needs of our users, I led the design of a pivotal new feature—the ability to delete chat flows.
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.
My Role:
With a clear understanding of user pain points and behaviors, I embarked on the design phase, where my role encompassed:
- Translating insights into design strategies to ensure the deletion process was intuitive and user-friendly.
- Crafting wireframes and prototypes to visualize the flow of the deletion process.
- Conducting usability testing with prototypes to validate and refine the design.
- Collaborating closely with engineers to ensure technical feasibility and to monitor the implementation of the design.
- Developing comprehensive design documentation to guide future feature iterations.
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.
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.
COLLECTING FEEDBACK FROM USERS
CREATING A TAG DATA SET FROM USER INTERVIEWS
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.
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.
To the drawing board!
To the drawing board!
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)
Adding a new overflow menu with a delete option.
Full page loader to check for errors
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.
Modal states
If no errors are found when deleting show users with a confirmation modal instead. User will need to enter a reason before deleting.
States of the confirmation modal
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.
Caution modal to inform users that the flow is a production flow
Once errors are fixed user will have to request the flow to be deleted
States of the flow deletion request modal
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.
Admin users sees new flow deletion request from the blue dot notifcation on the Manage and Approve Flows drawer
The new and update drawer shows which flows are for deletion requests. Admin user will then review and choose accordingly.
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 incredibly user-friendly and makes managing complex chat flows so much more straightforward. ”
“I was genuinely impressed with how the new delete feature was integrated. It's not just about removing a flow; it's about how intuitively and safely it's been implemented. ”
Reflection
Reflection
While the introduction of the delete feature in Clickatell's Chat Flow has been met with positive feedback and has demonstrably 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?
Want to get in touch?
Email me at: hello@chelms.ca