Trello's User Onboarding:
7 Tactics To Inspire You
Use your keyboard arrows
to view the story!
Story Duration: 5 min
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—
—to build a Content Calendar!
…and that was the perfect excuse to analyze Trello's new onboarding!
Signup to Trello
First, notice how Trello removed most of their menu links (except Login & Signup).
That's a ballsy way to boost their conversion rate.
Less Links, Less Leaks.
Navigation links are useful, but because of Hick's Law, 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}
Signup to Trello
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.
Signup to Trello
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}
Signup to Trello
Great use of my 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)Signup to Trello
15 options?...
That's a lot!
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".
Trello later reported a +36% lift in activation through a mix of personalization experiments.
Appcues reported that this improved their users’ activation time by 74%.1
Just make sure you don't drown users in endless options or questions.2
1Appcues, Persona-Based User Onboarding2FYI, 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}
Board Setup
—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—
Board Setup
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…
Board Setup
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}
Board Setup
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}
Board Setup
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)Board Setup
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.
Board Setup
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}
Board Setup
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}
Board Setup
—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.
Board Setup
Let's try it! {click}
—ooohh!
Perfect timing.
This image is calming, yet generic enough to appeal to pretty much anyone.
Board Setup
In one click, I feel like I've transformed a basic productivity board into…
…my own zen hub of content awesomeness.
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 List of psychological principles (2021)Board Setup
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:
- Pinged
@growth.design's mail server - Detected our usage of Google Suite
- 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}
Confirm Account
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"—
Confirm Account
🎉 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.
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:
-
from:@trello.com: that way, only your app's onboarding email displays -
in:anywhere: it finds the email even if it's marked as spam.
(PS: I show how to implement Sniper Links in this thread. I'm still surprised that so few companies use them!)
Confirm Account
But back to the email…
Let's confirm this, it's getting late!
Confirm Account
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…
Complete Content Calendar
Time to create some case studies!
A few minutes later...
Did you identify Trello's top 7 onboarding tactics?...
…Continue to view them→
Ahhhh—much better! This looks nice!
Complete Content Calendar
Psst, one last thing for you… →
Psych Level
It started with a clean landing page with a clear value proposition.
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!
… keep going ↓
In memory of
Taco the Husky 2010–2017.
Titi the Chihuahua wanted us to dedicate this case study to Taco—Trello CEO's dog (and immortalized mascot). R.I.P. Taco!
🎉 Congrats! You found the secret slides!
Congrats!
You completed Growth.Design's Case Study #008:
"Trello's User Onboarding"
