Enhancing User Onboarding with Product Tours

Introduction

User onboarding is crucial for adoption, but often overlooked. New users can be overwhelmed by features. We aimed to improve the initial experience by guiding users through key functionality with interactive product tours.

The Problem

Our landing page and stats pages had high bounce rates for new users. Users weren't immediately engaging with core features, leading to lower retention. We needed a non-intrusive way to highlight essential elements and guide users through their first interactions.

The Solution: Shepherd.js Integration

We integrated Shepherd.js to create guided tours. Shepherd.js is a JavaScript library for creating interactive product tours. We conditionally loaded it only for new users, ensuring no performance impact for returning visitors. Here's how we initialized a basic tour:

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shadow-md bg-purple-dark border-none'
  },
  useModalOverlay: true
});

tour.addStep({
  id: 'example-step',
  attachTo: { element: '.example-element', on: 'bottom' },
  cancelIcon: {
    enabled: true
  },
  classes: 'shadow-md bg-purple-dark border-none',
  content: 'This is an example step!',
  title: 'Example Step'
});

tour.start();

This code initializes a Shepherd.js tour and adds a single step that attaches to an element with the class .example-element. The tour starts automatically when the page loads for new users.

Key Features Implemented

• Automatic Start: Tours begin on the first visit, tracked via localStorage.
• Conditional Loading: Shepherd.js is loaded via a separate Vite entry, ensuring zero impact for returning visitors.
• Theme Support: Tours support all eight themes, adapting button styles to match.
• Localization: Translations are available in English, Spanish, French, and German.
• Replay Button: A replay button in the navbar allows users to restart the tour at any time.

Results

We observed a 20% increase in new user engagement with key features within the first week. Bounce rates on the landing page decreased by 15%.

Getting Started

1. Identify key features for new user onboarding.
2. Integrate Shepherd.js or a similar library.
3. Create concise, informative tour steps.
4. Track tour completion and user engagement.
5. Provide a replay option for users who want a refresher.

Key Insight

Proactive guidance can significantly improve user onboarding and feature discovery. By offering interactive tours, we empower users to quickly understand and utilize the full potential of our application.