MailSplash.jpg

Mail App

Mail App created using Principle and Sketch

Mail App Concept

Mail App Concept

I had gotten frustrated with the email apps I used on a regular basis, so I decided to design one.

The Problem

The Problem

I found most apps took a lot of switching between screens, and there must be a more efficient way to navigate.

It needed to be quick to use, which meant a few things:
No learning curve. Or alternatively, an intuitive interface.
Clear to read and scan through.
No chance of getting lost, so, few screens.

Some of these braindump sketches, by the way, are totally ridiculous.

Prototype Draft

Prototype Draft

I wanted everything to be as accessible as possible, so I kept the emails readable at one click, while allowing the user to still see the others. I wanted the user to access as much as possible on the one core screen.

For easy legibility/scanability, I kept to high contrast between text and background, and a simple font with wide leading.

Draft Feedback

Draft Feedback

I did a round of user testing interviews and learnt a lot, including this:
People weren’t noticing my lovely swipe function!
My legible text wasn’t as legible as I thought. Too small.
Same with my Reply, Forward, Etc buttons.

(I have a design blind spot- I have small fingers and design like everyone else does, too. I need to keep an eye on this.)

Second Round

Second Round

I made the text much bigger and easier to read, as well as changing up the Trash and Favourite functions. I even added some extra animation - the trash can opening not only adds personality to the app, it also tells the user what they’re doing.

Yeah, I know how patronising that sounds. Hear me out.
It’s a warning. The user doesn’t go “Oh, that’s where the Trash function is, cool.” (They may also do this.)

The user is now a little more likely to think “Ah, if I keep swiping, this email is going to get trashed-see-the-can-is-opening-right-now!”
Which is exactly how the app works.

It’s Time Time!

It’s Time Time!

I added clearer info on what folder the user was on, and update time to the footer.

And now as people would actually find my swipe functions due to the little coloured side tabs I added, I was able to easily increase the size of the Reply, Forward, etc buttons. I shifted the order as well, so you giant-fingered one hand users have closer access to the buttons you’ll use the most.

Tweaks

Tweaks

Most people have a few different email accounts, and realising that my first draft didn’t make it clear which account people were using, I turned my oopsie into inspiration and made the lot easily accessible at the top of the screen.

I also couldn’t help playing with the search bar. Nice and clean!

And just so you know, this isn’t Available On The App Store. Yet.