Published on <a href="http://ift.tt/2ryf0Z4">| Prototyping: From UX to Front End &mdash; Medium</a> Rob McWhirter 
Writing for onboarding is a <a href="http://ift.tt/2o3ccBf">UX writer’s</a> bread and butter.
If our job is to <a href="http://ift.tt/2ry1eW2">to tell a complete, consistent, compelling story to a user</a>, then the start of a user’s relationship with an app is the perfect opportunity. It’s here where you introduce your brand, features and develop trust in your product. Nowhere else is it as important to get your tone right and your instructions clear.
It’s important stuff; that’s why sites like <a href="http://ift.tt/1mAl9Zp">userboard.com</a> are dedicated to critiquing the smallest details from a range of applications. In essence, onboarding should:
<ul>
<li>Introduce the app and explain important features</li>
<li>Convince users of the benefits of using said features</li>
<li>Introduce your brand’s voice and tone</li>
</ul>
<h4>Cutting dropout rate</h4>
We’ve just overhauled our onboarding at <a href="http://ift.tt/1F1WLMH">Twine</a> and we’ve seen good results.
Reviewing our stats in January, we knew that our onboarding was letting us down. We were experiencing a big dropout between signup and trial (around 65%) and this was hurting our monthly revenue. We refused to believe it was the fault of the product —hey, we were getting great feedback from current users.
A bit of user testing and some interviews confirmed that our onboarding was contributing to this dropout: people were signing up, but being dumped into the trial and left to work it out for themselves. When they couldn’t work it out, they would leave and never come back.
Bad UX was hurting our revenue.
So, we got to work and re-designed the onboarding process from signup to support. Since launching the new onboarding, we’re now running at a 30% dropout rate.
Here’s how we did it.
<h3>Signup and loading page</h3>
Let’s start at our signup page. Here we did a few things to make things easier for users to input the data that we required. This wasn’t just about dropout — our whole proposition is built on being easy to use, so the signup process needed to reflect this.
A few things we applied:
<ul>
<li>Reducing friction — using domain segment autofill and instant feedback using a bit of JavaScript. Simple stuff, but I see still see lots of forms that neglect this.</li>
</ul>
<img alt="" src="http://ift.tt/2qYJ1UM"><img alt="" src="http://ift.tt/2rxW1xw">
<ul>
<li>Loading page — rather than a dead space, we saw the loading page as opportunity to introduce Twine’s personality. When I hit a loading screen I don’t need to feel like I’m booting up windows 95… as a copywriter this is your time to shine.</li>
</ul>
Compare this (from a competing product):
<img alt="" src="http://ift.tt/2qYMvqq"><img alt="" src="http://ift.tt/2ry6lFP"><img alt="" src="http://ift.tt/2qYCYQe">Wake me up when it’s over…
To this (Slack):
<img alt="" src="http://ift.tt/2rxR7Rn">Well yes I will. Thanks!
We wanted to add bit of theatre to the process, trying to build some anticipation for what’s to come. Typically, loading screens aren’t the most riveting of prospects, so it was essential we keep people’s interest up.
<img alt="" src="http://ift.tt/2qYR4B5"><img alt="" src="http://ift.tt/2ry5jJW">
Maybe it comes across as a little hammy, but we wanted something confident and direct to grab attention.
<ul>
<li>Microcopy and placeholder text — Mostly used to explain why new users need to fill out certain fields. Users need to feel comfortable giving us this information. Standard stuff really.</li>
</ul>
<img alt="" src="http://ift.tt/2qYJ3Mg">
<h3>Onboarding proper: Getting users up to speed</h3>
Once a prospect signed up, they were met with Twine’s dashboard. It was really lacking in terms of instructions; users were being dumped on the system with little guidance as to what to do next, or why they should care enough to spend time working it out. Our bounce rates and user interviews showed confirmed our fears.
What we needed was a good old fashioned system walkthrough. A way to introduce the user to the important features and parts of the system they might otherwise miss.
First we looked at a few walkthroughs we liked. This approach by Intercom tickled our fancy.
<img alt="" src="http://ift.tt/2ryfLBi"><img alt="" src="http://ift.tt/2qYKCKl">Intercom using a bit of video — it works well
So we did it in a a similar way.
<h4>Welcome dialogue</h4>
<img alt="" src="http://ift.tt/2rygxhQ">There’s also an option to embed a video here .
<h4>Dismissible onboarding panel</h4>
<img alt="" src="http://ift.tt/2qYCAB0">We let users explore for themselves
<h4>Step by step mini-tour</h4>
A quick tour of the dashboard, introducing features and info that isn’t obvious.
<img alt="" src="http://ift.tt/2rxW0cW">A conditional means that only admins see this one.<img alt="" src="http://ift.tt/2qYzYmK">Enterprise software doesn’t have to be mind-numbing
<h4>Uncovering hidden features</h4>
We had an ongoing problem where people were missing our messaging feature; the icon just wasn’t prominent enough for people to stumble across it. After arguments about icon design, interface layout, the change that gave results was a simple prompt during onboarding.
‘Start a conversation’, we prompted. Users took action.
<img alt="" src="http://ift.tt/2ry4YHe"><img alt="" src="http://ift.tt/2qZ0fS7">Easy peasy
<h4>Final notes</h4>
Onboarding is the bridge from marketing to product copy, and it incorporates the skills you need for both. It needs to be engaging and interesting enough to keep your user’s attention, but clear enough to explain features succinctly. The same goes for the visual design.
So I’ll end with a quote from one of the great ad writers, Leo Burnett:
<blockquote>“Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read”</blockquote>
Have a look (<a href="http://ift.tt/2ry0hx9">signup.twinehr.com</a>) and leave your thoughts below — I’d love to hear them.
<img src="http://ift.tt/2qYKDOg" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2rxKZsd">How better onboarding cut our drop-off rate dramatically</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How better onboarding cut our drop-off rate dramatically

Top Stories