No-code Workflow Builder
Redesigning FlowEQ's Flow Builder MVP
FlowEQ is a no-code workflow solution that embeds within Zendesk and other CRMs. In 2024, we began the process of redesigning the flow building experience for Customer Service managers. We had a live MVP, but the experience was inconsistent and onerous, making it difficult for managers to update large flows and respond to feedback.
Up to this point, the flow builder had been built on an as-needed basis with no design system to reference. This led to a few issues, which certain tasks being completed in different ways, depending on where they were encountered. Interviews with CS leads uncovered a few additional key issues:
It is difficult to find steps in a large flow
Lack of certain capabilities makes version control difficult
Responding to CS agent feedback on flows is a disjointed process
How might we help CS managers build better flows that will help their agents stay focused on the customer?
The Approach
Me being the sole designer on a team with three developers made for a risk of bottlenecking. To prevent this, we decided to have the developers start on the large lift of building the new workspace environment. This still required design input, but a relatively low amount that would then allow me to move on to designing the flow builder's tools.
The development team suggested using React Flow for the node-based UI. I combed through React Flow's feature library, playing with the different abilities and options for each feature, so that I could define the interactions and experience in a way that could directly translate to development.
The Tools
By the time we started updating the flow builder, I had already established FlowEQ's design system to ensure a consistent and on-brand experience. I conducted interviews to learn where there were opportunities to improve or excise the existing feature set in our MVP, and to see if we had any blind spots that needed addressing.
The new toolbar
Each tool set was There were a few tools that received big upgrades that significantly improved the experience.
Version Control
Changes to the version control menu gave users the ability to read notes attached to each version, makes clear which version is active to CS agents, and the edit dialog gives the option to delete a version (an ability that was sorely missed in MVP).
Change Log
The MVP's change log showed which user made changes when, and then gave a stepID which was not able to be cross-referenced with the steps in the flow.
The new change log allows users to actually see what a flow looked like at each autosave and publish event, and lets users restore the flow to an older state.
Feedback
The MVP put feedback from agents outside of the flow builder, which forced using two windows or back-and-forth browsing, along with searching for the relevant step, to address feedback.
Feedback from CS agents can now be viewed directly in context, and suggestions for changes can be adopted, tweaked, or ignored on the spot. Testing this new feedback feature elicited cries of joy.