Workflow Schematics

Overview

I’ve been exploring some new ways of designing workflow/flowchart diagrams. I’ve found that more traditional methods are big on “the information a user will encounter by moving through screens”, but for me they lack the user/system response logic that is more visual. Some things that I’ve been trying that have made a difference:

  • Include wire-frame thumbnails for states/screens
  • Include action/icons to contextualize functional cluster and focus areas
  • Highlight user-defined actions and system-response graphically
  • Highlight cognitive processes and decision-making

Insights

Co-locating simple layout thumbnails with actionable icons and user/system logic has helped me better evaluate icon placement and meaning. I’ve also been able to better identify frequency and flow of tasks. This workflow aesthetic has also become an artifact for conversation with others where I can better expose technology questions and functionality concerns. Having a workflow diagram that supports a language of design infused with GUI elements and layout helps me understand the products better.