Overview
Cheerio AI’s marketing workflow builder empowers users to create custom workflows, including chatbot automation, through a drag-and-drop interface. The feature revolves around two key node types:
Event Nodes – Representing triggers that initiate workflows.
Action Nodes – Representing tasks executed in response to triggers.
This intuitive platform allows users to build complex, nested workflows without requiring technical expertise. Users can assign actions to triggers and define detailed workflows tailored to their specific needs.
Project Requirement
The primary goal was to create a playground-like interface that enables users to effortlessly create and manage intricate workflows. The challenge was to:
Design an interface that is both powerful and intuitive.
Ensure seamless navigation and user engagement, especially considering the feature’s complexity.
Offer real-time previews to enhance user confidence in their configurations.
User Research
Given the complexity of the feature, we adopted a research-driven approach to ensure usability and user satisfaction.
Competitor Analysis:
Reviewed existing drag-and-drop workflow builders to identify usability patterns and shortcomings.
Evaluated industry best practices for similar SaaS platforms.
User Feedback:
Conducted interviews with existing users familiar with automation tools to understand their pain points and expectations.
Identified diverse use cases and challenges, which shaped the design approach.
Key Insights from Research
Intuitiveness: Users sought a clean and straightforward interface that didn’t overwhelm them.
Navigation: Navigating a complex canvas was a common challenge in similar products.
Node Discovery: Finding the right nodes quickly was critical for efficient workflow creation.
Condition Operators: Users needed flexibility in adding conditions like "If-Else," "AND/OR," and filtering attributes.
Preview Capabilities: Real-time previews were highly desired to validate automation flows before deployment.
Design Approach
The design process focused on creating a clean, intuitive, and visually engaging interface that simplifies complex tasks.
1. Simplified Interface Structure
To reduce visual clutter and improve usability:
Split Navigation Bar: Divided the interface into two clear sections:
Event Nodes: For setting up triggers.
Action Nodes: For defining subsequent tasks.
Hidden Details: Collapsed advanced settings into node properties to prevent overwhelming first-time users.
2. Guided Onboarding
To address the steep learning curve of SaaS platforms:
Interactive Start Guides: Introduced onboarding walkthroughs explaining each button, node, and its functionality.
Tooltips: Added contextual tooltips for on-demand assistance.
3. Node Identification
To enhance discoverability and recognition of nodes:
Color-Coded Nodes: Used consistent color schemes to group similar nodes. For example:
WhatsApp nodes – Green
Condition nodes – Red
Cheerio-specific nodes – Lime
Icons + Labels: Each node was paired with an icon and descriptive label for quick identification.
Search Bar: Added a search function to locate nodes instantly.
4. Flexible Condition Operators
We incorporated a range of condition types to accommodate diverse use cases:
If-Else Conditions: Enabled users to branch workflows based on specific scenarios.
AND/OR Operators: Provided logical operators for advanced filtering.
Attribute-Based Conditions: Allowed filtering leads based on predefined attributes.
5. Real-Time Preview
To help users visualize their workflows:
Dynamic Preview Pane: Added a live preview feature to show how messages (e.g., WhatsApp or Instagram) would appear to end-users.
Instant Updates: Preview updated in real-time as users typed messages or modified nodes, ensuring immediate feedback.
Multi-Channel View: Enabled users to toggle between WhatsApp, Instagram, SMS, and email previews for a holistic understanding of their communication.
Impacts
1. Feature Adoption
Within five months of launch, the drag-and-drop workflow builder is actively used by over 2000+ users daily, creating and managing workflows effortlessly.
Users have built over 2000+ active workflows, with the number growing daily.
2. Enhanced User Productivity
The streamlined interface has significantly reduced the time required to set up workflows, increasing overall user efficiency.
Real-time previews have reduced errors, boosting user confidence in their automation flows.
3. Ecosystem Expansion
Currently, the platform offers over 30+ node types, including WhatsApp, Instagram, email, SMS, conditions, and management nodes. This makes it a comprehensive solution for businesses seeking automation at scale.
Challenges and Learnings
1. Managing Complexity
Challenge: Balancing advanced functionality with ease of use.
Solution: Iterative testing and feedback loops ensured the interface was intuitive without sacrificing depth.
2. Diverse User Needs
Challenge: Catering to both technical and non-technical users.
Solution: Layered design—basic users could utilize simple nodes, while advanced users had access to detailed configuration settings.
Conclusion
The drag-and-drop workflow builder is a testament to how thoughtful design can simplify complex processes. By focusing on user needs and leveraging innovative solutions, we’ve created a feature that is not only functional but also delightful to use.
This project has been a valuable learning experience, emphasizing the importance of research-driven decisions and iterative design. As the platform evolves, we remain committed to enhancing its capabilities and ensuring it remains a leader in workflow automation solutions