When you’re trying to refine a system or learn a new skill, it’s tough to beat a good case study to see what other experienced people are doing right and wrong. It means you can learn from their glorious ideas and avoid embarrassing oversights.
Accounting SaaS FreshBooks certainly has an onboarding process from which we can all learn a great deal. So, the myTips team sat down and dissected the workings of the onboarding flow, to present here with a commentary that will help you implement better onboarding flows of your own.
Let’s get right down to business.
Starting from the homepage, it doesn’t look like much, but there’s actually a lot going on here.
First up, the headline is excellent. It lets the user know that this product is accounting software and they don’t need a Ph.D. in Financial Management to use it. Underneath, social proof is given with an impressive 5 million users and a link to a television ad that’s a more subtle use of the “as seen on TV” tactic.
After that, all that’s required is to enter the company name and email address before you’re tempted with a 30 day free trial using a signup button that stands out from the rest of the graphics. The only other piece of green on the entire page is the leaf in the company’s logo.
After clicking “Try it Free for 30 Days” we need to fill out a couple of simple sign up forms like the one below to complete the registration process. I understand why you’re asking me these questions.
but I think this is too much at this stage…you can ask for more info later, after I see the product.
Once sign-up is complete, the product doesn’t ask you to dig around in your email inbox and leave the onboarding flow just to click on a confirmation link. Smart move. There’s absolutely no need to take your users away from your website unnecessarily.
However, later you will find a very friendly email in your inbox. “Nice to meet you!” is just about as welcoming as it gets and the byline has an additional “Welcome” along with a reminder of the value proposition of the company. It’s a good example of consistent, benefit-driven copy.
Password reminders and customer service information is also provided, meaning there’s less resistance for users who encounter some kind of problem to contact this friendly bunch for a little assistance.
Remember, as we pointed out in our 10 Usability Tips From Top Scientists article, you can never have enough ways for users to contact your customer service team. So adding it in the email is another smart move with data available that proves it genuinely produces results.
Account Setup Wizard
A great way to keep customers from being overwhelmed with additional features is to ask them exactly what they are trying to do, and provide them with a personal interface to accomplish their goals. Setup wizard is the perfect solution in that case, and FreshBooks guys nail it.
Individual tutorials for different skills
On the main page of the interface, there are different accounting tools available to the user. As we discussed in our article on Why Actionable Onboarding Always Wins, it’s important to have individual tutorials for the individual skills that users must learn through action. And, that’s exactly what they did here.
As you can see in the screenshot, the section that says “Track Your Money” and “Track Your Expenses” has overlays, and the background is faded out. Each one begins a guided tutorial and, as we’ll see later, each of these sections of the interface change only after the tutorial is complete.
We decided to start with the top option, “Create an Invoice”, and were presented with the screen below. As you can see, an overlay tip has been included. We’ll see a few more of these as we progress, so let’s take a moment to consider how they’ve been used.
The headline is inherently value-driven, as “getting paid” is something that every human being with a soul and taxes to cover will sign up for immediately. Sure, the UI is somewhat self-explanatory with its “New Client” label, but the guided tip removes any potential for ambiguity or confusion.
Copy aside, there’s a faint but noticeable “X” in the top right corner of the tip so users can close them if they want to. That said, the desire isn’t too strong like it might be if, for example, the small symbol was bright red. After all, we really do want people to read these tips.
The small speech bubble-like arrow points towards the specific part of the UI referred to in the tip, so there’s a directional, visual cue that removes any question about the relevant area to look at.
Once that’s done, the theme of the nifty guided tips continues. Once each field is filled in, the tip neatly closes itself (if the user doesn’t) and the next tip appears.
A little advice is offered on how best to approach speaking to clients. Try to use expressions such as “eliminate confusion” and “politely inform”. This may seem obvious to most people, but it’s the kind of thing where you might be surprised how many people overlook it.
Furthermore, the company wants people to get paid through this service so their users associate positive results (in this case, receiving money) with the product. It really make sense to lend a little friendly advice to help make that happen.
The next tip pops up a little further down the page, reinforcing the directionally sensible progress from top to bottom rather than jumping around to different arbitrary locations in the UI. Very organized…
The text opens with “Getting paid is within reach!”, letting users know they’re almost at the end of the tutorial and have almost reached the value proposition that encouraged them here in the first place. That’s what we call “congruence”, and it’s something that is important to keep in mind with all onboarding and marketing efforts.
There’s nothing worse than dealing with an online payment system and then not knowing if your payment or invoice has been sent after you click that all-important button.
Clearly, FreshBooks is aware of this issue and offers up a particularly unambiguous bright green box with a green thumbs-up icon and accompanying text that leaves users with no doubt that they’ve completed this particular action.
Once that’s done, several options are given, including one to create another invoice rather than forcing users to fumble their way back to the UI home screen in an interface they’re still getting used to. The option to preview invoices for print or download is also very logical action in the flow of creating a digital invoice. It’s all about the service.
Remember the blue character dude at the beginning of the tutorial? Well, here’s what our previously faded-out “Invoice & Expenses” section has been replaced with now that we’ve completed the invoice onboarding tutorial.
The overlay has been removed and we have information on our current activity. Meanwhile, the “Track Your Expenses” overlay that we saw in the previous screenshots remain in place until the user has completed each individual tutorial for each skill. It’s all very nifty.
Look, we like the FreshBooks onboarding process a lot. It follows many of the best practice principles and logically guides the users towards the value using the setup wizard and actionable, value-driven tutorials.
But it does leave a few big questions unanswered…
- How did this user onboarding flow affect their conversions?
- How much effort and how many iterations were necessary to get these results?
- And how much time and engineering resources could they have saved using myTips, a coding-free tutorial builder?
P.S. You can try myTips tutorial builder for Free here