Designing a customer journey helps you to gain leads from the website and clarifies the structure of the site

Written by: Tiina Salminen

December the 16th, 2021

Understanding customer journey when designing a website

Understanding customer journey and creating a customer journey map is actually more important when designing a website than making a visually appealing website. Planning the customer journey clarifies the structure of the website and helps to increase conversions.


There are two types of customer journeys: external and internal. The external customer journey refers to searching and comparing information outside the site, including Search Engine Optimization (SEO). However, in this article, we focus on the internal customer journey.

Watch a video on how to design an internal customer journey

Watch a video on how to design an internal customer journey

Customer Journey Design – How should you start planning the customer journey?


The first step in creating a website is to create a primary goal (CTA) which can include:

  • Contact
  • Direct purchases
  • Customer service
  • Booking a demo
  • Service demonstrations
  • Storytelling
  • Discoverability (contact information, map)


The customer journey to the primary goal usually starts from the main visual element of the home page, i.e., the hero banner.


Secondary goals are detours to the primary goal. These can be, for example, reference stories, videos, or other materials that support the customer journey and provide easy access back to the primary path.

What is CTA?


CTA stands for Call to Action, a commanding word, or a phrase. CTA should be kept clear and concise. 

  • Examples of CTAs can include:
  • Contact us
  • Watch the video
  • Order now
  • Download here

Once the goal is clear, concrete steps lead the customer along their journey. For example, if the goal of your site is to book a consultation, the customer journey might look like this:

1. A potential customer comes to the home page. Explain in a maximum of three sentences why this product or service would be suitable for them (title, short description).


2. They can book a consultation immediately through the hero banner CTA.

With hero banner you can explain why this product or service would be suitable for a client

3. A brief introduction of the product/service (textual content and visual support).


4. They will have an opportunity to book a demo: “Book a demo” (CTA).

By using CTA you can offer an opportunity to book a demo

5. Conversion is supported with reference comments (social proof).

Use LiquidBlox block element to guide visitors to content pages

6. Potential customer follows the path to content pages such as blogs, guides, or pricing.

Use LiquidBlox block element to guide visitors to content pages

7. Showcasing a special offer to appeal to your existing customers.

By using LiquidBlox block element you can showcase a special offer

8. CTA and an easy way to contact can be found in the footer (bottom of the page).

LiquidBlox block gallery has many footer elements ready to use

Next, consider what kind of content supports this goal. In addition to the main content, layout, the emotional aspect (visuality), and location on the site are essential.


Example: The goal is to attract customers to a physical store. The most traffic on a site usually lands on the home page. Map view and open hours should be placed below the Hero image so that mobile users can easily find location-based information.


There should be a maximum of three clicks between arrival and goal completion. Here's how to think about click-through content:

  • Arousing interest
  • Information and comparison
  • Target CTA



Site structure into a customer journey map

You should take into account the smoothness of the customer journey

When building the website, you should take into account the smoothness of the customer journey, and map it out in visual form like shown above. Consider how your site looks and flows with desktop, tablet, and for mobile users. 


We recommend the following structure for the home page. The screen shots are from LiquidBlox's block gallery, where you will find ready-made elements for different needs.

Hero banner and CTA button

a. A one-sentence headline. 

b. Two sentence tagline.

c. CTA #1.

In LiquidBlox's block gallery you will find ready-made hero banners

Showcasing products/services and supportive content (for example, a visual display for other content, such as blogs) and CTA #2.

In the LiquidBlox block gallery you will find ready-made site elements

Social proof (case studies, references, customer comments, customer logos, partnerships, certifications, and company metrics such as the number of customers are good credibility factors).

 In the LiquidBlox block gallery you will find ready-made site elements

The footer is intended to be a “summary” of the site where a customer can find eg. social media channels, a newsletter subscription, and an easy way to get in touch. The footer is displayed on each page of the website.

In the LiquidBlox block gallery you will find ready-made site footers

Communication must be accessible and multi-channel


When a website visitor wants to get in touch, there must be a clear way at every stage of the customer journey as soon as the customer is ready for action.


It is advisable to design the communication channels so that the company providing the services can handle the communication as efficiently as possible.


Various contact channels include:

  • Contact form
  • Linking the phone number (great for mobile users!)
  • Email link (mailto: test@example.com)
  • Chat


Example: You are designing a site for a roof renovation company that employs two people. Chat might not be the best way to get in touch, as the visitor usually expects immediate action when contacting the company via chat.



Summary


With these guidelines, you can build a smooth customer journey and improve your website’s conversions. It’s also worth remembering that practice makes perfect! It's a good idea to measure your site’s performance, for example, with Google Analytics or Hotjar. Website and customer journey development should always be based on factual data.


Remember that every designer always starts somewhere. As you gain experience, you will be able to intuitively think about a compelling customer journey right from the moment your customer talks about their needs for a website or a new idea comes up for digital content. Practice, measure, develop!


Would you be interested in professional website design? Learn more about how to get started.

Designing a customer journey helps you to gain leads from the website and clarifies the structure of the site

Written by: Tiina Salminen

December the 16th, 2021

Understanding customer journey when designing a website

Understanding customer journey and creating a customer journey map is actually more important when designing a website than making a visually appealing website. Planning the customer journey clarifies the structure of the website and helps to increase conversions.


There are two types of customer journeys: external and internal. The external customer journey refers to searching and comparing information outside the site, including Search Engine Optimization (SEO). However, in this article, we focus on the internal customer journey.

Watch a video on how to design an internal customer journey

Watch a video on how to design an internal customer journey

Customer Journey Design – How should you start planning the customer journey?


The first step in creating a website is to create a primary goal (CTA) which can include:

  • Contact
  • Direct purchases
  • Customer service
  • Booking a demo
  • Service demonstrations
  • Storytelling
  • Discoverability (contact information, map)


The customer journey to the primary goal usually starts from the main visual element of the home page, i.e., the hero banner.


Secondary goals are detours to the primary goal. These can be, for example, reference stories, videos, or other materials that support the customer journey and provide easy access back to the primary path.

What is CTA?


CTA stands for Call to Action, a commanding word, or a phrase. CTA should be kept clear and concise. 

  • Examples of CTAs can include:
  • Contact us
  • Watch the video
  • Order now
  • Download here

Once the goal is clear, concrete steps lead the customer along their journey. For example, if the goal of your site is to book a consultation, the customer journey might look like this:

1. A potential customer comes to the home page. Explain in a maximum of three sentences why this product or service would be suitable for them (title, short description).


2. They can book a consultation immediately through the hero banner CTA.

With hero banner you can explain why this product or service would be suitable for a client

3. A brief introduction of the product/service (textual content and visual support).


4. They will have an opportunity to book a demo: “Book a demo” (CTA).

By using CTA you can offer an opportunity to book a demo

5. Conversion is supported with reference comments (social proof).

Use LiquidBlox block element to guide visitors to content pages

6. Potential customer follows the path to content pages such as blogs, guides, or pricing.

Use LiquidBlox block element to guide visitors to content pages

7. Showcasing a special offer to appeal to your existing customers.

By using LiquidBlox block element you can showcase a special offer

8. CTA and an easy way to contact can be found in the footer (bottom of the page).

LiquidBlox block gallery has many footer elements ready to use

Next, consider what kind of content supports this goal. In addition to the main content, layout, the emotional aspect (visuality), and location on the site are essential.


Example: The goal is to attract customers to a physical store. The most traffic on a site usually lands on the home page. Map view and open hours should be placed below the Hero image so that mobile users can easily find location-based information.


There should be a maximum of three clicks between arrival and goal completion. Here's how to think about click-through content:

  • Arousing interest
  • Information and comparison
  • Target CTA



Site structure into a customer journey map

You should take into account the smoothness of the customer journey

When building the website, you should take into account the smoothness of the customer journey, and map it out in visual form like shown above. Consider how your site looks and flows with desktop, tablet, and for mobile users. 


We recommend the following structure for the home page. The screen shots are from LiquidBlox's block gallery, where you will find ready-made elements for different needs.

Hero banner and CTA button

a. A one-sentence headline. 

b. Two sentence tagline.

c. CTA #1.

In LiquidBlox's block gallery you will find ready-made hero banners

Showcasing products/services and supportive content (for example, a visual display for other content, such as blogs) and CTA #2.

In the LiquidBlox block gallery you will find ready-made site elements

Social proof (case studies, references, customer comments, customer logos, partnerships, certifications, and company metrics such as the number of customers are good credibility factors).

 In the LiquidBlox block gallery you will find ready-made site elements

The footer is intended to be a “summary” of the site where a customer can find eg. social media channels, a newsletter subscription, and an easy way to get in touch. The footer is displayed on each page of the website.

In the LiquidBlox block gallery you will find ready-made site footers

Communication must be accessible and multi-channel


When a website visitor wants to get in touch, there must be a clear way at every stage of the customer journey as soon as the customer is ready for action.


It is advisable to design the communication channels so that the company providing the services can handle the communication as efficiently as possible.


Various contact channels include:

  • Contact form
  • Linking the phone number (great for mobile users!)
  • Email link (mailto: test@example.com)
  • Chat


Example: You are designing a site for a roof renovation company that employs two people. Chat might not be the best way to get in touch, as the visitor usually expects immediate action when contacting the company via chat.



Summary


With these guidelines, you can build a smooth customer journey and improve your website’s conversions. It’s also worth remembering that practice makes perfect! It's a good idea to measure your site’s performance, for example, with Google Analytics or Hotjar. Website and customer journey development should always be based on factual data.


Remember that every designer always starts somewhere. As you gain experience, you will be able to intuitively think about a compelling customer journey right from the moment your customer talks about their needs for a website or a new idea comes up for digital content. Practice, measure, develop!


Would you be interested in professional website design? Learn more about how to get started.

Designing a customer journey helps you to gain leads from the website and clarifies the structure of the site

Written by: Tiina Salminen

December the 16th, 2021

Understanding customer journey when designing a website

Understanding customer journey and creating a customer journey map is actually more important when designing a website than making a visually appealing website. Planning the customer journey clarifies the structure of the website and helps to increase conversions.


There are two types of customer journeys: external and internal. The external customer journey refers to searching and comparing information outside the site, including Search Engine Optimization (SEO). However, in this article, we focus on the internal customer journey.

Watch a video on how to design an internal customer journey

Watch a video on how to design an internal customer journey

Customer Journey Design – How should you start planning the customer journey?


The first step in creating a website is to create a primary goal (CTA) which can include:

  • Contact
  • Direct purchases
  • Customer service
  • Booking a demo
  • Service demonstrations
  • Storytelling
  • Discoverability (contact information, map)


The customer journey to the primary goal usually starts from the main visual element of the home page, i.e., the hero banner.


Secondary goals are detours to the primary goal. These can be, for example, reference stories, videos, or other materials that support the customer journey and provide easy access back to the primary path.

What is CTA?


CTA stands for Call to Action, a commanding word, or a phrase. CTA should be kept clear and concise. 

  • Examples of CTAs can include:
  • Contact us
  • Watch the video
  • Order now
  • Download here

Once the goal is clear, concrete steps lead the customer along their journey. For example, if the goal of your site is to book a consultation, the customer journey might look like this:

1. A potential customer comes to the home page. Explain in a maximum of three sentences why this product or service would be suitable for them (title, short description).


2. They can book a consultation immediately through the hero banner CTA.

With hero banner you can explain why this product or service would be suitable for a client

3. A brief introduction of the product/service (textual content and visual support).


4. They will have an opportunity to book a demo: “Book a demo” (CTA).

By using CTA you can offer an opportunity to book a demo

5. Conversion is supported with reference comments (social proof).

Use LiquidBlox block element to guide visitors to content pages

6. Potential customer follows the path to content pages such as blogs, guides, or pricing.

Use LiquidBlox block element to guide visitors to content pages

7. Showcasing a special offer to appeal to your existing customers.

By using LiquidBlox block element you can showcase a special offer

8. CTA and an easy way to contact can be found in the footer (bottom of the page).

LiquidBlox block gallery has many footer elements ready to use

Next, consider what kind of content supports this goal. In addition to the main content, layout, the emotional aspect (visuality), and location on the site are essential.


Example: The goal is to attract customers to a physical store. The most traffic on a site usually lands on the home page. Map view and open hours should be placed below the Hero image so that mobile users can easily find location-based information.


There should be a maximum of three clicks between arrival and goal completion. Here's how to think about click-through content:

  • Arousing interest
  • Information and comparison
  • Target CTA



Site structure into a customer journey map

You should take into account the smoothness of the customer journey

When building the website, you should take into account the smoothness of the customer journey, and map it out in visual form like shown above. Consider how your site looks and flows with desktop, tablet, and for mobile users. 


We recommend the following structure for the home page. The screen shots are from LiquidBlox's block gallery, where you will find ready-made elements for different needs.

Hero banner and CTA button

a. A one-sentence headline. 

b. Two sentence tagline.

c. CTA #1.

In LiquidBlox's block gallery you will find ready-made hero banners

Showcasing products/services and supportive content (for example, a visual display for other content, such as blogs) and CTA #2.

In the LiquidBlox block gallery you will find ready-made site elements

Social proof (case studies, references, customer comments, customer logos, partnerships, certifications, and company metrics such as the number of customers are good credibility factors).

 In the LiquidBlox block gallery you will find ready-made site elements

The footer is intended to be a “summary” of the site where a customer can find eg. social media channels, a newsletter subscription, and an easy way to get in touch. The footer is displayed on each page of the website.

In the LiquidBlox block gallery you will find ready-made site footers

Communication must be accessible and multi-channel


When a website visitor wants to get in touch, there must be a clear way at every stage of the customer journey as soon as the customer is ready for action.


It is advisable to design the communication channels so that the company providing the services can handle the communication as efficiently as possible.


Various contact channels include:

  • Contact form
  • Linking the phone number (great for mobile users!)
  • Email link (mailto: test@example.com)
  • Chat


Example: You are designing a site for a roof renovation company that employs two people. Chat might not be the best way to get in touch, as the visitor usually expects immediate action when contacting the company via chat.



Summary


With these guidelines, you can build a smooth customer journey and improve your website’s conversions. It’s also worth remembering that practice makes perfect! It's a good idea to measure your site’s performance, for example, with Google Analytics or Hotjar. Website and customer journey development should always be based on factual data.


Remember that every designer always starts somewhere. As you gain experience, you will be able to intuitively think about a compelling customer journey right from the moment your customer talks about their needs for a website or a new idea comes up for digital content. Practice, measure, develop!


Would you be interested in professional website design? Learn more about how to get started.