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

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.





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…



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…



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:



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…



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.



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



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.



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:



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:



And where we finally landed:



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


aggbug.aspx

More...
 
I've never really used Hotmail. But that looks quite intriguing.

Thanks.
 

My Computer

System One

  • Manufacturer/Model
    HP Pavilion Elite
    CPU
    AMD Phenom 9850 Quad-Core Processor
    Motherboard
    Some Amount of Motherness
    Memory
    6.O GB RAM
    Graphics card(s)
    EVGA nVIDIA GeForce GT 240 512MB DDR5
    Sound Card
    Some Amount of Soundness
    Monitor(s) Displays
    Two Monitors: HP w1907 & Acer P191w
    Screen Resolution
    1440x900 & 1440x900
    Hard Drives
    WD Caviar Blue 500GB
    PSU
    Some Amount of Voltageness
    Case
    Hp Pavilion Elite Case
    Cooling
    Some Amount of Coolingness
    Mouse
    HP: M/N:M-SBQ133
    Keyboard
    HP: Model Number: KB0911
    Internet Speed
    Comcast: 20 MB/S
    Other Info
    I have two monitors! I play Call of Duty: Black Ops & Modern Warfare II - Both on PC. Contact me through my website: ChaseKurry.com
Back
Top