Windows 10 Google: Mail App (Concept)

Saturday, March 5, 2016

Concept

This concept takes the good parts of Windows, the good parts of Material Design, and puts it to practical use as an email client. What does that mean? It means I've designed a mail client that's beautiful, functional, and consistent across the Windows 10 Google platforms. Check it out.

Back in September of 2015, when a guy named Kamal and I were going full steam ahead with our Windows 10 Google project, the flagship of my career at the time, we pushed out this concept:


It was made mostly by Kamal, one of the most brilliant designers I've known. Just look at all the attention to detail in the concept! Everything looks as if it were real, just add some animations and you could fund a Kickstarter campaign with it. Kamal has since left the project, taking his mockups with him.

One day, being discouraged while working on the Start Menu for the project and being unsatisfied with results, I found that there was a folder in the project files called "mail2". It contained a more or less completely bare mockup, with just the sidebars and background colors in place. It was the beginnings of an attempt by me to try to remake the mail client after Kamal left, but that I had never finished.

In a flurry of inspiration, I was determined to finish that email client. Here we go...

Background

This concept is part of my larger Windows 10 Google project. The concept of this project is to combine the best of Google and Microsoft; easy to use, simple, and friendly, yet powerful and powerful. It's taking elements from material design and elements from Windows' UI and putting them into a meaningful, effective, and beautiful design.


The inspiring images in the above moodboard come from clients that I use, clients that I've heard positively about, or concepts that I just find to be unique. From top left to bottom right, we have Gmail for Android, Inbox for Android, Mailbird, Kirill Emelyanov's Email Client Concept. CloudMagic, 1910's "A Typographic Approach to Email," and of course, Kamal's mockup.

Design


I'll just let my annotated wireframes and mockups do the talking here.



A nested sidebar system is used. This design is largely inspired by George Kvasnikov's Google News Redesign, where a nested sidebar was used to select the date of publications, but we use it far more extensively.

In the mail app, the first level of the sidebars are the account selections. This level very simply contains all the accounts that the user has logged into with the mail app. The second level are the boxes and folders, such as Inbox, Sent, Outbox, Drafts, Spam, Trash, Archives, etc. The third level can be used for things like different inboxes within the inbox of one email account, i.e. Primary, Social, and Promotions in Gmail. It's not shown in our mockups.

Once an inbox, folder, or level of emails is selected, it shows up in the first column.


In the first column, attention is drawn to either the FAB to compose a new email, or to the title text of the inbox, from where the user goes to select an email to proceed.


The sender of emails is emphasized using darker, larger font as well as with a visual profile picture, followed by the subject and a quick snippet of the email.


The second column is the conversation view, where you can view the emails in the selected conversation. Attention is drawn to the subject of the email uptop, under which are all the people included in the email chain; to the side are secondary actions, such as archive, mark as spam, delete, and star as important. Attention is also drawn to the Reply FAB.

In the chain itself, the first email, with the sender's name and profile image, are shown collapsed, with a small snippet preview of the content. In-between emails are collapsed and hidden under the link "Show Conversation". In place of the profile picture is a slightly smaller circle with the number of hidden messages within it.


The latest or selected message in the chain is displayed larger. The sender's name and image are displayed larger; the recipients of the email and the date are also shown. The full text of the message is shown, and floating Attachment boxes show the filetype, filename, and a quick preview of the content of the attachment.


Using the best of Google's and Microsoft's design language and philosophy, and improving upon Kamal's design, the concept directs the user's attention to make for an effective, approachable, intuitive, elegant, and cross-platform email client.

Stay tuned for more Windows 10 Google concepts. Feedback is appreciated as always :)