Creating Smart Mindmaps

Improving the infographic creation experience.
NE_Cover3

Project Information:

What's This?: A suite of feature updates for a web-based infographic creation tool.

Role: Product Designer - strategy, wireframing, high fidelity assets, project owner

Project Year: 2021

Timeframe: 8 weeks

Tools: Figma, EnjoyHQ, Mixpanel, Trello

Background

When I was brought on as a Product Designer in early 2021, I had the opportunity to create and implement new front-end features for a "Smart Diagram" creation & editing tool.

This suite of features serves as the foundational framework for further "Smart Mindmap" development, and required a close collaboration with the engineering and QA teams to achieve within technical limitations, while providing an avenue for future improvements.

Feature list at a glance
  1. New copy & paste split button that allows users to edit styles between diagram elements.
    Technical impact: Allow the storing & editing of CSS style data

  2. New line styling options & style guide to allow users to join diagram nodes together in a chart
    Technical impact: Developing a more robust connector line script & logic

  3. A redesigned node editor flow to allow the graphic design team to scale infographic template production faster.
    Technical impact: Allowing the "Smart Diagram" DOM layer to more closely integrate with legacy elements.

Copy & Pasting Styles

Problem

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?

Technical Limitations

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.

What are style elements?

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
User Jobs to be Done (JTBD)

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.

Solution

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. 

style_editor_guide
style_editor_duplicate_bg
Example: copy & paste between nodes

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

Example: using advanced dropdown options

A user can click arrow to expand more advanced options. In this case, the user can paste style data to all elements within a mindmap, or to the elements that are connected to it.

style_editor_duplicate_border

Line Styling

Problem

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

Technical Limitations

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.

Solution & Design Criteria

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).

Future Nice to Haves

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

Redesigned Node Editor

Problem

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?

Technical Limitations

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.

User Jobs to be Done (JTBD)

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.

Mapping the Current & Proposed User Flow

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.

User Feedback, Sketching & Ideation

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.

NE-Sketch
Solution

The solution of creating nodes within a collapsible sidebar editor window was developed alongside the engineering team. Careful consideration and constant back and forth communication with the developers was required to insure that the solution proposed can exist within time and technical constraints.

GD.Node-Editor-3

© 2022 Kevin Liu

© 2020 Kevin Liu

© 2020 Kevin Liu

© 2020 Kevin Liu

Back to top Arrow