User Flows — Ryan Signer style

User flows are an ambiguous term that mean different things in different contexts. Even when in the realm of product management and development, the perspectives can still be diverse — marketing, UX, and development can take vastly different stances on what a user flow is and isn’t. Different companies also use them for different purposes. For my user flowing, I turn to Ryan Singer of Basecamp because he does the best job explaining them and simplifying the product development process by using them. What I like about Ryan’s approach is that he keeps the system simple so that the thinking can be free to explore, create and build. The systematic approach ensures that understanding the experience of a user is clearly defined which enables easier conversations. The key to this method is that anyone can do it, enabling conversations that others might otherwise be left out of. You don’t have to be a “designer” or a “PM” or wear a special hat. It is a simple process allowing any stakeholder to provide value by using because most can relate to diagrams. Here is the structure of Ryan’s user flow method — he calls them UI flows.

A shorthand for designing UI flows

I know from first glance it looks easy, obvious and even elementary. In practice, however, it creates great conversations that provide the path to excellent design. Ryan gives some concrete examples of flows in his UI flows post. Below I have provided some additional samples of a new instructor registration system so you can see how additional applications of the UI flow process. I like to iterate on my hand-drawn flows until I can get them into a diagram that is neat and orderly (currently I use Axure and I like it because I can do flows, wireframes and prototypes all in the same software). From there, I group the actions that make logical sense together which begin to form the definitions of the screens. From there, wireframing becomes straightforward because I know what what actions need to be allowed for on a particular screen. I can think creatively about how I want to bring the user interface to life because I understand clearly what the user needs to accomplish at this moment in the experience.

High-level view of new instructor user flow. Blue = what the user sees. Red = what the user does.
Detailed-level portion view of new instructor user flow. Blue = what the user sees. Red = what the user does.

The real key to using user flows effectively is that they act as a flowing conversation where team members can add thoughtful value. You aren’t talking about the design of the product at this point — the how — you are just talking about the what. What does the user see, what do they do. How to display that on a screen will happen later but getting the flow down, simplifies the process and ensures that the features that are needed to define the product are getting into the product.

If you are going to create a product that changes the world, Ryan Signer’s speech at Mind the Product is required viewing. From PM to UX to dev; it really doesn’t matter your role, this is essential viewing. Even if you decide that you have a different way of creating products, Ryan’s user flows methodologies is so simple and yet so effective, it is worthy of consideration. Years after technology supposedly “moving at the speed of light” we still have thousands of terrible products and millions of development hours wasted in product development. If there is a simpler way to get on to design and through development, I would love to hear about it because as far as I am concerned, Ryan Singer has mastered the trade.

Ryan Singer speaking at Mind the Product

Happy Flowing!

Like what you read? Give Ellen Twomey a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.