INSIGHTS

Thumbflows: A Flexible UX Storytelling Tool to Drive Consensus

Ryan Szepan
November 2, 2020

It’s a few weeks into a project. Everyone has taken their seats and logged into the web conference. The key bullet on the agenda reads: Review first iteration of product visual designs. You’ve even built a prototype to show participants the proposed end-to-end experience. But a few clicks into the walk-through, the meeting grinds to a halt. A key stakeholder has questions. Others chime in. Instead of showcasing your work, you find yourself bouncing between mock-ups, requirements documents, and pitch decks. Your hopes of forging consensus around the customer experience have faded.

We’ve all been in meetings like this. Frequent working sessions, well-documented business requirements, and extensive design iterations prove insufficient to establish consensus. The reality is that stakeholders and team members are often on different pages, and there are plenty of opportunities for misunderstandings and confusion when dealing with complex products, time-constrained activities, and geographically distributed teams. Executives may not be able to attend key meetings. Stakeholders can get lost in a sea of PDFs, Sketch files, and Google Docs. Not everyone pays attention to the latest Slack post. And some team members struggle with technically complex documents and detailed process flows. What if you could synthesize all of the complexities into one simple visual that conveyed the story clearly to stakeholders?

One approach: Thumbflows

If you work in a creative firm or are part of an in-house design team, you understand the importance of getting clarity and consensus from stakeholders early in the project. However, it can be challenging to find the right way to communicate the story to a diverse team with different needs and backgrounds. Over the past few years, our product design team has found a surprising level of success addressing this problem by using a hybrid kind of design deliverable we call a thumbflow. It’s an artifact uniquely suited for communicating complex product experiences and getting everyone on the same page. Our UX design work for clients like Adobe, Citrix, and Oracle has given us an opportunity to explore, iterate, and test several variations—each tuned for a slightly different set of needs.

A basic thumbflow that showcases flow, some design elements and the user interaction

A thumbflow tells a story of how customers interact with products and each other. It draws from a number of design artifacts and document types you’re already familiar with and is presented in an approachable and easy-to-consume format. Much like a flow diagram, it showcases a sequence of events and interactions, but it avoids the temptation to illustrate all possible scenarios and keeps the amount of technical detail appropriate for consumption by less technical team members. Like a wireframe, it includes a high-level, abstracted view of the product interfaces, but instead of representing all content and interface elements, only a thumbnail version of the screens are shown. This forces the designer to consider only the aspects of each screen that are essential to high-level storytelling and ensures that the document remains glanceable. Similar to journey maps and personas, it touches on who the user is, what they are doing, and why. It does this in a way that focuses exclusively on user actions and the relevant product screens, features, and workflows that exist to support their needs and activities.

Highly flexible, thumbflows can demonstrate interactions with multiple users

Other powerful attributes of thumbflows include:

  • Useful throughout a project. Thumbflows are certainly beneficial in the early stages of a project, but there are many other times they help out. For example, when hi-fidelity designs are being reviewed, thumbflows give teams a way to revisit or further develop a use case narrative. They can also help size up engineering efforts, acting as a playbook for product teams to create technical stories and requirements. We’ve even used thumbflows during user validation interviews as a guide to explain flow and UX.
  • Personalized to each situation. There’s no single recipe for creating thumbflows. They morph to meet specific business needs. The ones we have created are highly customized depending on what a particular product, team, or project requires for success. Some show single persona flows, while others highlight multi-persona, multi-device activities. Yours might incorporate attributes we haven’t thought of or needed.
  • Easy to create and revise.  While you can wait to create a thumbflow until after you have solid drafts of more traditional design artifacts approved, there is no need. A detailed product roadmap or a sketch on a whiteboard is enough to get started. Since thumbflows require minimal effort to build and consume when compared to other deliverables, multiple iterations can be created without burning too many hours. Feedback from thumbflows reviews can also provide invaluable, early guidance to help designers understand interaction models, reveal pain points, and test alternative scenarios.

A complex thumbflow that showcases an extended user experience, including switching devices

As for business benefits, thumbflows:

  • Help determine if you are solving for user needs. Thumbflows help everyone understand if they are building the best solution for end users. The combination of images and words clarifies even the most complex ideas and lends a human face to analytics data and research findings. We’ve seen many times when thumbflows uncovered an issue or surfaced a need that the team hadn’t thought of before or couldn't articulate clearly.
  • Allow you to focus on the best path and avoid dead ends. Teams often get drawn into the weeds too early, wasting time discussing details that might not even pertain to the final designs. Since thumbflows provide a high-level, concise explanation of what should happen and purposely omit technical requirements, everyone involved—design, development, and stakeholders—can reach consensus before investing too much time and effort. By avoiding erroneous work, design teams can spend more hours exploring new options and creative solutions.

An example of a thumbflow that incorporates Jira tickets to ensure engineering is also in the loop

Getting Started

Today is a perfect time to experiment with thumbflows. If a project is underway, you’ll have plenty of design artifacts to draw from. If it’s just starting up, think about incorporating thumbflows from the outset. You might want to begin with a simple one, or just jump right in with a more complex version if the situation warrants it. As the product evolves, so will your thumbflows. And the next project? The thumbflows will probably look very different. No matter what you come up with, we’d love to hear from you about your experience. Contact us at hello@proximitylab.com.

It’s a few weeks into a project. Everyone has taken their seats and logged into the web conference. The key bullet on the agenda reads: Review first iteration of product visual designs. You’ve even built a prototype to show participants the proposed end-to-end experience. But a few clicks into the walk-through, the meeting grinds to a halt. A key stakeholder has questions. Others chime in. Instead of showcasing your work, you find yourself bouncing between mock-ups, requirements documents, and pitch decks. Your hopes of forging consensus around the customer experience have faded.

We’ve all been in meetings like this. Frequent working sessions, well-documented business requirements, and extensive design iterations prove insufficient to establish consensus. The reality is that stakeholders and team members are often on different pages, and there are plenty of opportunities for misunderstandings and confusion when dealing with complex products, time-constrained activities, and geographically distributed teams. Executives may not be able to attend key meetings. Stakeholders can get lost in a sea of PDFs, Sketch files, and Google Docs. Not everyone pays attention to the latest Slack post. And some team members struggle with technically complex documents and detailed process flows. What if you could synthesize all of the complexities into one simple visual that conveyed the story clearly to stakeholders?

One approach: Thumbflows

If you work in a creative firm or are part of an in-house design team, you understand the importance of getting clarity and consensus from stakeholders early in the project. However, it can be challenging to find the right way to communicate the story to a diverse team with different needs and backgrounds. Over the past few years, our product design team has found a surprising level of success addressing this problem by using a hybrid kind of design deliverable we call a thumbflow. It’s an artifact uniquely suited for communicating complex product experiences and getting everyone on the same page. Our UX design work for clients like Adobe, Citrix, and Oracle has given us an opportunity to explore, iterate, and test several variations—each tuned for a slightly different set of needs.

A basic thumbflow that showcases flow, some design elements and the user interaction

A thumbflow tells a story of how customers interact with products and each other. It draws from a number of design artifacts and document types you’re already familiar with and is presented in an approachable and easy-to-consume format. Much like a flow diagram, it showcases a sequence of events and interactions, but it avoids the temptation to illustrate all possible scenarios and keeps the amount of technical detail appropriate for consumption by less technical team members. Like a wireframe, it includes a high-level, abstracted view of the product interfaces, but instead of representing all content and interface elements, only a thumbnail version of the screens are shown. This forces the designer to consider only the aspects of each screen that are essential to high-level storytelling and ensures that the document remains glanceable. Similar to journey maps and personas, it touches on who the user is, what they are doing, and why. It does this in a way that focuses exclusively on user actions and the relevant product screens, features, and workflows that exist to support their needs and activities.

Highly flexible, thumbflows can demonstrate interactions with multiple users

Other powerful attributes of thumbflows include:

  • Useful throughout a project. Thumbflows are certainly beneficial in the early stages of a project, but there are many other times they help out. For example, when hi-fidelity designs are being reviewed, thumbflows give teams a way to revisit or further develop a use case narrative. They can also help size up engineering efforts, acting as a playbook for product teams to create technical stories and requirements. We’ve even used thumbflows during user validation interviews as a guide to explain flow and UX.
  • Personalized to each situation. There’s no single recipe for creating thumbflows. They morph to meet specific business needs. The ones we have created are highly customized depending on what a particular product, team, or project requires for success. Some show single persona flows, while others highlight multi-persona, multi-device activities. Yours might incorporate attributes we haven’t thought of or needed.
  • Easy to create and revise.  While you can wait to create a thumbflow until after you have solid drafts of more traditional design artifacts approved, there is no need. A detailed product roadmap or a sketch on a whiteboard is enough to get started. Since thumbflows require minimal effort to build and consume when compared to other deliverables, multiple iterations can be created without burning too many hours. Feedback from thumbflows reviews can also provide invaluable, early guidance to help designers understand interaction models, reveal pain points, and test alternative scenarios.

A complex thumbflow that showcases an extended user experience, including switching devices

As for business benefits, thumbflows:

  • Help determine if you are solving for user needs. Thumbflows help everyone understand if they are building the best solution for end users. The combination of images and words clarifies even the most complex ideas and lends a human face to analytics data and research findings. We’ve seen many times when thumbflows uncovered an issue or surfaced a need that the team hadn’t thought of before or couldn't articulate clearly.
  • Allow you to focus on the best path and avoid dead ends. Teams often get drawn into the weeds too early, wasting time discussing details that might not even pertain to the final designs. Since thumbflows provide a high-level, concise explanation of what should happen and purposely omit technical requirements, everyone involved—design, development, and stakeholders—can reach consensus before investing too much time and effort. By avoiding erroneous work, design teams can spend more hours exploring new options and creative solutions.

An example of a thumbflow that incorporates Jira tickets to ensure engineering is also in the loop

Getting Started

Today is a perfect time to experiment with thumbflows. If a project is underway, you’ll have plenty of design artifacts to draw from. If it’s just starting up, think about incorporating thumbflows from the outset. You might want to begin with a simple one, or just jump right in with a more complex version if the situation warrants it. As the product evolves, so will your thumbflows. And the next project? The thumbflows will probably look very different. No matter what you come up with, we’d love to hear from you about your experience. Contact us at hello@proximitylab.com.

[et_bloom_inline optin_id="optin_1"]