Aggregate flowcharts with variants to create a summary visualization

Question

Background:

• I've been tasked to develop a UI to summarize different variants of flowcharts.
• The flowchart content is the workflow of different people on the team.
• These 10+ people do the same set of things (A, B, C) but with different sequencing.
• The goal for this summary visualization is for the executives to easily see the status (e.g. step A: finished; step B: progressing; step C: aborted) of each "step" in the workflow, as well as different variations of sequencing.

For example:

• Person 1: step A → step B → step C
• Person 2: step A → step C → step D
• Person 3: step B → step A → step C
• I'm using a 3-step workflow here just to illustrate, but the real workflow could be 10+ steps, and not always linear (could have branching).

Question:

• How do I create a summary visualization to illustrate the "overall flowchart" that not only shows what the steps are, but also indicate the different sequencing variations?
• My current approach in the screenshot is to "merge" them, but it doesn't really capture the "sequencing" (what do people start / end with) and "weight" (how much is step A being used) aspect.

Answer 1

I would look into charts used to represent website navigation by analytics and tracking products. For instance, this is an events flow chart, used for example by Google Analytics to track events and navigation:

This shows you the navigation patterns around the site, where for each node you can see how many people entered it and the point of origin, as well as the distribution of people who continued to other nodes - how many went to each point.

Another good direction is a Sankey diagram, showing similar data but in a more flattened way, with just a single-step progress.

Answer 2

I am not exactly sure what the 'status' of each step refers to here, so you might need to clarify that a bit more, but in terms of the sequencing of the steps (i.e. the order that they are performed) there are different ways to represent the relationship and order of steps/tasks.

The way you can represent the steps depends on what details you are capturing about the sequencing (by which I assume you mean workflow). If you look at the holy grail of how this is done in the Business Process Model and Notation (BPMN - https://www.bpmn.org/) there are different symbology used for different types of process and the flow between the steps.

Of course, this is going to be an overkill for what you want to do, but there are different visual elements you can incorporate into the diagram including:

• Colours to represent different types of steps/tasks (but don't rely on colour only)
• Icons to complement other styling elements (because icons can be hard to find for some concepts or ideas)
• Weight of outlines around the shape used to represent the steps/tasks
• Shape that is used to represent the steps/tasks

So as you can see, there are many visual styling elements that can be combined, but it's hard to know how well it will work unless there is a specific example to apply it to. I think your example here isn't complex enough to warrant using too many of those elements.

But also have a think about the principles of good data visualisation design, because to be clear and succinct you can't have too many elements on the page with very complex relationships (the idea would be to break them down into simpler entities anyway).