Component-Oriented UX: Building and extending User Journeys

This is a continuation of Creating Effective User Journeys for Agile Teams, please start by reading that first.

Due to the large amounts of research data that classic user journeys need to encompass, you’ll never find two created with a similar approach, either text-based or as a visual representation.

But why? That’s mostly due to the fact that designers try to describe both online and the offline interactions when creating the user journeys. Presenting the context of use as well as the user’s emotional state while performing certain tasks is a lot, especially when analysing qualitative research data that the UX designer needs to interpret. And due to that, user journey creation turns into a very painful and time-consuming process.

But by dividing work in smaller chunks, these user journeys can detail the user’s steps throughout individual components rather than encompassing the whole application.

The component oriented approach that I am using is inspired by the Unified Modeling Language and starts from illustrating a small piece of functionality provided by the application. And this needed functionality can be detailed through a specific user journey.

And how? The sequence of actions and outcomes is represented through series of simple use-case diagrams showing the steps that the user makes in order to complete a goal.

Exploring use cases in order to create user journeys? Both use cases and user journeys have common ground, capturing interactions with an application. As user journeys focus on the user’s experience with the entire system, by breaking them down, we end up with series of use cases that are specific to sections of the application.

In reverse, by building on simple use cases, the designer can identify the current requirements. More than that, by extending them, new opportunities for further improvement appear, improving the customer’s experience overall.

Let’s take an example: the user’s need to verify his account on an online payment system in order to withdraw money.

A basic user journey for this specific task would be:

1. The notification for the need to verify account appears;
2. The user accesses the Account verification page;
3. The user Uploads his ID;
4. The account is verified;

But we know that in the real world, ID verification can succeed or not depending on the system check so an extra step can appear, adding more detail to our user journey:

And in the case of an error we need to provide the user with the option to verify his account through an alternative method. In some cases, when we conceptualise the user journey we might find out that certain features are not clear so in that situation we will need to come back later and refine that step:

Breaking out this piece of functionality (using an alternative method to verify the account) into a separate user journey gives us greater control over how development teams interpret our designs.

So we can continue refining the user journey further on, by adding system notifications that detail the connections between the steps in our journey:

I usually create the user journeys in Axure, my tool of choice when creating UX deliverables. I prefer it because I can map the user journeys to the actual wireframes and prototypes, making it easier to follow when presenting. Below you’ll find an example of a component oriented user journey template that I use when detailing new components.

So what do user journeys consist of?

• The task

This is the user desired outcome from the journey. In our example, this might be the user’s desire to withdraw money;

• The steps

The steps are the actual actions the users need to take in order to complete their journey;

• The decision points

Decision points are blocks that represent the need for the user to make a choice in order to carry on through the journey;

• The start and end steps

Start and end steps show the beginning and the end of the user journey;

• The connectors

Single and double-headed arrows are used to show the direction in which the user moves between steps;

• (Optional) Notes
• (Optional) External factors

The elements a user needs to complete the task that are outside of the application.

The success of documenting our prototypes with user journeys can be unpredictable, depending especially on the development team’s need for detailed diagramming.

Nevertheless, creating user journeys is a valuable part of the analysis and design process as by providing a visual overview of a component’s functionality, the communication and collaboration between the design and development teams will definitely improve.

If you liked this, click the ♥ below. Follow me and UX Design Today for more articles on UX Design & Agile practices.