microsoft web Framework DESIGN SYSTEM
The purpose of creating a standard Microsoft web framework is to create a cohesive design system that is functional, useful, and valuable to customers. The design system, which can be found on the closed site www.microsoft.com/en-us/mwf, informs how our technology looks and feels across all consumer-facing websites.
Note: In the time after I left Microsoft, this work has now evolved to become the Fluent Design System.
ROLE
Our highly collaborative team consisted of 2 designers, 6 developers (contractors), Program Manager, and Design Manager. We worked closely with the Windows OS and Windows web teams.
I helped design foundational components as well as robust modules to create layouts for our Product websites. Some considerations were interactive states, layout, options, responsive story, accessibility, specialized product usage and cross-Microsoft usage. I also helped determine and write rules of practice.
*Examples shown here are a tiny selection of the extensive components/modules I completed for the Microsoft Web Language Portfolio.
PROBLEM
Users may find our sites inconsistent and difficult to find what they are looking for. Microsoft websites vary greatly in usability, interface, and overall visual design and architecture.
Microsoft.com consists of commerce as well as editorial sites. We needed visual and functional alignment across all sites to embody the One Microsoft concept.
CONCEPT
A consistent and cohesive design system that includes a common web framework and components will help unify Microsoft’s web properties and make the site easier for the user to navigate and find great products.
EXPECTED OUTCOME
Any future changes to common components or styles can be done within the code so all affected elements are universally changed. All Microsoft sites will be unified while retaining its own brand identity.
The framework and assets are available for agency use at www.microsoft.com/en-us/mwf, the Microsoft design language Web Framework website.
design system
Design System for Microsoft web properties
(Please click to see enlarged images.)
Microsoft Web Framework Design tenets
The design system informs how our technology looks and feels across all consumer-facing websites
RESPONSIVE STORY
The responsive story shows how the components resize and/or stack across the viewports. Components shown include the header, hero, content-placements, features, mosaics, product placements, and banner.
UI Components
item placements
Item placements: content-types
Item placements: examples