Mapping User Journeys Using Visual Languages

April 7, 2014

A user journey, or journey map, visualizes a path or flow through a Web site, application, or service experience—from a starting point to an end objective—based on the user’s motivations and experiences. Journey mapping helps us to create a mental model of an experience that the user goes through to achieve a goal. This valuable information lets us document and visualize existing paths that the user takes and, in turn, analyze and improve upon them. This sounds wonderful does’t it? Well, it is. But we often encounter problems when we start trying to communicate these journeys in a language that presents well and adds value.

A common approach that UX architects have taken in visualizing journey maps has been to use the symbols of flowcharts and process charts—that is, generic shapes like boxes and arrows—in representing these paths. But we’ve lacked any meaningful way of representing the actual experience, and this is at least as important to understand and use as the basis for our work as the process flow itself. The conventional approach to journey mapping, shown in Figure 1, is uninspiring.

Champion Advertisement
Continue Reading…
Figure 1—Example of a user journey
Example of a user journey

We can add value by introducing the user or customer perspective and narrative, which helps both the designer and anyone who reviews a design to understand what the user is thinking at various stages of a user journey. These insights remind us why the user might have made certain decisions, but also helps us to understand the user’s reactions to what was happening at that moment.

Not only should we use words to describe what the user is feeling, we can also benefit from visualizing experience triggers. One way of doing this effectively is using visual languages. The use of illustrative elements to communicate a message to an audience is fundamental to any visual language. For visual elements to communicate effectively, they need to be clear, show connections, and ultimately, be easy to follow, understand, and replicate.

Visual Languages from Wayfinding

Visual languages are in every-day use to communicate messages of various types of wayfinding. They are in common use in transportation networks such as highways, metros, and aviation. Their objective is to guide, inform, highlight, and provide feedback about the environment. We apply the same principles when creating journey maps for a Web site, application, or service experience.

Whether analyzing an existing flow or representing a new one, using existing travel frameworks is helpful in communicating your insights. They already have an existing symbology in place that you can adapt and apply in representing a journey for a Web site, application, or service.

Mapping with Metro Symbols

Ever since Harry Beck introduced his map of the London Underground in 1933, its distinctive style has become synonymous with mapping interconnected routes and travel journeys alike.

Eighty years on and Harry Beck’s design is just as relevant today as it was then. It seems only fitting to see it adapted for use in mapping digital journeys, as shown in Figure 2. There is an existing framework in place to communicate single and multiple paths, changes, interconnections, and diversions and, in general, to represent an interconnected Web.

Figure 2—Example of journey mapping using metro symbols
Example of journey mapping using metro symbols

The simplicity of the London Tube map and all the other city metro maps makes them accessible to the general public. They do, however, have some shortcomings as wayfinding systems. Their main objective is to help people find the right journey to take and see where to switch trains to reach a destination, which they does very well. But they don’t allow us to understand the experience of a journey. Journey mapping lets us see the interconnections and get a broader view.

Mapping with Highway Symbols

In Britain, the Department of Transport and Driving Standards Agency created the Highway Code and launched it in 1931. There are over 300 numbered rules, plus the nine annexes that cover pedestrians, animals, cyclists, motorcyclists, and drivers.

The extensive number of symbols that are part of the Highway Code makes it a really useful visual language for digital applications. The symbols relate to road signs, road markings, vehicle markings, and road safety, which you can adapt and incorporate when digitizing them. Because there are a lot of symbols and a high level of crossover, you can create detailed journey maps without compromising the meanings that are associated with the symbols that you use, as shown in Figure 3.

Figure 3—Example of journey mapping using highway symbols
Example of journey mapping using highway symbols

The Highway Code is globally recognizable. Though the road symbols in each country differ slightly, their fundamentals are still the same. There are symbols for the main roads, actions, diversions, and directions. There is some variation in the details, but this helps to localize them. Nevertheless, this is a framework that communicates well internationally wherever there is an extensive road network in place. Since there is a reliance on already having an extensive symbol library in place, this communication tool does’t work well in countries where there is a less developed highway code.

Barriers to Globalization

In practice, travel-symbology systems are very effective in getting all project stakeholders and resources engaged in journey mapping, resulting in better co-design, collaborative results, and acceptance.

There is, however, a problem with the techniques that I described earlier. They can be less effective if you need to work with or share documents with people from multiple geographic locations. A highway map that is easy to understand for one audience could be confusing to another—thus, defeating the purpose of using a visual language to enhance efficiency and effectiveness. While it’s possible to apply some of the systems in different geographic locales, when you have teams that comprise people of multiple nationalities, using systems that are specific to one geographical area can become problematic. In the diverse society in which we live—which is further intensified online—multicultural teams are fast becoming the norm rather than the exception.

It’s tempting to just use boxes and arrows to be safe, but there are ways to retain the power of the travel-symbology systems in creating user journeys, while addressing the geodiversity issue. One way we do this at Entropii is by using air travel as our metaphor.

Aviation Symbology

Starting with the excellent standards set by AIGA, we can use familiar wayfinding symbols to direct flow, highlight security, and document check-in style processes such as register, sign in, and purchase. With some intelligent graphic design, it is also possible to introduce more specific, bespoke iconography to a project. As long as you express the overall workflow using the visual language of the air-travel metaphor, your user journeys remain easy for all to understand. Figure 4 shows a set of air-travel symbols in a journey map.

Figure 4—Example of journey mapping using air-travel symbols
Example of journey mapping using air-travel symbols

Within the visual language of air travel, there are a lot of symbols and processes that you can apply to journey mapping—for example, check-in, baggage drop-off, boarding, boarder control, and baggage claim—but not everything is relevant. The processes are harder to adapt and require deeper thinking when applying them. You can use the metaphors of navigating around an airport using travelators and escalators; first class and business class, and baggage drop-offs to distinguish the different journeys that you map out. You can use other symbols such as duty-free or gate to show where there is a delay. There are enough symbols available to get any message across.

Industry Adoption of Visual Languages

At Entropii, we have used all of these approaches on a number of projects—both local and global. We’ve used the Highway Code with UK-based clients who work in the charity, finance, and cloud-computing sectors. The Highway Code is in use across the entire nation, which makes it a good point of reference for all UK clients—not only those that are based in London. The level of maturity of the available symbology makes it easier to create highly sophisticated journey maps and capture the complexity of existing journeys.

For some of our London-based clients, we’ve applied the Metro Maps framework to visualize interconnected journeys for a process-oriented project—for example, a campaign-creation workflow. For clients who are based in London, their familiarity with the Underground and the Metro frameworks let us use them to show the main journey as well as secondary and tangential journeys.

With our international clients, we have adapted the Highway Code, making it suitable for use with clients in specific locales. For a project that we worked on with a Saudi Arabian client—from a country where there is no underground in place—we used localized transportation symbols to recreate journeys for e-services. South Korea’s Seoul Subway and Rail network is more developed than that in London, but it is highly complex, and there isn’t any logical meaning behind each line. In this context, we used the South Korean highway code, which is similar to the UK Highway Code, making it easier to apply.

More recently, as a result of Entropii having a more international footprint, we’ve started to apply our air-travel symbol sets. Using an internationally accepted framework like air travel has made it easier to share visualizations with multiple companies in different locales. Everyone is able to understand the journey maps and contribute to their creation.

While the use of travel symbology is not an industry standard, the companies with whom we have collaborated have successfully adapted these frameworks to their projects. And, although the use of symbols to highlight actions and emotions has not yet been as fully thought out, our partners and clients have easily incorporated them into their journey maps.

Prospects and industry experts alike have wanted to understand the use of these visual languages in creating journey maps for their projects, and we have been successful in teaching them how to work with these visual languages.

The focus of our course on journey mapping has been introducing the various symbols of each framework and showing how to apply them in creating project deliverables. We also touch on the theory behind the use of this approach, but mainly focus on the application of the symbols to create professional project documentation.

In Summary

The use of wayfinding systems does not focus on aesthetics, but on the best ways of communicating key flows, barriers, and necessary improvements to stakeholders and clients, as well as to show opportunities to streamline experiences. Using the common framework of boxes and arrows just does’t do justice to the value that you can obtain from journey maps.

The well-known travel-symbology systems that I’ve described are easy to learn and adapt—unlike a bespoke, or custom, toolkit, which would require everyone to learn it from scratch.

You can use an existing, real-world framework and reapply it to create usable journey maps. These analysis tools add value. Even people who haven’t been exposed to the frameworks before can gain lots of insights from them. As awareness of this technique grows, it is my hope that the use of these usable frameworks will become widely accepted in the industry. 

Principal Design Consultant at EY-Seren

United Arab Emirates

Shean MalikShean has over five years of industry experience and, for the past two years, has been working for Entropii as a User Experience Consultant. His work there involves user research, journey mapping, and wireframing. Prior to working for Entropii, he worked for Zabisco as an Information Architect and ran his own usability-testing company, Think Usability. His educational background includes earning an MSc in Interactive Systems at University of Nottingham and a BSc in Information Systems at Nottingham Trent University.  Read More

Other Articles on Communicating Design

New on UXmatters