Mailbox App Gets Dissected

Our Editor-in-Chief, Jared, has already given a quick run-down on his own site as to what the up and coming email app Mailbox is, but for this post, we’re going to dive a bit deeper into the actual UI.

I’ve been thinking of ways to break down this post so that the UI break down can be presented in a logical order, so what you will see below is my best attempt to achieve that. I’m sure there will be little tid-bits I leave out, but an application is never as fun to use if there aren’t a few surprises thrown in there.

Inbox

The part of the application you will more than likely end up more than anywhere is your inbox screen. A light color scheme allows for an easy on the eyes presentation of the emails you have.

The font choice for the email text is Helvetica and each email is presented with the sender being displayed on top, followed by the subject (which is bolded), and finished up with a little summary of text that’s in the email. The order and presentation of information about each email allows for easy recognition with each email.

Along the top of the inbox screen you are presented with (from left to right) the menu button, a set of three quick-navigation buttons, and a compose button in the upper-right-hand corner. We’ll get to the menu and compose features in a bit, but I’ll give a run-down of the middle collection of navigation.

The three buttons (from left to right, again) are your “later” emails, your inbox, and your archived emails. These are the three areas where most of your emails will be stored, so making for quick navigation between these three options was a rather obvious choice. The UI of the buttons also makes it easy to see which section of emails you’re in at a quick glance; or maybe even your peripheral view if you’re talented.

While this is something I hadn’t noticed until I had already initially finished this piece, I thought it was well worth adding. When you go to a threaded email it opts for a reverse-view from what most email clients seem to do. The latest email is presented to you at the bottom and the earlier emails are in little “bubbles” on top of them. This turns your email conversation into a much more message-like timeline instead of starting with the newest at the top and the oldest being shown when you scroll down. Keep in mind they are still tinkering with little things like this in the beta, so it may or may not be in the final App Store version.

Actions

I’m covering this now because it is something that takes place within the main inbox display. One of the features that Mailbox aims to set itself apart with are with what I will dub as “actions.” Instead of having to tediously add labels to your emails, sort them to save for later, or even archiving, Mailbox strips that down to the bare minimum, using none other than simple gestures.

If you swipe in from the left side of the screen, you are presented with two options, depending on how far you slide your finger across. Archiving consists of sliding your finger about half of an inch across the email you are planning on archiving. To delete that email, you swipe it almost completely off of the screen to the other side. You can tell they put a great deal of thought into how far to drag as you don’t want to accidentally delete an email when you thought you archived it; thus making you completely commit to deleting if you’re planning on doing just that.

Now if you swipe into the right side of the screen, you are presented with two separate options; the ones that I spoke of above that set Mailbox apart from other email applications.

Later

This option allows you to set a timer of sorts on your email. It’s a brilliant concept to add to the email after forty years of it’s existence. Say for instance, you receive an email at 9am about a project that you know doesn’t need to be addressed for another week, you swipe a half an inch to the left and are presented with various options of when you want Mailbox to re-remind you of the email without having to flag it or throw it in some folder. “Later Today,” “Tomorrow,” “This Weekend,” and “Someday” are just a few of the options it presents. You can set custom parameters for each of those for a more specific timeframe for re-delivery, but it also has standard defaults that should work for most people.

This brings about an entirely new way to look at email as it turns your email into a to-do list of sorts, with simple, built-in reminders. I’ve only been using the Beta for a week, but I can’t even begin to describe how much I’m loving this “Later” function. I can efficiently keep track of significant emails without having to track them down with flags or anything of the sorts.

Lists

Another way Mailbox works to help you keep your email organized is by allowing the easy creation of “Lists.” To add an email to a specific list, you swipe the email in the inbox screen to the left until the bar turns a beige color, notifying you that you can release and choose which list you want to put the email in.

Lists are nothing more than folders, but the manner in which the Mailbox team has re-imagined the concept makes it seem much more user-friendly and productive.

Bulk

Also, when in your inbox, you can use any of these actions in bulk. Along the bottom section of the scree, you will see two vertical bars and the same swiping gestures mentioned about can be used on all of the emails on display in your inbox.

While it’s nothing more than procrastinating, you could always just bulk “Later” your emails and for a brief moment enjoy the feeling of “Inbox Zero.” Ignorance is bliss, right?

Navigation

While we briefly went over navigation above, there is also a left-panel for a more detailed way to navigate through your emails.

At the top, you are presented with your unified inbox with each specific account included below it. The count for emails in your inbox are presented next to each of those for a quick glance at inbox stats.

Below that you have a color coordinated list of your “action” emails. The color coordination makes for an intuitive experience as you don’t even have to read the text within the navigation to know which section you’re selecting. Color theory is intriguing as all get out and the Mailbox team did an incredible job at selecting the right colors to associate with each action. However, I would like to see something other than the beige; it just seems off. It might just be my own, weird personal preference, though.

Below the color coordinated sections, you are presented with a settings menu which allows you to setup and edit your email accounts, signature, your various lists, and your “Later” settings.

Compose

Composing emails is where most current options fall short. The screen always seems too cluttered with fields and just too saturated to make email simple and concise. Mailbox changes that by offering the composition of emails in a very eye-pleasing manner.

When you select the compose button, a very familiar looking UI element comes up. The composition box looks almost identical to the Twitter and Facebook posting features built into iOS. Adding a contact can be done by selecting a contact with a little “+” button, or it will also auto-complete someone’s email when you start to type in their address, so long as they’re in your contacts or have been emailed before.

Other than that all you have is a subject field followed by your email body. You can use a little drop-down arrow to CC and BCC recipients, but being it’s something that’s not constantly used by many, it’s nicely hidden behind a simple UI element.

Another feature that I truly am enjoying in the beta so far is how simple it is to add an image or video. In the bottom-right-hand corner of the composition box, there is a little icon of a camera that, when selected, brings up the option to take a photograph or select one from your camera roll. No more having to copy and paste photos or tap away until you get to the option of having to add a photo or video. It’s a simple inclusion that makes a big difference.

Overview

The Mailbox team has done something that many apps are afraid to do. They have completely changed the way you interact with your email. It’s a bold step, but definitely one that will stand out among the crowd.

Expect mixed reviews between designers and power users in future reviews by other individuals, but don’t go into using Mailbox with a preconceived notion as to what it’s like. When it hits the App Store, download it, and use it. I have a feeling more people are going to like it than dislike it, but I may be wrong.

One of the things that stuck out to me when using it is the gestures. Just a week ago I posted my articles as to how gestures are starting to become a new element of design. Mailbox does just that with their quick and simple action system and I have a feeling this is just the beginning. Affordance or not, gestures are becoming more and more prevalent.

Another little tidbit worth noting is their “Inbox Zero” which they absolutely pride themselves on; for obvious reasons. So often we are slammed with email after email and the goal of the Mailbox app team is to allow a much easier and efficient way to reach inbox zero. When you do reach inbox zero in Mailbox, you are presented with an image masked in the Mailbox logo. They even allow you to share the image of the day and link to where they got it from. It’s a nice little touch that makes you look forward to inbox zero more than usual.

Hope you’ve enjoyed the breakdown and hopefully I didn’t miss any major details. Is that an oxymoron? Oh well, regardless, I hope it’s given you a nice little insight as to how much thought and boldness has gone into the development of this app and the overall revisualization of how you interact with your email.

Good Design is Environmentally-Friendly

Fashion and Tech

Designer as Architect

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)