The anatomy of a brilliant onboarding experience–HelloBar

Hiten Shah and Neil Patel, the co-founders of KISSmetrics and CrazyEgg, seem to love building products that require you to add code to your site.

Their most recent product, HelloBar, is no exception: with a few lines of code or a WordPress plugin installed, HelloBar fixes a thin, colorful call-to-action bar to the top of any webpage or blog.

You can use this call-to-action to drive on-site traffic to other parts of your site. You can use it to drive affiliate traffic to other people’s sites. You can even use it to collect readers’ email addresses and add them to a list.

If you read a lot of marketing blogs on the internet, you’ve probably seen HelloBar somewhere. It’s a solid product that gets results, even though it’s fairly limited in what it does.

But despite being a simple product, HelloBar has a significant onboarding challenge to overcome: to get any value from the product, (to use it at all) you have to install third-party code on your site.

Let’s take a look at all the clever things Hiten and Neil cooked up to help them help you get HelloBar up-and-running.

We’ll start with the homepage

Notice how little distracting navigation there is on the page. The only things you can click on are the big, red button and the small, barely-there links in the footer.

This über-minimalist approach makes sure your attention is where the page wants it to be: on the headlines, the subhead, and the simple, almost-frictionless call-to-action: You don’t even have to enter your email to get started! Just a simple url.

The color choices are also thoroughly considered: the clear, calming blue-green of the background set against the stark, high-contrast red of the HelloBar logo, the word “free” in the subhead, and the call-to-action button. The typefaces are also entirely readable.

Now let’s look at the headlines. Though they are straightforward and simple, if I have any gripes with HelloBar’s homepage, they are with the headlines.

The way the headlines are written, it sounds like two different value propositions: “Engage your website visitors” and “Get people to your most important content.” The former certainly sounds like something I would want, but it’s also completely generic. “Get people to your most important content” is better, but I can’t stand the word “Get.”

I’d test even clearer copy here. Something like “Direct website visitors to the most important parts of your site/capture more email addresses on every page of your blog.”

Ok, now onto HelloBar’s outstanding onboarding process.

Step 1: The big, clear fork in the road

Much like the well-executed KISSmetrics new-user experience (which I analyze in-depth here) HelloBar’s on-boarding experience gives you two clear paths to take. If your goal is to direct traffic to a specific page, you choose “Drive traffic.” If you want to collect email addresses, you choose “Collect email.”

Note the use of “Your” in the supporting copy. It’s not just “HelloBar” that drives more traffic to a specific URL or collects email addresses. It’s “your HelloBar.” Encouraging people to think of the HelloBar they’re about to build as something they already have is subtle and smart.

Meanwhile, at the top of the page, a standard HelloBar is already present. Now you see the goods you’re about to get, before you get them! Now you understand exactly what a HelloBar is, and maybe you want your own a little bit more.

Step 2: Build your HelloBar

For the sake of this blog post, I chose the “Collect email” path, but the “Drive traffic” path is mostly the same. Here’s what happens:

The first thing to notice is that the HelloBar at the top has changed. Now it shows an email capture form. Ah, so that’s what it looks like!

Below the sample HelloBar is a friendly instruction (“Let’s start making your HelloBar.”) and a clear explanation of the purpose of this page: Do you want to collect email addresses, or email addresses AND names?

There’s also a small notice indicating that HelloBar will appear on every page, but the advanced options to change this are hidden away behind the “change this” link: best not to slow the process down with too many things to think about.

If you’ve made a mistake and want to change your goal to “Drive traffic” there’s a big white back arrow to guide you. But this on-boarding experience wants to drive you forward, so the “Continue” button is blue.

Let’s continue.

Step 3: Customize your HelloBar and make it “yours” for real

Thus far, HelloBar’s onboarding experience has clearly demonstrated the product and walked you through some of the steps you need to take to make your HelloBar do what you want it to do.

Now here’s where it gets really, really smart:

As you can see in the image above, this screen is where you customize your HelloBar to say exactly what you want it to say. The headline states clearly what this page is about (“Create your HelloBar content”) and the default text under “Bar Text” comes pre-highlighted, so you know to change it and make it your own.

When you start editing this text, the demo HelloBar at the top of the screen changes to match what you write in real time. When you click on the color you want, the demo HelloBar changes color. You can change the text of the call-to-action button, and it, too, will change in real time. Now your HelloBar is truly yours. You can see it right there!

(Again, the advanced options are hidden from view unless you click the “Customize look and feel…” link. As Hiten, the designer of this onboarding experience, will tell you, it’s usually a good idea to KEEP IT SIMPLE, STUPID.)

Step 4: Create your account!

This is my favorite thing about HelloBar’s onboarding process: the “give us your email address” part isn’t the first step. It’s not even the second or third step! No, they don’t ask you for your email address until:

  1. You’ve clearly indicated your goals
  2. You’ve seen the product in action
  3. You’ve made the product your own

By making you complete those steps, HelloBar gives you a strong hint of its value. You now understand what HelloBar is and how it works, and you’ve created your own, custom HelloBar. Only then do you have to share your contact info to continue! I love it.

And I haven’t even shown you the best part:

There it is: Your own HelloBar–the one you just spent 3-5 minutes customizing–right there at the top of the account-creation screen, reminding you of what you’re about to get.

Step 5: The hardest part comes last

So you’ve customized your HelloBar and created your account. Now comes the hard part for everyone: getting HelloBar installed on your site.

To make this significant obstacle more surmountable, HelloBar’s onboarding process gives you four options:

You can:

  • Install the code snippet yourself if your know how.
  • Download a customized WordPress plugin and upload it to your site.
  • Email the code snippet to your developer for her to install.
  • Ask for more help.

Each of these options takes you to its own screen, and each of these screens clearly sets the context and provides helpful instructions.

If you’re going to install the code yourself, you see the code snippet and a “click-to-copy” button that removes the friction of highlighting the snippet and copying it yourself:

If you want the WordPress plugin, you see a WordPress branded screen with the download link, simple instructions, and links to more instructions if you need them:

If you want to send the code snippet to a developer, you see a pre-written email template that you can edit if you want:

Like the rest of the onboarding process, each of these screens does everything it can to answer your questions, address your objections, and eliminate as much of the friction as possible.

And, of course, your HelloBar stays at the top the whole time, enticing you.

It’s quite smart.

Loved this? Spread the word

About the Author

Dan Kaplan created the Foundational Story Framework to help startup founders build more compelling products and do a much better job marketing and selling them. Before starting Threadling, he was the first marketer at Asana, the first product marketer at Twilio, and a product marketer at Salesforce. He also writes an occasional column about the future of technology and humanity for TechCrunch.

Dan Kaplan

Related posts

How to Launch A SaaS Startup to $7,000/month

​Read More

How To Onboard New Users Like A Wizard

​Read More
Leave a Repl​​​​​y

Your email address will not be published. Required fields are marked

  1. I started using HelloBar last year and I have to say that they nearly lost me when I got to the stage of adding the code. Mostly because our developers at the time were charging a large sum of money for minimal work!

    However I saw how brilliant it was and managed to get it installed. I’m still a huge fan but don’t currently use it as it doesn’t want to play fair with the website code.

    Always admire an easy onboarding process!


{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}