Workflows

4 min readSep 23, 2022

Logically plan a streamlined series of steps to complete a particular task

Video Tutorial on How to Solve UX Problems Effectively Using Workflows

Workflows are also used to identify the scope at an early stage of the project. It’s main focus is on how you plan the sequence of steps for the user to complete a specific task like creating a booking appointment, purchasing a book etc.

Free & Discounted Udemy Courses — Explore Now

Let’s take a look at how to do workflows

Step 1: Identify the user and the scenario

The users and scenarios should be identified previously in the discovery phase. If not, the users and scenarios should be identified and defined.

For example, a scenario can be like “Alex (User) is a new student in ISB and likes to read a lot of books (Context), so she wants to register(Action) in ISB digital library to have access to all the books”.

Step 2: Write the user goal

Take a scenario to create workflows and clearly define the user goal for it, as a designer, what do you want the user to achieve from this scenario?. Based on the goal the workflow will change. So defining a proper goal will reflect on the workflow

For example, consider the scenario “After registering into ISB digital library, Alex wants to read the books related to business”. For this scenario, user goal can be like “To help users in finding the relevant books effortlessly”

Step 3: Draw the Workflow

There are many ways workflows can be created but the main intent of all of them is to have the best sequential order of user’s actions to achieve the scenario goal.

Plan what actions are required from the user to achieve the task
Draw the flow by mentioning screens through which the user will be navigating to take the actions
Name each screen properly and define a primary button (can also include secondary and tertiary if it’s required) the user will click on to move to the next screen.
Use arrows in the appropriate logic to connect each screen.
Emails and alerts are represented by icons; an envelope and bell respectively.

Source: Medium, blog.prototype.io Author: Ryo Mac

Step 4: Describe every screen

Every screen should be described to know what your user wants to achieve from that screen.

Underneath every screen there should be the following items:

Write the description relevant to the scenario
Focus on the details to put in the screen like (Functionality, navigation, information, actions etc) but not on the UI components

That’s how the workflows are created.

Context and variations of the workflows
The flow will change based on the context, type of users and application type who use the app.

For example, in Amazon website login is not compulsory till you are at the checkout step whereas in Facebook login is compulsory to create your account.

It’s always good to create more than one variation of a workflow for a scenario.

For example, creating an account on Facebook is simple. You have filled your basic details and the account is created whereas in Gmail there are series of steps to be followed to create an account. Though it is about creating an account these two applications have different flows of doing it.

Once all the workflows are created you can estimate the time and effort required to complete the application. These workflows can be easily created using pen and paper or can be digitally created using tools like UXPin, Draw.io, Sketch etc. The below image shows the example of workflow

The image contains scenario, user goal and workflow.

This is the description for Login/Signup screen. Each screen should have a clear description.

Tips / Best Practices

Think about multiple ways in which the goal of the scenario can be achieved.
Think at a high level rather than thinking about colors and UI components
Start workflows using pen and paper before digitizing so that you can ideate quickly on more number of ways
Do not plan the screen level information architecture while doing the workflows
Name every screen, sub screen and pop-up. It helps to quickly refer while presenting and discussing with others.

Checklist

Identify scenarios and their goals
Identify the screens
For each screen write descriptions
Give proper naming for each screen
Check if the goal is met or not after completing workflows
Ensure there is connectivity between the screens in the scenario
Document all the scenarios in one place.

Quick Question

What is the minimum set of information required to start workflows?

Deciding on a solution for the scenarios
Type of tool to use
Understand user problems
Idea about components to put on the screen

Leave your answer in the comments section below!