Early stage flows (aka task flows)
Overflow is great for early stage user and task flows. It comes with the basic shapes (rectangle, oval and diamond) and helps you customize and create your own styles depending on your needs. Shapes are linked with connectors that can be labeled and styled.
Take your team and stakeholders through it by presenting in an engaging way and let their feedback lead you to the next iteration.
Wireflows
If you’ve developed your wireframes in a design tool, then you can simply sync them to Overflow and link the screens together to get a wireflow. You can have each Overflow board illustrating a different subflow/process of the app (e.g. sign-up, checkout, cancelation).
Present to your team or stakeholders using Overflow, or send a Share link for them to view in the web or mobile player. Let them really experience the flow by interacting with the screens in flow or prototype mode. Let their feedback guide you to the next iteration.
(IX) Interaction flows
Interaction flows are diagrams that have wireflows as a basis and utilize Saffer’s framework for Microinteractions to define each interactive element’s trigger, feedback, rules, and loops/modes.
As with wireflows, Overflow can be ideal for this, as you can simply create a particular style for these annotations and use it accordingly. You can exclude these shapes from the Presentation, i.e. not have them as focal points, by making them inactive.
This particular diagram can have many advantages when it comes to developer hand-off, since micro-interactions are described in detail within their intended context.
High-fidelity user flow diagrams
Creating high-fidelity user flow diagrams can come as a natural progression, following the previously mentioned flows. You can take advantage of Overflow’s updating capability, where screens with the same names get updated upon re-syncing.
This way your diagrams can evolve really fast, taking feedback into account, making corrections, creating variations, etc.
Present with Overflow and captivate your audience by taking them through the user’s story. Make the most of Overflow’s prototype mode to preview your designed user flow diagram as a clickable prototype. Your stakeholders and test users will really get a feel for your product and the underlying flow and can, therefore, give you more valuable feedback. Previewing on the mobile player makes this experience even closer to real.
Other diagrams
- Sitemaps
- Information Architecture (IA) diagrams