Home  › Marketing › Strategies
microsoft-canada-devices-and-services

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.

microsoft-canada-devices-and-services

"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 Toronto Twitter Canada MD Kirstine Stewart to Keynote Toronto
ClickZ Live Toronto (May 14-16) is a new event addressing the rapidly changing landscape that digital marketers face. The agenda focuses on customer engagement and attaining maximum ROI through online marketing efforts across paid, owned & earned media. Register now and save!

ABOUT THE AUTHOR

McNeal Maddox

McNeal Maddox is a senior strategist, brand development, Digital, 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!

COMMENTS

UPCOMING EVENTS

Featured White Papers

ion Interactive Marketing Apps for Landing Pages White Paper

Marketing Apps for Landing Pages White Paper
Marketing apps can elevate a formulaic landing page into a highly interactive user experience. Learn how to turn your static content into exciting marketing apps.

eMarketer: Redefining Mobile-Only Users: Millions Selectively Avoid the Desktop

Redefining 'Mobile-Only' Users: Millions Selectively Avoid the Desktop
A new breed of selective mobile-only consumers has emerged. What are the demos of these users and how and where can marketers reach them?

Jobs

    • Contact Center Professional
      Contact Center Professional (TCC: The Contact Center) - Hunt ValleyLooking to join a workforce that prides themselves on being routine and keeping...
    • Recruitment and Team Building Ambassador
      Recruitment and Team Building Ambassador (Agora Inc.) - BaltimoreAgora, www.agora-inc.com, continues to expand! In order to meet the needs of our...
    • Design and Publishing Specialist
      Design and Publishing Specialist (Bonner and Partners) - BaltimoreIf you’re a hungry self-starter, creative, organized and have an extreme...