The 5 Best Walkthrough Examples for Web Apps

I just got a puppy. He’s mini labradoodle named Theo.

And aside all the joy Theo brings me, I feel a bout of grief every time he urinates on the floor—which, unfortunately for me, isn’t infrequent. But who can blame such a cutie?!

Over our first few weeks together, I’ve learned Theo’s habits. I can now better identify when Theo needs to go pee, and so I throw my shoes on and take him out. Having greater awareness over Theo’s needs has helped me become a more successful dog owner.

And it’s my firm belief that the same can be true of a product owner working to train people to use their web app. Awareness over a new user’s needs can lead to a lifetime of happiness. But an unaware onboarding experience leads to churn, bounces, and grief—a virtual urination on the floor.

Web apps often use walkthroughs to train new users. The most effective product owners know who their users are and what they need to accomplish, and they use walkthroughs to effectively help their users achieve that.

After studying over 300 onboarding experiences, here are what I consider the 5 best walkthrough examples:

Flow

Flow helps teams manage projects, much like Asana and Trello. New users familiar with tools like Flow can skip their walkthrough, while others not familiar can opt in.

What we like about Flow’s walkthrough:

• The option to skip steps lets users opt out of the familiar or continue if they find it helpful. Further, the walkthrough begins with a bulky arrow that is simultaneously easy to spot or easy to ignore.
• Their 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 eases users through their initial setup—creating a task/project.

Tumblr

Tumblr requires little setup from new users. Its walkthrough is therefore focused to show users key UI elements for engagement.

What we like about Tumblr’s walkthrough:

• Tumblr’s product tour requires you to click ‘next’ to advance each tip. This approach (over an action-driven one like Flow's) works well to drive engagement with the platform—there’s no setup involved.
• Tumblr animated elements of their product to burn a deeper desire for users to engage. This delight works well with their personality.
  
  

Inbox

Google’s Inbox product is an evolutionary leap from Gmail. But for many users, reorganizing one’s inbox can create anxiety. Inbox’s walkthrough helps mitigate that.

What we like about Inbox’s walkthrough:

• Inbox’s welcome message lets users know they are in the right place. This may sound like an obvious thing to do, but you’d be surprised how many products miss it.
• The modal series communicates its advance functionality comprehensively. It includes just a few words of text, some simple icons, and a flattened out screenshot on each slide to tell its story. Even if new users don’t fully digest each feature’s capability, skimming them gives a better idea of what’s to come if even by a little bit.
• The dark gradient behind the walkthrough gives users a preview of what’s to come. Dropping users into their dashboards immediately would have been much more anxiety-provoking.
• Tips create a ton of focus without taking away your inbox

Want to build walkthroughs like Inbox, Tumblr and Flow?

Bynder

Bynder helps companies manage their brand assets. Their walkthrough lives in its self-service demo app to help users understand its product.

What we like about Bynder's walkthrough:

• Bynder uses Appcues to build its walkthroughs. And although Appcues is a third-party tool, their walkthroughs look awesome and native to their branding.
• Their walkthroughs encourage exploration—they use hotspots to get users to click and learn.
• They use consistency in their walkthrough. Their modal messages are structured similarly, and their walkthroughs are composed of 2-step modals followed by hotspots.
• Bynder asks for feedback on their product tour when all said and done. This is evidence that Bynder is actively improving their walkthrough.

Autopilot

Autopilot is a sophisticated tool that allows marketers to design customer lifecycle campaigns via email, sms text and more. Their walkthrough helps familiarize users with how to build campaigns on a unique visual interface.

What we like about Autopilot’s walkthrough:

• The first thing you’ll notice are the blinkers that live on top of buttons that Autopilot wants you to click. This takes the decision out.
• And when you click off there is a wiggle that shows an error. The same as ‘show me’ … this steers you back.
• Autopilot offers a celebratory word of encouragement when the walkthrough is completed.

Takeaways

The best walkthroughs have a high level of situational awareness. They help their user get closer to their aha moments by marrying the right product tour UI pattern with their users' needs.

If you have other walkthroughs you really love please share them with us. It’s our goal to keep this post updated with the best information.