Why we love wireflows for software feature designs

We’ve been loving wireflows as a way to keep the team on the same page. Wireflows connect user stories with wireframes. They can translate a user story into a clear design deliverable. In this blog post we explain how it works and why wireflows are great.

In the example below, we are covering a user story about adding a new schedule to a planning app.

To create a wireflow, draw multiple screens in wireframes — typically sequential steps — connect them with arrows (we like the Autoflow plugin), and put an explanation on top of every flow step.

This seemingly simple design construct is ultimately very powerful. When you write the steps from the perspective of the user, you simulate what the user is going through.

By being explicit about the steps the user goes through, you explain the interaction model.

By having an explanation on top of the screen, you can send it to anyone with just the simple instructions to follow the arrow.

We are sometimes working across time zones. Sometimes we send the result of our work at the end of our workday. For me, sending something at the end of my workday is in the middle of the night for our European clients.

They receive the design in their inbox in the morning and have to be able to interpret it. I find wireflows to be awesome for asynchronous communication.

Any team member can click a link and follow the arrows. The wireflows tells a story, that is easy for anyone to understand.

For the receiver, it takes less time to watch than a video - although a screen recording walking through the wireframe can help to give more context.

For the creator, it’s much less fiddly than creating a prototype. While design prototypes have their uses, creating them can be time-consuming and an exercise in frustration. They also tend to hide information: more often than not, receivers of a prototype might miss a path they can take. With a wireflow, everything is on the page.

In short, we really love wireflows at Obra. If you're a designer, we invit you to use this technique. If you're on the receiving end of designs and frustrated that what you are receiving is not very clear - invite your designer to give wireflows a try.