Skip to content
WorkAboutServices
Back

Automation Workflow Builder

A visual automation builder for Mobix. A searchable block library, contextual settings and colour-coded connections support complex sequences without crowding the workflow canvas.

View on Contra
About this project Scope, process & feedback
Scope
Product design · Workflow builder
Tools
FigmaClaudeGoogle AI Studio

Challenge

Keep connections and node configuration readable as workflows grow.

Solution

Designed the canvas, library and settings as a coordinated interface, with node-specific panels, distinct connector colours and navigation controls.

Product design scope

  • Workflow canvas and connectors
  • Searchable node library
  • Node-specific settings panels
  • Zoom controls and minimap
  • Interaction and edge-case exploration

One connected workspace

Documented design coverage · published Mar 2026

4 builder areas

  • Canvas & connectors
  • Properties panel
  • Node library
  • Navigation controls
Builder project

FlowPresented on the official SABSUS site

Matching Field Mapping interface · checked 1 Oct 2026

The outcome

A connected workflow-builder interface spanning canvas, library and configuration states. The matching Field Mapping interface is now presented on SABSUS’s official Flow Automation page.

Behind the designDesign decisions, experience flow & numbers
The organising idea

Keep the graph central. Make settings contextual.

I designed the canvas, searchable block library and node-specific panels as one coordinated experience. Colored connections distinguish relationships; contextual settings concentrate the detail around the selected node. Zoom, panning and a minimap provide different ways to stay oriented.

Experience flow

A builder that follows the way you think.

The intended construction loop connects the library, canvas and properties panel. This diagram describes the interface concept.

  1. 01Find a block
  2. 02Place on canvas
  3. 03Connect actions
  4. 04Configure node
  5. 05Review the graph
Design coverage

Four work areas, one continuous workflow.

The published scope covers the canvas and connectors, contextual properties panels, the node library, and navigation controls. The interface separates finding a block, placing it, configuring it and keeping track of the graph.

Builder scope
Product in public

From the design workspace to an official product presentation.

The SABSUS Flow Automation page now shows the matching Field Mapping interface from this design work. SABSUS’s App Store release notes for version 1.1.3 also record the addition of the Flow automation module on 17 May 2026.

Flow AutomationFlow release notes
Full scopeBrief, responsibilities & delivery
The brief
Design a visual automation builder for Mobix that supports complex sequences without overwhelming the canvas.
My role
Product interface design and interaction exploration in Figma.

What was delivered

A coordinated UI system for an automation builder, including its canvas, block library and configuration states.

  • Workflow canvas and connectors
  • Node library and search
  • Node-specific configuration panels
  • Zoom controls and minimap

How it came together

  1. 1

    Designed the canvas, searchable node library and settings as one interface.

  2. 2

    Used distinct connection colors to help explain relationships between blocks.

  3. 3

    Explored interaction edge cases with Claude and Google AI Studio.

Image guide

  1. 01
    Project overviewOriginal project image
  2. 02
    Configure the webhookDetail from the original artwork
  3. 03
    Map the fieldsDetail from the original artwork
  4. 04
    Workflow builder — trigger detailsOriginal Figma design
  5. 05
    Workflow builder — expanded canvasOriginal Figma design
  6. 06
    Webhook field mapping — complete workspaceOriginal Figma design

Reach out.

Have a website or product in mind? Let’s talk about what it needs.

Start a conversation
Hire Me on ContraChat on WhatsApp
denis@trbn.designBack to top
GalleryAll work
15 / 25
Project overview
Configure the webhook
Map the fields
Workflow builder — trigger details
Workflow builder — expanded canvas
Webhook field mapping — complete workspace
Previous projectMortgage CRMNext projectSabsus Restaurant CRM
Loading image…

A regional offer

Hello.

Let’s talk about your next website or product.

Discuss your project