One of the most frequently used apps on any smartphone is the Email app. I designed it for productivity, allowing the user to quickly read and respond to mail as well as compose new messages across multiple accounts.

I was the design lead and interaction designer on this project. I coordinated the design efforts amongst the design team (usability testing, visual design, and prototyping) and worked directly with the product manager, QA lead and developers.
MY ROLE
Design Lead
RESPONSIBILITIES
Product definition
Interaction design

EMAIL ACCOUNT VIEW

Most users have multiple email accounts so I needed to make sure they had quick access to the most important folders in each account without needing to go back and forth between multiple screens. If you remember, at the time, Apple's iPhone forced users to go up and down multiple levels to switch between accounts and folders. I knew webOS needed to be easier to navigate between folders. So, I designed this shared view that allowed you to place the most important or frequently accessed folders at the top of the screen.

INITIAL VERSION

Rather than navigating multiple levels of a folder hierarchy, I wanted to flatten the hierarchy to have just a single scene to interact with. The smart folders, along with each account, expand to show the folders within.

ITERATION

The previous version had a list that became too long where an account might be pushed below the fold. We came up with the idea of favorite folders per account to allow the user to always show the most important folders. The Inbox for each account would by default be a favorite folder.

FINAL DESIGN

After usability testing and additional design reviews, I decided to create an entire section for favorite folders that always lived at the top of the list. This allows the most important folders to be listed at the top while keeping the rest of the account's folders available in an expandable list.

EMAIL MESSAGE VIEW

Users expect to perform many actions in the message view. On a mobile device, I really focused on the primary use cases: reading and replying quickly. The design needed to carefully balance the expected functionality with ease of use for the primary use cases.

INITIAL VERSION

In the initial version of the app, I wanted to provide the functionality most users would expect. This meant about 10 different actions.

ITERATION

The previous version had too many buttons and actions. In order to simplify the page, I removed the attachments button and instead just included the attachments as a list. The move to folder button was placed at the bottom with the other actions. Lastly, the subject was moved below the sender information.

FINAL DESIGN

In the final version, I cleaned up the scene even more. The move to folder and mark as flagged actions were moved off the screen and into the application menu in the top left. Only the most important actions were kept in the scene.

DESIGNING EMAIL FOR TABLETS

The tablet version of webOS came a bit later. It needed an update to the interaction model to be suited for the significantly larger screen. Since we were starting from scratch, we needed to define interaction patterns that would be consistent across the system. The primary interaction pattern to nail down was the use of sliding panels to navigate, show, and hide content. The Email application was the perfect option for this. My designs using the sliding panels showed how they should be used and where they were best suited. Email became the model application for other designers to follow.

INITIAL VERSION

The initial versions of the Email app took into account the 3 levels of hierarchy - accounts view, list view, and message view. Each level of the hierarchy belonged in a single panel. The panels proved highly versatile because they allowed the user to view all 3 panels, 2 panels, or a single panel depending on what was desired.

Allowing all 3 scenes to fit on the screen at once meant the user could quickly switch between accounts and emails while 2 panels allowed the user to focus on just a single inbox.

FINAL VERSION

With the visual styles applied by the visual designer, you can better anticipate how the sliding panels behave.

In the final version, the message view received the biggest update with the secondary controls moving to the top chrome rather than being inside the scene, as was shown in the wireframe.