Serio.us · is crafted in San Francisco, CA.
Completed
April 2015

Simple, Universal, Personal.

Abstract
Platform and systematic design

Evolving Metro into a functional language which scales across the Microsoft ecosystem.

Microsoft Design Language
Abstract

Overview

Microsoft Design Language is a functional and stylistic evolution of Metro which aims to give Windows a consistent look and feel in conjunction to the Windows 10 and the and Universal Apps releases.
In collaboration with the Microsoft design team, we established and formalized a design language which promotes consistency, modularity and scalability.

FIG. 1
The MDL was formalized into twelve discreen chapters, each one of them assigned to a team member.

While the internal team covered design fundamentals, I focused on consolidating and redesigning some of the interactive elements as well as lead a sub-team of designers to create and prototype six conceptual Windows Universal Applications.

Microsoft Design Language
Conceptual designs

Universal Apps

To substantiate the power of Microsoft Design Language, we designed and prototyped a series of fictional applications for six core experiences (collaboration, creation, finance, food finder, news reader and running tracker).

The apps demonstrated combinations of a set of core interaction models defined in the Universal Apps Documentation. Each app was designed to accomodate mobile, tablet, 13" laptop (fullscreen and windowed) and a 720p TV screen.

FIG. 2
A motion prototype for the creation app, which combines tabs with active canvas .
Microsoft Design Language
Interaction patterns

Standardazing patterns

The Microsoft team developed a series of standard UX patters, which can be reused by designers and developers to solve for the most common use cases. Each application demonstrated a singular pattern in action and is showcased in the Windows Dev Center as well as the 2016 Build Conference, held in San Francisco, CA.

FIG. 3
The collaboration app uses a combination of master- detail for primary navigation and pivots for secondary navigation.