My goal is to build a dashboard to position the users about several processes (orders) running on a shop floor.

The processes has several steps, named for illustration as STEP1, STEP2, STEP3, STEPN.

Each order has a proper workflow. Example:


I may have dozens of orders running at the same time.

I need to find a way to build a dashboard view of all orders, its workflow and its current position in the process, as well as signaling delayed orders (all steps has a defined time).

I really can only think of a single grid:

        STEP1 | STEP2 | STEP3 | STEP4 | STEP5 | STEP6 | STEP7 | STEP8 | STEP 9 | STEP10
ORDER1    OK  |   *   |    -  |   -   |   -   |   -   |   -   |   -   |   -    |  WAITING |
ORDER2    -   |   -   |   OK  |   -   |   -   |   *   |   -   |   -   |WAITING |   -     |

In my diagram: - : Step not used in the order * : Current step WAITING: Waiting step

I need advices of an intuitive and optimal way to build a situational screen for the users, showing all the required information detailed above.


I've noticed that the workflow does not follow a specific step order. Example:


So that changes a little bit the concept as I cannot have sequential representation...

  • How many steps could be the max here? And in your actual situation, are the steps long names, or can they simply be represented by numbers.
    – Mike M
    Apr 17, 2019 at 14:06

2 Answers 2


Allow 2 views: Sequential view for displaying orders by sequential steps, and a production floor view to show bottlenecks and throughput.

Since you can't have a strict order across all steps, have two ways to view the world: at the order level, and the production floor. They serve two different purposes.

In either view, you can indicate on the left how many steps are required per order, setting some expectations.

On the right, you can display order status. If an order is delayed or incomplete, you can indicate the current step.

Orders by sequence (steps in various orders)

enter image description here

Displaying bottlenecks and vacancies across the shop floor:

enter image description here

For a shop steward, a concern might be the pace and flow of orders, and which steps (workstations) are experiencing overflows.

Showing all steps (even those not in use) allows the steward to see the ebb and flow of work across all steps and all orders.

  • Mike. Thanks for the detailed skeleton. In fact I will handle some number of steps that can cause a overflow-x on screen and will require scrolling... What If I remove the steps column and ad its name inside the box together with the color? That way I would have a continuous horizontal flow for every oder. Do you think it is a good idea? (BTW: What tool you use to build those skeletons) ?
    – Mendes
    Apr 17, 2019 at 17:11
  • @Mendes I just updated my answer. My thinking is that of a factory floor, and keeping work visible allows for greater coordination across steps / workspaces. (for mockups, i'm using Balsamiq)
    – Mike M
    Apr 17, 2019 at 17:17
  • I'm building the prototype and I've noticed that the workflows are not always in the same order, what changes the way this diagram would work. Please check my first edit in the post. The idea of a continuous flow proposed will not work as I will haver orders going from Tag, then to Add and then back to Intake. I think the variation will be to have boxes with the flow names... What about it?
    – Mendes
    Apr 17, 2019 at 18:01
  • @Mendes I've updated to address your constraints.
    – Mike M
    Apr 17, 2019 at 19:39
  • Great job @Mike! Own you a beer....
    – Mendes
    Apr 17, 2019 at 20:02

If not every step is necessary in the flow for a given order, perhaps you could represent each step as an icon or a graphic, color-coded to represent its status (along with some sort of graphic change, since relying on color alone is a poor idea for accessibility). Color/shape changes could be employed to represent not yet started, in progress, delayed, completed, failed, etc.

Then you could simply chain the appropriate graphics together for any given order, and represent all orders as a scrolling list of those chains. Each icon/graphic should also have some sort of hover-state (assuming this is to be a desktop-based UI - more details about the context of use and the users would be super helpful) that shows more detail about the step itself, the status, and any other important information about that step.

Here is a super-quick sample of the idea (sorry, only had 10 min to devote to this). Green indicates completed, for example, yellow might mean in process, gray = not yet started, and red might mean blocked or failed. Please note I did NOT represent any kind of shape change to augment the color change for a status, that is an important aspect to include!): enter image description here

  • Can't use icons, as steps are user configurable...
    – Mendes
    Apr 17, 2019 at 14:08
  • Does that mean there are an infinite number of potential step-types? How about using text panels with colored backgrounds/icons to represent the status? The title of the panel could indicate the step or broad category, and the rest of the panel could give more detail.
    – Mattynabib
    Apr 17, 2019 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.