Automation Workflow Builder
Designed a node-based automation workflow builder with a dark purple UI, custom properties panels per node type, and visual canvas with neon connectors.
The Brief
Design a node-based automation workflow builder for Mobix, a SaaS platform that lets users create complex automation sequences visually. The interface needed to feel powerful without being overwhelming, with a dark UI that matched the product's technical audience.
The Approach
Worked in Figma to design the full canvas experience: node types, connection logic, property panels, and the visual language that ties it all together. Used Claude and Google AI Studio during the ideation phase to explore interaction patterns and edge cases for complex node graphs.
Key Features
Visual canvas with neon connectors — color-coded connection lines that make data flow immediately readable Custom properties panels — each node type has its own configuration panel with contextual controls Dark purple UI system — a cohesive design language built around deep purples, neon accents, and high-contrast text Node library — categorized, searchable node types with drag-and-drop placement Zoom and navigation controls — minimap, zoom levels, and canvas panning for large workflows
The Result
A complete UI system for a workflow automation product that balances visual density with usability. The dark aesthetic gives it a distinctive identity in a market full of bland white-background builders.