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

Subject: Editorial, General Tech | August 1, 2012 - 09:11 AM |
Tagged: webmail, outlook, microsoft, metro ui, hotmail, email

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.

View Full Size

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 "" webmail name. Now in public beta, users can switch over to the new 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.

View Full Size

I decided to take a look at the new 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" 

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

View Full Size

As mentioned before, the 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.

View Full Size

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.

View Full Size 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.

View Full Size

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.

View Full Size

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.

View Full Size

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 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 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 beta, let us know what you think of it in the comments below (no registration required).

More screenshots are available after the break.

View Full Size

Another screenshot of the old Hotmail interface.

View Full Size

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

View Full Size

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

View Full Size

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

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

August 1, 2012 | 10:33 AM - Posted by dusanmal (not verified)

Mail sending in new design shows the very root of why this is failed construction: two panels. One on the left taking the whole wide strip of the screen to show... ONLY to whom e-mail goes to, which is 99 out of 100 times one short line. So, why have it? Is anything gained by not having a simple one panel setup (that would be simplification) or current setup where left panel at least shows "global" part of the interface (folders,...)? Similar needless complexity permeates the whole design. Hence author completely misses it when stating "The new interface is very flat, and much more simplified versus the old Hotmail." I'd welcome simplification, this is not it.
Of parts that work I'd praise messaging and calendar (both of which would work better grafted on the existing old design as real improvements).

January 7, 2013 | 11:39 AM - Posted by Shanna (not verified)

I do not know whether it's just me or if everybody else encountering problems with your website. It seems like some of the text within your posts are running off the screen. Can somebody else please comment and let me know if this is happening to them as well? This might be a problem with my web browser because I've had this
happen previously. Appreciate it

Look at my webpage www.CelebsWithoutMakeup.Org

August 1, 2012 | 01:04 PM - Posted by timmyisme22

I've had nothing but trouble with logging in at all on their websites since they updated. My password is correct and I've reset it constantly (and tested with a different password) but after a night or less, it just decides that it will no longer log me in on their website.

Email through my phone works still though and my password hasn't changed (or my phone would disconnect from the account and I would have to re-apply the password).

Why does Microsoft have to mess everything up...

August 1, 2012 | 07:24 PM - Posted by Anonymous (not verified)

It will not matter M$ metrofacation will not help, just waiting for Win 9, hope by then M$ will allow thumb drives to be configured into a RAID so my USB copys will not take forever, Oh but saving users time is not one of M$ concurns. Oh we at M$ are all about tiles, yes tiles are all the rage! Yes computer users have all this free time to oogle at the live tiles.

August 1, 2012 | 08:19 PM - Posted by Mark (not verified)

I like it I tried it myself...lota long winded comments on this post lol

August 2, 2012 | 12:43 AM - Posted by Gordon Lee (not verified)

Anyone who spells Microsoft metrofication as "M$" is an Apple corporate fanboy! You need not waste our time with your lame comment.

August 2, 2012 | 09:32 AM - Posted by Anonymous (not verified)

No! all my laptops run M$ windows, never owned an apple product. But my rants will continue against M$ fanboys TOO!
I could care less about Crapple or MICROCRUD, BUT I do want the ability to RAID my cheepo USB thumb drives to get better write speeds. I do want the ability to do a system image backup directly to a USB thumb drive, without M$ telling me NO!

August 2, 2012 | 09:48 AM - Posted by Anonymous (not verified)

Oh, and while I am still foaming at the mouth, please Tell me why M$ Windows operating system has so little user control over the USB ports on my laptop, Why can I not give more bandwith to one usb port over the others? Better yet why do I need to download specilized software to tell me information about my laptops hardware, Information that should be made available by any TRUE operating system?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote><p><br>
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.