Category Archives: Website Design

Stuff about building websites.

The Office Developer Center Redesign

My team, in conjunction with partners across Microsoft, shipped a new Office Developer Center experience at http://dev.office.com this morning.

The New Office Developer Center

The New Office Developer Center

I’m incredibly proud of the work we all did. This was a hugely complex project that saw us combine six different developer centers into one, consolidate a little over 200 pages down to 24, re-write every single page, and simultaneously reset the global experience across 11 languages.

This was arguably the most challenging project I’ve worked on here at Microsoft and presented the thorniest information architecture problem I’ve ever encountered.

The Office family of products spans multiple products with their own hierarchies of brands and tasks for developers. At the top level, there is Office, SharePoint, Exchange, and Lync. Within Office alone there is Access, Excel, InfoPath, OneNote, Outlook, PowerPoint, Project, Publisher, Visio, and Word. Microsoft is also asking developers to write apps for Office and for SharePoint, and the development details are a bit different between Office and SharePoint. Add in Office 365 service content, and you have many different pivots you could apply.

Then we had to consider that we’re always balancing between the past, present, and future when we’re talking about development. There is a huge audience of developers who have written code to older versions of Office, a smaller set that’s targeting the current version, and then Microsoft is trying to guide developers to be set up for the future evolution of the platform.

The challenge here boiled down to: what information architecture would expose the breadth and depth of the product offerings, feature current and future development options, and not alienate developers targeting previous versions?

We had many, long discussions around the right pivots here, and in the end we decided to stick with the top-level product names as the main pivots for the navigation, and placed app development messaging on pages where it was product-relevant.

How’d we do?

Websites as Performance Art

My team is currently hard at work on re-architecting the Office Developer Center on MSDN and in preparation, we dug through reams of data to help inform decisions around pages and links we’d retain in the new site. Now that we’re down to the brass tacks of creating pages and starting to see the overall site experience start to jell, we’re at the natural part of the project where the anxiety level is starting to creep up.

The anxiety manifests as questions.

Did me make the correct decisions? Were we looking at the right telemetry data? Did we interpret it correctly? Is there any other customer feedback we can get our hands on? Did we overlook any internal stakeholder input? What have we missed? What should a download graphic look like? Am I going to lose my job if we ship this? Who is going to most pissed off that we moved their cheese?

But then I take a deep breath and remind myself that web sites are like performance art. You practice and practice your art in private, and then finally reveal yourself in public. Sometimes you have the right art, in the right place, with the right audience, at the right time, and everything is magical. Or you just bomb, and you head back to the drawing board.

In any event, you adapt and change, hoping for the magic to occur as often as possible.

I still worry about bombing though.

I’m coming to realize that when you’re operating at scale like Microsoft does, and applying the 80/20 rule of targeting the needs of the 80%, that the sheer size of the 20% is a dauntingly large audience.

So we take more deep breaths, and practice, and practice some more. We’re sure you’ll tell us what we did right and what we screwed up.

The Redesigned Visual Studio Developer Center

If you’re a frequent visitor to the Visual Studio Developer Center on MSDN, you’ll notice that we just switched things around a bit. Okay, quite a lot, actually!

We’ve fundamentally changed the information architecture of the site, implemented a regular page pattern for non-Library pages and significantly shrunk the number of non-Library pages on the site.

Information Architecture Changes

Over the past six months, my team and I have been looking closely at site metrics around page views, clicks on pages, survey and other site feedback, and other data available to us around how developers use the site. What emerged from that noise of data were some clear signals about how the site was being used and we’ve tried our best to respond with updated site navigation and content organization.

The most obvious change is in the site navigation:

The Old Visual Studio Developer Center Header Navigation

The New Visual Studio Developer Center Header Navigation

The Old Visual Studio Developer Center Footer Navigation

The New Visual Studio Developer Center Footer Navigation

The biggest change is moving from eight items to six and the addition of sub-navigation links.

What went away were top-level links to Support and Downloads.

The Support link was rarely clicked and the page itself did not receive that much traffic, so that was an easy choice. On the other hand, the Downloads navigation link was consistently the most-clicked link in the header navigation and surfaced as a top task on the site as a whole.

So why remove Downloads from the site navigation? It seems counter-intuitive to do so. In the old model we had a dedicated downloads page that aggregated links to most of the popular or key downloads and these links spanned Visual Studio and Team Foundation Server. Finding the download you were looking for involved skimming a few dozen links and if you didn’t find it, you were pretty much stuck performing a site search or going back to your favorite Internet search engine.

In the new model, downloads are now part of the page-level information architecture as a regular link block, appear on every page, are scoped to the topic of the page they appear on, and usually provide an “all downloads” link that takes you to the Microsoft Download Center. I’m very curious what you think of this change, since it’s a big one.

Other visible changes of note are changing Library to Documentation, Learn to Languages, and the addition of sub-navigation links.

Library, as a term, has specific connotations for developers in general and Microsoft developers in particular. To avoid potential confusion for non-Microsoft developers and in the interest of clarity, changing to Documentation more accurately reflects what you can expect to find behind that link.

When we looked at the data around Learn, it was clear that developers were looking for language-specific learning resources more than anything. In fact, wherever we had a language learning link, it often was the most-clicked link on the page. By elevating Languages to the top-level navigation, we’re hoping that when you come in to the site via search, which many of you do, you’re now only a click away from those language learning resources.

The reasons behind the addition of sub-navigation items were twofold: more clearly represent the lower-level structure of the reorganized site in the header and provide a sitemap like experience in the footer. Hopefully this will help with the, “Where the heck is ‘foo’?”

Under the hood and not so obviously, the navigation now reflects the underlying content information architecture that pivots around products, samples, languages, extensions, documentation and community. Each one of these “buckets” now only contains content aligned with it, whereas before we had all sorts of stuff spread across the entire site.

Regular Page Pattern

I’m a strong believer that regularized page patterns assist repeat site visitors and that placing things in standard spots reduces the cognitive burden of analyzing a page for the task you are trying to complete. Prior to today, we had pages that more or less followed a handful of page patterns, and several that were freeform designs. If you had picked five pages at random from the site and examined their functional layout, chances are none of them would have matched.

As much as possible, (there are always exceptions,) we have a single page pattern across the site:

The New Page Pattern

As much as possible, we have contextualized the links in the right-hand column to provide the most-requested downloads and link you to places that make the most sense when coming from this page.

I’m hoping that if you’re a frequent visitor of the site, you’ll be able to more quickly find what you’re looking for, because now things will always be in the same place on the page.

Page Reduction

How many web pages does a website need? It depends.

In the case of Visual Studio, we had around 323, give or take a handful. The traffic graph yielded a curve like this, with the long tail being very flat when you looked out to the end:

When I see something like this across hundreds of pages, I naturally ask, “What are those pages that aren’t getting much traffic and do we need them?” As we clicked through each page of the site, what we discovered was that most of them were very out of date or had been shimmed into the site to solve some short-term need and then forgotten. Others were important to internal, company stakeholders but uninteresting to customers.

After careful deliberation, we’ve removed and redirected hundreds of pages. The site is now about 80 pages, which we’re going to be continually working on driving down to under 50. The core site, which you directly access via the navigation and sub-navigation elements, is 11 pages.

By doing this, we’re hoping that your search experience just become a whole lot better. Fewer pages with completely re-written, focused content limited to a single topic should provide better search engine results than many diffuse pages that span multiple topics.

Please let me know what you think about this new experience in the comments, as I’d love to have more input as we consider the future evolution of the site.

My New Job

Visual Studio 2012 shipped last month, so the rhythm of the business shifted to reorganizing for the next product cycle. As a part of the reshuffling, my job scope expanded from overseeing the Visual Studio Developer Center to the MSDN proper and Team Foundation Service websites. My charter covers content presentation, information architecture and experience integration. That’s a fancy way of saying, “Help build a more useful and pleasant to visit website.”

MSDN, according to Alexa, receives about 11% of all web traffic directed to microsoft.com, so I’m really looking forward to helping shift the experience for the millions of customers that visit the site. If you’re one of those customers, feel free to let me know what you do and don’t like about MSDN, and I’ll incorporate that into the evolving plans.

My team has also grown and I’m very happy to be working with some of the same people that I worked with a few years back when I was Lead Site Manager for TechNet*.

I already have some ideas about some things I’d like to see change and I’ll be highlighting them here going forward; don’t be shy about telling me what does and doesn’t work. ;-)

(*Having helped launch Microsoft Answers in 2008, I’ve now officially worked across the Microsoft technical website audience triad of Developer, IT Pro and Consumer. It’s amazing and humbling when I start to think of the millions of people that have interacted with my work. Very few places in the world have that scale opportunity and I feel fortunate for the opportunity.)

Top Task Optimization – Example: The shop.nordstrom.com Header

Over twenty years have passed since the web was created, we’re still mostly creating the first web page and site. This irritates me.

Back in the days of web yore when websites started to gain serious traction and Yet Another Hierarchical Officious Oracle came online, the websites I encountered mirrored the Internet applications of the time. Applications like GopherPinevi, and ftp.

Endless hierarchical navigational menus with content neatly and zealously segregated into the buckets behind them, deep-tree page patterns that look like man pages, a dizzying array of click targets, sitemaps for computers instead of humans, and crappy default font choices in sizes and styles that make click targets miniscule.

Even people who should know better often stumble (myself included!)

Two decades of usability and customer feedback, and many websites still do this stupid shit. The mobile web revolution is starting to change things a bit given the screen size constraints, but many mobile sites have a UI not far removed from a DOS prompt.

Why has it been so hard to move on? It’s not like people haven’t tried. Shockwave  Flash, as much as it has its other issues, does at least provide the possibility of more information-dense experiences outside of the HTML box when designed correctly. HTML5 is showing some promise but it’s still to early to say how it will turn out.

I think the problem begins at home. The home page, to be specific.

The reason this is the case is because most websites still get designed starting from the home page and view the home page as the “root” of the site. For small sites this still makes some sense, but for sites containing more than a handful of pages, it’s just plain dumb. The home page and headers and footers are now overloaded, bloated things, crying out for streamlining and optimization.

Search has pretty much erased site hierarchies, and if you don’t have your top site tasks linked or actionable on each and every page, you are doing your visitors a huge disservice.

Over the coming weeks, I’ll analyze some sites to show how I think they could be made a bit better in this area.

Let’s start with a department store, Nordstrom. They have locations across the country and they have a very good online shopping experience that also offers in-store pickup. If I buy something and want to pick it up[1], what two pieces of information do I need? Where the store is and what time it is open.

This site has two entry points to find this information: one in the header labeled “Our Stores & Events” and one in the footer labeled “Store Locations & Events“. I’d argue that the second link title is a bit better than the first, but they may be doing some A/B testing here to find the better phrase for their customers. Note that they also have the link instrumented to track which one gets clicked.

On the destination page behind the link, I see this:

A key task hidden in the middle of a complex graphic.

It’s nice that the text entry focus is set and highlighted in the field, but wow, with that big header text on a busy background, I actually clicked on the header thinking I needed to go to another page before I spotted the text entry.

After entering in my zip code, the first listing on the results page is the furthest from my location. So I have to scroll down to find the closest one. This is a solved problem, so it’s surprising to run into it here. The good news is that they do clearly provide shopping hours and a link to a map, but the map is three clicks in from the home page. This is a significant hurdle for people on mobile devices.

In this example, I’m going to tackle the multiple click problem via the header and solve for a few other usability issues that crop up there along the way.

Current header.

The current header has a lot going on. Nine links plus a search box. There are four links that point to two destinations and there’s a mix of underlined and non-underlined links.

The first thing that jumps out for me is that the prime real estate, the top left corner, is underutilized from a top task perspective. Multiple eye tracking studies  have shown that most people start in the top left corner, move right, then down and to the right a shorter distance, making an “F” shape.

In this Step 1 revision, I’ve moved the Nordstrom logo up and placed the search box right below it. I’d A/B test this location against the current location to check performance, but with a more visible location I’d expect on-site search to increase.

Step 1 header revision.

On the right side, I’ve de-duplicated the “sign in” and “Your Account” links. In this signed out state, they both lead to the same sign in experience. In a personalized signed in state, clicking on your name would take you to your account information. Removing that link has the added benefit of tightening up the top line and it no longer competes for attention in the logo area.[2]

The biggest change here is the addition of base store hours for most of the week[3], and a store locator by zip code search box that uses some ghost text as a guide. The user interaction here would be to type in a zip code, hit enter/return, and have a results page that displays all regional stores plotted on a map along with a list sorted by proximity to the center of the zip code. Each store listed would also display hours and upcoming events.

In this new interaction model, every page on the site now provides critical top task  information, a rough guide to when stores are open, and locations are now only one click away from being displayed on a map. In the current model that Nordstrom is using, you are three clicks away from a map, two from store hours.

We’ve now (hopefully) optimized two top customer tasks, so now it’s time to take the second step and optimize for the top business tasks of promotions in the header. Nordstrom is using three areas here: 1) top left, under the logo, 2) top right, in the black header bar, and 3) lower right with icon.

In this second step, the most noticeable change is moving the shipping information and icon up into the top black bar. This removes the circular black icon, which was a visual attractor and previously drew you to the search box. With the search box moved, there is no need to draw the eye to that target. The net effect is that we have uncluttered the right-hand side of the header and in the process, made the store locator more visible. I’d also lean towards an evergreen placement of the shipping information, given its high value proposition to entice customers to try things out for no cost, and only swap it out for promotions during major seasonal sales.

I’ve also taken the liberty here to change the font to more closely match the rest of the fonts in the header and normalize around sans-serif, but I’d leave it to a fontographer/designer to make the final call on font faces and sizes here.

Step 2 header revision.

By moving the shipping promo into the header bar, we also de-duplicated the points promotion that appeared in two places and removed two questions for customers, “Which link should I click?” and, “Are the links different?”

Another change is replacing the “See details” link in the triple points promotion with, “Only four days left!” Where there used to be three underlined links in the header with the same text that took you to two different destinations, now we have two clickable regions with clear destinations. My rationale for removing the third promotion spot is that with the shift of the search box, more people will see the promotion overall, so the need for two areas to promote it are minimized.

The net result? We’ve pared down to six links with an equal amount of destinations and unweighted the header from a visual standpoint so it competes less with the sales content below.

The existing and proposed headers together for comparison.

The final step would be to A/B test everything to discover if the changes we made drove better click-through or changed customer feedback around finding stores and store hours.

[1] This particular scenario may be an edge case for Nordstrom, but I constantly hear people complain about discovering store hours and locations for various merchants.

[2] I was also leaning towards removing the “Get E-mail Updates” and “Wish List” links, but without knowing the data behind how much this drives their overall digital engagement strategy, I left them alone. “Wish List” also takes you to a sign in page, so that would be a low-hanging fruit link to remove in the anonymous state to free up more space and reduce links.

[3] Nordstrom’s core days are Mon-Sat and in the United States, where most people generally expect reduced Sunday hours, so only displaying Mon-Sat core hours is a relatively safe move.