Redesigning a security automation platform

Zynap customers run high-stakes cybersecurity operations daily. The automation platform enables users to orchestrate complex powerful workflows created out of connected nodes: integrations, logic, scripts, AI agents. The product had been live for around a year, and users had already settled into its patterns.

I was the only designer at the company, so the redesign ran alongside my usual work: shipping new features, improving existing ones, and the everyday design tasks. This period motivated me to develop custom agentic workflows and start working more with the codebase.

As workflows grew more complex and layered within the product, users found it more difficult to read them at a glance. User testing surfaced three main problems:

• Hard to tell what a node did at a glance

  Node types weren't distinct enough, so reading a workflow meant reading every label.

• Connections were hard to trace

  Edges overlapped into dense clusters that obscured the flow, making it harder to trace what fed into what.

• Important alerts got lost

  Organization of information on nodes left users unclear on what issues required prioritization

At the same time, there was a business need for the improvement of the design. The platform was powerful but in order to stand apart in a crowded field, it needed to look and feel as premium as it was positioned by the GTM team.

• Clarity within density

  Let a workflow stay information-rich without losing legibility.

• Purposeful hierarchy

  Prioritise the information that matters on a node, so users catch what's important at a glance

• A distinct, credible identity

  Build a visual language that conveys the product's sophistication and earns trust

In a space where automation platforms are judged almost entirely on their capability, design is often the last conversation, and aesthetics are a nice-to-have. Our team wanted to challenge this.

As a UX/UI Designer, my aim was to make a dense, technical tool more legible and distinctive without breaking the patterns expert users already relied on.

We started with the nodes, and our hypothesis was that if every node type had a distinct silhouette, a user could read a flow by shape.

The process of selecting the shapes came with constraints and considerations I needed to take into account:

• Two orientations on the canvas. Workflows can be displayed horizontally or vertically, and users can switch at any time. Each shape had to hold its input and output cleanly whether they sat left-and-right or top-and-bottom.
• Room for content. The geometry had to hold everything a node shows (labels, badges, alerts), and what it had to show decided which geometries could work.

Having rejected any elaborate shapes or ones with odd angles, I gave each node type a geometry tied to its role:

• Rounded rectangles for core nodes and tools

  → clean, familiar, and efficient

• Hexagons for integrations

  → a distinctive silhouette that stands out and signals connectivity

• Diamonds for conditional logic

  → a widely recognised visual expression of decision points

• Soft capsules for AI agents

  → smooth, organic shapes with a glass-like treatment that convey intelligence and adaptability

Other things I did to improve usability when designing the new node components:

1. Unified naming, kept identity. The old node paired a category label (e.g. "Integration") with an editable title, so a rename left users unsure what the node was. The shape now carries the category, so I replaced the label with a constant tool name under the editable title.

2. Enlarged the icons. Removed the background and made the icon itself bigger to cut the noise and improve visibility and contrast.
3. Reordered the label hierarchy. I put the editable name on top and the fixed tool label below, so both fit every shape and the longer name truncates cleanly when needed.
4. Removed the connection-count badge. Usability testing showed that 7 of 8 users ignored it or couldn't use it for any task; it was decorative, so removing it cut noise.
5. Repositioned status, reused for errors. Moved the node status to a clearer, more prominent spot, and used the same slot for error count.
6. Enlarged the connection target. We widened the drag zone around each connector so starting a connection no longer needs pixel-precision.
7. Hid the edge handles until hover. The drag ports added clutter, so they now appear only on hover: clean at rest, available when needed, with the colour matching the node.

The connections (or “edges”) are where a workflow’s logic lives, and they were often where a workflow got hard to follow.

• Readable edges. I took the node-graph library as a base and customised the edge rendering: wider, smoother curves with a generous radius and gradients that blend each connected node's colour along the path. The gradient gives the line a direction to follow, so a connection reads as flow rather than a static wire.
• Contextual highlighting. The approach came from collaboration with our front-end developer: selecting a node highlights its connections and dims the rest. The outcome is a feature that lets users follow how nodes connect, even in a busy workflow.

The last decisions were about the workspace around the workflow: giving it room, and settling how Nina, the company’s own AI assistant, lived inside it.

• Controls moved to the bottom. I grouped the primary canvas controls in a bottom toolbar, freeing the top bar for the information and alerts that matter. The controls were grouped around the habits users had already formed.
• Collapsible, detached side panels. I made the side panels collapsible and detached them from the screen edges, so users can reclaim space for the workflow, and the panels read as layered above the canvas rather than boxing it in.
• A recognisable identity for Nina AI. I redesigned Nina's identity from the Zynap logo, with its own colour and an activation animation, so the assistant is easy to recognise and reads as native to the platform.

The redesign shipped to production and is what users work in today.

The redesign also gave Zynap a visual language of its own. The nodes, edges, canvas, and assistant now share one system, so the product reads as the distinct, credible platform it was positioned to be.

BeforeAfter

Reveal the design before the redesign