Creative Projects - Workflow Diagram

tl;dr; Develop an annotated workflow diagram that explains how the application you want to build will work and how a user interacts with it.

Creative Projects: Workflow Diagram

Now that we’ve got the functionality nailed down, let’s specify how the user interacts with our service and the order in which things happen. We’ll do this by creating a workflow diagram

Why do this?

Well a workflow diagram is a really nice bridge between application design, interaction and code. Because it makes you think about the branches, the logic and the actions in your system. We’ll use this later to translate our interaction to a basic first cut prototype.


There’s lots of great tools that can be used to create a good diagram.


Graham Todman's New starter email campaign user flow

Graham Todman’s New starter email campaign user flow shows a traditional workflow diagram approach. It shows how to quickly “ sketch out an email stratergy for communication with new starters, offering prompts to fill profiles, engage with the service, or hints and tips as a response to (or lack of) user activity.”

37 Signals UI Flows

37 Signals offers a really lightweight shorthand for designing UI flows. illustrates how these methods can be applied to designing chatbot conversations to show the conversational structions, decision points and overall dialog that unfolds. “These complex decision trees illustrate the relationship pieces of dialogue have with each other, with directional lines indicating possible paths to other nodes of dialogue based on a user’s action.”

Chatbot Large's Checkout Flow, by Elaine Lee see:

ArcTouch offers a template for the workflow diagram specifically for bot conversations. Designing the UX flow for a conversational commerce chat bot

ArcTouch's Bot Design UX Template

or you can integrate a storyboard with a workflow layout to have a graphical depiction of content and decisions as suggested by tentouchapps

Grafio's UX Flowchart / Sitemap Example


  • Don’t forget to handle errors and unexpected entries gracefully.

  • Account for things that the user doesn’t trigger e.g. schedule tasks like a summary email or a report that comes out on the weekend.

  • Play act: Try it out by putting yourself in the user’s shoes. Does it work? Does it make sense?

  • Refine: Look at long chains. Try and simplify interactions where you can. Avoid complexity or anything that takes more than 2 steps to complete.

  • Annotate: Add things you know around each action. Label things you know or need to know for each state. Is a piece of information NEEDED to proceed. Note that. Do you need to know what preceeded it, note that too. If the action is scheduled or triggered, label when it is triggered and why? What are the conditions where it needs to happen?

  • If you need to, it’s perfectly OK to create multiple diagrams i.e. you could have a main diagram with a series of diagrams that do a deep dive.

Submitting your Workflow

Add it to your Project Markdown file in your student folder.

These files are written in Markdown pages (see this cheatsheet too)

You can edit this in one of the following ways:

  • You can edit it raw within your text editor of choice
  • GitHub provides an online inline editor - visit the repo, open the file, and click the edit icon in the toolbar (right hand side).
  • You can use an online tool like Dillinger or StackEdit to develop your document, and then copy and paste to your repo.

Read also