When users add new nodes to a diagram, how should the new node look? What characteristics should be inherited and which should be default? How much work is there in editing each element manually?

When we started, styling data was not recorded on a per-item basis. A few new paramenters needed to be added so that CSS styling data could be referenced and applied as required.

A descriptive list of what constitute as a “stylistic” element that could be copied between nodes served an important purpose in defining exactly what needed to be included between nodes.

• Font: family, size, weight, line height, colour
• Background: colour, opacity
• Borders: colour, width, radius
• Icons: alignment, background colour, opacity
• Images: alignment, background colour
• Node: horizontal width, scaled size

Our core user group of working professionals with limited graphic design backgrounds need to present infographic ideas quickly & with minimal editing. A simple, one-button approach to copying & pasting styles would appeal the most to this demographic.

The solution of a split button was created from a few rounds of internal team feedback, and extensive product testing in multiple scenarios. The split button is a button with two components – an icon & a dropdown arrow. Clicking the icon selects the “default” action, while the arrow provides a list of secondary actions.

This solution provides a suitable solution to the user through its easily discoverable default option (copy & paste), while also providing more advanced options that are visually seperated but still discoverable for more advanced users.

A user can click once on the copy button to pick up the style they want to copy, then select another element(s) on the page and paste back the style.

A user can click to expand more options, such as pasting style data to all elements within a mindmap, or to the elements that are connected to it.

As users look to other ways to diagram, how might we offer connector lines so that users can create mindmaps?

Connector lines was driven by a simple third party React library, were not editable, and provided just one appearance setting. A new & more robust library was needed to implement line styling.

The line styling style guide was shaped based on input from the developers, and through competitive analysis with other tools that offer connector lines. The things that should be editable include:

• Customizable: lines can be changed based on colour, type, width, dashes, and line ends.
• Selectable: lines need hover states and selection boxes to show active state.
• Draggable: lines can connect & disconnect when dragging on the end(s).

While what was presented are considered “table stakes” items, future nice to haves listed below would be features that can be built on the framework presented:

• Adjustable stepped lines
• Text on lines
• Standalone line elements
• Orphaned Nodes
• Chart annotation integration
• Auto-adjusting destination ports

When internal graphic designers need to create a new “Smart Diagram” for public use, there are severe limitations to the styles & editing options available to use.

How might we provide a simpler and more powerful workflow for our team to scale infographic production?

The new “Smart Diagram” elements exist on a seperate DOM (Document Object Model) layer, compared to typical legacy elements. A complete overhaul is out of the question due to time & resource constraints, so the solution must be compatible with two DOM layers.

The user group for this feature is the internal graphic designer team. As the company looks to scale up the A) speed of infographic production and B) convert over older diagrams to the newer “Smart Diagram” workflow, a newer and more efficient way of editing nodes is required.

Charting how the existing process works & the pain points present in the flow allows the development of incremental improvements to the process. A “first slice” approach was taken to address the most pressing challenges first.

Numerous rounds of sketching & ideation with the engineering team was conducted to ensure what was possible with their resources. At the same time, user interviews & notes were taken from talks with the Graphic Design team as to how best to improve their workflow.