Creating a Flowchart for Wireframes


I am kind of new to wireframing, so I might have the wrong conceptions here, but I would like to create a flowchart showing how different wireframes of an app are related to each other. The thing is, it is getting quite messy: Current State of flowchart

as you might be able to tell it already is quite messy and I am still missing some connections ...

Is there a better way to depict the relation of wireframes (maybe flowcharts are out and theres something cooler) or are there some other tricks to it, like only showing certain cases (buying something, getting information on X, logging in, etc.) and therefore reducing the number of connections that are relevant for a particular case?

Thanks in advance! :)

10/25/2016 9:39:00 AM

Accepted Answer

Technically all pages of the wireframe will be interconnected, which will complicate the diagram. I can't quite read the page names in the illustration provided, it looks like it might be a shopping site.

I would break it down into one illustration displaying all the page types or site tree. Then a seperate diagram for each user flow/journey. For a shopping site you might have the following journeys.

  • User manage account
  • User checkout
  • User add product to cart
  • Admin manage products
  • Admin manage orders
  • etc

Like in the following examples.

User Checkout Checkout

User Manage Account enter image description here

Admin Manager Admin manager

Usually in flow charts the little diamon/square on a 45 angle represents a user decision or split in the flow. Ignore the first diamond in the user manage account diagram, I should have taken that out.

11/24/2016 12:36:00 PM