Trello's User Onboarding: 7 Tactics To Inspire You

Use your keyboard arrows
to view the story!

Growth.Design Case Study #008 — Story Duration: 8 min

Pro tip: Use landscape mode!

Avatar displaying current emotion

So I went through Trello's onboarding for one simple reason…

As I turned on my laptop on a calm Montreal terrace

…I realized that the best way for Growth.Design to keep up with the thousands of case study requests from the community was—

Avatar displaying current emotion

—to build a Content Calendar!

…and that was the perfect excuse to analyze Trello's new onboarding!

1 of 5

Signup to Trello

milestones

First, notice how Trello removed most of their menu links (except Login & Signup).

That's a ballsy way to  boost their conversion rate.

Avatar displaying current emotion

Less Links, Less Leaks.

Navigation links are useful, but they can also be an excuse for your visitors to leave your onboarding path.

Removing your header navigation in critical pages (e.g. signup) may increase your conversion rate by 28%. 1

1 Hubspot, Statistically Significant Split Test (2014)

"Getting more done" & "prioritizing projects"? That's precisely what I'm here for! This really  psyches me up!

Alright, I want to be done before sunset so…

Let's jump right in!

{click}

1 of 5

Signup to Trello

milestones
Avatar displaying current emotion

Hmm…  
Am I on the
same website ?

Where's the logo?

Taco the dog mascot?

The refreshing blue?

 

Speaking of gray—the active state of this first field isn't very obvious.

I could confuse it with the 2 inactive fields or even the confirmation button.

(#4ShadesOfGray)

It somehow feels like—

—someone took me from a warm ocean and dropped me in the gray, snowy & cold plains beyond
"The Wall" in Game of Thrones…

Brand Coherence

Investing in the brand coherence between your marketing website and your user onboarding flow can make a big difference in the experience and perceived quality of your product.

1 of 5

Signup to Trello

milestones
Avatar displaying current emotion

Ohhh! Did you see that?

As soon as I started typing
my name, they:

1. ❇️ Highlighted the main button in green and…

2. 👻 Removed the "Sign in with Google" button!

That's a clever way to guide my eye and avoid any mistake.

Onwards! {click}

1 of 5

Signup to Trello

milestones
Avatar displaying current emotion

Great use of my first name to bring my attention to that name tag.

Also, this question focuses on what | want to accomplish!

Thanks for caring Trello!

Let's see… {click}

Sweet!

Not having a forced email confirmation step means I can explore the app right away.

Deferred Account Creation

Waiting until after users have seen your product's value before asking them to confirm their email can increase your "Signup" to "First Key Action" rate by up to 100%1.

Just make sure you keep an eye on your overall Activation & Revenue metrics.

The overall lift has to be worth it, not just the top stats of your signup flow.

1ConversionXL, 3 Common SaaS Sign-Up Flows (2019)
1 of 5

Signup to Trello

milestones

15 options?...

That's a lot!

Avatar displaying current emotion

Persona-Based Onboarding

Prompting users to self-segment through one simple question (e.g. choosing their use case) and customizing their onboarding experience can increase their chances of reaching their "aha moment".

Appcues reported that this improved their users’ activation time by 74%.1

That's especially true for SaaS products tackling multiple use cases (e.g. Trello).

Just make sure you don't drown users in endless options or questions.2

1Appcues, Persona-Based User Onboarding
2FYI, Why Trello Failed to Build a $1 Billion+ Business

Hmm... my goal is simply to have a content calendar… 

…so " Marketing" should be good enough! {click}

2 of 5

Board Setup

milestones
Avatar displaying current emotion

—that one of them will give me templates to start?…

Let's try "Help Me Get Started"!

What's the difference between
" Dive right in" and
" Help me get started"?

I'm afraid that if I click one of them, there will be no turning back.

My guess is—

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Hm… slightly wordy. Plus, it's not obvious at first that this is a text field. {pointing}

Auto-focusing the input would've been simpler to highlight the next action to take.

Let's see…

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Wow! My input is displayed LIVE on the right!

It's a great way to teach me how Trello's layout works.

Okay, what's next? {click}

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Nice default values. I'll leave 'em just like that.

Plus, this step-by-step approach exposes me to just enough features at once without feeling overwhelmed. Love it.

{click}

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Allow me to reiterate…

…this live preview is brilliant!

It starts from a mental model that I'm familiar with (a todo list as forms fields) and it shows a live representation of a new concept (cards).

Mental Model Migration

If your product is innovative, it likely introduces new concepts.

Getting new users to understand those concepts will require them to migrate from their old mental models (e.g. todo items, Excel) to your new concepts (e.g. Trello's "cards", "boards" and "lists").1

1 Nielsen Norman Group, Mental Models (2010)
2 of 5

Board Setup

milestones
Avatar displaying current emotion

I get that they want to show me how "card details" work, but…

I'd rather experience that myself in my real board at this point.

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Also, is that a 3rd
style
of text field?

 

 

 

Atlassian acquired Trello in 2017, but their design systems must still be overlapping.

Oh well…

{click}

2 of 5

Board Setup

milestones
Avatar displaying current emotion

The video is interesting, but a bit distracting.

Plus the cards are not the ones I created earlier. Will I have to re-enter them?

And most importantly...

 

This text… {pointing} 

…tells me to drag & move the cards but I can't. It's just a video.

It makes me feel like—

 

 

 

—like a kid who's been shown an awesome new game, but I have to sit down and watch my friends play instead.

I want to play too! {click}

2 of 5

Board Setup

milestones
Avatar displaying current emotion

—why didn't they use their soft "Trello Blue" for the background?

That saturated green is a bit overwhelming & distracts me from my— {GASP}

Whew! My previous input was saved!

That's much less intimidating than a big empty board.

One thing seems very odd though—

Notice how I'm already auto-focused on the next card to create.

2 of 5

Board Setup

milestones
Avatar displaying current emotion

Let's try it! {click}

ooohh!

Perfect timing.

This image is calming, yet generic enough to appeal to pretty much anyone.

2 of 5

Board Setup

milestones

In one click, I feel like I've transformed a basic productivity board into…

…a zen hub of pure content awesomeness.

Avatar displaying current emotion

Endowment Effect

You value something more once you feel like you own it in some way.

By making users invest a tiny bit of customization effort, they're more likely to feel like a new app is now "theirs". 1

1 Wikipedia, Endowment effect (2019)
2 of 5

Board Setup

milestones
Avatar displaying current emotion

Hmm, that yellow confirmation banner clashes even more with the smooth background now.

Let's get this task out of the way.

Reduce Friction (Magic Link)

For tedious but unavoidable tasks (e.g. email confirmation), try to find ways to make them as smooth as possible.

Trello simplified my life in three steps. They:

  1. Pinged @growth.design's mail server
  2. Detected our usage of Google Suite
  3. Used the appropriate Magic Link

Fun fact: I tried another signup with a @outlook.com email address and the link was updated accordingly!

Oh, did you see that?

They link directly to my GMail inbox.

Let's see… {click}

3 of 5

Confirm Account

milestones
Avatar displaying current emotion

Even while recording this case study, I caught myself answering random emails for 10min straight. {facepalm}

Inboxes are black holes for your brain.

Not getting sucked in requires a lot of energy.

There's one little-known trick that can drastically reduce drop-off rates in a context like this.

Plus it only takes 2 seconds to implement… I call it the "Sniper Link"—

3 of 5

Confirm Account

milestones

🎉 Ta-daaaa!

Saw what I did there? {pointing}

I simply tweaked Trello's link URL.

This simulates a search query that gets me directly to their email without any distraction.

Avatar displaying current emotion

The "Sniper Link" Technique

Sending people to their distracting inbox during their onboarding is always risky.

Minimize drop-offs by using URL parameters to pre-fill the search query:

  1. from:@trello.com: that way, only your app's onboarding email displays

  2. in:anywhere: it finds the email even if it's marked as spam.

(PS: If you like this tip, can you please share this technique on Twitter to spread the word? I'm still surprised that so few companies use it. Thanks!)

3 of 5

Confirm Account

milestones
Avatar displaying current emotion

But back to the email

Let's confirm this, it's getting late!

3 of 5

Confirm Account

milestones
Avatar displaying current emotion

Alright so… where were we again?

Leveraging Users Intent

At this point, Trello knows from the name of my board that I want to use it as a Content Calendar (which is one of the most popular use cases1).

Trello has a calendar feature that's part of their premium features (Power-Ups).

Detecting the most popular patterns in the board names and nudging their users to try some of their Power-Ups would boost their ratio of sign-up to PQL (Product Qualified Leads). 1

1 Trello, Using Trello As An Editorial Calendar (2015)
2 Hubspot, PQLs (2018)

—oh right.

Let's finish this content calendar

4 of 5

Complete Content Calendar

milestones
Avatar displaying current emotion

Time to create some case studies!

A few minutes later...

And so dear reader

Did you manage to identify Trello's top  7  onboarding tactics?...

…Continue to view them ➡️

Ahhhh—much better! This looks nice!

4 of 5

Complete Content Calendar

milestones

Pssst!

One last thing for you ➡️

Psych Level

It started with a clean landing page with a clear value proposition.

Trello's Top 7 User Onboarding Tactics:

  1. 🚿 Less Links, Less Leaks

  2.  

  3.  

  4.  

  5.  

  6.  

  7.  

Overall Experience Score:

A

🌄 Deferred Account Creation

👤 Persona-Based Onboarding

🛣 Experience Segmentation

🧠 Mental Model Migration

🏔 Endowment Effect

🔗 Reduce Friction (Link)

Customer Journey

The "Game of Thrones White Wall" signup page was a bit of a branding clash, but at least it allowed me to explore the app with no email confirmation.

Trello wanted to customize my experience, but the 15 use case options and the 2 vague buttons made it confusing.

Step-by-step, Trello got me out of my mental model to discover the beauty of boards, lists and cards.

It became a bit long at some point I'd have prefered playing directly with the app.

Once in my board, a clean flow & a simple click created a magnificient background. It made me feel like Trello was my new home.

Trello used a special link to get me straight to my GMail, but I still got lost in my inbox (maybe Trello will consider the "Sniper Link" technique?), still—

—I finished the Content Calendar and it looks nice!

⚡️ Congrats, you found the secret slides!

… keep going ↓

Congrats!

You completed Growth.Design's Case Study #008:
"Trello's User Onboarding"

…or if you're curious…

… keep going ↓

In memory of
Taco the Husky 2010–2017.

I promised my chihuahua Titi that I'd dedicate this case study to Taco—Trello CEO's dog (and immortalized mascot). RIP Taco!

Copy of Trello User Onboarding

By Louis-Xavier

Copy of Trello User Onboarding

Discover Trello's user onboarding tactics (and the psychology behind them), as well as behind-the-scenes stats and facts to help your product.

  • 28

More from Louis-Xavier