Journey Map: A Tool to Approach Customer Experience

The companies that focus on maximizing satisfaction, with regard to the entire customer journey, are more likely to increase customer satisfaction, loyalty and advocacy among their customers than companies that focus on parts of the business in a segmented way. In order to improve customer satisfaction, focus should be on the whole customer experience. Customers value the ability to be in constant and effective contact with a company through multiple avenues at the same time. An emerging tool to help focus on the customer experience is a customer journey map. Journey maps can help to understand and visualize needs and frustrations that a customer goes through when interacting before, during and after with a company. This article explains the steps and the process of how to create a journey map.


What is a Journey Map?

(Fig. 1 – User Journey Map of London Cycle Hire)


A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points. – Kate Kaplan

In a simple way, journey mapping starts by creating a timeline with a series of customer  needs and actions. Then, the actions and needs are fleshed out with customer’s thoughts and emotions at every step of the journey. Finally, the customer journey is represented in a visualization which creates a narrative used to communicate insight that will inform processes and decisions in the organization.

Journey mapping creates a holistic view of customer experience, and it’s this process of bringing together and visualizing customer’s experiences at different moments and the ways they engage with a company that stakeholders can start a collaborative conversation and change.


Key Elements of a Customer Journey Map

(Fig. 2 – Deconstruction of a Journey Map)


There are a variety forms of journey maps which vary depending on the business goals and type of organization. However, for a journey map to be effective it needs to have these key elements.

Zone A: The lens provides constraints for the map by assigning (1) a persona (“who”) and (2) the scenario to be examined (“what”).

Zone B: The main part of the map is the visualized experience, (3) phases of the journey. The (4) actions, (5) thoughts, and (6) emotional experience of the user has throughout the journey can be supplemented with quotes or videos from research.

Zone C: The output should vary based on the business goal the map supports, but it could describe the insights and pain points discovered, and the (7) opportunities to focus on going forward, as well as (8) internal ownership.


Steps of a Customer Journey Map

(Fig. 3 –The five key, high-level steps in the process of customer journey mapping can be scaled to your scope and timeline.)


One common frustration about the process of customer journey mapping is the lack of organization. Following these steps can help the process.

  1. Aspiration and allies: Defining the goal and educate and engage the participant departments of the organization.
  2. Internal investigation: Data. Gathering existing customer data and research that exists throughout the organization.
  3. Assumption formulation: Formulating a hypothesis of the current state of the journey and planning more customer research.
  4. External research: More data. Collecting new customer data to validate (or invalidate) the hypothesis journey map.
  5. Narrative visualization: Combining existing insights and new research to create a visual narrative that depicts the customer journey.


Examples of Journey Maps

(Fig. 4 – Brand Experience Journey Map of Lancome Paris)


(Fig. 5 – Journey Map of Linda



Journey maps are highly used in organizations that care about their customers. Journey maps help to understand and visualize needs and frustrations that a person goes through when interacting with an organization. Journey maps can be applied to any type of industry. It could be a product, service or retail. The goal of a journey mapping exercise is to reveal opportunities to address those customers’ frustrations and identify the gaps between touchpoints and channels along the customer journey with an organization. By mapping the customer’s experience, these problems could be identified and new strategies could be implemented in order to offer a better holistic experience to customers.


When and How to Create Customer Journey Maps –

The 5 Steps of Successful Customer Journey Mapping –

Journey Mapping in Real Life: A Survey of UX Practitioners –

Design Critique: New York Sports Clubs (NYSC), (iOS App)

About a year ago, NYSC renewed their brand. Part of their brand strategy included the re-design of their iOS Application. The App allows users to plan their work out by searching and signing up for classes, setting up their goals, and checking into the gym with their phone. This article analyzes some features of the interface of the NYSC app and discusses if this represents good or bad design according to Norman’s concepts in The Design of Everyday Things.

(Fig. 2)

When the user opens the app, it takes the user to the landing page which is the Check-In page (Fig. 2).  This page displays a barcode in the middle of the screen which allows the user to check in into the gym by scanning the phone at the front desk. This represents a good affordance because it is understandable what can be done with the the barcode and it has good signifiers that explain how to do it, such as the text on the top of the screen “CHECK-IN BEFORE YOU WORK OUT” and the arrow pointing to the barcode. It is very clear what can be done and how can be done.

(Fig. 3)

Also, the Check-In page has a feature that lists the upcoming class the user has signed up. This will be listed at the bottom of the screen. The upcoming class feature works together with the scanning of the barcode. Once the barcode is scanned at the front desk by the receptionist, he or she sees in the system the member has a class, so the receptionist proceeds to give a class pass to the member.

The barcode has the perceived affordance of being scanned. This is something that people have learned. Norman calls this interpretation as a cultural convention which is also a special cultural constraint, meaning people in some cultures use some things in certain ways. Here in the US, we see barcodes on products, ID cards, pharmacy cards, grocery cards, gym key tags, etc that are scanned. The barcode is an innovative feature incorporated into the app. Designers must have used a root cause analysis to introduce this feature where they designed and digitized it, so they don’t need the common physical tag to check-in into the gym.

(Fig. 4)

If the user hasn’t signed up for a class the Check-In page will show a feature to find a class instead (Fig. 4) which is linked to the Classes page on the navigation bar at the bottom of the screen. This is a good representation of the seven stages of action which provides the designers a useful framework in the design process to make this feature is understandable and discoverable to the user. Norman explains that there are two parts to an action: executing an action and then evaluating the results which needs understanding. Here the goal of the user is to work on his goal to be fit and healthy, so they go through the gulf of execution and the gulf of evaluation. The signifier of the tab “Find a Class” helps the user to bridge the gulf of execution and getting the feedback of having reserved the class in a notification, creates a emotional state of satisfaction.


               (Fig. 5)                                       (Fig. 6)                                       (Fig. 7)

On the Classes page, there are two tabs on the sub-navigation at the top of screen: Discover Classes and Search Classes. The default screen of the Classes page is Discover Classes. This is understandable and discoverable to the user because of the good signifier on the Discover Classes tab which is highlighted with a light blue color. On this page, there’s a full screen image which is confusing and difficult to discover how the user can possibly perform the action of looking for classes (Fig. 5).  This is a representation of bad signifiers. However, because the screen affords to be touched the user can discover that the page is scrollable and there’s more content and information by scrolling down the screen (Fig. 6). At the end, there’s a carousel to scroll through the categories of classes offered. By selecting one of them, the classes in that category will be listed at the bottom (Fig. 7). This part is also confusing and difficult for the user to figure out how to find classes. There are no signifiers that suggest that the carousel of the categories is scrollable. The way the third category is introduced on the right side of the screen is not clear. It looks more like a bad design decision. Also, when selecting one of the categories, it doesn’t indicate which category of classes the user has chosen. This is a representation of bad feedback.

                                                 (Fig. 8)                         (Fig. 9)

My recommendations to improve the interface of this page are detailed in this mockup. The image shouldn’t take the whole screen, instead it should take only a part of it, leaving space to show more of the content at the bottom. This would be a good affordance and signifier for the user to understand that there’s more content to be discovered by scrolling down (Fig. 8). When the user scrolls down to the categories and list of classes section, there’s already a category highlighted which indicates to the user that they are seeing the list of classes of the chosen category (Fig. 9). When the user selects another category on the carousel, the user receives a good feedback of their action by the category being highlighted. Finally, the position of the carousel should be adjusted, so the third category can enter the frame of the screen. This will be a good signifier to the user to understand that there’s more to see and scroll. These screen layouts will help the user to bridge the gulf of execution with no errors, knowing what action can be performed and how.

Overall, the new NYSC App has a good design. It has innovative and effective features from which the members of the club can benefit by using the app. However, there are still some gaps in the principles of good design within the interface. I believe making these improvements will make the interface of the app more robust which will enhance the experience of the users.