User Experience and Interface Design
Microsoft Web Framework

Overview

Moray is Microsoft Web Framework’s(MWF) e-commerce frameworkthat supports the store on Microsoft.com.  As a senior UX designer on the team, my role was to lead and support the larger initiatives of MWF.  Our work was broken down into three segments: The Brand, The Framework, and The Doc Site. 

The Framework

The Moray Framework is a pre-built catalog that aims to supply teams within Microsoft the ability to easily create and prototype authored pages to be placed within Microsoft.com.  We’ve worked to maintain design libraries that include high fidelity prototypes that can be adopted by other teams to design unique pages around. The framework is broken down into 4 areas: Styles, Components, Patterns, and Examples.

Styles

The basics of design that lay the foundation for all UI for the Microsoft Web Framework. This includes color system, typography, grid structure, and viewports.

Components

Components are the building blocks of the Web Framework. Components are single, stand-alone pieces that help build functionality into pages.

Patterns

Built using components, Patterns are repeatable parts of the Web Framework, enabling greater functionality with pre-defined guidelines and use cases.

Examples

Built using both Components and Patterns, examples are pre-built pages that can be used to create larger parts of a page. Specific examples generally contain guidance and recommendations.

Ui Libraries

Our Ui Libraries are organized by our 4 areas of the framework. Our patterns are built using the components and can be updated at a global level. In order to promote the usability of our framework we paired the pre-built components, patterns, and examples with a fully usable Design Library within Figma and Xd. 

Responsive Prototypes

Our libraries were built with responsive capabilities in place so that when a user would assess if a designed mockup was for them, it would respond as if it were already live.  By creating auto-layouts for each of our components, patterns, and examples, users would only have to make one mockup, that they could then scale to see how it would behave in each viewport.  

Variants

Variants were a great way to group and organize the pieces of our library, making things smarter, while making it easier to maintain and use.  From a design standpoint, we would have to build out every possible variation of our components, patterns, and examples during our hardening phase.  

Visual Design

Our team took on the task of rebuilding the documentation site. This required a visual identity to be built out that would keep things consistent throughout our adopters, our users, experiences. I lead the initiative that lead to the creation of colors, icons, placeholder content to generalize our library, presentation decks, video covers, learning material imagery, as well as figma covers, and templated figma frames.

The Doc Site

The MWF doc site housed the design and dev documentation of the Moray Framework. The users of the framework, such as designers, developers, and business analysts, would be directed here to learn how to utilize the framework. The doc site includes a catalog that explains each of our styles, components, patterns, and examples in detail.

Takeaways

The Moray Framework was a fun project to work on and I really enjoyed the team and culture. Coming into the project, there was no road map so understanding the goals for the project were challenging at first. But once a road map was distinguished, it was clear as to how would look to scale and grow as a team.

Next Case Study
Ux Tool
Coming Soon