Microsoft Design Language

Top row: Alan Urdan, Samuel Moreau, Joseph McLaughlin, Ralf Groene, Ramiro Torres
Front row: Albert Shum, Denise Trabona, Chad Roberts, Steve Kaneko, Jeff Fong

2014 Outstanding Technical Achievement

By awarding the 2014 Outstanding Technical Achievement Award to the Microsoft Design Language, the Technical Community Network honors an initiative that has quite literally changed the face of Microsoft. Now evident in the user interfaces of Windows, Windows Phone, Xbox, Surface, and Office, the design language provides users with a cohesive and intuitive appearance where form follows function.

“The Microsoft Design Language is an effort across different organizations and product groups to create a consistent look and feel for our Microsoft interfaces,” says Partner Design Director Steve Kaneko. “It signals a change in the company toward a more immersive user experience that is seamless across the different product groups. It’s our way of ensuring that those who use our products know that our products work better together.”

Sound familiar? It echoes the central message of the One Microsoft organizational structure unveiled by former CEO Steve Ballmer in the summer of 2013. “The Microsoft Design Language is a visual manifestation of the promise that we are heading toward with One Microsoft,” says Kaneko.

Of course, this visual understanding actually precedes One Microsoft by many years. To understand the advent of the design language, consider the design landscape several years ago. Microsoft has always been an engineering-centric company, which is its strength. But over the years, the user interfaces of the products tended to evolve independently, resulting in an overall lack of cohesion.

In 2008, the User Experience Leadership Team (UXLT) conducted several informal audits. “The divergence was obvious and troubling,” says Kaneko, who also chairs the UXLT. “There were so many different ways we were designing experiences across all these product areas.”

The UXLT decided to do something about it. Kaneko describes the initial solution as a “soft contract” among designers—basically an agreement to collaborate across products, sharing such things as choice of color palette, lighting, animations, iconography, and screen transitions. Things took off from there.

“The contract became harder and harder as we started to gain momentum and it made us think more assertively about leading through actions verses words,’” says Kaneko.

Fortunately, the Windows Phone team was already showing the way. In the 2007 update from Windows Phone 6.5 to Windows Phone 7, team leader Albert Shum and colleagues Jeff Fong and Chad Roberts transitioned the product’s user interface away from an existing desktop metaphor to a new tile-based touch interface. It was a bold step based on a presentation model that had actually originated with their earlier work on Zune and Media Center.

According to Kaneko, the look is rooted in the modern design movement that originated in the early 1920s, notably within the Swiss graphic design school. This movement was about bringing more logic and structure to the highly rendered illustrations of the time—essentially stripping out extraneous detail and focusing on cleaner lines and a clear information hierarchy.

“In a layperson’s terms, everything appears more functional and efficient than decorative,” says Kaneko, pointing to early examples also found in modernist architecture, such as the Seagram’s Building in New York and Villa Savoye in France. Industrial design followed architecture with the Bauhaus School of functional design. Kaneko believes Microsoft is leading the way with what could be the modern movement in software.

For a software example, think of a conventional icon crafted to look like, say, a highly stylized clock. Technically this is what’s called a skeuomorph, a derivative object that retains the ornamental look of the original. Pretty in its own right, perhaps, but also a gratuitous distraction—the user’s goal is learning the time of day and when his next appointment takes place, and not enjoying a pretty picture of a clock.

Compare that to the user interface in a Windows Phone, where colored two-dimensional live tiles deliver high-level content and also serve as touch targets that facilitate easy access to more content. No shading or drop shadows or other confusing visual elements—just a clean interface in which form follows function.

“We use the term ‘content over chrome,’ ” says Kaneko. “We’re prioritizing our design intent to be about presenting the information inside the tile that’s important to you. It’s cloud-connected, so every one of those tiles changes based on the information it’s getting that matters to you. So you know where your next meeting is. You know you have X amount of mail coming in. And all these things are live.”

According to Kaneko, the look is about being “digitally authentic,” which is one of the five Microsoft Design tenets (the others are pride in craftsmanship, fast and fluid, do more with less, and win as one). “Any great interface should communicate its functional purpose efficiently,” he says. “There’s really not a lot of gratuitous noise, or elements that distract you from what you are trying to get done.”

Of course, live tiles are just one of many elements in the Microsoft Design Language. Even the choice of the Segoe font style is a tip of the hat to modernism: its sans serif, modern, clean font that eliminates many of its predecessors’ extraneous curly elements—elements that were originally meant to accommodate being chiseled into stone.

This modern design concept was the basis of what Shum and his team had originally brought from the entertainment division to Windows Phone. From there, it began to propagate. The big transition was to the Windows client, the epicenter of all things Microsoft in the eyes of many customers.

This move was spearheaded by Sam Moreau and implemented by Denise Trabona and Alan Urdan.

“Sam Moreau is the director who officially brought the design language to Windows and started to envision what would be right for Windows 8,” says Kaneko. “He and Albert Shum went through a process of cross-pollination—getting their designers in both groups to sit with one another and start to compare notes.”

Eventually, teams across Microsoft were applying the design language in a broad range of experiences, products, and services. Ramiro Torres brought it to Xbox. Joseph McLaughlin transitioned it to Office services, and Ralf Groene took on the challenge of translating it into the hardware arena, executing it in Surface.

This breadth of participation actually represents something of a departure from past Outstanding Technical Achievement Awards. Previously, the honor has gone to a narrowly defined group or team. But in honoring the advent and implementation of the Microsoft Design Language, it’s really necessary to think of it as something shared by a legion of designers, company-wide.

“There are so many people who were and continue to be a part of it that aren’t limited to the design profession, so it really doesn’t feel like there are one or two or ten people who should be called out,” says Kaneko. “It’s really a win for the company and for a broad set of folks across Microsoft.”

Over time, the Microsoft Design Language has evolved from a language to more of a philosophy, due to its underlying approach, which brings us back to One Microsoft. The cross-platform, cohesive design qualities that the Microsoft Design Language sought to instill as early as 2008 now serve as a key element of this company-wide initiative.

“In our own way, it was being practiced way before it became a corporate mandate,” says Kaneko. “We needed to change our approach and make our products work together amazingly. And it was done for the same reasons: because our customers deserve it.”

He reflects on this for a moment and then adds, “We’re aiming at a bigger idea, and it’s really never been just about the look and feel. This is not about Microsoft making any big statement that say’s ‘look at me!’ It’s about developing an authentic and sustainable philosophy that scales across all our customer touch points, where we continue to put people at the center of everything we do. Where we take a back seat to them. We need to hold onto this core principle—keep things simple, beautiful, and relevant to those we serve.”