Distinguish between user journey analysis and BPMN-based process modeling, and how this can contribute to improving your System Design skills

Photo by Nik on Unsplash

User Journey is about understanding and improving the user’s experience with a system.

BPMN is about understanding and optimizing the business processes that make the system function.

User Journey and Business Process Model and Notation (BPMN) are both tools used in the design and analysis of systems, but they serve different purposes, focus on different aspects, and are used by different audiences.

Both are valuable tools and are often used in conjunction to provide a comprehensive view of a system from both the user’s and the organization’s perspectives. However it might be tempting to use one tool for something that the other tool is better at, this brings us to define how they differ in first place:

Defining and differentiating our tools

User Journey

1. Focus: Concentrates on the user’s experience and interaction with a product or service, normally within a website or application. It maps out the steps a user takes to accomplish a specific goal.
2. Audience: Primarily used by UX/UI designers, product managers, and customer experience professionals.
3. Scope: Limited to the user’s perspective, which may be just a small part of an entire business process.
4. Elements: Includes touchpoints, emotions, pain points, and the overall experience of the user.
5. Visual Representation: Often represented as journey maps, storyboards, or flowcharts, which are less formal and standardized compared to BPMN diagrams.
6. Objective: To improve user satisfaction and usability, by identifying pain points and opportunities for improvement in the user’s interaction with the system.
7. Granularity: May include very fine-grained details, such as emotional states, that are not usually captured in BPMN.
8. Interactivity: Focuses on how the user interacts with the system, which may include multiple channels like web, mobile, customer service, etc.

Process Modelling with BPMN (Business Process Model and Notation)

1. Focus: Centers on the internal/external processes of an organization. It outlines how different tasks are coordinated to achieve a business objective.
2. Audience: Primarily used by business analysts, process designers, and IT professionals.
3. Scope: Covers the entire business process, which may involve multiple roles, systems, and decision points.
4. Elements: Includes tasks, events, gateways, and sequence flows among other standardized notations.
5. Visual Representation: Uses a standardized set of symbols and notations, making it easier to communicate across different stakeholders.
6. Objective: To optimize and standardize business processes for efficiency, compliance, or transformation.
7. Granularity: Focuses on tasks and decision points, usually at a level that is relevant for organizational efficiency and effectiveness.
8. Interactivity: Focuses on how different components (people, systems, etc.) within an organization interact to complete a business process.

Because both tools are visual, they use flows as part of their visual representations. The flow is no more than the direction of the system being represented, or the series of actions that happen. The flow is heavily influenced by the focus and scope of each tool. If we look again at those characteristics we can define the flow as follows:

• User Journeys represents a page flow
• BPMN represents a process flow

And both flows are therefore different in nature, because the tools that define them have different focus and scope. We can then note a series of differences using some of the same properties to differentiate the tools that define them.

Page Flow

1. Focus: Page flow is concerned with the navigation between different pages or screens in a user interface, often within a single application or website.
2. Audience: Primarily targeted at UX/UI designers, front-end developers, and product managers.
3. Elements: Includes pages, user actions, and the transitions between them.
4. Objective: To create an intuitive, efficient, and user-friendly navigation experience.
5. Granularity: Usually deals with the layout and sequence of individual pages/screens and the user interactions that trigger transitions between them.

Process Flow

1. Focus: Process flow is concerned with the sequence of steps or activities that are undertaken to achieve a specific business or operational goal.
2. Audience: Targeted at business analysts, process designers, and operational managers.
3. Elements: Includes tasks, decision points, roles, and the flow of data or control between them.
4. Objective: To optimize a set of activities for efficiency, effectiveness, and compliance.
5. Granularity: Can range from high-level overviews of business processes to detailed workflows, potentially spanning multiple systems and organizational boundaries.

In short, Page Flow is about the user’s navigation experience within an application or website. Process Flow is about the sequence of business activities and decisions. The difference in the concept of both is clear. However there are little nuances in the tool selection when we want to work with Page and Process Flows. For the BPMN user a question that arises at this point is:

Can BPMN map page and process flow?

As we have seen. BPMN is primarily designed for process flow modeling, capturing the sequence of activities, decision points, and roles involved in a business process. It’s a tool for understanding, analyzing, and optimizing business processes.

However, BPMN can also be adapted to represent page flows to some extent, especially if the navigation between different pages involves a simple logic or if you want to model a high-level or overview flow, similar to the so-called strategic models in business process. For example, you could model a user’s journey through an e-commerce checkout process, capturing decision points (“Is the user logged in?”), tasks (“Display cart”), and events (“Order submitted”) as to present this model to a group of stakeholders.

But attention, not all user journeys are candidates to be represented with BPMN.

Limitations

While BPMN can be adapted for page flow, it may not be the best tool for that purpose. BPMN’s strength lies in its ability to model complex business logic, data flows, and organizational interactions, which are often overkill for page navigation scenarios. Tools specifically designed for pages, like wireframes or sitemaps, are often more appropriate for that context.

If BPMN is limited for representing Page Flows then there must be a better way to do it.

What would be a good tool to map page flow?

While there isn’t a universally standardized notation for mapping page flows like BPMN for business processes, there are several commonly used techniques and notations for representing user interactions and page flows within a system. The most commonly used methods for mapping page flows in the context of user experience (UX) design, and web development are:

1. Wireflows combine the elements of wireframes and flowcharts to provide a detailed visual representation of the user’s journey through a product. This method is especially useful when the layout and design of individual pages are integral to understanding the flow.
2. Sitemaps are commonly used in the early stages of web development to outline the hierarchical structure of a website. While they don’t capture the dynamic flow of user interactions, they serve as a useful starting point for understanding how pages are connected.
3. Storyboards are often used in UX design to capture both the sequence of screens and the user’s interactions with them. While not as formalized as some other methods, they are excellent for capturing the qualitative aspects of user experience.
4. Flowcharts are one of the most straightforward and widely recognized ways to map out page flows. They use a set of standardized symbols to represent different types of actions, decisions, and endpoints, making them easy to understand.
5. User Flow Diagrams are specialized flowcharts tailored for UX design. They focus on the steps a user takes through an interface, including decision points and alternative paths. These are particularly useful for mapping out complex interactions in digital products.
6. Swimlane Diagrams are useful for mapping out more complex flows that involve multiple actors or subsystems. Each “lane” in the diagram represents a different user role or system component, making it easier to understand interactions and dependencies.

Each of these methods has its own strengths and weaknesses, and the best choice often depends on the specific needs of the project. It’s also common to use multiple methods in conjunction to capture different aspects of the user’s journey and interaction with the product.

A subtle difference between the tools listed above is that, flowcharts, user flow diagrams and swimlane mappings are all in a way similar to BPMN but lack the standardization and the complex syntax that BPMN has, this makes them lighter to use and eventually easy to migrate to BPMN if required by the project, but it also make them lose the qualities that a page flow needs. Wireflows, sitemaps an story boards are fundamentally more expressive because one can see the actual site, mocked obviously, and that provides more deepness to the page flow representation.

Should you give up using BPMN for modelling page flow?

Summarizing the sections above we arrive at the following conclusions:

• We know we have notations for visual representations of flows, some of those notations have a defined set of rules, like BPMN
• There are lighter versions, without many rules such as flowcharts
• We also know that BPMN is for mapping a specific kind of flow, process flows, that focus on a business goal rather than navigating a page.
• We know that navigating a page is basically page flow, and that is different from process flow

If by now you have the suspicion that flowcharts, BPMN and co. are not the best methods to map page flows, let me tell you that your suspicion raises a valid point: while those tools are versatile and widely understood, they may not capture the nuances of user interactions and page flows as effectively as other more adequate methods.

So why are they so used instead of other methods that can map page flow better? here are some reasons why flowcharts are still commonly used for mapping page flows:

1. Accessibility and Familiarity: Flowcharts are one of the most universally recognized forms of diagramming. Most people, regardless of their role or background, can understand a flowchart. This makes them a go-to tool for quick communication across different departments or stakeholders.
2. Simplicity: Flowcharts are easy to create and modify, which can be especially useful in the early stages of a project when ideas are still being formed and iterated upon.
3. Tool Availability: Many commonly used tools like Microsoft Visio, Lucidchart, and even whiteboards can be used to create flowcharts. This makes them a convenient option for many teams.
4. Lack of Standardization in UX Field: Unlike business process modeling, which has standardized notations like BPMN, the field of UX design lacks such universally accepted standards for mapping page flows. This leaves room for a variety of methods, including flowcharts, to be used.
5. Good Enough for Simple Flows: For simple websites or applications, a flowchart may provide sufficient detail to understand the user’s path through the system.

However, for more complex interactions, specialized tools like Wireflows, or Story Boards might be more appropriate. These tools can capture elements that standard flowcharts and BPMN might miss, such as:

• User States: Different modes or states that the user might be in, which affect their available actions.
• Emotional Journey: Some advanced mapping techniques also capture the user’s emotional state at different points in the journey.
• Multi-User Interactions: Scenarios where multiple users interact can be more easily modeled with specialized notations.
• Page Elements: Different elements that compose the page and are relevant for understanding the flow, can be more easily modeled with other tools and notations.

So the answer is, you should use BPMN and flowcharts as complementary to other methods, in other words, use them in conjunction with other tools like wireflows, sitemaps, even with wireframes, and user stories.

In summary, while flowcharts are a commonly used tool for mapping page flows, and migrate them to BPMN might sound like a good idea, both tools are not always the best fit for more complex scenarios. The choice of method often depends on the specific needs of the project, the audience, and the level of detail required.