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.
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:
- You’ve clearly indicated your goals
- You’ve seen the product in action
- 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:
- 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.