SELECTED UI MOCKUPS
SELECTED MOTION DESIGN
ManageStorage_Scan. ManageStorage_Clear. CheckEmailDetails.
SCREENSHOTS FROM THE ANDROID VERSION
Download at Google Play
KEY FEATURES AND DESIGN PROCESS
1. Messaging Style Emails
The messaging style is good for viewing short emails. But if the email is longer than 2 screens, we will cut it short. Users can tap the bubbles for viewing the whole/complete emails.
Selected information: sender’s name and time are hidden until tapping Details button. The Email Subject (email topic) will be hidden under the header automatically if that email is not the first one on that email subject.
PROCESS
Why neat bubbles?
The process for designing email bubbles:
The process for designing email details:
2. Reply Emails
The default reply is “reply to all” if there are multiple receivers on that email subject (topic). But users can switch to “reply” or “forward” by tapping the reply icon in the top-left corner.
PROCESS
Why do I show all the options?
How do I make the user interface clear?
3. Classify Emails by Categories
How to help users find the the useful emails/information easily? Based on this challenge, we classify emails according to 5 scenarios. When these emails are bundled, the inbox list is cleaner. A tidy list is easier for users to search emails through a glance. Besides, we pull out the useful information from that emails.
PROCESS
How do I design based on users' goals?
4. Menu
Only leave the most frequently used folders and the smart classification folders in the menu.
PROCESS
5. Contact Details
A contact detail screen that helps users check the contact information, email history and encourages users to start a conversation.
PROCESS
6. Popup Menu
Don’t worry about it. The bottom button is the safe button to dismiss the popup menu without triggering further actions. All popup menus are under control.
PROCESS
7. Inbox List
A neat thread list for reading efficiently. We put sender’s name on the first line, content on the second line, and email topic on the third line.
The sender is more important than the topic. For example, when you see 2 emails with the same email topic “Let’s have a meet tomorrow” from me and your boss, which one is more important to you? That’s why we choose to place sender’s name on the top. For the email topic, if it contains multiple emails, the topic won’t change that every time we receive a new email under that email topic. That’s why we place it on the bottom. Finally, we have a “who said what at where” structure which is more readable.
PROCESS
THANKS
2017