Using Flowmaps in a team Steps to increase their effectiveness

1
Using Flowmaps in a team Steps to increase their
effectiveness
Erin Malone Product Design Director AOL Web
Properties
2
A well used flowmap can reduce the amount of
assumptions made by members of a product team.
3
Start small - quickly exposes key decisions -
quickly identifies holes/issues - quickly
identifies page counts - build consensus about
functionality
Small flowmap -(11x17, bw) identifies decision
points in process There is no detail on the
screens.
4
Get Big Quick - provides details - allows
annotation by the team
Large map is tacked to a 4x8 sheet of foam core.
Can easily be carried into meetings and written
on.
5
Annotate Well - identify name of project - date
the map - provide author and contact info -
name your screens
6
Layer More Information On

• - use an identifier for inventory count
• or different states of common screens
• - include URLs as references for engineering.
• - encrypted pages, partner-provided content,
  integrating applications should all be noted

7
Document the common language - create a legend
- use standardized symbols - be consistent
8
Use Color - group like type screens together -
identify discrete processes or tasks - different
team members can focus on different zones
9
Iterate - begin with wireframes - gradually add
detail - eventually convert to screenshots
Wireframes used in flow with annotation
Screens converted to screenshots once HTML is
complete. More info is layered as it is decided.
10
Share the map often USE IT - the map is a
working tool - remember the map is not the
PRODUCT
Engineering team gathers around flowmap of
current project.
11
Place in central working areas
Map shown with calendar of delivery milestones
and engineering diagrams
12
Write on it - The map is not sacred.
Questions, changes and solutions are written
directly on the map and fed into the iteration
cycle.
13
Use post it notes to annotate - different
colors can indicate different people or times
Details from two different maps with annotations
on post-its
14
Start the companion functional spec early - as
soon as the initial flow is defined - one screen
one page - walk through site/product and
detail functionality from top left of the
screen down to the bottom right - iterate and
distribute often
15
Final things to remember - the map and the spec
are communication tools and not the end
product - it takes a team - the more involved
the team is, the better the process -
adjust the tools and methods to your team
and specific situation
16
Thanks!
Erin Malone AOL Web Properties Personal email
erin_at_emdezine.com http//www.emdezine.com/designwr
itings