The 5 best walkthrough examples for web apps

How would you teach someone an essential skill that they’ll need to use on their own in the future, like teaching a child to ride a bike? Would you just point out the tools they’ll need ("here's a trike, kid"), or would you walk them through the steps to make sure they had the motions down?

Probably the latter, right? 

Walkthroughs are used by teachers and software products alike to improve comprehension and build muscle memory through step-by-step instructions. 

Effective product walkthroughs teach new users how to perform a specific action that they’ll need to access a product’s core value. Since they’re one of the most prescriptive user onboarding tactics, walkthroughs can feel tedious when executed poorly. But when done right, this user onboarding pattern is one of the most effective ways to guide users to their aha moment and set them up for long-term product adoption.

Below, we’ll take a look at 5 of our favorite product walkthroughs for web apps. But first, let’s go over exactly what a walkthrough is (and what it’s not). 

Walkthroughs vs. product tours

Walkthroughs and product tours both are classic onboarding strategies, and it’s easy to conflate the 2 terms. And it’s true that they’re similar—in fact, you could even think of a walkthrough as a kind of product tour, the way a square is a kind of rectangle. 

So what’s the difference between a product tour and a walkthrough? A product tour is meant to give users the lay of the land—you’re showing them where the most important features can be found. A walkthrough is a little more in-depth—you’re taking users step-by-step through a set of actions that they need to take to achieve a specific outcome.

Put another way, a product tour is like the tour you’d give overnight guests (“here’s where the recycling goes,” “towels are in here,” “help yourself to this cabinet”) whereas a walkthrough is more like the guidance you’d give if you were teaching someone to cook a particular dish (“now chop the parsley,” “add a tablespoon of oil to your pot,” “let simmer”). 

The 5 best product walkthroughs

Now that we know exactly what a walkthrough is, let’s dive into our top 5 favorite walkthroughs for web apps:

1. Asana

Project management tool Asana helps teams organize, track, and manage their work on web or mobile. Their product is characterized by a clear, simple interface with playful details and pops of color. New users are given a succinct, action-driven onboarding tour that walks them through creating their first task—a clear aha moment for new Asana users.

What we like about Asana’s walkthrough:

• It’s subtle but effective. A series of pulsing hotspots draw attention to specific elements, which familiarizes new users with Asana’s UI. It’s prescriptive without sacrificing a sense of discovery. 
• The walkthrough progresses as users take meaningful actions—each tip requires the user to click the element on the page it points to. The action-driven approach guides users through their initial setup—creating a task—helping them reach their  aha moment faster and more confidently than they would on their own.
• The walkthrough ends with a tooltip that shows  users where they can find self-service help in the future. Giving users the resources they need to resolve their own questions reduces both support burden and user frustration down the line.
  

2. Humanity

Employee management platform Humanity offers a number of different features, but the company wisely chose to focus their new user onboarding on the core functionality: scheduling. The highly prescriptive walkthrough uses action-driven tooltips to remove guesswork and sequentially guide new users through the actions they need to take to achieve value.

What we like about Humanity’s walkthrough:

• Even though there are a LOT of steps to this experience (more than we’d normally recommend), the highly prescriptive, action-driven walkthrough does a great job of teaching new users how to use Humanity’s core features. Because user action is required, walkthrough feels thorough, not monotonous.
• Humanity took the beginner’s mindset to heart. Even non-tech-savvy folks can follow along, since gifs and spotlights take all the guesswork out of the process.
• The walkthrough is focused on teaching users how to build out a schedule—but that’s not the only feature that the platform offers. So, at the end of the walkthrough, users are given the chance to take a product tour of the rest of Humanity’s features. That tour is less in-depth, and is a nice way to let go of users’ hands gradually, instead of dropping them into a complex product before they’re ready.
  

3. Pinterest

Pinterest is a visual social media platform that lets users save, share, and search for images from around the internet. 

New users are asked to select 5 or more interests during signup, which results in personalized feed right off the bat. A very brief walkthrough and user onboarding checklist help them get started from there.

What we like about Pinterest’s walkthrough

• It’s very brief. The core action here is actually very simple—save an image to a board. After customizing your feed during onboarding, there are just 3 clicks required to save an image and create your first board (4 if also you visit the site the image came from initially).
• Pinterest doesn’t sacrifice discoverability—users can scroll through their feed for as long as they want before clicking on an image that catches their eye. 
• A simple checklist makes it clear to new users what their first priorities in the platform should be.
  

4. Autopilot

Autopilot is a tool that allows marketers to design customer lifecycle campaigns via email, SMS, etc. Their prescriptive walkthrough helps familiarize users with steps necessary to build campaigns.

What we like about Autopilot’s walkthrough:

• There’s a lot going on here—tons of buttons and elements in a rainbow of colors. Autopilot takes the guesswork out by being highly prescriptive. Blinking hotspots on top of the buttons that users should click encourage the right behavior.
• Subtle animations, like the little button wiggle that happens when users click the wrong thing, provide instant feedback, which is useful when learning new behaviors.
• User action is required at each step. This keeps users engaged with the walkthrough and builds muscle memory.
  

5. GoToWebinar 

GoToWebinar is a popular choice for webinar hosting. GoToWebinar has changed a lot over the years—it began as an enterprise desktop solution, but has since been redesigned and repositioned to include a beautiful web app, a free trial process, and robust user guidance throughout the product journey.

When they launched a new Transcripts feature, GoToWebinar used Appcues to create a new feature announcement slideout and walkthrough.

What we like about GoToWebinar’s walkthrough

• This is a great example of user education beyond onboarding. These flows were targeted to returning users who already knew the platform, but were new to the feature. Walkthroughs are to product launches as pickles are to great deli sandwiches.
• It takes users through every click they’ll need to access this somewhat “hidden” feature in the future.
• The walkthrough concludes by setting user expectations about what happens next, and links to support docs to let users know where to go for more detailed help if they need it.
• It’s made with Appcues!

Takeaways

Walkthroughs aren’t necessarily a good fit for every product. For example, in a tool like Canva or Typeform—in which part of the joy of the new user experience is discovering all the possible templates and customization options they can choose from—a walkthrough might feel overbearing and inhibit that creativity. Both these products prioritize discoverability instead. 

But walkthroughs are great for products with a well-defined, specific aha moment that might take a little work to get to. 

If you have a complex SaaS platforms that require users to take a series of particular actions to realize its core value—and you’ve confirmed that those actions lead to your activation metric—your new users will benefit from a more prescriptive onboarding experience. 

Looking for more onboarding inspiration? Check out 5 of our favorite user onboarding examples for web and mobile apps—or head on over to ReallyGoodUX for a whole bunch of inspiring user experiences, updated weekly.