Build professional user flows in balsamiq

Visualizing the user flow is a key step in your UX design process before diving into wireframing user interfaces for a website or app. Creating user flows helps you to

  • Be aware of all screens and microinteractions you need to design
  • Be aware of the path the user will take thru your app   to achieve his goal
  • Better understand how the screens of your app will interact with each other
  • Better understand how the user will interact with a specific screen – this is called micro interactions
  • Better present, discuss and iterate your ideas
  • Make your user flows, page flows, site flows look professional

Pages & Microinteractions

USERFLOWS for Balsamiq provides a rich library of symbols for pages and micro interactions which will help you to build professional user flows and site flows directly in Balsamiq – fast and efficient.

symbol-library

If Balsamiq Mockups is your tool of choice for wireframing why not also use it for creating awesome user flows, page flows or site flows.

Examples

Here are some examples how I build user flows in my UX design process.

example-flow-profile-picture

example-flow-timesheet-approval

Download now!

Userflows is provided as a balsamiq project file (.bmpr). Get your copy today and let me know how this works for you. Best of all – it’s free! Please make sure to subscribe to my mailing list so I can keep you updated on new versions.

Visualize, Visualize, Visualize!

When I coach product teams in the corporate world I always ask them to show me how they define requirements, user stories or other pieces of work that go into the development process.

What I find in most of the cases is a lack of visualization. Requirements are written down in epic documents but very few manage to visualize what they actually want to see on the screen. This leads to the fact that requirements are discussed and agreed but the visual end result is based on interpretation of each individual. As an outcome the development team delivers a version of the product which more or less meets the define requirements but most likely does not meet the expectation of the product owner. What follows is a flood of change request, hotfixes and other tweaks in order to get the product right. At the end the result might be great but the way of getting there was damn expensive.

What has happened here?

Everyone understood the requirements and everyone was aligned on what the new version of the product should be able to do. The mismatch was on HOW the user would experience the new product.  Its obvious that visualizing the requirement would have done the trick to align expectations and to avoid different interpretations. So why don’t people do it?

Studies show that people remember 10% of what they hear and 20% of what they read, but about 80 percent of what they see and do.

We all know people are different and some feel more confident about sketching and drawing than others. But to be efficient in this domain I believe it’s crucial.

Just do it!

Here is 5 simple things I recommend you to do:

Sketch together

When discussing  ideas, requirements or user stories sketch them out during the meeting together with your team. Use a piece of paper, a whiteboard or the virtual drawing board that comes with most online meeting tools.

Draw the first line

Even if you think you really suck at sketching make the first step. Once you have started to visualize your idea others will automatically jump in and take over to show their point of view. It’s not about the beauty of your sketch it about starting a visual discussion.

Motivate others to visualize

If someone talks about his point of view regarding a feature or requirements ask him to sketch it out for you. “Sorry, I don’t know if I fully understood your concept, can you draw that for me?” And off you go!

Capture the results

Always take pictures of your sketches and share them with your team after a meeting. Since everyone is equipped with multi-mega-pixel camera these days – this is a zero effort and more valuable than any meeting minutes ever written.

Advance your skills

There are a lot of good books and articles out there that teach you how to advance your visualization skills. Here are a few that I can recommend:

By the way you can also practice by sketching in your daily life. When you plan your next vacation draw a map and highlight the places you want to visit, the things you want to take along or when planning your next birthday party sketch out a todo list, the layout of the party location, the guest list … planning will become more fun.

Start visualizing and I promise you will see the impact in no time. You don’t have to be a designer. Just do it!