Use your keyboard arrows
to view the story!

Superhuman's Secret Onboarding UX

Growth.Design Case Study #009

Superhuman is the most secretive and hyped email experience right now.

Avatar displaying current emotion

Just to access it, I had to cross a lot of hurdles (like paying!)... until I got the 1-on-1 onboarding call!

It was epic! Here's what happened...

Avatar displaying current emotion


Hi Louis!

Live Concierge Onboarding

I also had the chance to talk to Superhuman’s CEO Rahul.* 

He used to do those 1-on-1 calls as a user research method.1 Now, he has scaled the strategy for 4 new reasons:2

  1. Create Power Users
  2. Increase Retention
  3. Drive Virality
  4. Foster Real Human Connection


*Superhuman did not sponsor this case study.

1 Verified by, Rahul Vohra CEO
2 Superhuman, David Ulevitch - a16z (2019)
Avatar displaying current emotion

Psych Level: 50%

To be honest, I was a bit skeptical about all the hype...

But still curious for this call...

This is Siyarin!

She's going to help me get set up!

Avatar displaying current emotion

Sticky Behaviors

People are more likely to remember things when faced with an unexpected situation.

In this case, the idea of going through my mailbox without a mouse is very unusual. 

1 Made To Stick, Chip Heath & Dan Heath (2007)

Hands on the keyboard... You can move your mouse away!

Unexpected start!
I've never used a keyboard for navigating mailboxes... Excited to try! 

Avatar displaying current emotion
Avatar displaying current emotion

Start with Why

The best way to start an experience is by explaining why your users should care about your product.

What superpowers will they get?

Ok, let's dive in...

Nice!

I love how they remind me of the biggest benefit right from the start.

...Ok ⁠⁠⁠— Onwards.

Avatar displaying current emotion

Haha... Brilliant! The mouse doesn't work here.

Keyboard it is then!

Avatar displaying current emotion
Avatar displaying current emotion

Oooh, very minimalist UI... However, the contrast seems low...

Contrast Is Necessary

In every product, there are fundamental contrast rules that should be respected.1

Unless, you're in a luxury market or have a special target audience.

In this case, the selection state and the icons have failed the WCAG contrast guidelines.2
 

1 Accessibility Guide, Contrast App (2018)
2 WCAG, Web Content Accessibility Guidelines (2018)



The results are in... 

Moving on... Pressing J!

This is very light...

Measuring contrast...

Avatar displaying current emotion

I can start to see why this could be fast... Nice!

Avatar displaying current emotion

However... J & K seem odd for navigating up and down (mental mapping)—

Easy isn't Always Best

Arrows are definitely the easiest solution to remember. However, are they the best when you want to go faster?

Rahul explained how they have the luxury to add a bit of friction since they have the 1-on-1 call:2



1 Verified by, Rahul Vohra CEO
Avatar displaying current emotion

Good reminder of why we should use J & K moving on...

Following the commands...

Avatar displaying current emotion

Pressing Enter.

My skepticism is still present...

Avatar displaying current emotion

Visual Anchors

Visual anchors are UI elements that help your eyes easily locate where you to look. 

Side menus and bars are usually colored (or higher contrast) so that you can easily scan the interface. They act as guard rails for your eyes.

Even the menu bar is fully white.

Let's see what this does...

That was almost instant!

Plus, I love that the default is reply all. Probably covering most use cases that way.

Pressing "Esc"...

Into the email experience...

Hmm... The section contrast is very low, making it hard to divide the information mentally.

Avatar displaying current emotion

Hmm interesting... Can I jump from one email to another?

Pressing J

Little did I know, I was about to understand all the hype in one key stroke...

Avatar displaying current emotion

Getting in "the Zone"

When your brain looks at a list, it starts to slow down. Navigating between screen, going in and out of menus, are interactions that require a lot of psych.

When you can skip those, you can immerse yourself into the task at hand and stay focus.

Rahul confirms the strategy:1

1 Confirmed, Rahul Vohra Superhuman CEO (2019)

Ohhhh jumping between emails...

Stellar!

I can now see how Superhuman gives you superpowers...

Avatar displaying current emotion

A few key strokes later...

And done... Back to the home page.

"Muscle Memory"... Good pep talk! 

However, I didn't catch it the first time since it was too small... Which brings me to this experiment—

The Power of Sound

Sound alters our moods all the time by playing with our hormone secretions.1 In digital products it can also act as a strong reward system.2

Superhuman could design their own sound and use it, not when an email is received... But when users type the correct shortcuts for an action!

Reinforcing wanted behaviors.

1Julian Treasure, The 4 ways sound affects us (TED 2009)
1Richard Mattka, How sound design is transforming UX (2018)
Avatar displaying current emotion
Avatar displaying current emotion

Yes! + K is going to be your best friend. You can do anything with this!

Now, what's that?

The most powerful shortcut!?

Moving along the tutorial...

Avatar displaying current emotion

One shortcut To rule them all

Removing user complexity by centralizing all functions into one place is great for usability. However, it comes at a development cost.1

Also, it's no accident that they're showing this at the end of the onboarding. You're more likely to remember.2

1Humanist, Law of Conservation of Complexity (2019)
2Wikipedia, Peak-End Rule (2003)

 


Aaahhh... just like Alfred!
(or Spotlight, if you're on Mac)

Avatar displaying current emotion


Sure, let's "compose"!

Avatar displaying current emotion

Smart! Pre-filling an email for the onboarding!

... And again, positive reinforcement of what I'm currently doing.

Finishing up and sending the email...

Avatar displaying current emotion
Avatar displaying current emotion

Yep! No more mistakes when you send an email!

Finally no more mistakes!...* Thanks to UNDO

Avatar displaying current emotion

*Gmail has since adopted this feature.

Avatar displaying current emotion

...But it feels like I'm back where I started. I have the same amount of emails in my inbox

Goal-Oriented Onboarding

Onboarding should guide users into actions that genuinely lead to progress in their lives, not just a better understanding of your UI.1

There are several ways to achieve this, here's one of them:

View Experimental Redesign

(... or just press on your keyboard)

1 Samuel Hulick, Bulletproof Onboarding (2017)

Oh, that's the end of the tutorial...

Same Navigation Learning
Combined With A User Goal*

Help users go through their inbox during the onboarding

Metric: Increase Long-Term Shortcut Usage

Experiment Idea

Goal-Oriented Onboarding

Onboarding should guide users into actions that genuinely lead to progress in their lives, not just a better understanding of your UI.1

Continue the Story →

(... or just press on your keyboard)

1 Samuel Hulick, Bulletproof Onboarding (2017)

Other Option

Avatar displaying current emotion
Avatar displaying current emotion

You seem in control of your inbox flow...

So, I'll show you how to send a message later!

Hit C to compose a new message.

...So what should I do now?

Up until now, Siyarin was letting me get a feel for the app... 

Avatar displaying current emotion
Avatar displaying current emotion

Let's say we want to grab coffee Friday...

Start typing my name and a quick email...

Avatar displaying current emotion
Avatar displaying current emotion

Excellent!

It recognizes language so you can automatically switch between days with + SHIFT+ -

Now press
+ SHIFT+ L
to send later!  


Impressive!

However, I wonder if I can remember all these shortcuts...

You can even send emails across time zones. Just type in the city.

Avatar displaying current emotion
Avatar displaying current emotion

Following directives...


Wait... The city?

Avatar displaying current emotion

Time Zones... Epic!

 Especially since Growth.Design’s community is in 80 countries and they send us emails often!

Delighters

We remember and respond favorably to small, unexpected and playful pleasures.1

This function is not only useful, the fact that it shows you the equivalent time to free yourself from any calculations is just a pure delight. 1  

1Jared Spool, UX Strategy Using the Kano Model (2015)

 

Priming

Priming consists of subtle visuals or verbal suggestions that help us recall specific information, or influence how we respond. 1

In this case, I'm already looking forward to those emails!

Chances are, I will open the first email from Rahul (SPOILER for Superhuman Part #2: I did... Subscribe here to know when we release it!).

1 Wikipedia, Priming Psychology (2019)
Avatar displaying current emotion

But that wasn't my last surprise...

As I was preparing for dinner, a few hours later, I checked my emails... 

Avatar displaying current emotion

In the next two weeks, you'll receive one email every day from Rahul our CEO.

He's going to show you all the new features that we didn't get to see during our call!

Finally, towards the end of our call...

Smart! Now I have something to look forward to...

Avatar displaying current emotion

The Extension "Hack"

Prior to the 1-on-1 onboarding call, Superhuman asks you to install a Chrome extension to maximize the web version performances and to enable the offline mode.

As a side effect, this Chrome extension allows them to remind you to use Superhuman to prevent old habits.

Knowing that at this stage you're paying to use Superhuman...

Wait... 

{!}

Overriding Gmail to redirect to Superhuman... Clever?

What do you think?

One last thing for you! ➡️

Psych Level

Customer Journey

Jumping on a 1-on-1 call is novel. Plus, the keyboard shortcuts add to the surprise!

The first few screens, I'm having trouble adjusting to the minimalist and low contrast UI.

Diving into the core of the experience: jumping from one email to another without going back is vital for ultimate productivity.

A missed opportunity to craft an onboarding that helps you get closer to your goal.

The maestro shortcut + K is a pleasant surprise, and helpful to learn all other shortcuts.

A moment of pure delight, when I discovered the time zone feature. 

 

Overall Experience Score:

A

The extension "hack" is just so unexpected that I couldn't NOT talk about it!

Finally, here are the key moments of Superhuman's onboarding...

Special thanks!

Rahul Vohra

Siyarin Phoon

 - Onboarding Specialist

 - Founder & CEO

Full Disclosure: This case study wasn't sponsored nor censored by Superhuman. All comments are 💯genuine.

That was my actual reaction when I saw the time zone feature... haha!

🎉 Congrats! You found the secret slides!

Congrats!

You completed Growth.Design's Case Study #009:
"Superhuman's User Onboarding"