User Onboarding

Product Walkthroughs - 3 outstanding examples and everything else you need to know

    #1 product adoption platform. Quick setup, lasting engagement.
    Start for free >
    See how UserGuiding can help you level up your product experience.
    Talk to an expert >
    #1 product adoption platform. Quick setup, lasting engagement.
    Join 20k+ product people >
    Ready to Boost
    Product Adoption?
    Meet With Our
    Onboarding Experts

    Home / User Onboarding / Product Walkthroughs - 3 outstanding examples and everything else you need to know

    The competition between web apps and products has never been as fierce as it is today.

    Your favorite tools have countless alternatives that relentlessly try to be better than their competitors. Although the functionality of products is crucial in this race, being able to effectively demonstrate the value of your product offers an easy way to get ahead.

    In the increasingly important world of product education, product walkthroughs have risen to the top of the stack as one of the most effective ways to get your users to their "Aha!" moments. In this article, we will focus on the part of product walkthroughs related to user onboarding of web apps and products.

    Below are the main questions we will discuss:

    • Which products should use product walkthroughs,
    • How to create the perfect product walkthrough in 3 Steps,
    • 3 great product walkthrough examples,
    • Benefits of a product walkthrough.

    Without further ado, let's start by defining what a product walkthrough is.

    What Are Product Walkthroughs?

    Product Walkthroughs are interactive experiences that take the user through the steps they need to take in order to complete key tasks within the product. Product walkthroughs can be highly effective when done well.

    When we are simply given information (like on a tour), it's only human nature for retaining that information to be difficult. We are much more likely to retain information when we complete the task ourselves, and product walkthroughs utilize that.

    Product walkthroughs are very similar to user set-up experiences, which take you through the steps required to register to use a product, such as providing an email, setting up a password, uploading a profile picture, and so forth. But these are generally considered separate parts of the user onboarding experience. 

    This is because user setup is a one-off task that needs to be completed by a new user, but they do not need to retain the knowledge to complete this task repeatedly. User expectations for setup and walkthroughs are also quite different. For setup, users generally expect to be spoon-fed and follow fairly rigid instructions. Users tend to be less patient when it comes to using the product itself.

    In short, they are basically one of the best user onboarding practices.

    what is product walk through
    Let's find out whether or not you need a product walkthrough.

    Which Products Should Utilize Walkthroughs?

    Teaching users how to use products is always essential for success, but the best way to teach a user how to engage depends on the product.

    Specifically, product walkthroughs tend to be highly structured and rigid and therefore work best when there is generally only one single route that will bring value from the product. Walkthroughs are highly effective in helping users easily discover and understand the steps of these kinds of products.

    Walkthroughs can be less practical for more creative products that offer many different working options.

    For example, take a design tool such as Canva. There are hundreds of different design templates and thousands of different feature options. Walking them through a generic design task is, therefore, unlikely to show the user how to do what they actually want to do.

    That's why Canva first starts with just one design in their product walkthrough, which is something you should keep in mind: You can split product walkthroughs into different pieces. (More on this later...)

    With that said, the utility of interactive walkthroughs is not limited to onboarding new users - they can also be effectively leveraged to instruct existing users about updates and new features. You can also target walkthroughs at different user segments. For example, you could have:

    • Walkthroughs for new users;
    • Walkthroughs for all users after the launch of an important new feature;
    • Walkthroughs for users who have been using the product for a month or so but who still haven’t advanced beyond the basic features, showing them some of the more complex things they can do;
    • Walkthroughs for users returning to the product after a long break.

    How do you make a Walkthrough in 5 Simple Steps

    Now, there are four steps to creating product walkthroughs that can make you stand out in the competition.

    1. Start with your Value Metric

    The best product walkthroughs aim to get users to their "aha" moment - the moment when the product is delivering value for the user - as quickly as possible.

    What that moment occurs ultimately depends on the product.

    Take Instagram for example.

    Does the "value" moment happen when you like someone else’s photo, publish your own photo, or have the photo that you published liked by someone else?

    Product owners should dig deep into their analytics to identify what the value metric for their product is. This is the point of engagement that the user needs to reach within the product for them to understand its value to them. After that moment, they are more likely to continue using the product rather than abandon it.

    For example, Twitter has determined that users who follow at least 20 accounts within the first three days of joining the platform are much more likely to become regular users. So, their onboarding approach is focused on getting users to this point.

    Walkthroughs should focus on enabling users to complete the task needed to reach this value point as well. For an online store product, it might be the user listing their first product. For task management software, it might be setting up and sharing the first task. As mentioned before, it all depends on what the product is designed to do.

    examples of product walkthroughs
    You should set the route according to your value metric

    2. Define the Barriers

    No one likes to be spoon-fed; it can feel patronizing and like a waste of time. A rigid walkthrough can seem more like a bother rather than helpful if the route to success doesn’t have any barriers to circumvent. 

    For example, you shouldn’t need the camera on your phone to show you how to take a photo, switch to video, or switch between front and back cameras. All of those steps should be obvious from the UI. Instruction could be useful when it comes to more sophisticated features, but the user has probably already met their value metric at this point – so will they even be interested?

    Onboarding should focus on what- (if anything)- is standing between the user and their value point and then be designed to guide the user past those obstacles. Identifying these obstacles will probably require a bit of user research, usability testing, and seeing where they struggle. This process does not have to be time-consuming - research shows that we tend to identify 80 percent of usability issues from the first five user tests.

    Common barriers include:

    • Users are unaware of the most important features, where they are, and how to use them.
    • Users do not understand the value that they will gain from using particular features.
    • Users are missing important steps along the way to completing a vital task.
    • They overestimate how difficult it will be to reach a certain point.
    • They do not understand the terminology used.

    Once these barriers have been identified, you will have a good idea of what needs to go into the walkthrough (and whether a walkthrough is the best approach for educating your users).

    3. Design

    Just as much attention should be paid to the design of a walkthrough as the product itself, as it can make all the difference when it comes to successfully onboarding users.

    The best product walkthroughs are:

    • Clear - They tell the user exactly how to use the features and don’t do things such as relying on unexplained jargon.
    • Concise - Users want to get to the value point as quickly as possible, so walkthroughs should be comprehensive but as short as possible.
    • Engaging - Interactive walkthroughs should already be engaging; by definition, they require users to interact and complete tasks. The tasks should be meaningful, with the amount of guidance appropriate to the complexity of the step in question, graphically appealing, and using appropriate language.
    • Skippable - Not everyone wants to have to complete a walkthrough before using a product. They may have used the product before, and they may already be an expert. While you have identified the barriers that exist for most users, not everyone will be affected by them.
    • Additional Support - On the flip side, for some users, the walkthrough may not be enough, and they might need more support. This should always be clearly accessible within the walkthrough, for example, a live chat feature.

    4. Segmentation and Personalization

    One of the key elements missing in your content is the importance of segmenting and personalizing product walkthroughs.

    This involves creating different walkthrough paths for different user types or use cases. Personalization can significantly increase the effectiveness of a walkthrough by catering to the specific needs and context of each user segment​​.

    5. Development

    And comes the most difficult part of all.

    Now I won't talk about how you can use JavaScript or CSS/HTML to create a product walkthrough for your web app. That'd take a while.

    If in-house development of the walkthrough is your only option at the moment, that's OK. Your developer will know what to do with your design.

    However, if you want to create the product tour by yourself, you can use a no-code product walkthrough software, such as UserGuiding, to create the exact onboarding flow you want.

    Using UserGuiding is as simple as dragging & dropping. Here's what I've created in less than 10 minutes on our favorite video streaming platform, YouTube:

    product walkthrough youtube
    UserGuiding's walkthrough on YouTube

    Don't believe me?

    You can try UserGuiding on your product completely free.

    3 Examples of Great Product Walkthroughs

    Now that we know the principles of a good walkthrough, what does it look like in practice? Let’s take a look at three examples from web products..

    1. CitizenShipper

    CitizenShipper is an online shipping services marketplace that operates in the US, offering various delivery and shipping services to end-users.

    They also provide freelance drivers and contractors with a platform where they can make offers on shipments from the end-users. Since the end-user part of their product was straightforward, and it was the drivers who were having a hard time navigating their product, they decided to implement a simple product walkthrough for user education.

    Since their drivers regularly use both mobile and desktop platforms, they've created 2 separate app walkthroughs for different platforms.

    As soon as a new driver or a contractor logs in to CitizenShipper, they're met with a brief product walkthrough:

    product walkthrough citizenshipper web
    Created with UserGuiding

    Below is the mobile version of the same guide:

    Created with UserGuiding

    With these product walkthroughs they've created with UserGuiding, CitizenShipper actually achieved a 25% increase in their user activation rates, proving the positive influence of product walkthroughs on business metrics.

    Here's what CitizenShipper did right with their website and mobile walkthrough:

    • Creating separate walkthroughs for different platforms
    • Keeping it short and simple to retain user's attention
    • Assisting the user as they complete the task, not just showing them around

    2. Evernote

    Evernote is a note-taking app that is available as a mobile app, desktop app, and a web product. You can create to-do lists, and tables, take notes, and do much more with it.

    Let's sign up with Evernote and access its web app dashboard for the first time. As you can see below, the first thing that pops up is a welcome message.

    product walkthrough examples evernote 6
    Evernote's first walkthrough step is a welcome

    After we click "Get started", we are asked what we want to use the product for, I've chosen to create a to-do list and followed along with the walkthrough.

    Now Evernote has various features, too, so the product asking us what we would like to create first is an excellent plus as to get us to our aha moment.

    product walkthrough examples evernote 5
    The later steps consist of a short survey and a tour according to the answer.

    While creating my first to-do list, the walkthrough guided me around the editor.

    What Evernote does wonderfully is that they don’t just show where the elements are – they demonstrate the different things you can do with them using GIFs.

    I have to admit that this design is extraordinary.

    product walkthrough examples evernote 4
    Evernote's onboarding tour utilizes GIFs in the onboarding

    Another example where they demonstrate the different functions of an element is shown below.

    product walkthrough examples evernote 3
    Evernote's onboarding is interactive

    As soon as the guide for to-do lists ends, a user onboarding checklist appears on the left side of the dashboard, which you can toggle on or off.

    There are guides for every feature of Evernote, but they are not mandatory. Remember we said that good walkthroughs are skippable? This is a good example of that.

    The walkthrough for the next feature starts as soon as you click the related task on the checklist.

    product walkthrough examples evernote 2
    Evernote supplements the onboarding with a checklist

    When you finish all the tasks, the walkthroughs end with a message that says "Congratulations" and then informs you that help is always accessible. Pay attention to the message box that appears in the lower left corner.

    product walkthrough examples evernote 1
    The congratulation page on Evernote's onboarding

    Evernote does a good job of:

    • Prioritizing  the walkthrough of the feature users want to use,
    • Demonstrating the functions of elements,
    • Not pushing users toward the other guides but giving them a checklist they can follow anytime they want.

    3. Ninox

    Ninox is a cloud-based data management tool that users can create and maintain databases.

    What makes their product walkthrough great is the simplicity of the guides. As you first log in to the product, "your assistant" ensures you it will show you around in just a few steps.

    web app product walkthrough example ninox 3
    Ninox's onboarding welcome screen

    And it delivers on the promise by walking you through the main dashboard in just five steps. Once you have completed these five steps, a checklist appears.

    web app product walkthrough example ninox 2
    Ninox's interactive onboarding

    Did I mention that checklists are great?

    There is another promise on the checklist – it says that you can get started with Ninox in just three minutes.

    As you complete the remaining tasks, you see the various parts of the product quickly and understand the value it offers.

    web app product walkthrough example ninox 1
    Ninox's onboarding checklist triggers guides.

    And honestly, it really does get you started with the product in only three minutes.

    The attention span of users is shorter than you think, and pushing them towards their “aha” moments as quickly as you can is a must.

    Ninox sets a great product walkthrough example by:

    • Promising users it won't take long (and delivering on it)
    • Keeping the walkthrough simple and pushing the users to their "aha" moments in the least possible amount of time.

    A Product Walkthrough is Highly Beneficial

    Hopefully, having read through the ins and outs of product walkthroughs, there is little doubt in your mind about the benefits of well-executed product walkthroughs related to the challenge of creating the correct type of product education.

    Good user onboarding and product education means that users start receiving value from your product more quickly, which means that they are more likely to continue using it and will be happier with the product. That provides opportunities for upselling, creating fans who advocate for your product, and much more.

    While this is true on all excellent onboarding and product education, walkthroughs stand out because they teach not just by showing the user what to do but by getting the user to actually do it themselves. This makes complex concepts easier to grasp and makes what is learned easier to remember.

    That is why interactive walkthroughs are one of the most powerful methods of successfully educating users.

    Frequently Asked Questions

    Why should I use a Product Walkthrough?

    In order to educate your users and push them to their aha moments, you should utilize a product walkthrough.

    When should I use a Product Walkthrough?

    A product walkthrough is necessary during a new user's onboarding, but it can also be utilized to educate lapsed users or after a product redesign.

    What is the best software to create Product Walkthroughs?

    There are many product walkthrough software on the market. But with UserGuiding, you can not only create interactive product walkthroughs, but user onboarding checklists, tooltips, surveys, and much more, without breaking the bank.

    What is a good walkthrough?

    A good walkthrough is simple and efficient at the same time, showing users the core features of the product without crowding the user experience.

    Join 1000+ teams
    driving product success at speed

    14-day free trial, no coding needed, 30-day