User Flow Diagram

The block flow diagram goes by several names: user flow diagram, block flow diagram, persona flow diagram or just flow diagram. User flow diagrams are based on your personas and their related scenarios. They show the path that a user might take through the site to complete a task.

User flow diagram:

Example User Flow Diagrams:

Assignment:

Select one persona and one scenario (that that persona might try to accomplish on the site).

Diagram the steps that that person would take moving through the given scenario. The focus is on the movement through the web site. To resolve any problems, you need to locate and define the problem first. Your assignment will consist of 2 diagrams documenting the one scenario: Before (Existing) and After (Redesign)

The Existing diagram will show the web site in its current design as the user moves through the task. Document any difficulties or frustrations that the user experiences.

The Redesign will show your solution and contain a one sentence summary of the advantages of implementing the redesign.

Tools:

You are welcome to use the tools of your choice - anything from sketching to Adobe Illustrator. If you choose to sketch out the problem, you will need to scan your drawing.

You do not have to use color. I like color and images, so I made the examples using color and images. You can download my Word pages and use them as a starting point if it will help.

The point is not the final product, but the thinking process!!

You will submit this with the rest of your deliverables as either a Microsoft Word document or as a pdf.

Examples of two User Flow Diagrams specific to this assignment

Click on diagram to see a larger version

1 - Persona wants to browse Garden Design magazine just to see what it is like; maybe read some articles; see if she would like to subscribe. First is a simple diagram created with MS Word 2007. View Word 2007 doc.

browse

An alternative is the same diagram using screenshots for the existing pages (created with MS Word 2007.) Images are more difficult to get in, but can enhance meaning. View Word 2007 doc.

browse

2 - Persona wants to search Garden Design magazine to find articles and information on shade loving groundcover plants. (Each example for this one is two pages.) First is a simple diagram created with MS Word 2007.

searchsearch

An alternative is a the same diagram using screenshots for the existing pages (created with MS Word 2007.) View Word 2007 doc.

serachserach

Creating your flow document

1 - Sketch out your scenario, just using paper and pencil. Make notes on the number of clicks you take and where that takes you. How does each landing page feel?

If you choose to use a sketch for your final document, it should be cleaner and clearer than the preliminary sketch below. Click for a larger version

sketch

Using Word 2007 to create your diagram

  1. Create a new document in 2007 Word (or any Office 2007 program - all contain the SmartArt functions.)
  2. Using the ribbon, select Page Layout tab > Margins > Narrow
  3. Click the Insert tab and select SmartArt
    smartart
  4. My Existing flows were both linear, so I used Process and selected the Basic Process
    smartart
  5. For the Revised flow, I used Cycle with the Basic Cycle option.
    cycle
  6. Tutorials on using SmartArt: