CHAPTER 9: Keep New Users Engaged Inside And Outside Your Product

The mediocre teacher tells. The good teacher explains. The superior teacher demonstrates. The great teacher inspires.

- William Arthur Ward

Do you remember a teacher who made a difference in your life?

Even though you may not remember all the teachers you've had, I bet there were a few who made a lasting impression. They might have even influenced your career today. 

For me, that was Mr. Drmanic, my physics teacher during high school. He was funny, brilliant, and explained complex physics concepts with a ton of energy. Above all, he cared about his students. At the start of the year, he’d always ask everyone what they wanted to be when they grew up. He then made a point to relate his lessons to the professions we announced to the class. He inspired me to major in math and computer science in university. 

Mr. Drmanic’s teaching approach is exactly what user onboarding needs – to educate, explain, and inspire users. It’s crucial to find the right balance so that users are not too overwhelmed or get too bored.

Once you’ve created your Straight-Line Onboarding, the next step is to add “bumpers” so users remain engaged and eventually adopt the product into their life or workflow. 

So... how do you immerse new users into your product so they feel motivated and inspired?

This is where a useful framework called the BJ Fogg Behavior Model comes in.

The BJ Fogg Behavior Model

The BJ Fogg Behavior Model is the key to unlocking behavior change and product adoption for new users. Dr. BJ Fogg, behavioral scientist and founder of the Behavior Design Lab at Stanford University, created this model to facilitate behavior changes by adopting positive habits and letting go of unfavorable ones. It emphasizes three elements that must converge simultaneously for a behavioral switch to occur:

• Motivation (M): The desire or willingness to do the new behavior


• Ability (A): The ease in doing the new behavior


• Prompt (P): The cue or trigger to do the new behavior

Together, these elements form the BJ Fogg Behavior Model.

If you plot Motivation and Ability on a graph, you’ll see a curved smiling shape called the Action Line. 

Behaviors that ultimately become habits will reliably fall above the Action Line. For example, let’s say you’re training for a marathon and aim to wake up at 6 a.m. every morning. Even with no running experience, you set an unrealistic goal of running a 10-mile run that first morning. It’s a sure way to fail because this behavior falls below the Action Line.

But, let’s say you sleep in your running shoes and reward yourself with a chocolate banana smoothie after the run, all while setting a realistic goal of running two miles on the first day. Since you’ve increased the motivation and made it easier to get started, you’re more likely to accomplish it. 

Now, how does this help improve user onboarding?

Ultimately, you’re not onboarding people to a product. You're onboarding them to a new way of accomplishing something, a new way of life. In essence, it’s a behavioral switch for users. They have to let go of their old habits and adopt new ones.

If users are falling off during the user onboarding, the BJ Fogg Behavior Model provides a framework to boost those numbers:

1. Is the new behavior as easy to do?


2. Are users motivated to perform the behavior?


3. Are there prompts inside and outside the product to help users perform the desired behavior to complete the user onboarding?

In the Bowling Alley framework, the Product and Conversational Bumpers should contribute to one or more elements in the BJ Fogg Behavior Model to either make the onboarding experience easier, increase the motivation of new users, or prompt them to do something.

This chapter focuses on how you can use the BJ Fogg Behavior Model to keep users engaged both inside and outside a product. It’s divided into three sections:

• Section 1: Learn how to use visual cues, empty states, and content templates to make user onboarding easier.


• Section 2: Discover different ways to increase your users’ motivation inside and outside the product.


• Section 3: Create behavior-based prompts for user onboarding

If you’d like to see an overview of the different types of Product and Conversational Bumpers, see Appendix I and II. 

Section I: Make It Easy

If you want to change the behaviors and habits of users, you need to make the behavior as easy as possible to do. 

One useful concept to measure how easy (or hard) user onboarding is for new users is cognitive load– the mental effort required to learn new information. You can think of cognitive load as the mental processing power needed to learn how to use and interact with a product. If the information exceeds the user’s ability to handle it, it results in a cognitive overload.

From my experience, most user onboarding overwhelms new users with signup fields, product tours, pop-ups, in-app messages, checklists, tooltips, and more. If users feel overwhelmed, they’ll experience cognitive overload and likely abandon the app altogether.

So, how do you avoid overloading users?

With Straight-Line Onboarding in place from the previous chapter, you’re already halfway there. By now, you should have:

• Removed or delayed any unnecessary steps that don’t lead to the First Strike


• Reorganized the onboarding steps from easiest to hardest


• Simplified the onboarding by showing fewer options, while breaking down complex signup and setup processes into multiple steps

You can take additional steps within your product to make for a remarkable first-time experience for new users that’s both easy and effective. 

1. Provide visual cues to guide them to the next onboarding step

At times, new users need a small clue on what to do next. Little cues or context changes can encourage users to make a certain decision. This can be as simple as an image that points users to the next step. 

Basecamp adds some fun to their onboarding by using a cartoon character to point out where users complete the signup form. 

Visual cues can also be Product Bumpers that guide new users to achieve their desired outcome. 

Here’s what a Product Bumper could look like: 

• Product tours orient new users and help them find the fastest path to their first moment of value. Tours often walk users through a critical workflow or point out a few key steps that users might otherwise miss.

• Tooltips isolate elements such as form fields or buttons to guide a user through the account setup. Once a user completes a step, they are referred to the next one.

• Hotspots are often used to give a bit of contextual help to encourage new users to activate certain product elements or features. They can have unique pulsing animations to catch a user’s eye. Hotspots are a nice alternative to tooltips because they are less invasive to users; they don't open automatically and can be easily ignored.

These are just a few examples of Product Bumpers. Others include checklists, progress indicators, and welcome messages (more on those later).

When using Product Bumpers, tours are usually a better bet than an unending blast of tooltips. They help users achieve the desired outcome through action instead of memorization. Canva does a good job of this by guiding users through four steps to download their first design.

Be careful of using Product Bumpers as a band-aid for bad user experience. Often, when they’re added on as an afterthought, they detract from the onboarding experience and become momentum interrupters. 

Regrettably, they have become deeply associated with user onboarding, to the point where many companies believe adding them will automatically improve it. This is flat-out wrong. Ironically, it’s often a sign someone slapped on the onboarding experience without much thought or strategy.

2. Show a helpful empty state

When users are just starting out, they’ll often see pages within a product without any activity, history, or data because it’s their first time interacting with it. These moments are called empty states. 

Empty states are often overlooked as a helpful way to guide users to achieving their First Strike. This happens because interfaces are typically designed with data already in place, so the layout looks clean and organized. So when users sign up for the first time, it can be disheartening to see a bunch of zeros and placeholder images on the main page, which is what you see when you sign up for Mailchimp, an email marketing platform.

Instead, you want to paint a picture of what it will look like once the user is actively using the product. Emphasize the value of taking action. Go beyond showing users the benefits of your app. Direct them to the desired action as well. 

Take a look at Dropbox Paper’s empty state. It describes how it can help you “brainstorm, review design, manage tasks or run meetings.” There’s a clear, primary call-to-action to direct users to begin using Dropbox Paper.

A word of warning: avoid using “dummy data” to generate fake activity and statistics in the empty areas. While it’s tempting to cover empty states with fake data to bring the dashboard to life, it presents an entirely new problem of overwhelming users. You’re opening up the doo