Experience Map vs Customer Journey Map: Choose the Right Tool for Your Business Needs
mins to read
Experience map and customer journey map are two interrelated concepts that can be easily confused. Nevertheless, as there are two terms for these two notions there is definitely a need to study the matter of experience map vs customer journey map deeply.
As a design agency, we often address UX mapping in our design process to find effective user-centered solutions for projects we work on. Both experience and customer journey maps allow you to walk in your customer’s shoes and they both focus on customers’ emotions and experiences, still, they serve different purposes.
In this article, we will analyze and compare two types of maps, so that you can understand what tool serves your needs better.
To begin with, before learning the difference between a customer journey map and an experience map we should understand what their purpose is and how one can benefit from using these tools.
What is a customer journey map?
A customer journey map (CJM) is a tool that helps to visualize certain user’s paths and customer interaction with the product. It is a story of communication between the user and the company that takes into account the customer’s thoughts, emotions, goals, and motives. The map is composed from the buyer’s perspective and looks like a graph with points and channels of customer interaction with the product.
A customer journey map consists of the following components:
- Timeline graph
- Stages of customer’s interaction with the product (for example, discovery, research, evaluation, conversion, post-sale engagement)
- Customer’s objectives and actions taken during each stage
- The thoughts and emotions the customer has as they complete certain actions
CJM reflects the way a customer moves towards a certain goal, identifies problem areas at each customer journey touchpoint, and allows you to understand how to solve those issues. With the help of the CJM, you can manifest the main customers’ fears, pain points, and expectations and get the insights that will inform your further design decisions.
To make a map, it is necessary to track customer behavior at all points of intersection with the product. For a good analysis, you need to collect enough information about the buyer and the product itself. Then, you should correctly record it on the map (with customer journey mapping tools this process seems easier).
Main features of a CJM
A customer journey map is characterized by:
- Linear timeline. CJMs present user’s actions in chronological order.
- Presenting information from the customer’s perspective. The customer journey map tells little about how the product works but focuses more on the customer’s thoughts, feelings, and emotions when interacting with your brand/product.
- One CJM depicts the journey of one buyer persona. If you look closely at the above customer journey map example, you will notice the description of a buyer persona before interacting with the product on the left side, and their feelings after completing the goal on the right side. That’s how CJMs work: one type of customer per one map.
- A map tells a customer’s journey within one product or service. Customer journey maps are quite specific as they show the buying journey of one target customer for one product.
The purpose of a CJM
A customer journey map helps you see the entire user's path and immediately identify the gaps in the user flow - the pain points that the design team will need to resolve to create a service or product that improves users’ lives.
To better understand how helpful a CJM can be, let’s take a look at the example below.
Let’s suppose, you understand that very few customers join the loyalty program, but can’t figure out the reason for this issue. As CJM contains real thoughts of the target audience, you look at the “book flight” stage of the customer journey, check the “thinking” block and learn that creating an account takes too much time and your customers prefer to skip it. Now it’s much easier to find an effective solution to the problem.
As well, CJM works perfectly for visually demonstrating problems to stakeholders (or any company representative) who is confident that their service is working great. The good thing about a customer journey map is that it immediately shows negative thoughts and emotions which makes all team members read those comments attentively, and start thinking about how to fix this negative experience.
At this point, it’s time to move to the explanation of the customer experience map.
What is an experience map?
An experience map shows the entire journey customers take when they interact with a product or service.
Similar to the customer journey map, experience mapping depicts the user’s path from the product discovery stage to evaluation and purchase (until a person becomes a customer). But the experience map goes wider, it also shows what your competitors and your business are doing in the context of this journey, taking into account reviews, references, referrals, support, and so on.
As you can see in the above example, the experience map also visualizes stages, timeline, emotions, and feelings but it doesn’t focus on some specific customer type. UX map shows the overall experience of all customers. As well, it presents the customer journey with various touchpoints that are not tied to one specific product or service (the customer is searching for a house with the help of an Internet, agency, by asking friends and family for advice, and so on).
Capturing the full picture of experiences from a customer perspective helps organizations identify strategic opportunities, customer pain points, and launch innovative projects.
Main features of a UX map
Here are some main characteristics of an experience map :
- It generalizes the experience of different types of customers. UX ma is not tied to a certain customer type.
- A map tells the entire customer journey. Experience maps are not tied to a specific product/service.
- It has a chronological order.
- It depicts stages of a customer journey, actions, thoughts, and emotions
The purpose of the experience map
An experience map helps organizations see the big picture and make decisions about what to focus on based on research. When you see the whole picture, you can:
- Inform your design decisions aimed at increasing customer satisfaction, brand loyalty, customer retention, and so on.
- Identify opportunities for innovation.
- Understand where the user experience is currently well supported and in which points it needs improvement.
- Compare different customer’s paths to purchase.
- Help all team members stay on the same page about customers’ needs.
The main objective of an experience map is to identify each possible channel a customer can use to interact with your company.
What differs customer journey map and experience map?
If you read the article up to this moment, you could already understand why people confuse the discussed map types, as well as you could identify some major differences between these tools.
To make the picture clear for you, in this section, we will single out the main distinctions between the customer journey map and experience map.
- Multi-channel vs single channel. Experience map depicts the complete picture of the customer experience with the brand at multiple channels, while CJM focuses on the experience the customer gets when interacting with one specific product/service.
- Specific customer type vs overall customer experience. Experience map shows the journey every customer goes through when interacting with your brand, CJM depicts the experience of one specific buyer persona.
- Diving into details vs understanding the broad picture. CJM works best for those who know where their problem is but need to find a suitable solution. Experience maps are great for those who don’t know where the problem lies.
I guess we won’t reveal to you some shocking truth by saying there is no one right choice for each situation. To choose between a customer journey map and a customer experience map, you should know if you need to fully understand the current state of your experience, or you need to find a solution to a specific issue to improve the overall situation.
In general, a customer journey map can be a necessary part of experience mapping, but both approaches can be used apart. It all depends on the project's needs.
At Eleken we work with SaaS customer journeys to explore the experience of each type of customer so we don’t miss anything important when designing a product. This way we can give all types of customers a solution they're looking for. Drop us a line if you want to learn more about the way we help creating user-centered and business-oriented products.
SaaS Pricing Page Design: 9 Best Practices With Examples
Your pricing page is the final destination of your clients in their customer journey. If your potential customer has done the whole way down the funnel and now is thinking about making the final decision, you just can’t fail to get users to click that “buy” button.
A well-designed pricing page encourages and directs your prospect to make their choice and subscribe. But what should a good SaaS pricing page design be like?
As a pragmatic SaaS design agency, we identified essential components that most pricing pages possess and picked nine best practices that popular SaaS companies use to optimize each element and create a pricing page that works. Most of them have a simple layout, clearly show the product’s value, and create trust between a company and user. Without further ado let’s dive into the details of how to create an evocative and effective pricing page.
Key pricing page elements
*Small intro* Before thinking about how to design your pricing page, you should develop a strategy that matches the value of your company and the needs of your customers. If you’ve already done it - good job and let’s move further, if not - read about the most efficient SaaS pricing models, choose the one suitable for you, and come back here.
Now let’s get back to our main topic.
Having analyzed different SaaS websites we singled out five key components of a pricing page that promotes higher conversions.
- Plan options. Think about your customers and how they can benefit from your service to come up with appropriate pricing offers.
- Prices. Make clear pricing that explains to the customer what they pay for and what they receive for the money paid
- Main features. People don’t want to read loads of text, they need to understand what each plan is about by quickly looking through the list of main features.
- Testimonials or popular companies’ logos. Add credibility with the help of your user’s success stories and recognizable companies’ logos
- Frequently asked questions. Leave no place for hesitation by providing the viewer with all the information they may need to make a buying decision
Let’s take Asana’s (software for project management) pricing page as an example.
Seems like it’s quite easy to complete an effective pricing page. Unfortunately, simply putting all the elements from the above list on your page won’t work. Designing a converting pricing page requires good knowledge of human psychology in general and the needs/preferences/pain points of your target audience in particular.
Combining thorough user research with best design practices will help to create a pricing page that speaks product’s value and encourages the prospects to push the “subscribe” button.
Best practices for creating a pricing page that works
Regardless of what you’re selling, a simple time-tracking app, or a complicated all-in-one sales & marketing solution, start your pricing by knowing who your buyers are. In other words, create buyer (or customer) personas. If you think I’m talking about fancy slides with vague concepts, you may have already prepared for one of the C-team meetings, that’s not the case. You need buyer personas created based on thorough quantitative analysis of sales and customer survey data. As a result of this exercise, you should understand what price certain groups of customers are ready to pay for your product, and these insights will underlie a value-based pricing strategy.
Did you get the point? Great, going further.
One buyer persona - one price plan
A pricing page is a place where all your efforts spent on user and market research pay off. As soon as you define your target audience the next step will be to offer them the best-match product. It should be a no-brainer for your customers to understand which of your products is specifically tailored to solve their problem.
The smart way is to name the price plans after the customers’ group. For example, it can be a “Bootstrapper - Startup - Professional - Enterprise” plan.
You can also tie the pricing package names and the jobs to be done. It can be something like “Launch - Power Up - Scale.”
Each plan’s price should consider how price-sensitive the target group is and what value they’re willing to pay for.
Notion’s designers have done a great job presenting small illustrations to characterize each buyer persona: starting from a girl in the headphones that stands for a plan for personal use, ending with the orchestra conductor that represents the solution for an enterprise. Besides illustrations, each plan has a short clear description. For example, the personal pro plan has the following characteristic “For power users who want to do even more”.
Build pricing that scales
The scalable pricing concept is based on a value metric, which presents what the customer pays for - per seat, per user, the number of minutes, etc.
Whereas buyer personas, which we discussed above, are crucial for the sales funnel and adequate price plan packing, the value metric allows to differentiate prices and expand revenue along with the increasing value customers get from your product. Put it another way, if a customer gets more value, you can also grasp a part.
The graph below will help explain this thought.
Look at the blue rectangle. It shows the market you cover with your fixed price. You give a specific value and get paid for that value. But actually, you can embrace all that striped area, setting different prices and being price-flexible. To make this simple yet brilliant scheme works, you should flawlessly determine where your customers gain value from your product without tangling them with too diverse and complicated pricing.
Three is the optimal amount of pricing tiers
If your pricing page offers just one plan the main task of those who visit your website will be to decide if to subscribe to your service or not, but if you have two and more pricing tier potential customers will think which plan is better to choose.
Yet, more than four plans can confuse the prospect with too much information, while your task is to make each offer easy and quick to scan. That’s why the best practice is to create three plans for different buyer personas.
A good example here is Dropbox. Clean and minimalistic design, which is common for the whole Dropbox’s website, lets the reader quickly scan each offer and understand the main features of each plan. As well, the visitor can easily check the price difference between monthly and annual subscriptions with the help of two buttons at the top of the page. Finally, each tier has a noticeable call-to-action button that informs the user about a free trial period.
Improve page design and user experience
SaaS products are usually complex and have wide functionality, so it is difficult to explain everything to a customer and keep the page clean and clear.
All the hard work will be in vain if your pricing page doesn’t look right. It should not only have a neat and user-friendly design but also be easy to read and comprehend. Ask our designers how to build a beautiful pricing page, and they will brainstorm a bunch of options to choose from. We also have some hints for the SaaS pricing page design you can check.
What you should pay attention to when building your pricing page is that:
- People don’t read; they scan
- People don’t like complicated things they can’t get by a quick look
- And finally, people hate cumbersome wordings and giant feature lists
Regarding the last point, when your future customers land on your pricing page, they expect to see a concise feature comparison facilitating them to make a purchase decision. They don’t actually need a dozen functionalities on your list as they care about 2-3 main features and probably a couple of more specific ones.
Focus on having these three price strategy pillars on your pricing page:
- Positioning based on buyers personas you created before
- Packages that contain features crucial for a particular customers group
- Price plans aligned with values and customers’ willingness to pay for them
For example, take a look at the Evernote’s pricing page.
The plans’ structure is clear and comprehensive. The prices are adjusting dynamically depending on the customer’s IP address. The concise feature comparison is easy to understand. For those who need more details, the extended features list is available.
The FAQ is organized in a drop-down list. Below the FAQ section, Help center and Contact us icons invite to connect in case of additional questions.
It’s natural for those who make a purchase decision to doubt. Luckily there are several common ways, which we've highlighted before, that can help you reduce clients’ uncertainty (FAQ, testimonials, recognizable company logos).
Here are some more details you may want to consider implementing on your pricing page.
FAQ and support
In the “Anatomy of a SaaS Marketing Site, it is stated that:
- 76% of companies enable the “Contact Sales” option on their pricing pages
- 66% of pricing pages have an FAQ section
- 13% embed a live chat functionality
Among the points above, we would emphasize the FAQ as these three letters will assist you in beating another three ones - FUD that stands for fears, uncertainties, and doubts.
People feel hard parting with money, so your task here is to mitigate discomfort.
Firstly, identify the reasons that hinder your potential clients from buying your product. You can do this by surveying your leads and customers. Once you uncover the objections, list the most common ones and handle them with your answers.
Showing the product price in customers’ local currency is good but not enough. You will do a great job adjusting the price based on the value the product may have for the different markets.
According to the survey ProfitWell conducted, those SaaS companies that implemented currency and pricing localization grew much faster than their competitors who didn’t bother to execute such adjustments.
Your pricing page is a point where the hours of your hard work bring customers. Treat it accordingly.
Start with the most expensive plan
According to CXL research, people tend to read the first two plans on the left side more precisely and there is a higher chance that the visitor will choose the most expensive offer if it is listed on the left.
Take a look at Mailchimp’s pricing tiers order:
The most expensive plan goes first. So that when the customer sees $299 for the premium plan, $14 for the standard plan seems a beneficial and fair price for this offer. Additionally, Mailchimp highlights the “Standard” plan with a yellow stripe that adds value and perfectly matches the general website design style.
Highlight your recommendation
When the user hesitates which plan to pick, featuring “most popular” or “recommended” plan helps to eliminate the buyer’s confusion.
When deciding which plan to highlight, always choose the one that you know would bring the most value to the majority of your customers.
Check the pricing page of ActiveCampaign.
The “Professional” plan is highlighted both with “Most popular” label and bright blue color. This way ActiveCampaign promotes more clicks at this option.
Show your value proposition
The visitor doesn’t have to scroll down the whole page and read everything you put there to understand the message your SaaS company wants to communicate. They should understand the value of your service after the first glance on the pricing page.
For example, Grammarly (writing assistance service) provides a simple, yet efficient pricing table clearly listing the features of each plan. As well, pay attention to the bold black title on the white background “Elevate Your Writing”. One short sentence reveals the value of pricing on this SaaS platform.
Foster upfront and annual payment
Whereas monthly bills can be more attractive to your customers, upfront and annual payments are what you have to focus on for you as a business. Upfront will secure a healthy cash flow, and yearly contracts ensure long-term customer relationships.
And also be careful with the discounts. Offering the price cuts too often, you won’t be able to sell at regular price. The frequent deals create the expectation in customers’ minds that they should wait for the next promotion.
Take a look at Sales Cloud (by Salesforce) pricing page. All price plans encourage annual payment. CTAs are clear with an explicit hint to take a free trial.
How to understand if my pricing page is effective?
The above practices together with examples of popular SaaS companies will give you useful ideas to start designing your own pricing page. But you should remember that your product is unique: what works for Dropbox or Mailchimp, may not work for your SaaS.
And that’s OK, your SaaS pricing page doesn’t have to be perfect on the same day you release it. To understand that you are doing everything the right way, you have to keep testing the page until you find the right combination of each element, starting from page layout and ending with the correct CTA color.
In case you need proficient help in designing an effective and beautiful pricing page for your SaaS Eleken is ready to be your design partner. Take a look at our recent SaaS projects or drop us a line to have all your questions answered.
Accessibility in UX: Helpful for People, Beneficial for Business
It’s so human to take for granted those things we got used to. Acute eyesight, good hearing, ability to read and understand, freely move and easily communicate. But what if to think for a moment that many people among us interact with the world differently? As of 2019, 37,5% of the world’s population (and that’s more than two billion people!) live with some kind of disability. A terrifying number, right? It can be permanent disabilities or temporary impairments; however, none of them makes life easier.
Every day experiencing functional difficulties, using the web became a challenge for those who need assistance and a special approach. Every day businesses lose many potential customers just because the latter can’t properly use websites to achieve their goals.
This article will talk about why user interface accessibility is vital for both people and businesses, how to make UX design accessible, and what UI design accessibility guidelines to follow. And to start with, let’s recap what we know about accessibility.
What is accessibility?
Accessibility evaluates a product from the perspective of whether people with different abilities can easily use it. Accessibility in user interface design expands the users’ coverage enabling as many people as possible to understand, navigate, and interact with the digital product. In a broad sense, accessibility serves not only those who have a certain kind of disabilities but also all users, making their user experience seamless and hassle-free.
The universal design became the accessibility concept embodiment pursuing the goal to create a “one size fits all” design admissible for all users regardless of their physical or mental condition.
Different types of disabilities
Working on accessibility in UI/UX design, it’s crucial to keep in mind that, besides permanent disabilities, people often experience temporary or situational deterioration of their condition.
For example, the sight issues can vary from total blindness to color blindness, low vision, or impossibility to distinguish website content on a mobile device under the bright sunlight.
Usability vs. Accessibility
There is one distinct commonality between usability and accessibility. The poor user experience for the general audience creates much more difficulties for people with disabilities and impairments, making the interaction with a website or app inaccessible.
Inaccessibility shouldn’t necessarily be related to some kind of users’ disabilities.
A product can become inaccessible for certain groups of people when:
- It has a non-intuitive user flow and/or unclear instructions
- The price is too high
- Product usage requires a specific cultural context that not all users can understand
- Some social groups (for example, aged people) lack the background knowledge to use the product
Why should we make design accessible?
As I mentioned above, the number of people having some kind of disability is impressive. Considering how many troubles they may have daily to lead a normal life, why not try making their interaction with the web less complicated but more productive? The UX designers can create a user experience beneficial for everyone who uses digital products regardless of whether they have permanent disabilities, temporary impairments, or situational difficulties.
It’s impossible to create a customer-centered design without empathy. Working on accessibility in UI, designers should put themselves in a user’s shoes and walk through a customer journey, trying to understand the possible gaps in user experience.
And if we see UX accessibility from a business perspective, making your website or app accessible to as many people as possible will lead to:
- Bigger audience coverage
- Better search results
- Faster loading time
Also, accessibility is a driver for innovations. For example, Google is working on a non-language processing tool that should process sounds and intonations, benefiting people with auditory impairments.
If you’re still not convinced whether you should make your website accessible, here is the information for your consideration.
In 2006 the National Federation of the Blind had a lawsuit against Target, an American retail corporation, regarding Target’s website inaccessibility. As a result, the corporation paid six million (!!!) fine and committed to ensuring the use of assistive technologies on their website to make it accessible not only for blind people but also for users with various disabilities.
And one more note. In 2017, US federal and state courts received 814 accessibility lawsuits under the non-discrimination laws. Things are getting serious, you see.
UX accessibility standards and guidelines
Assuming you’ve recognized all the importance of accessibility and now you’re wondering if there are any accessibility guidelines for UX designers to adhere to. Sure, they do exist and devote a separate paragraph.
The two major sets of accessibility regulations in the United States are WCAG (Web Content Accessibility Guidelines) and Section 508.
WCAG represents the world-accepted standards for the accessibility of websites and apps.
It states that accessible design should be:
- Perceivable: a user should be able to perceive the information presented on a digital resource. For example, people with low sight must be given a possibility to read written words by a screen reader
- Operable: keyboard navigation must be an alternative solution to using a mouse or a touchpad
- Understandable: a website’s information and user interface must be understandable and meet users’ expectations in terms of content and operability
- Robust: the website must be advanced enough to be compatible with assistive technologies
Section 508 standards must be applied when working on governmental projects. It’s a set of requirements that need to be satisfied for the project to become legally compliant with accessibility guidelines (as they’re articulated in WCAG). So, if you’re designing a project for the private sector with no relation to state or federal programs, follow WCAG guidelines. In other cases, you should refer to Section 508 requirements.
How to make design accessible
While there are many things to implement for creating an accessible design (use this checklist for reference), you can primarily focus on some of them.
- Check your current accessibility status
You can do this using the AXE Chrome extension. This tool performs web accessibility testing according to WCAG guidelines and gives you an “accessibility compliance” score. Based on the results, you decide how much effort you’ll need to make your product design accessible.
- Ensure sufficient color contrast
The most widespread accessibility problem is the low contrast between text and background. According to WHO, around two billion people worldwide have more or less severe visual impairments caused by various conditions and diseases. Just imagine how many people you will help just by implementing slight text contrast adjustment to your design.
- Support color with other elements
When you outline essential information with color only, people with low visual acuity or colorblindness face difficulty figuring out what your content says.
Use labels, bold text, underlines, italics, icons, font weight, and size to make your message understandable for people with visual impairments.
The complex content as charts and graphs, should always be accompanied by text and labels. Using the color only to distinguish the data creates complications for your visually impaired audience and makes interaction with your website frustrating. You can use a Color Oracle app to check how people that can’t distinguish colors see your design.
- Use focus indicators
When you select a webpage item, it usually becomes highlighted with an outline. The name of this outline is a focus indicator. It shows what element a keyboard is focusing on and where you’re when navigating a website. Focus indicators can be used for links, form fields, buttons, and any other webpage elements that should differ from the surrounding items. These indicators help users with visual impairments who need screen readers or people whose mobility is limited due to injuries or specific illnesses.
Designing for accessibility, it’s crucial to make focus indicators visible to facilitate users’ interaction with your website.
- Add alternative text to images
If a person has low sight or just doesn’t have time for reading the web content, they can use screen readers, which convert text into speech. As screen readers work only with written words, webpage images require textual description called alternative text that describes what the image is about and how it relates to the content. You can write alternative text within the <alt> attribute or just explain the image with the surrounding context.
It’s a bad practice to write like “picture” in the <alt> text as it won’t help listeners understand the essence. Try describing as detailed as possible what’s happening on the image and how it’s connected to the overall text. However, if the image is just an illustration and serves for pure decoration, you can put an empty <alt> attribute “saying” the screen reader to skip it.
Google is now working on the AI technology that will describe pictures with 94% accuracy. But until they make it happen, the task of UX designers (and content writers as well) is to provide users with accurate and concise image descriptions.
Also, WCAG recommends keeping the text lines up to 80 characters and avoiding using justified text to enable zoom options.
- Establish content hierarchy
Headings and subheadings form the structure of the text and help readers understand better the logical order of the narration. Bigger font titles attract more attention and serve as content milestones based on which the main idea can be easily perceived.
When developing a website, it’s important to use proper structural HTML elements such as <h1>, <h2> and similar. tags to form the content hierarchy. Browsers and screen readers “communicate” with HTML elements receiving the information they contain and process it properly. Thus, don’t use HTML tags just to outline some webpage item with no meaning and, on the contrary, don’t style headings with bigger font and bold text where the <h> tags must be applied.
- Enable keyboard navigation
Keyboard navigation is one of the most significant accessibility features. It’s helpful for people with motor impairments, poor muscle control, and visually impaired people that use screen readers. The navigation has to be logical and intuitive, correlating with a page’s visual flow.
For example, the Tab key should be able to move through all interactive page elements like links and buttons. The Enter key should select an element and confirm information input. Try navigating through a website without using a mouse or a touchpad and check if you can take necessary actions only with the help of a keyboard.
- Test the design with real users
Once you’re done designing for accessibility, use accessibility-testing tools (like, for example, Color Oracle mentioned above) and ask users with different capabilities to check your design.
What else can you do for your product’s accessibility?
- Ask a third-party UX audit provider to conduct an accessibility audit and find out if your product corresponds to WCAG 2.0 guidelines and meets assistive technologies requirements
- Assign somebody from your internal team to go through your design and check if it meets principal accessibility standards (you can use the checklist from this article as a reference)
- Mind accessibility during the UX research stage, verify your design assumptions with people who are willing to help, and assess what you can improve in your design for better usability and accessibility.
A final word
Designing for accessibility will definitely require more effort following established standards and guidelines. However, by making your product accessible, you can help more people benefit from the web, increase your product’s audience, and avoid legal issues concerning inaccessibility. If you need any help with creating the accessible design, let’s talk. Also, check our article with inclusive design examples to see how brands adhere to accessibility standards.