Fabric is an open source Front End UI toolkit for building experiences in Office and Office 365. The problem was that there was a UI patchwork that had been stitched together out of many different sources. This created a disjointed system. The UI needed to be scrubbed and unified.

Step One

The first step was taking an inventory of the existing patterns. I sketched out what was available, and documented where it had come from. Then I designed a template to document all of the newest components. After this, the UI controls needed to be scrubbed and moved to a 4px grid.

Solutions

A three column design that held the latest component, annotations, redlines & examples

Some of these controls were simple, atomic level controls

Some were much more complex

As well as the responsive behavior