Topology Builder: recreating networkg-diagramming tool from poc to b2b Saas.

Problem: the screen was too cluttered for complex topologies

A full left sidebar was clearest to read but ate the canvas — leaving the diagram, the actual point of the tool, tiny.

The first full wireframe kept that fixed, fully-labelled menu and put search directly on the canvas. Everything the user needed was on screen, and tabbed side panels categorised information well — but the menu and search bar left the actual diagram tiny, and the curved connection lines read as visually inconsistent.

Shipped: a floating pill menu plus a hover zoom panel, with straighter connection lines. Small learning cost on the icons, huge gain in canvas space. The side panel also tabs multiple open devices — a feature users loved.

Problem: on complex diagrams you couldn't tell which device connected to which VLAN

Every connection line looked the same, so dense diagrams were unreadable.

Shipped: borrowing from the London Underground map — alternating line colours plus dashes and dots to distinguish connection types. A dense diagram became scannable.

Problem: no way to find items in a large diagram

I explored four search patterns (highlight-and-zoom, multi-tab, grey-out, modal). Grey-out clashed with hidden items; multi-tab opened too many panels.

When presenting the search ideas, we decided as a team the modal search was probably the most effective. Search is opened by clicking the search icon on the pill menu.

Problem: colour alone still left two questions unanswered — what kind of connection is this, and what state is this device in?

By alternating line colours there is clarity of how devices and VLANs connect. For line types, dashes and dots were introduced to distinguish connection types further.

Device icons have different visual states for errors, connections, configuration types etc. I developed several types of states that can be used, so a glance told users what they were looking at.