Current build (internal ring)

Current build (internal ring)

Problem: With a team of over 100 designers, ux patterns can stray from common usage and components are often misused, eroding user confidence. Core responsibilities (visuals of component overview in InVision).  Goal: Identify components that enable …

Problem: With a team of over 100 designers, ux patterns can stray from common usage and components are often misused, eroding user confidence. Core responsibilities (visuals of component overview in InVision).
Goal: Identify components that enable and ultimately anticipate the future of digital communication and collaboration experiences.

Approach: Working with departmental leads, content writers and other stakeholders, we outlined and maintained a living site that designers, program managers and developers could reference for basic definition and guidance when building out a feature…

Approach: Working with departmental leads, content writers and other stakeholders, we outlined and maintained a living site that designers, program managers and developers could reference for basic definition and guidance when building out a feature, or user experience.
The scope was comprehensive. Basic controls (e.g. buttons, labels, etc.) were catalogued. But beyond that, there were a common set of patterns being assembled across Microsoft that were similar enough and within the same ecosystem of services, that the framework team was able to drive cohesion for ux patterns across the entire O365 ecosystem (command box).

We consider larger patterns that will be leveraged by first, second and third parties. Voice commanding, viewing content, and customizing the interface are just a few examples of creating high level patterns that will be consumed by smaller design t…

We consider larger patterns that will be leveraged by first, second and third parties. Voice commanding, viewing content, and customizing the interface are just a few examples of creating high level patterns that will be consumed by smaller design teams.

Example of component (Dialog)

Example of component (Dialog)

Final

Final

port_now_06.png
redlines example

redlines example

example of defining a component

example of defining a component

Example of mapping controls to screen readers and considering keyboard navigation.

Example of mapping controls to screen readers and considering keyboard navigation.

port_now_13.png
port_now_11.png
Prototype states

Prototype states