No-code Workflow Builder
Redesigning FlowEQ's Flow Builder MVP
I redesigned a no-code workflow builder, which powers FlowEQ’s embedded decision tree app for Zendesk for customer service teams.
The FlowEQ team consisted of myself, three developers, a project manager, and two customer success agents.
This redesign would streamline tasks that used to be onerous, add functionality that the mvp sorely missed, and implement our new design system for consistency and alignment with an updated brand.
Starting Out
Prior to coming on board, FlowEQ had launched an MVP which had been built piecemeal, with no design input. Our customer success team was constantly busy with “How do I” and “Where can I find” requests. I needed to reduce the amount of time our clients needed to spend in the tool, while simultaneously making it easier to jump back in where they had left off.
I needed to understand a few things as I began:
What already exists in the flow builder?
What is working well?
What is not working well?
Is anything missing?
Our customer success team pointed me toward our users most-used tools, and the biggest pain points. This helped me know where to dig deeper when I interviewed our clients. Each client had their own unique processes and needs, but many issues were able to be addressed with universal solutions.
The workspace where users visualize their flow was difficult to manage. Nodes were placed according to an algorithm which would end up making large flows difficult to navigate, and there was no way to customize or re-arrange the layout.
The development team suggested using React Flow for a new 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.
Modals vs Dialogs?
The MVP had nearly every process taking place inside a modal which would darken the background and take up most of the screen. This helped to focus the user on a task, but also disconnected them from the context of the flow by completely obscuring it.
With the redesign, we tended toward dialogs that would hug the right side of the frame while keeping as much of the flow in view as possible.
Toolbar
Not only was the toolbar reorganized, but access to the flow settings which dictated which users could access the flow was added. This had previously only been accessible on the flow manager screen.
Flow versions was a feature that many clients found invaluable but frustrating. Versions were not able to be re-named, deleted, or given notes for context. A new dropdown menu was able to address these issues, as well as clearly marking which version of a flow was currently active to agents in Zendesk.
A change log existed where users could revert to a past auto-save, but it was impossible to see what the past iteration looked like until you reverted. This made reverting feel risky. The new change log addressed this by showing a read-only flow before committing to a revert.
Feedback from agents in Zendesk is invaluable for our clients that building these flows, but the MVP kept this feedback separate from the flows. A new feedback dialog helped to connect users to comments and suggestions from agents directly in the context of the flow.
Steps & Rollout
Usability testing confirmed that our users were very hungry for the improvements that the redesign would bring, but we still had a long list of steps (nodes) that needed updating. To get our redesign out as fast as possible, we broke our redesign rollout into phases.
The most commonly used steps were redesigned first, with a preview of how the step would render to agents in Zendesk. The remaining steps would be redesigned on an ongoing basis.
We added a toggle so that users could switch between the MVP and the redesign. This allowed users to try the new experience as it worked it’s way up to feature parity with the MVP, at which point the toggle would be eliminated and the MVP retired.
