Journey Visualization for App users

Is there a way to visualize workflows in the app (i.e. a journey from start to finish) so that the app users (not admin/creator) can review the status of a specific step in the workflow with a quick glance?

What I want to do is to have individual workflows for each entry (as each entry would correspond to one client implementation process, that will engage different departments). My idea is for Client Managers to be able to see where they’re at with each department but with a quick view. Im thinking maybe with a custom map functionality? (instead of a map of a place, it could be a map of a process?) and then show status on each step?

Sounds like a perfect use for an SVG; you could create a custom graphic and use that.

Code
<svg width="800" height="95.99999999999999" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g id="Layer_1">
  <title>Layer 1</title>
  <rect stroke="#000" id="svg_12" height="95.00039" width="801.25327" y="0.4998" x="-0.00161" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="0" fill="#DDDDDD"/>
  <rect stroke="#000" rx="13" id="svg_11" height="21.87509" width="237.50098" y="39.56246" x="25.93597" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="0" fill="#84D3DB"/>
  <line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="50.5" x2="737.50625" y1="50.5" x1="35.5" opacity="undefined" fill="none"/>
  <text xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" id="svg_2" y="37.5" x="11.5" opacity="undefined" stroke-width="0" stroke="#000" fill="#000000">Start</text>
  <text xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" id="svg_3" y="35.5" x="686.5" opacity="undefined" stroke-width="0" stroke="#000" fill="#000000">Complete</text>
  <ellipse ry="8" rx="8" id="svg_4" cy="50.12491" cx="36.62502" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" stroke="#000" fill="#000000"/>
  <ellipse ry="2.63157" rx="59.47355" id="svg_5" cy="128.52612" cx="123.68392" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" stroke="#000" fill="#000000"/>
  <ellipse ry="8" rx="8" id="svg_6" cy="50.12491" cx="738.50289" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" stroke="#000" fill="#000000"/>
  <text xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" id="svg_7" y="38.125" x="213.37583" opacity="undefined" stroke-width="0" stroke="#000" fill="#000000">Phase 1</text>
  <ellipse ry="8" rx="8" id="svg_8" cy="50.74991" cx="251.00091" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" stroke="#000" fill="#000000"/>
  <text xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" id="svg_9" y="39.37501" x="438.37674" opacity="undefined" stroke-width="0" stroke="#000" fill="#000000">Phase 2</text>
  <ellipse ry="8" rx="8" id="svg_10" cy="51.99992" cx="481.62684" opacity="undefined" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" stroke="#000" fill="#000000"/>
 </g>
</svg>

Excellent online SVG builder/drawer: https://editor.method.ac/


Additionally:

  • You might not have included it, but if you include a table that holds the various stages, you can create a reference connection between tables and see all the projects that are in whatever stage/phase.
3 Likes

Oh wow, hadn’t thought of that, thank you!

2 Likes