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:
“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:
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.”
