Mapping customer journey is a marketing practice that is vital to marketing strategies. Brands and companies are now adapting this in order to get a holistic approach to campaigns. Creating a customer journey for websites should be a starting point because this is where most marketing teams have failed to follow up on.

The customer path will identify the touchpoints of the customers when they visit the site, and by identifying these touchpoints and fixing them, if there are issues that need to be addressed, improving them will bring your campaign closer to realizing the goals.

Creating a customer map starts, as with all other marketing endeavors, with research. Research should be given the highest priority among the hierarchy of tasks in creating any campaign. Since the concern is primarily with the site’s customer journey, the research involved here will revolve around the targeted audience.

Customer persona

Creating a customer persona is about giving a visual or graphic representation of the site’s visitors. The number of customer personas that you will identify will vary depending on the average traffic your site receives. It is then important to segment with the basics of marketing research: demographics and location. To amp-up your customer persona profiles, you should also include the psychographics of your audience and customers really get into the nitty-gritty details of the design that you will adopt for your site in order to appeal to them. Sorting the data can be overwhelming and to help you choose the tools that you need to sort the data of your site, Peter Wayner has put together a list of tools that will help you with that task.

Identifying the persona profiles of your audience is a daunting task, Fortunately, Michael King has written an excellent piece about it. Basically, it talks about doing marketing segmentation to give a representation of the site’s visitors, which will help improve the journey of your customers.

It is important to note that in creating a customer persona, you should also know where your audience comes from. Knowing this will give you a more specific idea about the interests of the visitors before going to your site. Google Analytics is an obvious tool to use in this regard. To check it out, go to your site’s Google Analytic’s profile. Click on Audience > Interests > In-Market Segments:

This will then take you to this data chart.

These data represent categories of sites that your visitors have previously visited. As this is about creating customer personas, look for categories that are receiving quality traffic. Determining quality traffic depends on the goals of the site. This means, using metrics or a combination of metrics that fits the standard to which the goals are suited for. Normally these metrics include bounce rate, new visits and average site duration. An important point to consider is filtering data. Using unfiltered data from referral traffic in creating customer personas will complicate things, so be careful in doing so. Please refer to this article in filtering fake referrals in Google Analytics.

Once you have already identified the right sources of your referral traffic, those that are directing a significant amount of traffic to your site run the URLs to some popular site checkers available online. The ones commonly used are Similarweb and Alexa but there are others that also do the same thing. They can give you an overview of the site(s) you want to check in their free versions, but to know more details, you can have the option of upgrading to their premium accounts.

Here’s a demographic overview of Similarweb.

Alexa:

Comparing and complementing data from these 3 tools will give a more specific estimate of your visitor data.

Goal alignment

Once the customer personas have been identified, the next step is to align them with the site’s goals by stages of the journey. The stages of the journey within the site can be seen in the behavior flow in Google Analytics. Behavior > Behavior Flow:

The visual graph will show the visitor path within the site. Starting from the homepage (and other category pages), the flow will have multiple touchpoints before completing the goal of the site.

*Please note that site goals must be set in the Analytics profile to get the full picture of the visitor conversion path.

Take a note of the pages where most of the drop-offs occur. There are multiple reasons why visitors leave. Some of the common reasons are:

1. content message
2. user experience
3. design
4. technical issues

We will only focus on the issue of design for now, but as all of these factors are closely related, we’ll touch on those as well in relation to design.

In a UXMag article, scenarios were laid down which lead to the declaration that web design is dead. Almost all of those points are about the emergence of new technologies and innovations in web design that are not necessary to engage audiences. In the end though, the article didn’t bury web design as a profession, but rather, is a call for web designers to adapt to the current landscape. While most of the things stated are on point, there is one premise of the argument presented that may have been misplaced, automation and artificial intelligence of web design services. While automation is a welcome respite for web designers, it would not be that helpful in the over-all picture in terms of realizing the goals of the site. Having a planned design concept with the aim of achieving site goals is still within the decision of humans.

Usability and design go hand in hand. While both are separate disciplines, one complements the other in a myriad of ways that it is sometimes hard to distinguish one from the other. To reiterate the point of using design to minimize page drop-offs and improve customer journey, here are some of the common usability mistakes in web design:

• Content fails to convey the message:

  Content is a part of web design. This is commonly referred to as web copy. Graphics and visuals will give a good impression to visitors but they also like to read the text. Design mistakes occur when visitors are distracted with the other elements of the page.

  • Havea point of attention to focus on the web copy
  • Give concise information
  • Offer short paragraphs for easily digestable information

  Typography is also a factor of web design. It is not always about headings and fonts of text. Usability should always be a priority over aesthetics, making the content easy to read.

• There is no way for visitors to contact you:

  The customer journey should be interactive and engaging. If your site’s content hooks your readers, they will want to be in touch with you. Contact forms should be functional. A pretty design is a bonus too, but should not be prioritized over usability.

• Lack of search function:

  People visiting websites have a particular task in mind. Most of the time they want to get information. Content-heavy sites need a search function so that visitors will save the time navigating. For e-commerce sites, people will like to find out the descriptions of products. A site that lacks a search function can diminish the site’s navigability.

• Long registration process:

  Nothing can be more frustrating than wanting to sign up on a site only to see a long contact form asking numerous unnecessary details. Take a look at Reddit’s sign–up form.

  

  The simplicity of the sign up form makes is so much easier for new users to join the site. The great thing about it is that giving your email is optional. This is not to say that every site should not ask for emails, but asking unnecessary information from users should be discontinued.

• Inconsistency in design:

  One of the principles of design (not just for websites) is to be consistent. The design of the home page should be the same with the other pages. If the color theme of the home page is white, the about page for example should not flip the script and go with another color, black for example. It is not just the color but also the layout. Consistency is key.

Touchpoints

The touchpoints are the important pages of the site. For content heavy sites like blogs, these are the category pages, contact, and about us pages. These pages serve as the gateway for the visitors to the content. E-commerce sites have different touchpoints. They are mostly the catalog pages and product descriptions. To get to know more about the touchpoints, go back to the behavior flow in Google Analytics.

The touchpoint of the site should speak to the targeted visitors of the site. The design phase will have to resonate with the intended audience. This is where the customer persona that was created will serve as a guide in designing (or redesigning) the pages.

To improve the user experience for the touchpoints, designers have to identify the information gaps. Investigating what is lacking from the pages and filling the essentials to minimize drop-offs. The gaps are information lacking between the expectations of your visitors on the pages and the information available in the page.

There are also technical aspects that can improve and lessen the pain points of the pages. On-page SEO (search engine optimization) can identify and fix these issues for better user experience.

1. Site/page speed:

   This should be a priority in web development and design. Remember that functionality should not be put aside for unnecessary embellishments. Large files that take time to load should be compressed and put in loading order to improve loading time. For a more detailed guide to improve site speed, check out this article on site speed.

2. 301 and 302 redirects:

   Page redirections are necessary. There are a lot of reasons for webmasters to redirect pages. The most common is that an old page is being redirected to a new and updated one with fresh content. The difference between the two is that a 301 is a permanent redirect while a 302 is just temporary.

3. HTTP Header Codes:

   301 and 302 are examples of header codes. There are quite a few but we will limit them to the most common ones.

   200 Success – page have loaded successfully.

   404 Page not found – page could not be loaded.

   500 Internal server error – a generic error page. not much detail is given as to why this occurred.

   Aside from 301 and 302 status codes, it is important to minimize the occurrence of 404 pages as it is not good for users to encounter them. A simple solution is to create a custom 404 page that will draw them back to the correct pages.

Visual hierarchy

Visual hierarch is one of the most important principles of web design. Visual hierarchy is communicating the message and content of your site to the audience. There are pillars in web hierarchy that must be considered.

1. SIZE: The element of the web page needs to be seen. Text, images, and graphics should be seen by the reader.
2. COLOR: The choice of color will be determined by the the research you did during the creation of the persona profile. If the site caters to the 60 year old and above age range, flashy colors will probably not translate to their emotions, whereas younger readers will respond to that kind of color scheme.
   • CONTRAST: Contrast is the dramatic shift in text size and color. Effective contrasts for web pages will help grab the visitors attention.
3. LAYOUT: In deciding the layout of the website design, experts urge to follow Hick’s law in web design, which states that the more decisions that a person has to make, the longer the decision making process is. The design layout should then give only the essential options needed for the visitor.
   • ALIGNMENT: This is the order between the elements of the design. It is the organization of the text in the context and categories in the sidebar column. The elements like profiles, account log-in, and search button are found at the top-right part of the page. Visitors generally look for those in that area of the page.
4. SPACING: When relating to layout, spacing conveys the message that you want your readers to know. The Gestalt principle states that people tend to perceive elements that are close together having similar functions.
   • PROXIMITY: The closeness of elements of a page is significant as is organizes similar sub-categories together. The hierarchy is set for visitors to easily associate them together.
   • DENSITY AND WHITESPACE: Nobody wants to view a page that is “cluttered”. Having too many elements screaming for the reader’s attention will make them leave the page. Proper designs will make the page easy to view. A good balance of density and space will make readers feel at ease when browsing. Here are some examples of ugly sites that illustrate the point of having too much in a single page.
5. STYLE: This is the most important principle as well as the most obvious one. The style you will choose will determine the message and brand of the site. Just be sure that whatever style you choose, it has to be consistent all throughout the site.
   • REPETITION: This applies to text of the web copy. While being consistent with the color and design of paragraphs is an important principle, changing colors and emphasizing the message of the design in paragraphs can draw attention. Breaking repetitive styles gives contrast and depth to the text of the page.

Putting it all together

Armed with the knowledge of the site’s target audience and having the information of filling the gaps needed to improve the user’s navigational experience, it is now time to build a website that will cater to your audience’s needs. Your website will be the most important visual that you will use. No matter how many personas you have identified, site visitors will always have a purpose for visiting your site. They will want to;

• Get information.
• Want to know your company.
• Want to know your products.
• Compare prices (e-commerce).
• Interact with the team or with other people.

The reasons may vary but the purpose of the website is to be an extension of you, your business and your company, whatever the case may be. Be clear, concise, and consistent with the message and constantly update the content to give them fresh information.