App Tours with Shepherd.js

We leverage Shepherd.js to create step-by-step application tours and feature introductions to help new users get up to speed quickly with your web app.

Why do I need an app tour?

We've leveraged the flexibility of these tours to lead users through a number of events. Upon the first time logging into an application, tours can be used to validate and ensure a smooth setup process. We used this technique for our project with Brokermate to ensure users completed all the required setup steps.

New Users

Introducing new users to the features of your product can help them get up and running much more quickly than if they were exploring the app on their own. If a new user gets confused with how to use your app, they may become frustrated and abandon your product all together. An application tour smoothly guides them through everything, for a great first impression.

New Features

After spending countless hours refreshing your app flow, you want to ensure your existing users are not confused when they encounter the latest changes for the first time. Your existing visitors can be shown the exciting new features and how to maximize their ability to complete important tasks to ensure long term effectiveness for the investments you've made to improve your software.

Onboarding

If your product onboarding is a large, multi-step process; it is helpful to break it up into multiple tours. This allows you to keep each tour small and focused, so it is not overwhelming to the user. They can then complete each section at their own pace. You can also track their progress to continue encouraging them to complete all the onboarding steps. We've use Shepherd tours to do basic signup, lead a customer in their second login, create additional accounts, and more detailed processes such as creating branding profiles in a white label web application.

Why use Shepherd?

Shepherd has full keyboard navigation support, focus trapping, and a11y compliance via aria attributes. This ensures that everyone, regardless of abilities, is able to have a great user experience when they interact with your product.

Shepherd's styles are kept minimal, allowing you to easily customize the look and feel, but still give you enough to drop in and be ready to go quickly. This allows you to have a highly stylized, custom site tour experience to match your brand.

Shepherd is ready to drop into your application using React, Ember, Angular, Vue.js, ES Modules, or plain Javascript! Integration with any app is a breeze with Shepherd, and your developers will appreciate the breadth of options for quickly spinning it up.