Jul 11

Adapting user flows to your audience

Overflow Team in Overflow Storybook

Design presentation is, undoubtedly, one of the most important yet stressful tasks for any designer. It very often feels like all these hours of work and personal or team effort are put on the line when designs get finally exposed to stakeholders. However, does it always have to feel this way? No two presentations are the same; the audience, timing, and presentation method vary. Which brings up a valid question: are designers possibly treating all design presentations the same, thus bringing upon themselves unnecessary workload and anxiety?

In this article, we will take user flow diagram presentations as our basis to discuss how designers can get away with less, depending on their audience and approach to presenting their work.

Synchronous internal review

In this scenario, the presentation audience is the internal design team or other stakeholders inside the organization, such as Product or Marketing team representatives. Additionally, the presentation takes place synchronously, either in a meeting room or via conference call. That means the designer is present to guide attention to the right areas, as well as respond to any questions.

This is a clear case where designers can cut themselves some slack. Internal audiences mostly want to evaluate progress when it comes to design efforts, as well as visualize the basic user experience. Taking the example of a made up retail shopping app called Shopin, we tried to put together a presentation that would suffice for the purpose:

This is a quite basic user flow presentation, comprising only screens and connectors. There was no need to apply connector styling, as backwards connectors were conveniently skipped. Additionally, no device skins were added to any of the screens. Lastly, as the review is internal and synchronous, there was no need to add any self-guided walkthrough, branding elements, or a legend explaining different elements of the diagram.

This user flow took approximately 10 minutes to build in Overflow, after designs were imported from the design tool.

Asynchronous internal review

Here the audience might be the same, however the premise changes everything. An asynchronous presentation deprives the audience from some much-needed real-time guidance, which means that some pre-work needs to be done, so that they can follow.

We addressed this issue in the Shopin app user flow by adding a step-by-step guided tour of all the changes applied since the team last got together for a review. That way, everyone can follow the presentation from anywhere, anytime, without missing the point.

Overflow allows you to do this with Overflow Stories, however it can also be done by leaving notes and annotations in context within the diagram. It is not recommended to send long, detailed instruction emails, as they usually make presentations very hard to follow and require a lot of back and forth for the audience to understand where to focus on.

This user flow with the accompanying step-by-step walkthrough took approximately 20 minutes to build in Overflow, after designs were synced from the design tool.

Synchronous client review

The introduction of clients and external collaborators to a design meeting automatically requires an extra level of effort on behalf of the designer. It’s not enough to walk external stakeholders through design work; detail matters and winning the first impressions might be even more important than simply delivering a solid presentation. Here’s our take on how to present the final designs for the Shopin app to a client:

All screens have been wrapped in device skins for visual consistency and backward connectors were introduced with their own, distinct style. Additionally, the project logo has been added on the top left corner as a little detail that clients might appreciate.

Most importantly, however, you can see that screens have been grouped in sub flows, so as to make the diagram easier to follow. Each sub flow is represented by a rectangle with its own name. If you open the presentation on a browser window, you’ll notice something that is sure to delight members of the audience with a short attention span: the first board contains the whole user flow, whereas other boards contain each sub flow separately. This allows the audience to focus on details and understand how the user experience will look like at each stage of using the app.

This user flow took approximately 20 minutes to build in Overflow, after designs were imported from the design tool.

Asynchronous client review

As mentioned earlier, asynchronous presentations are challenging because the presenter has little control over how the audience interacts with the content, so many things might fall through the cracks. As clients and external stakeholders could have minimum prior exposure to the work done by the design team, here’s how we thought to present the Shopin app to them asynchronously:

Overflow Stories was used once again to create a step-by-step walkthrough that gives external stakeholders some much valued context and poses specific questions for them to answer. Sub flows remain visually separated from each other and the same board system was used to showcase each sub flow separately.

Most distinctly a legend was added at the bottom right corner of the screen, explaining what each connector style represents. Different connector styles can be very confusing for any first-timer, therefore this will help address any questions the audience may have.

This user flow with the accompanying step-by-step guide took about 30 minutes to build in Overflow, after syncing design screens from the design tool.

Get away with less

As you can see from the above examples, design presentations don’t have to be a time-consuming drag. Depending on the audience, designers can choose where to add more detail and how much context is needed for a perfect design walkthrough. Additionally, using specialized diagramming tools can help speed up the process significantly and produce a design artifact that can work either in a synchronous or asynchronous setup.

How do you like to present your work? Let us know by dropping a comment below or get in touch with us on Twitter, Facebook, or Instagram!

Article written and curated by Constantinos Vitoratos.

Build meaningful design presentations and engage your audience in design critique