As a PM at Microsoft, you frequently get thrown into new unfamiliar areas with the expectation that somehow you’ll figure out your way around. Just recently I had a first-hand experience with that as the team decided that it was time to refresh the Windows Azure Node.js developer center. The dev center first went live in December 2011, and since then it has received great new content, but the overall structure and the homepage in particular had changed very little. This was standing in the way of developers getting to our great content and resources, and was ultimately driving people away from trying Node.js on Azure.

Over the last three weeks I had the opportunity to work with some great folks across the Azure IX, UX, and PM teams and rethink our dev center. This is new to me, so I wanted to document my experiences here in blog series (hopefully). In this first part we will focus on the dev center homepage.

A big thanks to Molly Bostic, Lydia Bagwell, Jodie Eilers, Jesse Francisco, Brad Goring, Lucas Stanford, Larry Franks, and Mohit Srivastava, without whom none of this would have been possible.

The current dev center

Let’s start with the current dev center and the approaches we used to identify issues folks were having with it. First, we reached out to our advisory community and collected some feedback:

• “there is way too much on this page”
• “make a clear single message/call to action above the fold”
• “get rid of the whole left hand items, it’s just clutter”
• “since one is on the Node page get rid of the other links to all the other languages… I want to see things about Node, not all the other stuff”

We then conducted a heat map study and looked at the page navigation patterns associated with the site.

Some additional learnings emerged at this point:

• Based on the heat map and the flow of visitors from and to the other language developer centers (especially .NET), there seemed to be quite a bit of “browsing” behavior: folks simply exploring different Azure languages. We didn’t want to inhibit that flow, so we decided to keep the header that lets you quickly jump between languages
• There is a lot of flow to the tutorials on the page, especially the first tutorial we list on the page. Users tend to actively seek out tutorials, as seen in the heat map: it appears that tutorials are the preferred form of content.
• The prime real estate is understandably the middle of the page right above the fold
• Not many folks are clicking on the “free trial” button to sign up for Azure. 
• Lots of folks are downloading the SDK, but is that all they need to get started? Wouldn’t reading a tutorial be a more useful?

Information Architecture

Before we set off to try and address this feedback, we formulated a set of principles to follow in the new design:

1. Clear call to action
2. Keep it fresh
3. Reduce text-heaviness
4. Improve content categorization
5. Optimize click stream

Based on these principles we started sketching. First we played around on the whiteboard and then worked our thinking into wireframes. Here are some of the options that we considered at this stage of the design.

You will see that all of the sketches significantly reduce the amount of content and clutter on the page (especially above the fold), partly by removing the left-hand navigation. A single call to action is prominently featured above the fold in all of them. Fresh content is also prominent in all of the designs through the use of a carousel control.

Option 1 didn’t dedicate a permanent spot to the call to action we wanted to highlight. Option 3 caused the content categories (Compute, Data, App Services) to wrap and disrupt the flow of the page. Option 2 was selected and we proceeded  with refining that. 

Graphic Design

We then proceeded to produce high-fidelity screenshots of the selected option. 

You will notice a few things that have changed. As the design team was working through this, they realized that the carousel with fresh content we were envisioning wouldn’t fit in the small area we had dedicated to it, so we had to invert the carousel and call to action areas. We did not want the call to action to get lost, so the first tile of the carousel was designed to naturally lead folks to get started. We also realized we wanted to maintain the blog spotlight area and it fit nicely alongside our three content categories. 

To Production and Beyond

After a two week design phase and one week of implementation, we were able to push the new design into production and you can go check it out now. 

Unfortunately, releasing the new dev center homepage is only half the battle. Over the next few weeks we plan to tackle 30+ documentation topics that the dev center contains and make sure each one of them is the best it can be. We are also keenly keeping an eye on a variety of metrics (including the heat maps and navigation data shown above) to make sure the new design is actually helping address the problems we set out to solve. We will continue to tweak and refine the design in response to that data and I hope to share the results as we make progress.

In the mean time, I would be glad to hear from all of you. Did you use the old or new Node.js dev center? Let me know what you think in the comments!

Read More

Image credit: runran on Flickr

We made a breaking change between versions 0.6.0 and 0.6.1 of the Windows Azure command-line tool for Mac and Linux. You can get the tool from http://windowsazure.com or via the azure package on npm. The tool lets you create and manage Azure websites and Virtual Machines from any platform.

If you imported your publish settings file using version 0.6.0 and then updated the tool, you might be greeted by the following message:

PS C:\Users\yavorg> azure site list
info:    Executing command site list
+ Enumerating locations
error:   Host is not reachable. This may be due to lost internet connectivity. Please check your connection.
info:    Error information has been recorded to azure_error

This is because we made a change to the way we internally store your publish settings information, and the old format doesn’t work with the updated tool. Fortunately here is an easy fix: just clear your old publish settings and import them again:

PS C:\Users\yavorg> azure account clear
PS C:\Users\yavorg> azure account import '.\node.publishsettings'

Thanks, and sorry for the inconvenience!

Read More

Here are my slides… thanks for all who attended! I will also add the video when it is available. The code I used can be found on my GitHub page.

Read More

Updated with new time and abstract. Come get a personal tour of the announcements at the Meet Windows Azure event with Scott Guthrie on June 7 in San Francisco.

I’ll be speaking on Node.js in Azure at NDC in Oslo, June 6-8. It’s my first time at NDC and my first time in Oslo, but I’ve heard nothing but good things about the conference and the city itself. Skål!

Hell has frozen over: writing Node.js apps for Windows Azure
Yavor Georgiev
June 8 2012, 10:20 - 11:20

Server-side JavaScript? On Windows Azure? Has hell frozen over? Come learn about how Azure is quickly turning into an open and lightweight cloud platform that supports a variety of runtimes: .NET, Java, PHP, and even Node.js! Be among the first developers in the world to get a personal tour of the new Windows Azure, hot on the heels of Scott Guthrie’s “Meet Windows Azure” event in San Francisco. In this session we will show how to build exciting realtime apps in JavaScript, and how to run them in the cloud. We will take advantage of great Azure features such as storage, caches, and queues to make our app scale without a hitch. We will also share the team’s plans for future Azure improvements and give you a chance to voice your opinion.

Read More

Here you go!

We just pushed out a small May update (0.5.4) to the Azure SDK for Node.js, with which we now deploy:

• node.js 0.6.17
• iisnode 0.1.19

Here are the important changes and additions in this release:

• The updated node.js version addresses the recently announced node.js security vulnerability. The vulnerability affects all server-side deployments using versions prior to 0.6.17. If you have deployed a node.js application on Azure using our tooling, you are probably using a version of node.js that is vulerable. Please redeploy your application using the updated tooling to ensure your deployment is secure.
• This is not completely new, but a few weeks ago we also released a refresh (0.5.3) of the npm package for Azure, adding support for accessing the Azure role service runtime. That enables you to: get role configuration settings, work with local role resources (including local storage), get information about the current role instance, as well as other role instances in your application. We have a nice example of this functionality posted here. 
• iisnode 0.1.19 brings improved configuration support using YAML files. For a lot of scenarios, you may now be able to configure your app by deploying an iisnode.yml file, instead of messy XML inside your Web.config.

~~~ yaml

The optional iisnode.yml file provides overrides of

the iisnode configuration settings specified in web.config.

Read More