ROLE: LEAD PRODUCT DESIGNER
TOOLS USED: FIGMA
YEAR: 2021
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 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.
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.
The journey began with a comprehensive research phase. My approach was multi-dimensional:
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.
“We never had the option to delete flows. We simply reused or moved them to a thrash folder.”
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.
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.
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.
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 result was an elegantly designed deletion feature that fitted seamlessly into the existing Chat Flow interface. Key elements included:
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 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
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 notification 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.
Post-implementation, the new feature was met with positive reception. Data and user feedback indicated:
“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. ”
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 🙂.
Email me at: hello@chelms.ca