This story is part of a special Slate Plus feature package on Chris Kirk’s long-form reported story “Battling My Daemons.” Be sure to check out the other Slate Plus exclusives related to this story, including a behind-the-scenes conversation between writer Chris Kirk and editor Dan Kois and a full audio version of the piece.
One reason I undertook the quixotic quest to design my own email program was that I hate the way all other email programs look. It’s more a matter of neurosis than sophistication, but I’m very picky about how things I interact with a lot—my apartment, my desk, my Web browser—look. And every email program I’ve ever used just didn’t look right. After years of use, I just couldn’t stand Apple Mail’s endless river of Helvetica anymore, and Gmail’s interface seemed too bland and compact. Now I could design my email app to look and behave exactly as I wished.
The designers behind Gmail and Outlook and Apple Mail are designing for everyone, which means they have to include everything. I had the luxury of designing for myself and myself only. I could even exclude design elements for features I never use, like email flags. In designing my email client, I followed two principles: display as little information as possible without sacrificing usability and align the design with how I think about my email instinctively.
Most email clients have two primary visual sections. The first is the message list. Typically, messages in this list are represented by the sender’s name, the subject, and the exact time the message was received. But when scanning the message list, I only care about the day the message was sent on, and that’s true only for a few days—after that, the message is simply old. So I drew some inspiration from Outlook 365’s Web mail interface, which places date separators in its message list so that emails from today are grouped apart from emails from yesterday, and old messages are grouped into broader categories like “Last Week” and “Last Month.” I took the same approach, though I added an extra feature to improve navigability: You can collapse each day to easily navigate into the past.
Several email clients, like Apple Mail and Airmail, can now display portraits of senders in their message lists, transforming their otherwise text-heavy interfaces into something more personal. I wanted to do this in SlateMail, but emails contain virtually no useful metadata about the sender apart from the person’s name and email address. Your contacts sync separately from your email, and with some providers, including my own, portraits don’t make the journey. As a result, I’ve been especially attentive to what email clients do when they can’t find portraits. Fortunately, there’s been some recent evolution on this front. Apple Mail used to show useless, generic silhouettes. Since a recent update, it now shows circles with the sender’s initials. Airmail brilliantly pulls the favicon (the tiny icon that shows up on a browser tab, usually the logo of the site you’re on) of the sender’s domain. I adopted Airmail’s approach. Now I can distinguish with a glance between emails from my co-workers and from others, such as email notifications from Facebook, Twitter, or Amazon.
The second major element is what you might call the “message view.” It’s the space in which you actually read the full messages that you’ve received. I was basically happy with the default message view in most clients, in which the text of the message (and its entire related thread) appears in a pane to the right of the message list, but I thought it could be just a little bit better. I based my design most closely on Apple Mail, which keeps each message nicely demarcated by displaying them as cards over a medium background and elegantly hides the reply and forward options until the user has moused over an email. I mixed that framework with an element from Mail Pilot: Instead of displaying the subject for every message, I pinned the subject in one place, the top of the view.
What’s more important to me than any specific design decision, though, is that I can change SlateMail’s design. In fact, anyone familiar with CSS, an easy-to-use and widely known language for styling Web pages, can tweak my design. It’s easy to make the borders thicker or the backgrounds darker. I chose a font called Avenir, which I like for its elegant humanist appearance and easy readability. When I inevitably get tired of it, change is only a click away.
