Can a navflow diagram replace your low-fi wireframes?

An example of a navflow diagram built using Whimsical that shows how a prospective home improvement app could work.

As designers, we don’t have tools that clearly express to non-designers how an app would work — not even Figma. Even a low-fidelity wireframe can appear to be too much information when you show it to someone.

This is because low-fidelity wireframes hold a great deal of visual information that can be hard to process if you’re unfamiliar with the process, as many of your stakeholders inevitably will be. It can be particularly difficult to communicate what something could look like in an MVP phase vs. what it could look like in later phases. As designers, we live in a world where anything can be changed. Most stakeholders don’t.

You could use flow charts to explain workflows to your teams, but flow charts often don’t include enough information or the information is so abstracted that it gets overlooked before it’s too late in the process to make cheap changes.

So what can a good designer do to communicate concepts that require elastic thinking to process? Enter the navflow diagram.

A navflow diagram is a part of the object-oriented UX process. Navflow diagrams are a visualization of a system, so it is a type of flow chart. Unlike a flow chart however, navflow diagrams show the relationships between objects in your systems and depict how those objects connect. Adding this level of…