Flowcharts are good for complex workflows – they describe the product’s behaviour and the user task flow. But all these complex flows are presented without any context and content, so it can be difficult to understand them sometimes.
A combination of wireframes and flowcharts will produce a great solution allowing you to map all the flows and behaviours of a product. We can show how a product will work, what to expect when a user clicks a button or how an action can be undone, and what the steps for each use case are.
How can building wireflows enhance the cooperation between UX designers and devs? Designers can:
prepare the documentation use case after use case, screen by screen, and explain the user journey step by step,
add notes to specific screens or parts of those screens,
spot edge cases, errors, and missing or incorrect flows.
Correctly created wireflows are easy to read and understand, and they work perfectly as a communication tool. Wireflows can reduce the developers need to understand designs and guess what should be implemented. The delivered product is free of wrongly implemented solutions and missing functionalities. The work of designers and developers proceeds faster and more calmly, rather than in a mood of nervous debates and endless discussions of missing designs.
You can build wireflows in Sketch or by using one of several tools. Personally, I really recommend the overflow app, by proto.io. It’s still in beta, but I think it works really well. You can upload wireframes or UI designs directly from Sketch or Figma. There is an option to add device skins, and you can put each use case on a separate board. You can also export your work to .png and .pdf. On top of that, there is a presentation mode, which works amazing – when you tap the interaction arrow, the application will refer you to the corresponding screen.
Prototypes: what the product feels like
Prototypes are another way of explaining user flows and journeys. A prototype shows the interactions between screens – it is a mock-up/demo of what the product will look like and how it will behave. Prototypes are mostly used for user testing sessions.
User testing on prototypes is a real money saver for businesses. It’s better to find errors during the design stage rather than in a product that’s ready and developed. But as it turns out, prototypes they are also appreciated by developer teams. So if prototypes have been designed during the process, make sure they are shared with developers – they will appreciate it. The main advantages of prototypes are as follows.
Prototypes, just like for wireflows, help designers to spot missing interactions, flows, edge cases, and errors.
By building interactive prototypes, a designer can show how products and features will behave and what the transitions between screens are.
As for the UI Design and Interaction Design, there are also many advanced tools for UI, Motion, and Interaction Designers (such as Framer, Framer X, Principle, or InVision Studio) which allow building very complex interactions and animations. A designer can show how specific elements and features should behave, e.g. how a popup should be displayed, or what the behaviour of swiping is.
A huge benefit of using prototypes is that a project is easier to understand when you can interact with it. Other benefits and possibilities of using prototypes are similar to those of wireflows. They improve communication, make developers’ work easier, help to deliver products quicker, and reduce the number of mistakes and errors.
From the business perspective, by implementing a proper workflow, good communication, and insights sharing, we reduce the number of misunderstandings and conflicts within the team. Also, the documentation is key. Instead of attending countless meetings or preparing complex written documentation, you'll be better off if you spend this time on creating wireflows or prototypes. A picture is worth a thousand words! Prototypes and wireflows will make everyone work more efficiently. Products are developed faster and with minimum to zero design debt, and all edge cases and errors are spotted and taken care of. By using this kind of documentation, we reduce time and money wasted, and we ship high-quality products. We recommend this kind of a workflow because it really helps us create amazing projects!