Microsoft Revamps its Webmail with Metro-Inspired Design, Rebrands It Outlook.com

Hotmail, the latest iteration of Microsoft's web-based email service will soon be getting a user interface overhaul that takes many cues from the company's upcoming metro-ized Windows 8 operating system. In fact, it very closely resembles the new Mail client in Windows 8 as well as the new Outlook client in the Customer Preview of Office 2013 that I have been using for a a couple of weeks now.

Along with the (in my opinion, much needed) user interface updates comes yet another rebranding. Microsoft is ditching the "Hotmail" name in favor of the more professional-sounding "Outlook.com" webmail name. Now in public beta, users can switch over to the new Outlook.com webmail if they want, but it is not yet mandatory. Reportedly, all Hotmail users will eventually be moved over the new Outlook webmail once the service is in final stages of development. As Ars Technica points out, this is not Microsoft's first rebranding. In fact, it is somewhere around the fifth rebranding/iteration. Here's hoping that it is the last and that they manage to successfully brand the service–and do not tarnish the Outlook name.

I decided to take a look at the new Outlook.com interface for myself, and you can too. To switch over, log into your current Hotmail account, click on the "Options" link in the upper-right-hand side of the window and choose "Upgrade to Outlook.com." 

The new interface is very flat, and much more simplified versus the old Hotmail. The current Hotmail UI leaves a lot to be desired. It has a rather large advertising panel on the right, rather unattractive scroll bars that do not really fit in with the design's color scheme, and links along the top for other Microsoft services and email functions (like reply, junk, and categories) that can be difficult to read and find. It is a rather dated design by today's standards, especially considering Microsoft's hard push for updated UIs on other platforms–hence the Outlook.com refresh.

As mentioned before, the Outlook.com webmail UI is very similar to the Metro Mail application that comes with Windows 8. It is broken into a four panel design. The folders and quick views links from Hotmail and the email header list is carried over and given a flat Metro design with stylized scroll bars and a folder list with a light gray background. The third panel serves as the reading pane and sits in between the email list and advertising panel–which thankfully moves to text-based ads only. The contents of your emails are displayed in this panel. It is not a fully responsive HTML design, but it does scale fairly well as the browser window is resized.

Along the top of the screen is a blue bar that holds links for email actions (reply, junk, delete, ect), an Outlook button, Messenger button, Settings button, and account settings (when clicking on your name in the upper-right). The white text on the blue background is much easier to read than the current Hotmail design thanks to the slightly larger text and the better contrast.

When hovering over the Outlook button, a small arrow appears. If you click on that arrow, you get a pop up menu with tiles much like Windows 8's Metro UI for Mail, People, Calendar, and SkyDrive. Unfortunately, the Calendar and SkyDrive links simply go to the respective web sites. And those web sites have not been updated with the new Outlook design.

The following screenshot shows the interface used for creating a new email. Again, you get a flat two panel design with a top navigation bar. On the left, you can add recipients from your contacts or by typing them in manually, while on the right you can use the text editor to add rich text and HTML or compose plain text emails.

Outlook.com has a new People tab as well, where you can manage contacts and chat using the built-in messenger client. It is the only other tile that has received a facelift, the calendar and SkyDrive pages are still using the old/current design. It forgoes the blue and white theme for an orange and white color scheme, but maintains the paneled design. On the left you have a list of contacts, and in the middle it lists details the selected contacts. The right-most panel does away with advertisement in favor of a web-based messaging client.

One nice new feature is further integration with the various social networks (if you are into that sort of thing, of course). You can now add contacts from your Facebook, Google, LinkedIn, and Twitter profile(s). Further, the messenger client support talking with Windows Messenger, Facebook Chat, and Skype (coming in a future update) contacts.

In short, the new Microsoft webmail interface is a much welcomed update. Scrolling and navigation is noticeably smoother than the current Hotmail UI. Opening messages feels quicker as well. Opening the Messaging tab actually replaces the advertising panel completely, which is a nice touch. As mentioned above, the scroll bars are different. They appear to be a bit wider, and very much two dimensional, but the bars actually look much better than the current Hotmail design as they fit nicely into the aesthetic and color scheme.

The only (rather minor) issue is that, because of the larger text, I cannot, at a glance, check for new messages in the various folders I use. On the other hand, the text is easier to read and the scrolling is fast enough that it's only a minor thing. Further, despite the new Outlook.com name Microsoft's webmail does not support IMAP protocols. And being web-based, if your internet connection goes down you lose access to your email–there is no Google Gears support here.

While the new interface is not enough to bring me away from using a desktop client (which funnily enough is Outlook 2013), it is vastly improved versus the current Hotmail website and is worth switching over to. For being a webmail client, it is a very smooth, and dare I say slick, experience.

More information on Outlook 2013 desktop client–which Outlook 2013 seems to take inspiration from design-wise– I mentioned can be found using the outlook and office 2013 tags. Stay tuned for more Outlook.com information as the beta progresses. What features would you like to see? (I'd like to see the new UI carried over to the SkyDrive site!) Once you have gotten a chance to try the new Outlook.com beta, let us know what you think of it in the comments below (no registration required).

More screenshots are available after the break.

Another screenshot of the old Hotmail interface.

The new Outlook.com does away with image ads in favor of text-based ads.

The Calendar page has not received the same Metro UI update treatment, unfortunately.

The categories menu allows you to sort your emails into, well, categories.

A screenshot of the Outlook 2013 interface. The Outlook.com webmail UI is similar, though much more simplified and sans-ribbon UI (which isn't necessarily a bad thing in my book).