Wireflows – What They Are and How They Can Transform Your Design Deliverables

Wireframes and flowcharts are often the first things UX designers use when spinning their magic. When designing web pages, a wireframe is used to convey the basic layout of the page, with clear demarcations for what goes where. Flowcharts are immensely useful at describing user task flows and back-end processes, depicting the detailed path the web page will take depending on the user input. Together, these deliverables map the user experience journey in terms of direction, route, as well as, the appearance. Sounds adequate enough, right?

However, things get a little complex when we are designing mobile apps. Mobile apps do not usually have as many pages as a regular website. They instead have a few core pages, where the page contents change dynamically with the user action. Designing app pages, therefore, need a stronger deliverable that can display page design in context with common user tasks.

Enter wireflows – a combination of wireframes and flowcharts – that can document screen design and workflows together, in context to the user interaction on pages that change dynamically.
Despite their timeless nature, wireframes and flowcharts tend to be suboptimal for dynamic mobile app development. Wireflows effectively fill that gap by providing a hybrid of the two. They marry wireframe-style page layout designs with a simplified flowchart-like representation of interactions. In essence, wireflows effectively document the holistic user interaction. They show complete views of different pages using a series of wireframes connected by arrows representing the path taken and communicating the functionality. As a result, they add another powerful tool to the designer’s arsenal of deliverables.

Now it is indeed hard to introduce a new deliverable, as it tends to confuse the stakeholders and raise ambiguities initially. But after the initial deliberation, stakeholders too can clearly see the benefits of using wireflows. Here are the two major advantages of using wireflows, as an alternative to flowcharts and wireframes:

• Wireflows Map the User Journey More Clearly
  To explain this, let us consider a common user interaction like adding a product to cart and making a purchase.A wireframe would depict how the different pages look, separately. There would be a wireframe for the products page, another wireframe for the cart page and other respective wireframes for the address, payment and checkout pages.Now, sure the good designers would present these wireframes in a chronological manner, but user journeys tend to be more complicated than that. Users often go back from the cart to the product page and take a detour to a different product from there.A flowchart would show you all the possible actions a user can take, and what page that action would lead to. That still wouldn’t clearly establish the proper sequence of screens that will appear. 

  In comparison, a wireflow can easily show the sequence of app screens that would appear at every stage after every user action. Often in an app, multiple dynamic changes take place on the screen, while it’s technically the same app page. A wireflow can easily depict the activity hotspots and changes that happen on the same page throughout the user interaction.

• Wireflows Are Highly Collaborative
  In today’s digital workspaces, various teams, often located in different cities altogether, can be working on the same project. Effective collaboration becomes paramount here, and designers need highly collaborative tools.
  They need to work in tandem with developers and convey their vision effectively to the stakeholders. Especially if you are in an agile environment, the collaboration-friendliness of a deliverable is a precious asset.Wireflows take a swift lead here, as they are easy to convey, as well as, understand. At the early stages when you are using low-fidelity wireflows, designers, developers and stakeholders can all suggest edits or discuss options easily with a wireflow. Since wireflows can be easily made without advanced Photoshop and Sketch skills, they are easy to edit, adapt and adjust. You can simply use tools like wireflow.co or Visual Paradigm to easily create your own wireflows. Even a high-fidelity workflow is more suited to collaboration as it paints a much more wholesome picture of the path, allowing everyone to understand your vision and contribute their ideas, opinions and feedback seamlessly.

Conclusion
Mobile apps have unsurprisingly upturned the norms of UX design. Even things that look so seemingly simple and uniform all across tend to get diversified in the deeper layers. Wireframes and workflows are undeniably the foundations of a solid UX design, but something as dynamic as mobile apps needs a new solution that can multiply the advantages of both wireframes and workflows, enhance their collective power and mitigate the few shortcomings of them. That is what wireflows were born for and that is what they do. They depict complex interactions and same page content changes, mapping the user journey much better than wireframes or workflows alone. They are also a highly collaborative deliverable that allows all teams to work in tandem and create beautiful user experiences.