Jason Shah

Mailbox pushes the envelope (get it?) for apps aiming to make email sane. It is a brand new email client based on mobile gestures aiming to make email suck less and help you get to Inbox Zero. Mailbox has been called “the best email management app you’ll ever use.”

[Discuss on Hacker News]

But in the past couple of days, the way that Mailbox has handled new users has overtaken the app itself in the press. With a now-common “request and wait” signup model during their closed beta and enormous hype in the tech community, Mailbox is an exciting case study of user anticipation (broadly what I’m calling “the pending user experience”, related to “new user experience”) and new user education.

Let’s pull back the Mailbox door and sort through its beauty.

—

A peaceful, familiar, and straightforward opening view

 

• The logo is undeniably similar to Gmail’s. This invokes familiarity, but because it’s a slicker version of Gmail’s logo, it feels like a more modern Gmail. Why is it slicker? Visually thinner and the indescribable vibe it gives off, frankly.

Gmail  Mailbox 

This is how Mailbox themselves see (or perhaps, created) it:

• The color scheme is calming. Offwhite and an ocean blue. This is pretty objectively clear, the same way red is a color of urgency.
• “Put Email In Its Place” - this is brilliant copy. It makes the new user feel as though you (the app) understand. And if you understand the user’s frustration, then they’re more likely to want to follow your app’s direction, which in this case is registering for the app. Almost nobody likes their email, I speculate, especially the target user of Mailbox. It’s an overworked, ambitious person who would rather “do real work” but can’t unchain themselves from the email protocol. So they’re looking for anything that can make things better, and Mailbox presents itself as the solution with this sort of empathetic and empowering language.
• Easy vertical scanning of the calls to action (CTAs). Mobile devices offer little screen real-estate and can expect little physical stability from a *mobile* user. So being able to quickly process and take action on available options is key. One way to do this is keep a person’s eyes moving in one consistent direction without a UI that would prompt someone’s eyes to have to jump around. 

Here’s how to get that last point on easy vertical scanning wrong.

Hotmail (MS Live’s mobile login page). Notice how taxing it is to look at all their various links, let alone the actual input fields. Your eyes have to dart back and forth.

On the other hand, notice how Gmail does it. Straight flow.

…drumroll, and Mailbox:

Large touch targets. One clear call to action for all of the many new people who need to be pointed where to go. One secondary CTA for the folks who were such early adopters to have signed up before and savvy enough to tap “I Have a Reservation”. Note the “reservation” language as well - very classy. The “My Mailbox” language - giving the user ownership and focusing on their problems (not “Sign up for Mailbox and make us millions!”).

Single tap registration

As soon as you hit ‘Reserve My Mailbox’, you are spared some ungodly form asking you for every detail about your life. Rather you find this

More anticipation. A large figure telling you exactly how much more you have to go. Imagine being on the treadmill watching a decreasing counter as you get closer to a ten mile goal. 9.9mi. 5.0mi. 1.0mi. 0.2mi. Finished! As you approach zero, you feel like hanging on just a tad tighter.

But also notice the secondary count of everyone behind you. Chances are that your large blue number is much higher than 168. You need more reason to feel good about yourself. Schadenfreude. People derive pleasure out of the “pain” of others. Knowing you’re ahead of others helps make the wait feel that much better.

Lastly, notice how Mailbox doesn’t stonewall you. They give you 3 alluring options on this screen, assuming you will do more. You went through the trouble of downloading their app and ‘making a reservation’. Of course you’re going to click on a cute lightning bolt or a pretty bird. (Small detail - but ‘Discuss’ brings up all the talk, i.e. hype, about Mailbox that confirms how awesome the app is.).

A pleasant pretty ping when your Mailbox has arrived

‘Nuff said. It felt like Christmas morning after all of that wait. Never have I received a push notification for when I was (finally) allowed to use an app. Most sites that have used this tactic send some boring email weeks later once one has forgotten about what the site does. And most mobile apps are ready to go and open as soon as you want to use them. It was a novel, pleasant experience. Unique engagement events like these create memorable experiences, which is the heart of long term user retention.

Whitespace can give focus to primary CTAs. Keep mobile CTAs near the bottom, far left and far right of the screen where the thumbs are nearby - they’re easiest to reach - the center is actually the hardest to reach!

Keep the person in your app even if they have to authenticate through a 3rd party - it’s elegant and builds comfort with your app

This would have been far less elegant if I had been kicked to Safari and then kicked back to Mailbox for the auth - instead it was all in the same branded container of the Mailbox experience. The need to get a user account setup right away and the need to keep a user in your app to build familiarity with the app can be at odds when integrated with 3rd parties - be it Google, Facebook, or a much smaller player.

But just appreciate the elegance here, except for the Gmail form which is maybe doing the best it can.

After all of that, all I needed to do was hit “Done”.

Also, note the slick takeover of the black top status bar for things like “Syncing…” and when new messages arrive.

And I am in.

If your app is visual, quickly build an association between actions and how you represent those actions.

 

Mallbox can be complex if you don’t know or properly understand the 5 main areas in which you can categorize your mail, or the interactions that allow you to move items into those areas. In one glance on this welome screen, and by using intuitive icons for lists, saved for later, inbox, archived, and deleted items, Mailbox has given you an instant schooling. (Admittedly the green checkbox for ‘Archived’ could be a little confusing).

Your tutorial should promote one clear action at a time (but keep the other things in the background for gradual, non-cluttered learning)

Notice how Mailbox focuses in on ‘Archive’ first and keeps the other actions in the background. And then clear and plain they say “Swipe Right to Archive”.

So, OK, I’ll swipe right to archive, is what I’m thinking. And I did.

Make your tutorial interactive - so don’t just tell them what to do, but also guide them through actually doing it

Mailbox has married the instructions with the execution of the instructions. By doing so, when it’s the big show and you are actually in the app, you will know precisely what to do. Practice is over then. But much better than a user stumbling through your UI, this is a chance to warm up. Mailbox has done that beautifully here when they have you swipe on the mockups of the app to experience what you will soon do on your own, real emails.

Encourage your user at each little milestone and address any fears they might have

A simple “Great Job!” goes a long way and make it all that much more likely that I’ll go ahead and tap ‘Next’ as the app requests.

But also note the words meant to calm me down: “You can quickly access your archive from…” As soon as you archive something for the first time, and it disappears, panic would otherwise ensue. So Mailbox sees this coming and guides you. Smart. A trust-building UX tactic is to anticipate user concern and address it before they have to ask or wander over to your likely god-awful help or FAQ page. 

Stay consistent with tutorial steps with just enough flash to keep people’s attention and make them feel loved

This flow continues through each of the actions with a clear pattern but enough differentiation to effectively learn how to use each different piece of the app.

…And we’re in.

—

Mailbox built so much anticipation before its launch and has a carefully crafted new user experience.

Indeed, the experience before I was a new user suggests a growing new practice around a “Pending User Experience” — the time before a user is actually a user. They masterfully created so much anticipation that even if the signup flow were a bit broken, many users may have found willfully a way to power through it anyway.

Combining a stellar new user experience like Mailbox’s with their crafty pending user experience can boost the likelihood new user retention in your app. Indeed, the next challenge for Mailbox appears to be creating the best in-product user experience. Are their gestures intuitive, and the right answer to email overload? Maybe. Is it enough to provide a better interface but not solve the root problems with the email protocol? Time will tell.

—

Really fun to see the reaction to this post.

@jasonyogeshshah Just read your post again. Wow. So incredibly thoughtful. Thank you for taking the time to dissect it. Means a lot to us!

February 9, 2013

@jasonyogeshshah Thanks for the thoughtful post!

February 9, 2013

—

In the meantime, what did you think of Mailbox’s pending user experience and new user experience? If you are still on the wait list, what effect has that had on your impression of the app?

Tweet Follow @jasonyogeshshah
Vote on HN