A behind-the-scenes look at designing the new Hotmail: part three

A behind-the-scenes look at designing the new Hotmail: part three

  • Comments 19
  • Likes

In part one and part two of this series, I talked about the principles that guided our design for the new Hotmail and showed you how we’re helping you navigate your email and manage your inbox more quickly and easily. Today, in this last part, I wanted to show you a few features that we designed to help you share and collaborate more effectively and have more fun doing it. Let’s jump right in.

Improving the Quick Add experience

If you’ve been using Hotmail for a while, you may have noticed the Quick Add column when you’re writing a message.

The Quick Add column

Or maybe not. We think this is a great way to add info to your messages, but we found that a lot of people just didn’t discover it. We wanted to get this feature a little more attention and give you better ways to share photos and Office docs. We decided that we should design around the concept of one place to add content to your email, whether that’s a photo album, a home movie, or content from Bing.

Sending photos and Office docs

We also wanted to improve the experience of sharing photos and documents by increasing the number you can share and making the experience a lot more collaborative. To accomplish this, instead of sending these files as regular attachments, we added the ability to share via SkyDrive.

We knew we had a great new way of sharing photos and docs, but we found that people didn’t realize they were sending via SkyDrive rather than using regular attachments. Our design needed to provide a natural and simple way to add content, and it needed to provide a clear entry point for sharing with SkyDrive.

We started with this…

Attachments, version one

When we spoke with customers about the new approach, it became clear that they didn’t understand our intent. They thought they were simply doing what they’ve always done: attaching files to email. They thought of the documents and photos as literally “attached” to the email. This wasn’t actually the case. Instead, these items were being stored on the customer’s SkyDrive. Having people understand that nuance became our mission.

With that in mind, we tried this…

Attachments, version two

This approach sort of helped, but it wouldn’t really scale to accommodate all the Quick Add stuff (movies, maps, restaurants, etc.). So we developed the Insert bar:

The Insert bar

We didn’t just stop there. We needed to make sure all the language in our design clearly communicated the important concepts. We spent time evaluating a series of language options for the items in the insert bar as well as the menus under each item. We had the approach we had been looking for with Office docs and items from Bing, but the more we talked with customers about these options, the more we realized that people really wanted to know where their files—particularly their photos— would be stored, and who would have access to them.

In essence, privacy and “where the photos live” were the critical concepts that needed to be addressed.

Ultimately, we landed on this…

Create an album on SkyDrive from the Insert bar

We found that customers began to understand our intent. They would stop and ask “what does ‘Create album on SkyDrive’ mean?” If they weren’t comfortable with moving forward, they would find the thing that they were most comfortable with: Attachments, with the trusty paper clip.

If customers do use the trusty and familiar Attachments entry point and they upload a bunch of large images, we prompt them to “convert” the attachments to an album on SkyDrive.

Make an album on SkyDrive?

Again, we wanted to make sure they understood where the photos would live.

The online album is saved on your SkyDrive

What we ended up with is an intuitive and rich way to share the things you want to without filling up your inbox.

Active Views

Active Views were a bit tricky for us. If you’re not familiar with the feature, it’s essentially the way we make email a richer, more interactive experience. You can preview photos shared with you from a service like Flickr, play videos shared with you from YouTube, or see the status of a package in transit to you without having to go to the shipper’s site. When we first started exploring the concept, every execution we did was perceived by usability test participants as an ad.

In order to wrap our heads around the right way to present this new concept, we conducted concept testing in three countries: France, Brazil, and Japan. Our goal was to help frame the approach to Active Views.

Here’s one of the concepts we showed during that early testing.

Early version of Active View with Contoso Shipping info inside the email

At the close of these tests, we were scratching our heads—pretty much everyone who saw the concepts perceived these rich views of content from their email as advertisements. But we wanted users to understand that this was personalized info to make their lives easier—not us trying to sell them something. Overall, we knew that for this feature to be successful, we needed to overcome “ad blindness” and make the experience feel more personalized.

Ultimately, we decided the preview box should just feel like a part of the “normal” read experience. Once we made that decision and validated it through usability testing, we arrived at something more like this:

Early version of Flickr integration

Through conversations with even more customers, we saw that the little signal “zzzz” and the dark background were in fact too distracting (again, our principles include reducing distractions), so we went to this:

Second version of Flickr integration

And where we finally landed:

Final version of Flickr integration

The Journey through the design process – keeping customers in focus

I’ve mentioned our longitudinal study a couple of times in this series of posts. It’s time I told you more about that effort. When going into Windows Live Wave 4, we wanted to make sure we kept our customers in the center of our process. We don’t have a formal “beta” set up for Windows Live, so what we decided to do was use our internal servers as a mini-beta. We recruited customers across the globe (the US, Brazil, Singapore, and Germany) to participate in a longitudinal research program—that means it was long term, not a one-day exercise like most user studies. Our goal was to have real life Hotmail customers give us feedback through every important design decision we were making.

This study was instrumental for our big bets, from which treatment of conversation threading made the most sense, to the “where are the photos” issue, to the most critical and fundamental aspects of reading/sending mail. We like to be part of a living and spirited dialog with our customers, and this study really helped us see what sort of long-term consequences our choices would have.

Thanks for reading

We care a great deal about how our customers use our products and what they’d like them to become. Our goal is to ensure that we make the right decisions. What you’ve seen here is the journey that we travelled for getting ideas, validating decisions, and bringing you change you will like. We hope enjoy using the new Hotmail.

Michael Kopcsak – Senior User Experience Lead, Windows Live

You must be logged in to comment. Sign in or Join Now
  • Hey you should turn off by default the "Hotmail highlights" page that is displayed when a user logs into their Hotmail account. Hotmail used to go straight to a user's inbox after login, but now it displays a "Hotmail highlights" page and we have to click on "go to inbox", so it takes longer to access our inbox. There is an option in the "account settings" to turn this off but it should be turned off for everyone by default because not everyone knows how to turn it off.

    Also if we have added someone as a contact their email address no longer displays next to their name when we receive an email from them, so now to view the email address of a contact when we receive a message from them, we have to hover our mouse pointer over the contact's name, so my suggestion is you should display the email address of a contact next to their name when we receive an email from them.

    Also when viewing an email that has attachments and images there is a yellow box displayed that says "Attachments, pictures and links in this message have been blocked for your safety" and we have to click on "Show Content" to display the links, images,attachments, so my suggestion is you should turn this message OFF by default so by default ALL attachments,pictures,links,images, are shown and you can have an option in the account settings that users can use to turn this feature back on again because alot of new hotmail users get confused as to why attachments,links,images are blocked by default.

    Also currently there is no bar that displays how much Megabytes or Gigabytes a user's hotmail account is using, so my suggestion is that you should display a progress bar that displays the current size of a user's hotmail account and display how much space a user's hotmail account has left.

    Also when a user composes a message, there is an "attachment" button, so my suggestion is, next to the

    "attachment" button you should display the maximum attachment size(EG: 20MB) so users know how large the file size of an attachment can be.

    Also at the top right hand side of the page next to the user's name where there is alot of blank space you should display the current date and time. It should be the server time, not a person's computer time, and it should look like "Monday 5 August 2010 6.45pm".

    Also, when a user receives an email and they click on it, there should be an arrow next to the sender's email address/name and when a user clicks on it a dropdown box is displayed and it will show the GEO location of the user(eg: ÜT: 33.375487,-115.141709) and the ip address(ipv4 or ipv6) of the user, and the browser and operating system of the user). There should be a "close" button to close the dropdown box. The GEO location should be able to be turned off in a user's settings if the user does not want people to know his/her location, so it should be Turned off by default.

    Also, alot of user's are still using Internet Explorer 6 on Windows XP so you should support Internet Explorer 6 in Hotmail until at least 2014 so you should inform user's of this in your next newsletter and blog post because alot of people from around the world still have old slow computers that will run very slowly if they upgraded to ie7/ie8 and they are disappointed that sites like facebook and youtube are dropping support for IE6 in certain situations. If it's not possible to make all new features work in IE6 then that's fine because you can just present IE6 user's with the features that do work in it, but you should always try to make all new features work with IE6.

  • Hi Michael, I don't know where to turn here but I hope you can help. It's been happening from time to time that Windows Live decides all of a sudden to switch language on me and address me in Spanish. There seems to be some overzelous logic somewhere that's making that decision. To put it mildly, it feels a little patronizing. I just went to check my son's contact information and I get this "No eres amigo de David. Agregar como amigo." What gives?

  • @Email_Marketer45692. Any links to Flickr, YouTube, etc will render the ActiveView. There are some exceptions (i.e if the YouTube video is set to be non-embeddable or if the content is "private.") We don't have a means for marketers to track clicks from the mails beyond what they can already do "on their end" be seeing how many visits there are to a specific URL or any other path analysis. If the question is whether it's possible for a marketer to determine if the "click" comes specifically from Hotmail or from the ActiveView, that's not something we've invested in right now. I'm interested in hearing more about what you'd like to see us do though. You can send me a mail to davidden at live dot com.

  • Will the Active View still display if the YouTube, Flickr, etc URL is hyperlinked? Also, if the URL is included in an HTML email, is there any way for an email marketer to know how many Hotmail users click to view the Active View content? If no, are there plans to allow hyperlinked text or images to trigger the Active View in order for clicks to be tracked? Thanks!

  • sp1der
    35 Posts

    Hi, will be possibile to syncronize photo contact between outlook <-> live contact <-> mobile contact?

  • langware
    154 Posts


    Thanks for the clarification (that Silverlight is needed in order to get full functionality from the Attachment option). Is there any way for code in Hotmail to detect whether or not Silverlight is installed and (if not installed) give the user a reminder that Silvelight is needed in order to get full use from the Attachment option)?

  • @Dave T, to select everything in a folder, click the checkbox you described. In addition to that page of messages being selected, just below where you clicked will appear a link that says, "35 items selected. Select everything in your Inbox". Click the words "Select Everything" and all messages in the folder will be selected.

    @lokeshtodi, you make good points on the Contacts experience, and these are on the roadmap for future improvement. Note that if you want to change the sort order, go to the Options page and you'll find a setting to change the default.

    On the protocols issue, you could use Outlook directly against Hotmail using POP. However, using the Outlook Connector gives you really rich mail functionality, plus it syncs your Contacts and Calendar.

    @langware, the feature changed but was not removed. The main difference is that it requires Microsoft Silverlight, so it now works in a more standard way and works across browsers. You should install Silverlight, and then when you click "Attach", you can use the Windows common dialog for viewing thumbnails, and you can use CTRL-click and SHIFT-click to select multiple photos.

  • Dave T
    7 Posts


    Unfortunately the check -box at the top of the page (i.e. under the word "Inbox") only services that page, and not the entire inbox (or folder, as the case may be). Why? Likewise, the sweep feature does not present all the options which I may want. For instance, if I want to flag all the emails, I can only do this one...page..at...a...time, This is cumbersome. That check-box should highlight the entire file, not just one page.


  • Very cool and very interesting.  I always enjoy seeing the design process behind scenes.  It is very informative.  I wish there were a way to integrate my hotmail account with my .edu account.  I prefer the less business professional look of hotmail.

  • Dave T
    7 Posts

    @quiziq Thank you for clarifying. It never occurred to me to send entire albums to my friends. I've sufficed with a couple of photos here and there. Perhaps this is because I heretofore have not had the capability to send an entire album. This is a whole new way to pester my friends! I presume that they can now download the whole album once it's on Skydive (not that they ever would).

  • qiziq
    23 Posts

    @Dave T

    I think the point you are missing is that the old file size limitations don't apply anymore.  Lets say you want to send an entire photo album, or even some music, or a video, your mailbox won't support more than the ten mg, but will offer to create a (temporary) file in Skydrive that the recipient will access instead.  It's all about the new sharing!

  • Dave T
    7 Posts


    I appreciate your cheeky humor, "you may have noticed the Quick Add column." How could you miss it! It took up, like, a quarter of the screen! You continue, "we found that a lot of people just didn’t discover it." I take this as a sheepish way of saying that either people are really stupid or tacitly admitting that they found it of no use. I consider myself (at least) in the latter camp. After reading your explanation of the redesign (thank you for getting rid of the Quick Add column!) and reading a little about it on various help features I am still perplexed as to what possible use I would have for it. For sending photos and docs why should I create a file on Skydive? Why not just continue to add them as attachments? Your blog begs the question. The last sentence of this section suggests that by sending photos with it I won't fill up my inbox. I can see not filling the recipient's box, but how does this effect mine? .


  • qiziq
    23 Posts


    You are not crazy!  I have Windows Vista and have the same problem.  As I understand it, the Skydrive option is supposed to be offered via the "insert" tabs.  Traditional attachments would be handled with the first tab.  If the attachments are too big, it is suggested that the files be uploaded to skydrive and sent from there.  The "insert" bar falls apart when you get to the Office docs tab.  Since you already have an attachment tab, this should link you directly to Skydrive, but it does not!  Likewise, with the photo tab, there should be an option to share directly from Skydrive, not just to create an album on skydrive.  This is the approach that the 15 second videos from Hotmail seem to indicate.  While it is certainly poosible to share directly from Skydrive, I suspect that most users will never find this out!

    Hotmail team, I have posted this feedback on your previous update and have seen others do the same.  What gives?  We would love to use the new sharing features, but so far, it's not happening.

  • caoke
    4 Posts

    When can I save attachments to Skydrive? And why users in some countries can't use all the new features?

    Can anybody answer my questions?

  • langware
    154 Posts


    The new version of Hotmail provides nice functions for those who want to store their photos on ShyDrive. However, what about your customers who prefer to store photos on their local hard drive? The Photo Upload Feature (previously available on the previous release) has been removed.

    With Wave4, there appears to be no way for customers, who prefer to store photos on their local hard drive, to easily preview thumbnails of those photos, and then select multiple photos for attachment to a message. With Wave4, one must treat photos on the local hard drive as files, and attach them one at a time with no preview.

    You have essentially removed function (previously provided by the Photo Upload Feature) from Wave4. Why was that function removed, and are there any plans to restore that function in the future?

  • tripox
    1 Posts

    Yeah, great. :)

    When do we get ActiveSync as promised?

    That's an USEFUL feature and should be number 1 at the list.

    - especially when promised after Wave 4! I'm counting days!

    Thanks, Tripox.

  • As lokeshtodi said, I aggre that the Contacts feature needs a little more work on. Arranging the contacts and personalizing the views would be really appreciated... Those and more facts are why I don't manage my contacts on the website but uisng the Windows Live Mail Beta of the Windows Live Essentials suit.

  • So I have been trying to use Hotmail contacts and am having a host of issues. When I want to edit my contact, I press their name and it takes me to the screen which allows me to edit the information. However, when I save the information, there is no link to take me back to contacts and the place where I was. The easiest way to get back to contacts is pressing the Hotmail tab and pressing contacts, and it brings you back to page 1 of the contacts. Isn't there a better way of editing contacts! Also why limit the contact sort to first name alphabetical order, and why don't you give options to view more than 25 contacts at a time.

    I still can't get it why hotmail can't provide support across multiple email platforms. Why do I have to download connector for Outlook to use hotmail, when Gmail works fine with outlook. Why can't hotmail synch properly with Thunderbird. You lost out Gmail precisely because you were not willing to open up  your service and provide it across multiple software.

    Active synch is now working in Blackberry, however, why don't you just make a universal active synch so we can use it in all email clients on the mobile, desktop, and tablets!

  • joel7
    12 Posts

    I don't see a SkyDrive option when I click attachments. Is that because I'm on XP and OSX at home? Does it only work on Vista or Win 7?