Gmail is one of the widely used web application which is known to be the most efficient and favorite email service.
Re-designing Gmail landing page is a good exercise to keep creative juice running and polishing user experience knowledge. So in next few slides I will explain how I have re-designed the Gmail. I have taken measures to fairly change the way people use Gmail by providing some more features in the landing page and a new layout. I am doing only landing page this time.
External links (Other Google services): Relocation and resizing External links Login module Purpose: To minimize the clutter caused by the external links. Action: In my design, I have put all the external links inside the ‘More v’ dropdown. Reasoning: User is familiar with the ‘More’ dropdown for the external links like Google Reader, Groups, Maps, etc. So it is reasonable to put rest of the visible links together inside the ‘More’ dropdown. Purpose: To reduce the wastage of real estate above logo band. Action: I have moved the ‘More’ dropdown of the external links in the admin section. Reasoning: The ‘More’ link remains the only item above logo, so clubbing it together with the admin links.
Ads: Re-formatting and relocation Search Ad space Search– Remains as it is. Purpose: To reduce the wastage of real estate caused by access allocation of space to the ads and format of ads (shorter text ads leave the blank space). Action: IN my design I have put a different size of the ad and placed inside the Inbox action button bar. Reasoning: We have a blank space in the inbox action bar and the new shape of ad looks more attractive without consuming too much of space.
Inbox action buttons: Redesign Mail action objects Inbox action button Inbox action buttons– Purpose: Want to show connection between the left menu and the display panel. And to reduce clutter caused by the button look. Action: Inbox and same level links is shown above the bar. Tab manner is used to show connection of the action button bar with the Inbox. Refresh link is used as an icon. Reasoning: If the link style dropdown display can solve the purpose in a bar, the use of buttons are not necessary. Purpose: add more information about a mail on the inbox screen. Action: IN my design I have added indication of replied, replied all, forwarded calendar (Item type) and attachment. Reasoning: User want to gain most of the necessary information on the main screen. So if I can provide the history and current status of the mails in icons, that would be value add.
Internal links and inbox action buttons: Redesign and relocation Internal links Purpose: To give prime location and more space to the mail, Want to start inbox from the extreme left, not from somewhere between the page. Want to show connection between this menu and the action item of the selection which is displayed separately currently. Action: In my design Inbox and same level links is shown above the bar. Tab manner is used to show connection of the action button bar with the Inbox. Reasoning: The links on the left menu are actually connected to the action bar, so close placement and tab view show connection and location of the section user is browsing.
Chat: Relocation and redesign Chat module Purpose: As said earlier, I am placing inbox in the extreme left so the chat section has to go somewhere else. Action: I have put the chat section on the right bottom section, below the mail preview pane, yes I have introduced a MS like mail preview pane in my design. Reasoning: In Gmail user actually chat on the right bottom side, why don’t we move the whole chat section there and merge it with the chat windows to give better access to the user for quick selection
Mail and mail action buttons: Placement on the landing page Purpose: Display the mail preview and individual mail related action items right on the landing page. Action: I have put the action buttons on the mail itself which will appear on roll-over. I have put preview pane on the landing page in the extreme right side of the inbox, just like in MS Outlook. Reasoning: In Gmail user have to go to the mail page to actually read it fully and perform any action. Accessing these without going to the mail page will be a better experience. Mail Mail action buttons
Navigation User can resize different panes according to their need. Mail preview pane can me minimized along with Chat module. Only Chat module can be minimized Instead of text for the action buttons, I have given icons, reason is that user is familiar with these icons which are part of mail services since last 10-15 years. Tool tip is added for more information.