Home  › Marketing › Strategies

Dynamic Do-Over: Learning from the Responsive Design Makeover of Microsoft.com

  |  October 23, 2013   |  Comments

Duane Clare, design director of Microsoft.com, shares insight and advice on making responsive design work. Learn about the tools and processes require in a transition to responsive design.

Responsive design is the latest buzzword for marketers looking to create a seamless, cross-platform digital experience based on existing web content.

Even with increased awareness of responsive design, not many know what it takes to make it work effectively. Much of the attention given the topic is focused on the tools and techniques that involve what people see--the visual design of the digital experience. Not everyone understands the two factors that are vitally important to building a successful responsive experience: the supporting content management system (CMS) and the content strategy.

Duane Clare, design director of Microsoft.com, knows how essential well-designed tools and processes are in making responsive design work.

Clare contributed to Microsoft.com's impressive transition to a responsive design a little over a year ago. In a recent interview with Clare, he shared with me what it took to apply an entirely new design philosophy to the home site of a global brand not known for delivering beautiful experiences.


"We needed to talk about the importance of creating not just functional, reliable and usable site experiences, but also creating memorable, pleasurable meaningful experiences. This is where brand perception comes into play: when somebody reacts to your site with: 'Wow. This company really gets it,'" he explained.

For Microsoft.com, that meant rethinking not just the look of the site, but their entire approach to publishing content online.

"Anybody can build a site that can adapt to any device," said Clare. "Content strategy is just as important to the responsive experience. If you don't have a content strategy driving this, you're going to deliver content that is useless to the user. It reflects poorly on your brand and how you're perceived by users."

The Microsoft.com team's ultimate goal wasn't to create a site that could work on a global scale across multiple devices, but to use the site experience to change perceptions of the Microsoft brand. In order to understand what users valued in a best-in-class experience, Clare and his team conducted a brand perception study, comparing their site to leading sites. This research helped define the core principles that guided every phase of development.

"We wanted to delight our customers with the experiences we were going to create. We wanted to make sure that we had pride in craftsmanship," he explained. Clare continued, "We were very detailed in every part of our execution, to the smallest degree. We needed to simplify our experience; to fiercely reduce elements--content, imagery, and even the amount of programming we'd do. We also had tenets around being inclusive and flexible and clear."

The research and guiding principles helped the team in two ways:

  • They helped secure executive support for a new modern design approach on Microsoft.com. 
  • The principles focused on every aspect of the redesign. 

"We created these design values and researched why we needed to do this. That led to what we needed to follow within the workstream," said Clare.

The engine that enabled the site to provide a more "progressive, adaptive and responsive" experience was the CMS.

"At Microsoft, you've got Windows online, Office online, Xbox, Skype--all these experiences aligning to one platform or another. We knew that in order to create a modern experience, we needed to rally around a common platform that supported the capabilities of modern web design and could be utilized by other teams," he said.

For Clare, the connection between the site's content needs and the CMS was clear: "We had to think about the tools behind the front-end experience we were building that would be used by hundreds of people around the world. Content plays a role in that, because there are different requirements and business needs depending on the type of site you're supporting."

A rapid development approach (dubbed "Lean UX") allowed the site to deploy more quickly than the phased approach the team was used to. The public's response to the launch of the redesign surprised even the Microsoft.com team.

"We were just blown out of the water by the positive feedback we got from the industry, from analysts, and from tech enthusiasts. We went above and beyond our goals," he said.  

A glowing review on the Forbes site last year proclaimed, "If a designer is looking to convince a client to go with a state-of-the-art site design, they can now point in a surprising direction--to Microsoft."

Brands can learn from Microsoft as they adopt responsive design, particularly if they pay attention to these three actions that enabled Microsoft to succeed:

  • They did their homework. Research helped focus the redesign effort on the drivers that mattered to customers.
  • They created better tools. An understanding of content requirements helped define the right CMS features and functionality.
  • They planned for content. Publishing decisions based on relevance for customers and which platforms they used to access content created a seamless and meaningful experience.

With the right tools and processes in place, Microsoft.com was able to change the way people experience the site and view the brand.

"Our average customer is not going to know what a responsive or adaptive experience is," said Clare. "They're just going to have an experience that is tailored to them, that delights them in a way that works on their device, no matter what device they're looking at. And it's the right story we're trying to tell."

ClickZ Live New York Want to learn more?
Attend ClickZ Live New York March 30 - April 1. With over 15 years' experience delivering industry-leading events, ClickZ Live brings together over 60 expert speakers to offer an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!


McNeal Maddox

McNeal Maddox is the strategy director at Siegel+Gale, based in Los Angeles. His first experience with brand development came in junior high, when, not content to remain mere consumers of comic books, he and his brother formed their own comic book company. The brand name, logo, and signature style they created were so strong that one of their books is a permanent part of the Lynn R. Hansen Underground Comics Collection of Washington State University Library's special collections archive - and they even sold a few.

Since joining Siegel+Gale, McNeal has worked for several clients including Microsoft, Dow AgroSciences, McAfee, Genworth Financial, Yahoo, United Talent Agency, Activision, and PayPal. McNeal previously served as a project manager at FoxSports.com, where he managed the design, development, and implementation of customized promotional campaigns for major advertisers. He also worked as a web developer at ING Advisors Network.

McNeal graduated from Carnegie Mellon University with a BFA in graphic design, and received his MBA from the University of Southern California.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Marketing newsletter delivered to you. Subscribe today!




Featured White Papers

A Buyer's Guide to Affiliate Management Software

A Buyer's Guide to Affiliate Management Software
Manage your performance marketing with the right solution. Choose a platform that will mutually empower advertisers and media partners!

Google My Business Listings Demystified

Google My Business Listings Demystified
To help brands control how they appear online, Google has developed a new offering: Google My Business Locations. This whitepaper helps marketers understand how to use this powerful new tool.


    • Website Optimizer - SEO, CRO, Analytics
      Website Optimizer - SEO, CRO, Analytics (Marcel Digital) - ChicagoMarcel Digital, an award winning interactive marketing agency established in 2003...
    • Director of Marketing
      Director of Marketing (Patron Technology) - New YorkDirector of Marketing We are seeking a Director of Marketing to manage and build our marketing...
    • Senior Interactive Producer
      Senior Interactive Producer (Ready Set Rocket) - New YorkWhat You'll Do As a member of our team, the Senior Producer reports directly to our...