1 / 16

Using Flowmaps in a team Steps to increase their effectiveness

Using Flowmaps in a team Steps to increase their effectiveness. Erin Malone Product Design Director AOL Web Properties. A well used flowmap can reduce the amount of assumptions made by members of a product team.

salena
Download Presentation

Using Flowmaps in a team Steps to increase their effectiveness

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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@emdezine.com http://www.emdezine.com/designwritings

More Related