My Process:
1. Research
2. Competitive analysis
3. UI Design
4. Features
1. Research
I installed Mailbird and added two mail accounts. I found Issues things that can be improved from 8 features defined in the exercise:
1) Combined Main menu: A bit confusing. No easy access to notifications list. No mute notifications.
2) Accounts: No visual difference between accounts (same G for every Gmail account). Only mouse over to know accounts. Left dot indicating unread messages not clear that this is the purpose.
3) Folders: Not really intuitive the collapse / expande action with doing the manual column resize. Unified folders a bit confusing, not good to move emails/conversations between accounts.
4) Unread + Draf: Draft as text I feel it’s ok, it’s a standard. I would keep background color only for selected, maybe adding slightly color for hover.
5) Activated Apps: A bit confusing having this tabs in the left menu with email accounts. I would directly organized apps on the right. Draggable order is good, but the space for apps is a bit limited (4 and scroll starts).
6) Notification toast: Good. Nothing to say about it, maybe small styling improvements. One of the few desktop applications that includes it.
7) Inline compose window: Found it a bit overloaded. I would explore compact version.
8) App sidebar: This panel on the right works separated from apps menu on the left, it should be unified.
2) Competitive analysis
I picked 5 mail apps:
And 5 ‘all in one’ apps:
I analyzed and compared one by one the 8 elements listed on the exercise:
3) UI Design
Having compared applications and with a better understanding of Mailbird’s functionalities, I moved to visual design sketches. I defined this screen as my selected layout (option A) and then I explored alternative layouts.
Alternative layouts explorations
Although I think that we must follow usability patterns and respect layouts standards, being a test exercise I found it interesting to include these layout variants. This explorations maybe works as triggers for new tools or functionalities.
B) Dashboard approach
C) Spaces concept approach
4) Features
I returned to my selected layout (option A) and expanded functionalities and explained some interactions.
Notifications center.
Separated from menu. Added ‘Do not disturb’ mode to disable notifications.
No more Apps in bottom left menu. Only notifications with counter and settings.
Mailboxes Expand / Collapse
Sidebar redefined. We keep manual width modification as alternative.
Profile picture included as main image for easy accounts recognition. Type of account (Gmail) icon secondary and added counter pill.
Right panel collapse
The right sidebar can be collapsed to avoid distractions or to take full advantage of the central composition panel. Apps menu navigation changes to a vertical navigation keeping apps icons visible.
Right panel dynamic approach
Automatic horizontal scrolling when interacting with the right panel. It gives us the possibility to optimize the use of our screen on the applications panel.
Horizontal navigation with + (add app) integrated.
Apps horizontal navigation
Another exploration that I found interesting to do is horizontal navigation between applications. All grouped in the right panel with their own navigation menu. Close, add another or reorder by drag.
Trackpad interaction
Unread / read and Delete actions included with trackpad or touch mouse over messages.
Text tools compact
To simplify and not overload the composition screen, in a first instance we show the summary tools. We group complex editing tools together if required.
* Changing button position is not ideal. I would explore a different approach (for the next sprint 😅)
Light – Dark modes
Mailbird currently has this functionality in configuration, appearance. So it seems important to me to consider this feature in my proposal. Also in the future thinking about a potential support for mac users and their OS related Light-Dark mode.
