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.
Create Product Walkthroughs in minutes, without coding.
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.
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 or these kinds of products.
Walkthroughs can be less effective 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 that 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 4 Simple Steps
Now, there are three 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’re liking someone else’s photo, publishing your own photo, or having 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.
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. 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:
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 the shipments from the end-users. Since the end-user part of their product was straightforward and it was the drivers that were having a hard time navigating their product, they’ve decided to implement a simple product walkthrough for user education.
Since their drivers regularly used 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 by a brief product walkthrough:
And below is the mobile version of the same guide:
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, 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.
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 a great plus as to get us to our aha moment.
While creating my first to-do list, the walkthrough guides 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.
Another example where they demonstrate the different functions of an element is shown below.
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.
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 on the lower left corner.
Evernote does a good job of:
- Prioritizing the walkthrough of the feature users want to use,
- Demonstrating the funcitions of elements,
- Not pushing users toward the other guides, but giving them a checklist they can follow anytime they want.
3. Ns
Ninox is a cloud-based data management tool that users can create and maintain databases with.
What makes their product walkthrough great is the simplicity of the guides. As you first login to the product, “your assistant” ensures you it will show you around in just a few steps.
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.
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.
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 for product walkthroughs, there is little doubt in your mind of the benefits of well-executed product walkthroughs related to the challenge of creating the right 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 that advocate for your product, and much more.
While this is true for all good 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 difficult 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.
