Project Image

ABOUT THE PROJECT

MailTo is a Mac email app that I designed that helps you focus on emails without distractions. I’ve read a ton of articles about what email should and shouldn’t be so this is my take on email from my own experience and hearing about other people’s issues with email apps.

MY ROLE

I was responsible for the conception, research, user experience design, and visual design.

The Challenge

Email and it's "problems" have been a hot topic of discussion amongst all types of people for quite a while – this is no secret. I've seen a lot of designers try and tackle this problem and for the most part, a lot of the efforts that have been made are just silly and lacking in planning and execution. A lot of the designs I've seen have tried to turn email into to-do lists and other wacky things in the spirit of productivity. Alternatively I've seen designs that have addressed every single feature under the sun and were just so busy that the friction of actually using the product would be so high I'd stop using it the minute I launched it.

In my opinion, email isn't the problem – it's the preconceptions associated with email. Treating a tool that's primary function is communication like a task manager doesn't work for me and many others that I talked to before designing Mailto. I wanted to design something so I could focus on my actual work instead of waiting to manage yet another distraction throughout my day.

I set out to design an email application that's easy to use, unobtrusive to a user's work, and with the essential features that a wide-range of people actually use.

Sketching It Out

Sketch
Sketch
Sketch
Sketch
Sketch

Visual Design

I wanted to create a dark color palette that utilized different shades of blue-grays that were easy on the eyes with low contrast to each other and have a minimum of 1-3 primary colors for important actions or key elements for quick recognition (composing new emails and identifying active emails and text in emails).

After doing some research, most email traffic and the most effective times throughout the day to send or receive replies to email are between 8:00-10:00 PM and 3:00-5:00 PM. For me, this meant choosing colors that would work best during those times and for the locations people would most likely be in during that time.

These colors also influenced the palette I used for the application icon as well.

Color Palette

Inbox Design – New Message

Designing the main interface that most people would spend their time in was fairly straight forward – I didn't want to reinvent the wheel too much here. I wanted a layout that was familiar enough that it would be instantly learnable and recognizable for it's primary use.

In a lot of other designs I see, designers tend to ignore the default colors for labels that gmail has and they just choose colors that work best with their designs for convenience. I wanted to avoid this in case the user actually visits their GMail account to manage emails by chance – they wouldn't be searching for a custom color they created for a label in the Mailto app.

Another big area I wanted to focus on for the list of messages and for the selected email display was readability. I wanted to create a lot of space so the sender and subject text are easily scannable, and important elements have large clickable areas (tried to incorporate Fitt's Law as much as possible). A lot of email applications I've used in the past struggle to accommodate for this and it leaves me heading straight for the search box to find what I'm looking for or clicking randomly through emails with disregard to whether or not I care about the content.

Inbox

Inbox Design – Message Thread

I've seen message thread designs in a lot of email applications and there is almost always a learning curve and element of surprise to how they are structured. For message threads I wanted to design a timeline-esque structure since so many people are familiar with social media and how information is displayed linearly there. With this approach, the subset of users I tested this design with immediately understood the flow of the thread so I counted this approach as a success.

Thread

Compose Message

The compose screen was a big focus for this design. I took a lot of inspiration from newer blogging platforms and writing apps. Inline with "distraction-free", I wanted to make a space where you could focus on writing the email instead of having a new window pop up, a modal type design, or whatever new thing GMail is trying out now. I wanted to create an experience where the main focus was composing and I think I accomplished that with this design.

This approach was immediately understood by the users I put it in front of – their hands automatically drifted to the keyboard to begin typing. They didn't have to focus on a new window or find a popup somewhere else within the same window of competing information.

Compose Message

App Header

I wanted to avoid an application header with a Microsoft Word-esque toolbar with a thousand different functions and options. I also wanted to create a simple experience for identifying which account was selected and what the status of your email sync was. In the spirit of being distraction free, as a user, those are the main things I've found through my research and testing that people care about.

Accounts

App Sidebar

Most email applications I've used, the sidebar is mostly a barrage of competing information. I wanted to create an experience and a beautiful design that cuts through the fog and is easily understood and scannable. I wanted to focus on making the primary functions (composing and reading) the center of my design choices and I believe that's what I have achieved with this layout and design.

Navigation

Message List

For the message list and previews I wanted to design something that resembled closely what a lot of email apps are doing on mobile devices – increasing touch area to minimize error. This applies on desktop as well. A mouse is more precise but people maximizing the surface area and the time to reach that area with your mouse pointer was still an important aspect to take into consideration. The only thing I'd like to improve in this experience is differentiation the search, sort, and message list a little more clearly.

Message List

Email Content

Again, for this design I wanted to focus on the best viewing experience possible. That meat guiding the user to focus explicitly on the content of the email message and the important bits of information that are associated with it: from, to, date, and the essential actions for dealing with that specific email. I felt that keeping the subject line was redundant as 99% of the time, the content implies the subject and you just saw the subject when selecting the email.

Reading

Message Thread

I took the same approach here as I did with reading a single email message. I also talked a bit above how I wanted to create a timeline approach instead of nesting threads so it would be immediately relatable to how social networks display feeds which everyone is intimately familiar with.

Message

Compose Email

I had a couple of different ideas for the composing email message design but ultimately ended up focusing on a layout and presentation that begged users to write. I often get side-tracked when composing email because I have this whole other part of the interface staring me in the face where I'm able to scan other messages which ends up being a complete distraction and I might even click on another message if it piques my interest enough. The ability to remove this window from the area will accommodate people who don't have that issue.

Compose Annotation

Results

This started out as a design exercise for me but I would really love to develop this product or some iteration of it. I've only been exposed to iPhone development but maybe I'll take the plunge one of these months soon and start building this out. I think it would be an interesting journey.