Mobile Mail App Header

Mobile Mail App

After trying many different email apps I wasn’t happy with the majority of them so I wanted to design my own. While I was using them I noticed several issues, some of the issues could be overlooked, but others ruined the whole experience. One main issue that I noticed was that some apps had a poor design which made them look outdated compared to other apps using newer design trends. Another issue that I found was that some of them had a lot of extra features which made their app have a bad user experience which would cause users to get confused or frustrated. In order to fix these issues, I wanted to create a simple email app that has all of the basic features that any user would need while maintaining a good design. I created this personal project during my first year of college and it took around one to two weeks to complete. As of right now this design is only a concept, but maybe in the future it might become more than just a design.

Services
Mobile Design
UI/UX Design

Software
Sketch App
Adobe Photoshop

Client
Personal Project

Platform
iPhone App

Project Date
June 2015


Inbox Screen Preview Menu Screen Preview Search Screen Preview Compose Screen Preview

The Design Process

During the process of looking for a new email app I came across some issues. The first issue that I noticed was that some apps still used heavy gradients and shadows in their design which made their app look outdated compared to other popular apps that had a simple and flat design. The second issue that I found was that some apps had a lot of extra features which can be a big issue because if some of those extra features get in the way then, the user may get frustrated which would ruin the whole experience. After understanding the issues that I had to solve, I came up with two goals. The first was to include the basic email features that any user would need, and the second was to give the user more of a personal connection while they use the app. After creating those goals, I started brainstorming and one of the ideas that I came up with was to improve the inbox screen by making it more personal. I decided to have large contact images so that the user understood who they got the email from rather than just a name and a subject line. This gives them more of a personal connection since they can see a picture of who sent them the email.

Inbox Screen Preview Compose Screen Preview Settings Screen Preview

The Final Solution

After creating some goals for this project, I finally came up with a concept of how I wanted the email app to look. The overall goal was to create a simple app that had all of the basic email features that any user would need. When you open the app for the first time, I wanted to have a great experience right from the beginning and that’s why I created a beautiful login screen. The next step was to create a walkthrough screen that would show a tutorial of how to use the app. After that was done, I wanted to focus on the inbox. I decided to make the contact information of who sent the email stand out more, and I did this by having large contact images, and bold contact names. I also changed the colour of the email messages to a light gray so that the contact information stands out even more. After the inbox was done, I decided to focus on the main email screen. I wanted to have a simple design so that while the user is reading, they wouldn’t get distracted. If the user wanted to do something such as delete a message or add an attachment, then there would be an icon for that specific action.

Splash Screen Login Screen Walkthrough Screen Inbox Screen Menu Screen Snooze Screen Delete Screen Search Screen View Message Screen Reply Screen Compose Screen Settings Screen