Gmail Landing Page Re-designed

© COPYRIGHT 2010 SAPIENT CORPORATION | CONFIDENTIAL 1

19.10.10| - Rishi Sinha

Gmail landing page re-designed


Index

1. Introduction

2. Current Gmail – Details

3. Redesigning and placement of the modules

4. External links (Other Google services): Relocation and resizing

5. Ads: Re-formatting and relocation

6. Inbox action buttons: Redesign

7. Internal links and inbox action buttons: Redesign and relocation

8. Chat: Relocation and redesign

9. Mail and mail action buttons: Placement on the landing page

10. Redesigned Gmail: Preview

11. Navigation

12. End slide


Introduction

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.


Detail of the components

Current Gmail – Details


Current Gmail

Internal linksInternal links

External linksExternal links

Chat moduleChat module

SearchSearch

Login moduleLogin module

Ad spaceAd space

Mail action buttonsMail action buttons

MailsMails

Inbox action buttonInbox action button


Footer itemsFooter items


New layout and comparison with current one

Redesigning and placement of the modules


External links (Other Google services): Relocation and resizing

External linksExternal links Login moduleLogin 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 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.

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

SearchSearch

Ad spaceAd space

Search–

Remains as it is.

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.

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 objectsMail action objects


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.

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.

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 linksInternal 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.

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 moduleChat 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

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.

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 Mail action buttons Mail action buttons


Redesigned Gmail: Preview


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

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.

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.


Thank you

Thanks for your time and if you want to share your ideas I would be delighted.

Rishi Ranjan Sinha

Art Director | SapientNitro

Green Boulevard (Tower C)

3rd & 4th Floor

Plot No. B-9A, Sector 62

Noida 201 301

Uttar Pradesh, India

Tel: +91 120 479 5000

Mobile: +91 9818433573

Fax: +91 120 479 5001

Extn: 5323

Email: [email protected]

www.sapientnitro.com

Date post:	17-May-2015
Category:	Business
Upload:	sapientnitro
View:	2,858 times
Download:	0 times

Gmail Landing Page Re-designed

Business