{"version":3,"sources":["webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/pages/user-experience/user-journey-map.js","webpack:///./src/helpers/transformImages.js"],"names":["module","exports","withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","team","node","childImageSharp","alt","title","lindasjourneymap","brandityler","leadfeeder","style","marginBottom","ninjaoutreach","className","src","arrow","list","res","el","name"],"mappings":"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","file":"component---src-pages-user-experience-user-journey-map-js-682bd8d25bf25c6328c4.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","import React from 'react';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Img from 'gatsby-image';\nimport Link from 'components/ui/link';\nimport { transformImages } from 'helpers/transformImages';\nimport arrow from 'img/ui/arrow_white.svg';\n\nconst UserJourneyMap = () => {\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query UserJourneyMap {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"user-experience/user-journey-map\" }\n }\n ) {\n edges {\n node {\n name\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n }\n }\n `);\n const images = transformImages(edges);\n return (\n <>\n

What is a user journey – definition

\n

\n A{' '}\n \n user journey\n {' '}\n is the cumulative experience of a user while interacting with your product. It is a\n well-detailed explanation of each step your users take to complete specific tasks within an\n application, system, or a website. This lets you discover the current user workflow, as well\n as uncovers improvement areas. A user journey also provides a precise timeline of user\n actions and a visualization of their product interactions. When the user journey is\n documented by design and product specialists who are working on enhancing a product or\n service, it is usually known as a\n \n {' '}\n user journey map\n \n .\n

\n

\n In the next section, we shed some light on the specific benefits of creating a map of user\n experiences.\n

\n

The benefits of developing a user journey map

\n

\n Are you looking to give your company a boost and increase product sales? If done efficiently\n and regularly, user journey mapping can be one of the most effective strategies for\n uplifting a business. Here are some of the major benefits of generating a user journey map:\n

\n

Bringing the entire team on the same wavelength

\n

\n \n Mapping user experiences{' '}\n \n encourages collaboration and teamwork which aligns the goals and visualizations of everyone\n on board. Journey maps are a great option for delivering precise information that helps\n create a shared vision. These maps also form the basis of decision making as the entire team\n transitions into the process.\n

\n \n

\n Source:{' '}\n \n Unsplash\n \n

\n

Showcasing the user journey as a complete package

\n

\n A user journey is a long-drawn process that is completed by taking a series of\n \n specific steps\n \n . User mapping showcases these steps as an entire journey. This helps the team in discussing\n the goals of the journey including business and end-user goals and their alignment with the\n goals of the organization.\n

\n

Allowing for user scenario analysis

\n

\n \n User experience\n {' '}\n mapping makes it easy to evaluate and understand various user scenarios. It enables the team\n to{' '}\n \n test out several user journeys\n {' '}\n and select the best performing one via an informed process. Journey maps are best fitted for\n scenarios that involve a series of events such as shopping or taking a trip or describing a\n process that will involve a set of transitions over time.\n

\n

Identifying the user journey loopholes

\n

\n Journey mapping lets you recoil and observe the entire user journey process with a different\n lens. The weak links and loopholes that you were unable to see before now become apparent.\n This also helps you understand the problems experienced by your end-users when interacting\n with your product. On user maps, these points are generally represented as ‘dips’ in the\n journey diagram (see the example below), so you can spot potentially underperforming areas\n and compare them with other low points in the journey. This also gives you the ability to\n create a list of the much-needed optimizations.\n

\n \n

\n Source:{' '}\n \n Wordstream\n \n

\n

Spotting unnecessary processes and touchpoints

\n

\n Another great advantage of a user experience map is the ability to identify steps that can\n be disposed of to make the user experience more seamless and cohesive. Eliminating an\n existing step that is no longer required or adding an efficient step to the process can all\n be achieved with ease if you have a journey map.\n

\n

\n Now that you understand the benefits of building a user journey map, it’s time to learn how\n to create one!\n

\n

The steps involved in building a customer journey map

\n

Step 1: Create comprehensive buyer personas

\n

\n Buyer personas are a reflection of your real customers that help in understanding their\n needs and expectations. It is a good idea to start with baseline personas and then go on to\n creating multiple ones to get a deeper understanding of who your buyers are exactly. It also\n helps in introducing your workshop participants with the users involved in the customer\n journey.\n

\n

\n To get you inspired, here’s an example of a buyer persona from the Munro American brand:\n

\n\n \n

\n Source:{' '}\n \n Alexa\n \n

\n

Step 2: Get a grasp of the user goals

\n

\n Do you know what your users want to achieve with your products and services? If you are\n unsure, then getting a sense of your user goals should be your primary focus.\n

\n

\n During the creation of a journey map, set up activities to unleash customer goals and then\n place them in a logical sequence. Such an arrangement can be used to provide structure to\n the map as you determine its specific stages.\n

\n

\n Each stage can have one or more corresponding goals attached to it, and should be\n categorized as easy or difficult. As a result, you’ll be able to uncover any frustrations or\n unexpected positive surprises that customers experience throughout the journey. Once you’ve\n determined goals for all the different stages, you can then proceed to building your\n hypothetical user map.\n

\n

Step 3: Map out the user’s touchpoints

\n

\n Maps are a great method of communicating the alignment between your customer’s expectations\n and their experiences throughout the user journey. Therefore, it is imperative to identify\n all the points of contact and situations (both online and offline) that arise when a client\n meets your brand. As you’ll notice, some touchpoints carry more weight than others. For\n instance, a bad check-in experience at a hotel can surely spoil your entire stay!\n

\n

\n To avoid setbacks and keep your customers happy, it would be wise to keep a record of all\n potential touchpoints that occur between customers and your organization.\n

\n

Step 4: Figure out customer pain points and frustrations

\n

\n Now is the time to focus on determining your customers’ pain points and roadblocks. This can\n be achieved by asking yourself user-centered questions and interviewing your customers and\n the customer-facing staff. A few potential questions to ask would be:\n

\n
    \n
  • Can my customers achieve their goals with my website?
  • \n
  • What are problems and areas for improvement?
  • \n
  • At which part of the process are customers abandoning purchases and why?
  • \n
\n

\n Once you know the roadblocks, mark them down on the user journey map. Also, jot down the\n areas where you are performing well but could use some improvements.\n

\n

\n If you want to dig deep into your users’ experiences, you can also refer to our list of{' '}\n \n 24 usability testing questions\n \n .\n

\n

Step 5: Prioritize and eliminate the roadblocks

\n

\n Identify the parts that must be fixed immediately and ask yourself if there are any\n particularly problematic features. For example, giving your sign-up process a face-lift\n would be a good idea if your customers are frequently complaining about it. The good news\n is, you don’t always need to implement radical changes! Breaking everything down and\n starting from scratch might not be needed, and just a few minor changes will suffice to\n improve your product.\n

\n

Step 6: Update and enhance

\n

\n Last, but not least, make sure your user journey map is a living document and that it is not\n set in stone. Since your customers are constantly evolving, it is important to keep checking\n their satisfaction levels and improve the user journey map if such a need arises. If it is\n feasible, update and improve your journey map{' '}\n \n every six months or so\n \n . Also, keep in mind that whenever a significant change is introduced to your product, the\n customer journey map should be updated accordingly.\n

\n

Three User Journey Mapping Examples

\n

\n As beneficial as it is to create user journey maps for product improvement, marketing, and\n UX, there is also a bit of ambiguity surrounding it. To clarify the process, we will discuss\n a few customer journey mapping\n \n {' '}\n examples\n {' '}\n of various companies that have benefitted from this process:\n

\n

\n \n Leadfeeder\n \n

\n

\n This leading Finland-based analytics tool gives you a log of companies that visit your\n website. The company’s main vision is to incorporate web intelligence into businesses. As\n such, their user journey maps the paths from Discovery to Sales and Retention. By\n implementing mapping, they have identified their customer’s goals, touchpoints, success\n factors, and secondary KPIs.\n

\n \n

\n Source:{' '}\n \n Leadfeeder\n \n

\n

\n As an example, one of the customer’s goals during the discovery phase of the user journey is\n to identify a tool that tracks anonymous website users. During the free trial, the customer\n finds out how it works and if it meets their requirements. Once the customer buys the\n subscription, the key goal is to get accurate access to website data. Once this is met, the\n customer proceeds to the retention phase.\n

\n

\n \n NinjaOutreach\n \n

\n

\n NinjaOutreach offers an all-purpose influencer marketing tool designed specifically for\n bloggers, small businesses, startups, digital marketers, and agencies. One of their phases,\n known as ‘day 3’, is based on the{' '}\n \n following assumptions\n \n :\n

\n
    \n
  • \n “People need time to explore and use a new application, so if they don’t appear to be\n engaged in the first day or two, it’s probably natural.\n
  • \n
  • \n At the same time, people can easily forget about an application and become quickly\n disengaged, so if by day 3, 4, or 5 you are not seeing sufficient activity, then it may be\n cause for concern.\n
  • \n
  • \n

    \n Often, applications might require something from the user to allow the user to really\n experience the full benefits. This might be something like:\n

    \n
      \n
    • Importing a list
    • \n
    • Integrating with another application
    • \n
    • Filling out a profile
    • \n
    \n
  • \n
\n \n

\n Source:{' '}\n \n NinjaOutreach\n \n

\n

\n \n ElevatedThird.com\n \n

\n

\n Judd Mercer, Creative Director at{' '}\n Elevated Third, outlines{' '}\n \n how to use journey maps in the real estate industry\n {' '}\n to develop your business.\n

\n

\n The company showcases six distinct phases for the user journey map, namely: Design,\n Financing, Construction, Leasing, Model, and Completion. Their map is a bit extensive, but\n they have modeled the entire process that a customer undertakes during the relationship.\n

\n

Summary

\n

\n A user journey map is a visual depiction of the entire customer experience. It provides\n ample benefits of viewing your product from a different perspective, identifying loopholes,\n analyzing differing user scenarios, and bringing the entire team on the same wavelength. If\n done efficiently, a user journey map is one of the most effective design tools and\n strategies for turning your product into a success.\n

\n
\n \n
\n

Chapter 5

\n

All you need to know about effective UX prototyping

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(UserJourneyMap);\n","/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\nexport const transformImages = (list) => {\n const res = [];\n for (const el of list) {\n res[el.node.name] = el;\n }\n return res;\n};\n"],"sourceRoot":""}