How to Build Effective Product Tours: 5 Guidelines & 5 Examples

How to Build Effective Product Tours: 5 Guidelines & 5 Examples

Use these five simple guidelines to build engaging tours and find inspiration in the best real-life examples

Pulkit Agrawal
10 min read
How to Build Effective Product Tours: 5 Guidelines & 5 Examples

Product tours are the new standard in guiding users towards their "aha" moment or showcasing high-value features that are being underused. By offering contextual guidance while your users interact with your product, you help them recognize your product value quickly and take the right action to get their job done.

Building great product tours is both art and science. It requires design and styling, copywriting mastery, as well as data analysis, testing, and iteration until a tour perfectly meets your user needs. 

So how exactly do you go about creating effective product tours? Read on, we’ll explain key guidelines in detail, and showcase some of the best tour examples out there.

TL;DR
  • Product tours are also known as product walkthroughs, in-app guides, onboarding tours, or product tutorials. Either way, they are a powerful tool for user engagement and product adoption. 

  • What makes a tour successful? To be effective, a tour should be short and non-intrusive, timely and relevant, contextual and informative. 

  • Each tour will have its purpose, whether it’s to onboard new users, walk existing users through a major interface redesign, or showcase new features. 

  • There’s no one-size-fits-all, but keep in mind that our Benchmark Report shows that three-step tours are the most effective, with a completion rate of 72%. 

  • Some of the key guidelines on how to create successful product tours include breaking one long tour into several shorter ones, using clear and concise copy, offering self-serve support, and continuous iteration. We go into details for each guideline below 👇

  • And, we dissect five best-performing product tour examples for your inspiration.

What makes a successful product tour? #

Here at Chameleon – with Tours as one of our core products – we consider ourselves to be product tour experts 😎 

But we don’t make this statement without data to back us up. We analyzed 58 million Tours made with Chameleon – started within a period of 12 months – to understand what’s working and what’s not. 

The findings are compiled in our latest Benchmark Report, and here are the key insights to keep in mind:

  • With a completion rate of 72%, three-step tours are the most effective, hands down. Add one step and the completion rate drops to 45%, while seven-step tours have a completion rate of only 16%. 

  • The average time spent on a tour is 119 seconds. Add any kind of media to it (e.g. images, screenshots, GIFs, or videos), and the time spent goes up. In fact, Tours with a short video have an average time spent of 156 seconds.  

  • Enabling users to take a tour at their own pace by providing a “Snooze” button will increase the chance of more users taking the tour and, eventually, completing it. Benchmarks show that 18% of people will snooze a tour if given a chance. 

  • Top-performing tours have a clear message with 25 words per step. That’s the same length as a Tweet, so each step needs to be concise and instantly understandable. Otherwise, a tour could easily become overwhelming. 

If you’re curious to know more, download the full Benchmark Report right here.

Download the In-Product Experiences Benchmark Report

Improve your in-app messaging and scale self-serve success with data and insights from 300 million user interactions with Chameleon Experiences. We'll send the Report to your inbox!
We use your email to send you new blog posts and product updates.

5 essential guidelines for effective product tours #

Each tour you create will have its purpose – to onboard new users, walk existing users through a major redesign, showcase a new feature, guide customers through a product plan upgrade, or something else that is relevant to your product. 

Let’s look into the most important principles and guidelines that will help you build engaging tours.

1. Don't lecture 🤐 #

When someone signs up for your product, they are excited to play with it and are often not prepared for long introductory tutorials. Showing a comprehensive tour as soon as they land inside your product for the first time will often be met with resistance – users will immediately seek to close/dismiss it. 

Why is this important?

Users typically want to get a "lay of the land" with your product before they are ready for guidance. That’s why you need to gradually reveal your tours and offer just the right information at the right time. Once users understand the basics of your product and how it helps them solve their problems, there will be plenty of time to introduce more advanced functionalities. 

Key takeaways:

  • Ask whether users are interested in a tour as the first step. Offer a “Snooze” button to enable users to come back at their own convenience. 

  • Remember that tours are part of your product marketing, so ensure that the messaging and design are compelling, engaging, and aligned with your brand

  • Use a less-invasive step design (e.g. don't cover the whole screen), or you could risk annoying users. You can go with slide-outs and modals, or enable users to start a tour by triggering a certain element on the page (e.g. icon or a hotspot).

2. Break it up 💔 #

People learn by doing, so giving users a chance to implement your guidance is critical. Long tours increase anxiety because users worry they have to ingest a lot of information before they can use it.

Why is this important?

With timely, relevant, and contextual tours will navigate users step by step through each action they need to take. This way, you avoid overwhelming them with too much information to comprehend at once.

Key takeaways:

  • Don't try to teach everything. Pick a single user action as the goal, and create a 3-step tour to convince a user to take that action.

  • Create many smaller tours rather than a single long tour. With Chameleon, you can also prioritize and sequence your Tours.

  • Copy is your #1 lever, make it clear, concise, and benefit-focussed. Use copy to encourage users, make them feel comfortable, and put off any doubts they may have. 

3. Provide value 💡 #

Users should feel thankful after seeing your tour. It should not be annoying or draining in any way for them to complete the tour, so don't ask them to undertake lots of work to get value. Instead, surprise and delight them with additional information that they would not have otherwise gleaned from your interface.

Why is this important?

If users don't find your tours valuable they will exit and be less open to further teaching in the future – so it's vital that you don't reduce your credibility by building irrelevant tours. On the other hand, our benchmark data shows that users are 4.5x more likely to complete a second tour if they complete the first instead of dismissing it.

Key takeaways:

  • Review your tour: Did you enjoy going through it? Ask your teammates, too. And, don’t forget to ask your users directly for their feedback. 

  • You can use Customer Effort Score surveys (more specific and actionable than NPS) to measure user satisfaction with a particular feature or UX/UI element. 

  • Assess how well your tours are performing – make sure you have connected your product analytics tool to see a bigger picture. For this, if you’re using Chameleon, leverage deep integrations with Mixpanel, Heap, Amplitude, and other tools to easily see performance data.

4. Embrace self-discovery 🔦 #

Although it's natural to want to pull your users through all of the hoops you want them to jump through, using product tours to do this will fail. You simply cannot force a user to use your product, and highlighting everything you want them to do is a bad way to encourage engagement.

Why is this important?

The BJ Fogg Behavior Model explains that people take action when they are motivated, they have the ability, and they are triggered, so you need a combination of these three elements to keep your users engaged. Focus on motivating users to take the action and offer self-serve support to enable users to learn at their own pace.  

Key takeaways:

  • Keep behavioral principles in mind when creating a tour, and make sure your users have the motivation, ability, and the right prompt to take action.

  • Focus your copy on explaining why a user should take certain actions; what value will they gain from doing so.

  • Use tours to highlight the most fundamental aspects of your product. For other ancillary features, use single-step tours as signposts.

5. Don't set it and forget it 😴 #

Traditionally, user onboarding was a set-and-forget project – teams would spend weeks overhauling the onboarding flows, then shift focus away, and repeat after 12 months. This is an inefficient and ineffective way to use product tours. 

Why is this important?

To keep up with ever-evolving user needs, apply Agile principles to the tour creation. Once you've built your tour, focus on collecting user feedback, analyzing the performance data, and iterate on until you're satisfied with the outcome.   

Key takeaways:

  • Be outcome-driven, not output-driven. Focus on a key quantitative goal and continue to focus on improving your product tour until you get there.

  • Set a conversion goal, beyond the completion of the tour. For example, you can use Chameleon for this, as it lets you track goals (such as clicks) without writing any code.

  • Provide clear accountability to someone on your team to own product tours and be responsible for regular updates.

5 excellent product tour examples for your inspiration #

We gathered some excellent real-life examples to show you how SaaS companies are using product tours effectively. Let’s dive in. 

Psst... If you want to see more examples, browse our Inspiration Gallery.

Example #1: Heap #

Heap is a product analytics platform, and the first-time setup is more complex than something you simply use like Dropbox or Gmail. It's B2B software that needs to be configured for your product, so it comes as an 'empty bucket' that the user has to invest in.

Heap tooltip tour

Source: Heap

To reduce friction and help users make it through the rocky first mile, Heap built its product tour to coach the user through tasks that make its product's specific capabilities clear: set events, segment users, track conversions, and build reports.

Its tour has two interlinked parts – a user onboarding checklist and hotspots that trigger tooltips, showing the user how to complete each checklist task.

The tooltip copy helps clarify feature-specific language by offering examples that are rooted in a Heap user's everyday work. The checklist gives users context on their setup progress and acts as a powerful motivator. Ticking checklist tasks sends small bursts of dopamine to the brain and makes your users feel good. 😄

Example #2: Typeform #

Source: Typeform

As an online forms software, Typeform is a Swiss army knife that can be used for lead generation, event registration, IT incident reports, fun office quizzes, and more. Because it's so open-ended, Typeform's onboarding tour depends on the user’s job to be done and whether they want to start from scratch or use a template.

Source: Typeform

The templates offered are a masterclass in Typeform best practices. They use advanced features like logic jumps and custom branding to cement the product's possibilities in the user's head and coach the user to make successful forms. 

For Typeform, the pre-made forms themselves act as the product tours – sequential, educational, and driven by tangible examples. This is a great way to drive users to the “aha!” moment quickly.

Example #3: Slack #

We are familiar with the explosive growth Slack has had, and a big component of it was how easy, friendly, and fun it was to set up at the beginning.

Source: Slack

Slack uses bright tooltips and personable copy in its now-legendary product tour. The series of tooltips highlight public channels and direct messages to help the user understand the differences, benefits, and product terminology.

As well as clearly communicating brand personality with a laid-back tone, the product tour gets you chatting with a bot straight away to instantly teach you the core mechanics.

Source: Slack

Want to create a similar tour for your product? Check out the video below to see how to re-create Slack's user onboarding experience with Chameleon 😎

Chameleon Recipes: Recreating Slack's User Onboarding

Example #4: Dropbox Paper #

Source: Dropbox Paper

Dropbox Paper understands that its users want to create collaborative documents that are easy to share and fun to use. So, its product tour is built into a gorgeous example document – Getting Started with Dropbox Paper.

Source: Dropbox Paper

The document is packed with hotspots that show rich video tooltips explaining the core features of Paper: changing formatting, adding files, and – of course – inserting emoji.

Source: Dropbox Paper

In a fun product aimed at creatives instead of enterprise executives, it makes a lot of sense to sell the benefits of emoji so early; Dropbox shows the feature off even before it explains how to format code or embed files 🤓

Source: Dropbox Paper

Example #5: Airtable #

It looks delightfully like it was built by Fisher-Price, but Airtable is a very complex product that condenses the power of an SQL database into something as simple as Google Sheets.

Source: Airtable

To simplify that inherent complexity, Airtable's product tour shows snippets of high-level information and practical gifs on a self-serve basis.

Source: Airtable

The multicolored row of icons in the bottom right each represents one part of the tour and highlights a specific feature with its core benefit and a call-to-action.

Source: Airtable

Over to you 👉 Engage more users with masterful product tours #

Take away these core guidelines and key principles, create your tours, and start testing and iterating until perfect.

Before you know it, you’ll be building effective product tours that can drive lots of happiness (and learning!) for your users, as well as an increased user engagement for your product.

We're always happy to help – if you’d like to speak with one of our product specialists to learn what product tours you should be building based on your goals, let's talk! You can book a demo below, or start using Chameleon for free to explore by yourself and get a sense of what your next product will look like.

Build in-app guidelines that retain users

Chameleon makes it easy for product teams to create product tours, tooltips, onboarding checklists, and in-app surveys without code.

Boost product adoption and
reduce churn

Get started free in our sandbox or book a personalized call with our product experts