Hotmail AdBar (Outlook.com)

The AdUX team has only been formed a year ago when I joined so there were plenty of products waiting for the team to redesign. With the entire Microsoft embracing Metro design language it was time for a change across all platforms and products like Hotmail, MSN, XBox, Skype, Windows...etc.

The 1st Problem

Traditional ads are banners that glare in your face and interrupt your work flow when clicked on (takes you to another page instantly), thus resulting in an unpleasant experience and most users just learned to ignore.  

The 2nd Problem

With Windows 8 being the driver behind Metro design language and secretive, a lot the design patterns and guidelines were still being finalized and not shared internally. As a result I and the other designer were working almost 1/2 blindly basing everything on a couple early concept designs for the new Hotmail (which would later become Outlook.com).

The Design

One of the 1st problem we tackled was reducing the fear of "click and something pops up" -- this could only be trained over-time and it was the perfect chance to do so with such a huge refresh across almost all Microsoft products.
 
Eventually we designed a more interactive system of ads for Hotmail that would:

• Show relative content (ads)
• Display more information
• Let users customize / filter according to preferences

• Allow users to interact with ads and dive deeper
• Allow seasonal ads or full catalogues from vendors
• Browse ads by verticals or even location
  

Initially our designs for how the ads would fit into the new Hotmail UI would be presented to the Hotmail team, they'd give verbal feedback without concrete examples, and we reiterate again over and over.

It was a tough project dealing with time, feasibility, and most of all communication issues across teams -- and guidelines that don't seem to exist at all. I left Microsoft just as the project was near complete and the new AdBar can be seen if you log into Outlook.com today.

Role

• UX / Visual Designer      • Prototyper