The Product Sitemap

The high-level design asked to add a new workflow to an existing product.

A storage admin needed a load-balancing tool for servers.

Initial Wireframes

The design pattern for a workflow was already established, so the functionality focused on a network-drawing tool.

Refined Wireframe

The tool was wireframed to display network connections.

Filter controls were added, and the network lines were intended to constrain to 45 degree angles.

Refined Wireframe

Ensuring forgiveness if a user makes an unintended edit, modals are used with minimal distruption, asking only a "yes" or "no" question.

Mockups

The color mockups explored the option of changing workspace color in an edit mode.

Mockups

In preview mode, the network lines indicate status with color and width variations.

Prototype

A prototype in native code was built to help the developer convert UI assets into a directive (Angular) and the tools into SVG paths.

The Final Product

With the shipped feature, the minimum functionality was achieved, although some proposed functionality was dropped.