flow.png

User Flow Kit

Flowkit_main.jpg

User Flow Kit

UX RESEARCH / SKETCH KIT

User flows illustrate the scenarios that a user would experience and provide product teams with a 30,000 foot view of how their users might interact with their offering. User flows enable designers to uncover dead ends in the UX, provide alignment with stakeholders and development, and enable the end-to-end experience for their users.

Contributors: Andi Lozano, Paula Le


The problem

Every designer on IBM Security had their own “flavor” of what a user flow looked like. This caused inconsistencies across product teams and cognitive load on the individuals who were trying to consume the UX work. We needed a standardized way to create user flows across our team.

Audit existing user flows

We conducted two audits:

  1. Competitive audit of applications that existed— we knew we would not be able to receive funding from our business unit to buy one of these applications. We wanted to get an idea of what was in the market to inform how we might create one from scratch.

  2. Existing UX Designers’ user flows and commonly used elements throughout their work.

User research

research.png

Research objectives

  1. Understand the primary goals and needs of a UX designer when creating user flows

  2. Understand how consumers of user flows utilize them currently

  3. Understand what consumer needs are when utilizing user flows to accomplish their work

Interviews

We interviewed 6 UX designers (producers) and 10 consumers ( visual designers, front-end developers, offering managers) .

Synthesis

Listening back to 600+ minutes of interviews with consumers and producers of user flows, we identified key findings from our sessions.

user research.png

Key findings

  • User flows help UX Designers externalize their thinking and serve to align teams by providing a reference resource for multiple disciplines.

  • Style matters, but should not be consuming a lot of time when creating user flows.

What value does this flow kit provide?

This kit is a template for UX Designers to work from when approaching a complex problem, building out user flows, or using thumbnails to gain alignment with product teams. It allows designers to focus on the experience and user journey, rather than getting tripped up in aesthetics.

flowkit.png

Beta release

We released a beta version of the flow kit in March 2020 and asked that designers on the team use it, Hulk smash it, and help us improve the next iteration.

The kit includes:

  • Guidance on how to get started and build thumbnail user flows

  • User need templates and persona illustrations

  • Required elements to use to standardize on visual representation of flows across the Security design team

  • Optional elements are provided for UXers to grab and modify. These are things such as notes, content + actions, and additional context that may help a designer communicate user flows to the needs of their product team and stakeholders.

Because of this kit, I can create my user flows in a third of the time.
— UX Designer, IBM Security
flow kit.png
flow kit 3.png
flow kit4.png

Looking forward

Even though this kit was hit on our team and increased the efficiency of UXers at all levels, we still look to solve a few more problems in the next release:

  1. From our research, a user pain point was not knowing which version of a user flow was the most up-to-date. Version control of user flows remains on the responsibility of the producers for now.

  2. Collaboration is key for some UXers. Toolkits across multiple mediums (outside of Sketch) will be a top-of-mind consideration in the next release.


The user flow kit is for internal IBM use only. Please contact me if you would like more information about this project.