Published on | Prototyping: From UX to Front End — Medium Theodore Richards Final Mail Redesign

I use Apple’s Mail App every day. This isn’t because I want to: I have school, work, and coupons to keep up on. But it also isn’t because I have to: there are other apps that work better and are prettier, but I’m just too lazy to use them, honestly. But either way, Mail is a part of my every day. I look at it when I wake up, before I go to bed, and too many times in between.

However, I’ve noticed a trend when I use it: I don’t open two-thirds of the messages I receive. I simply swipe and tap to mark as read. Now, I know that I could just unsubscribe to most of these messages, but I don’t. Whether it’s because I’m afraid I’m going to miss that 25% off coupon for CVS or I’m just lazy, I don’t know. But I rarely ever unsubscribe. I kind of like having notifications when I open the app. It makes me feel a little less lonely. But after swipe, tap, swipe, tap, swipe, tap, my fondness of these 27 unread messages goes away.

So, me being me, I decide to open Sketch and redesign the app, instead of just dowloading a different one because, again, who can be bothered?

Yes, I’m on the beta. Yes, my email is super secret. Awkwaaaard.

Problems

Disclaimer: Some of these problems may or may already have solutions built into Mail, but I don’t know about them, so that’s enough reason for a redesign to me.

So the first thing I did was sit down and outline the problems in more helpful way than, “This shit is annoying.”

The first problem I discovered was easy: I want to be able to mark all of these things as read at once. (I never delete because I’m a hoarder. My trash bin on my desktop currently has 1,500 items exactly. I just can’t commit.)
The second problem was that if I left an email unread for more than a day, it just got lost in the abyss. I’ve ghosted my grandma a couple times because of this. I had full intention of replying back to her monthly update from England but out of sight, out of mind, I guess. (Now I know you can move all the unread messages to the top, but I honestly just recently found this out and always forget it’s a thing.)
The last big problem for me was that the way my mail is divided is by mailbox. I currently have two mailboxes, which started off as “School Stuff” and “Not School Stuff.” Now, though, they’re more like “Random Shit” and “Random Shit, as well as some School Stuff.” So all these mailboxes do is divide the chaos, which I called an inbox, into two smaller, more manageable chaoses (can’t believe that’s a word).
It’s pretty ugly and boring.

All Inbox Screen

Solution Ideas

If I want to mark all of the Wayfair emails about mattresses on sale (even though the reason I’m getting them is because I bought a mattress from Wayfair, and they don’t understand I don’t need two) as read, then all of the Wayfair emails should be together. They should be organized by contacts, like in text messaging. You should be able to apply actions to multiple messages at once, delete or “read” entire conversations, and see more than five messages at one time.
Instead of dividing the inboxes by email accounts, you should be able to create sections, like “Work,” “School,” “Coupons,” etc. This way I can easily prioritize what I’m seeing, so the Walmart shipping alerts don’t get in the way of “URGENT: NEED DESIGNS BY 4PM.” You should be able to see these individually, as well as altogether.
It should just be more visually interesting. Right now, it’s just a lot of words with some blue dots. With this, it should be more fun. I feel like email is such a drag now. People love texted, so why can’t we love email again (was gonna make a MAGA pun, but I’m over it).

Five Unique Interactions

Implementation

Every email address you come in contact with is given a colored circle (I’ve been calling them bubbles in my head, so that’s what I’ll refer to them from now on). The bubbles hold every conversation or email you’ve sent or recieved from that person.
Each bubble is color coordinated, based on the section it is given. In this case, “Work,” “Stores,” and “Other” are what I’ve decided to call them.
Bright colors, large text, and unique interactions, based on what part of the app you’re in make it more fun and inviting. This way you aren’t just scrolling through endless text with little variation.

The Slider at the Top interfered with the Button. Also, don’t own the photos or know who they are of.

Things I Discovered / Problems

Large text and bubbles limit the amount of characters that can be used
Sliders inherently move; therefore, nothing can be in their way.
Don’t let the design get in the way of functionality. In the the first iteration, I actually forgot to put a button in to write an email…

Creation and Presentation Tools

Sketch — I used Sketch for everything: the icons, layouts, mockups, stylesheets, everything.
Sketch Plugins — I used Craft (https://www.invisionapp.com/craft) to create the stylesheets and Magic Mirror (https://magicsketch.io/mirror/) to help make the mockups.
L-Store — I got the mockup templates for free from L-Store (https://free.lstore.graphics).

Last Thing

<a href="https://medium.com/media/2d12a60e6cbc5c080ef87dc745e97adc/href">https://medium.com/media/2d12a60e6cbc5c080ef87dc745e97adc/href</a>

To see the redesign in its entirety, click here: https://www.behance.net/gallery/56524247/Mail-Redesign?share=1

Redesigning Apple’s Mail App for Myself was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redesigning Apple’s Mail App for Myself

Cool stuff, every week

More Articles