Published on | Prototyping: From UX to Front End — Medium Rob McWhirter

Writing for onboarding is a UX writer’s bread and butter.

If our job is to to tell a complete, consistent, compelling story to a user, 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 userboard.com are dedicated to critiquing the smallest details from a range of applications. In essence, onboarding should:

Introduce the app and explain important features
Convince users of the benefits of using said features
Introduce your brand’s voice and tone

Cutting dropout rate

We’ve just overhauled our onboarding at Twine 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.

Signup and loading page

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:

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.

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.

Compare this (from a competing product):

Wake me up when it’s over…

To this (Slack):

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.

Maybe it comes across as a little hammy, but we wanted something confident and direct to grab attention.

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.

Onboarding proper: Getting users up to speed

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.

Intercom using a bit of video — it works well

So we did it in a a similar way.

Welcome dialogue

There’s also an option to embed a video here .

Dismissible onboarding panel

We let users explore for themselves

Step by step mini-tour

A quick tour of the dashboard, introducing features and info that isn’t obvious.

A conditional means that only admins see this one.Enterprise software doesn’t have to be mind-numbing

Uncovering hidden features

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.

Easy peasy

Final notes

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:

“Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read”

Have a look (signup.twinehr.com) and leave your thoughts below — I’d love to hear them.

How better onboarding cut our drop-off rate dramatically was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

How better onboarding cut our drop-off rate dramatically

Cool stuff, every week

More Articles